Hreflang εύκολη τροποποίηση

manolis940 · 31 Αυγούστου 2023

Ας πούμε ότι έχουμε ένα site σε διάφορες γλώσσες δεν είναι πάνω σε κάποιο MVC framework και έχουμε ορίσει όπως φαίνεται παρακάτω τα Hreflang tags

<head>
 <title>Widgets, Inc</title>
  <link rel="alternate" hreflang="en-gb"
       href="https://en-gb.example.com/page.html" />
  <link rel="alternate" hreflang="en-us"
       href="https://en-us.example.com/page.html" />
  <link rel="alternate" hreflang="en"
       href="https://en.example.com/page.html" />
  <link rel="alternate" hreflang="de"
       href="https://de.example.com/page.html" />
 <link rel="alternate" hreflang="x-default"
       href="https://www.example.com/" />
</head>

Φυσικά έχει και μερικά subpages και αντίστοιχα έχουν οριστεί για κάθε subpage τα παραπάνω.

Ας πούμε ότι προσθέτουμε μία νέα γλώσσα στο site, τώρα πρέπει να τροποποιηθούν ένα ένα τα header σε κάθε subpage και σε κάθε γλώσσα. Υπάρχει κάποια πρακτική που μπορεί να ακολουθήσει κάποιος για να να μην χρειαστεί να κάνει όλο αυτό τον κόπο;

Xvipes · 31 Αυγούστου 2023

Δεν μας λες με ποια γλώσσα παράγεις την HTML.

Αν είναι σε PHP τότε ένα απλό include σε κάθε σελίδα θα κάνει την δουλειά.

<?php
include('header.php');
?>

manolis940 · 3 Σεπτεμβρίου 2023

Στις 31/8/2023 στις 10:57 ΠΜ, Xvipes είπε
Δεν μας λες με ποια γλώσσα παράγεις την HTML.

Αν είναι σε PHP τότε ένα απλό include σε κάθε σελίδα θα κάνει την δουλειά.
<?php
include('header.php');
?>

Στο συγκεκριμένο project είναι καθαρά html οπότε και δεν την παράγω με κάποιο τρόπο.

Xvipes · 3 Σεπτεμβρίου 2023

Δεν το έχω δοκιμάσει ποτέ αλλά θα μπορούσες να κάνεις include με js.

https://www.w3schools.com/howto/howto_html_include.asp

manolis940 · 3 Σεπτεμβρίου 2023

5 λεπτά πριν, Xvipes είπε

Δεν το έχω δοκιμάσει ποτέ αλλά θα μπορούσες να κάνεις include με js.

https://www.w3schools.com/howto/howto_html_include.asp

Δεν βρίσκω πως μπορεί με μια ματιά να βοηθήσει αλλά θα το μελετήσω αργότερα πιο ήσυχα και θα σου πω τα αποτελέσματα.

Ευχαριστώ

Xvipes · 3 Σεπτεμβρίου 2023

Κάτι τέτοιο φαντάζομαι θα δουλέψει.

<!DOCTYPE html>
<html>
  <head>
    <title>Include html</title>
    <meta charset="UTF-8" />
    <div w3-include-html="header.html"></div>
    <script>
      function includeHTML() {
        var z, i, elmnt, file, xhttp;
        /* Loop through a collection of all HTML elements: */
        z = document.getElementsByTagName("*");
        for (i = 0; i < z.length; i++) {
          elmnt = z[i];
          /*search for elements with a certain atrribute:*/
          file = elmnt.getAttribute("w3-include-html");
          if (file) {
            /* Make an HTTP request using the attribute value as the file name: */
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
              if (this.readyState == 4) {
                if (this.status == 200) {
                  elmnt.innerHTML = this.responseText;
                }
                if (this.status == 404) {
                  elmnt.innerHTML = "Page not found.";
                }
                /* Remove the attribute, and call this function once more: */
                elmnt.removeAttribute("w3-include-html");
                includeHTML();
              }
            };
            xhttp.open("GET", file, true);
            xhttp.send();
            /* Exit the function: */
            return;
          }
        }
      }
    </script>
  </head>

  <body>
    <h1>header.html is now included</h1>
  </body>
  <script>
    includeHTML();
  </script>
</html>

Σε κάθε σελίδα θα πρέπει να έχεις τον js κώδικα και το <div w3-include-html="header.html"></div> έτσι κάθε φορά που κάνεις αλλαγές στο header.html θα αλλάζει σε κάθε σελίδα.

header.html

<link rel="alternate" hreflang="en-gb"
       href="https://en-gb.example.com/page.html" />
  <link rel="alternate" hreflang="en-us"
       href="https://en-us.example.com/page.html" />
  <link rel="alternate" hreflang="en"
       href="https://en.example.com/page.html" />
  <link rel="alternate" hreflang="de"
       href="https://de.example.com/page.html" />
 <link rel="alternate" hreflang="x-default"
       href="https://www.example.com/" />

Σίγουρα δεν είναι η βέλτιστη λύση μιας και πλέον χρειάζεσαι δυναμικότητα στην html σου οπότε μελλοντικά θα κοιτούσα για κάποιο framework (π.χ react)

Σύνδεση

Hreflang εύκολη τροποποίηση

Προτεινόμενες αναρτήσεις

manolis940

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Xvipes

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

manolis940

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Xvipes

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

manolis940

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Xvipes

Συνδέστε για να σχολιάσετε

Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση