Wie ändere ich den Titel einer Webseite dynamisch?

Question

Ich habe eine Webseite, die eine Reihe von Registerkarten implementiert, die jeweils unterschiedliche Inhalte anzeigen. Die Klicks auf die Registerkarten aktualisieren die Seite nicht, sondern verbergen/zeigen Inhalte auf der Client-Seite.

Jetzt gibt es die Anforderung, den Seitentitel entsprechend der ausgewählten Registerkarte auf der Seite zu ändern (aus SEO-Gründen). Ist das möglich? Kann jemand eine Lösung vorschlagen, um den Seitentitel dynamisch über JavaScript zu ändern, ohne die Seite neu zu laden?

Answer 1

Es gibt viele Möglichkeiten, wie Sie den Titel ändern können, die beiden wichtigsten sind folgendermaßen:

Die fragwürdige Methode

Setzen Sie ein Title-Tag in HTML (z.B. Hello), dann in Javascript:

let title_el = document.querySelector("title");

if(title_el)
    title_el.innerHTML = "Welt";

Die offensichtlich richtige Methode

Das einfachste von allen ist tatsächlich die Methode zu verwenden, die vom Document Object Model (DOM) bereitgestellt wird.

document.title = "Hallo Welt";

---

Die erste Methode ist im Allgemeinen das, was Sie tun würden, um Tags im Body des Dokuments zu ändern. Diese Methode zu verwenden, um Meta-Daten-Tags wie diejenigen im Kopf (wie z.B. title) zu verändern, ist bestenfalls fragwürdig, ist nicht idiomatisch, nicht sehr guter Stil von Anfang an und könnte sogar nicht portabel sein. Sicher ist jedoch, dass es andere Entwickler ärgern wird, wenn sie title.innerHTML = ... in dem von ihnen gewarteten Code sehen.

Wofür Sie sich entscheiden möchten, ist die letztere Methode. Diese Eigenschaft wird im DOM-Spezifikation explizit für den Zweck des Titelwechsels bereitgestellt.

Beachten Sie auch, dass, wenn Sie mit XUL arbeiten, möglicherweise überprüfen möchten, ob das Dokument geladen wurde, bevor Sie versuchen, den Titel zu setzen oder abzurufen, da Sie andernfalls ein undefiniertes Verhalten aufrufen (hier gibt es Drachen), was an sich schon ein beängstigendes Konzept ist. Dies kann oder kann nicht über JavaScript erfolgen, da sich die Dokumentation des DOM nicht unbedingt auf JavaScript bezieht. Aber XUL ist ein ganz anderes Biest, also verliere ich mich.

Von .innerHTML sprechend

Ein guter Tipp, den Sie im Hinterkopf behalten sollten, ist, dass die Verwendung von .innerHTML im Allgemeinen schlampig ist. Verwenden Sie stattdessen appendChild.

Obwohl es zwei Fälle gibt, in denen ich .innerHTML immer noch nützlich finde, um reinen Text in ein kleines Element einzufügen...

label.innerHTML = "Hallo Welt";
// im Gegensatz zu... 
label.appendChild(document.createTextNode("Hallo Welt"));
// Beispiel:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

... und wenn Sie einen Container leeren...

container.innerHTML = "";
// im Gegensatz zu... ähm... okay, ich denke, ich mache mein eigenes Ding
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

Answer 2

Moderner Webcrawler sind in der Lage, dynamisch generierten Inhalt im DOM zu analysieren, daher ist es völlig in Ordnung, document.title = ... zu verwenden.

Answer 3

Die Verwendung von document.title ist, wie Sie es in JavaScript erreichen würden, aber wie soll das bei der SEO helfen? Bots führen im Allgemeinen keinen JavaScript-Code aus, während sie durch die Seiten navigieren.

Answer 4

Sie müssen die Seite mit einem neuen Titel erneut bereitstellen, damit Änderungen von Crawlern bemerkt werden können. Im Gegensatz dazu wird das durch JavaScript durchgeführte nur einem menschlichen Leser zugute kommen, Crawler werden diesen Code nicht ausführen.

Answer 5

Für diejenigen, die nach der npm-Version davon suchen, gibt es eine komplette Bibliothek dafür:

npm install --save react-document-meta

import React from 'react';
import DocumentMeta from 'react-document-meta';

class Example extends React.Component {
  render() {
    const meta = {
    title: 'Einige Meta-Titel',
    description: 'Ich bin eine Beschreibung und ich kann mehrere Tags erstellen',
    canonical: 'http://beispiel.com/pfad/zur/seite',
    meta: {
      charset: 'utf-8',
      name: {
        keywords: 'react,meta,dokument,html,tags'
      }
    }
  };

  return (

      Hallo Welt!

  );
}
}

React.render(, document.getElementById('root'));