Wie kann man den Titel einer Webseite dynamisch ändern?

Question 1

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

Jetzt besteht die Anforderung, den Seitentitel entsprechend der auf der Seite ausgewählten Registerkarte 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?

Question 2

Aktualisieren: gemäß den Kommentaren und Verweis auf SearchEngineLand
Die meisten Web-Crawler indizieren den aktualisierten Titel. Die folgende Antwort ist veraltet, aber der Code ist immer noch anwendbar.

Sie können einfach so etwas tun, document.title = "This is the new page title.";, aber das würde den Zweck von SEO völlig zunichte machen. Die meisten Crawler werden Javascript von vornherein nicht unterstützen, also nehmen sie den Inhalt des Elements als Seitentitel.

Wenn Sie möchten, dass dies mit den meisten wichtigen Crawlern kompatibel ist, müssen Sie tatsächlich das Titel-Tag selbst ändern, was ein Neuladen der Seite (PHP oder ähnliches) beinhalten würde. Daran kommen Sie nicht vorbei, wenn Sie den Seitentitel so ändern wollen, dass ein Crawler ihn sehen kann.

Question 3

Ich möchte Hallo aus der Zukunft sagen 🙂 Dinge, die kürzlich passiert sind:

Google führt jetzt Javascript aus, das sich auf Ihrer Website befindet¹
Die Leute verwenden jetzt Dinge wie React.js, Ember und Angular, um komplexe Javascript-Aufgaben auf der Seite auszuführen, und sie wird immer noch von Google indiziert¹

Sie können die HTML5-Verlaufs-API (PushState, React-Router, Ember, Angle) verwenden, mit der Sie beispielsweise separate URLs für jede Registerkarte haben, die Sie öffnen möchten, und Google wird diese indizieren¹

Um Ihre Frage zu beantworten, können Sie den Titel und andere Meta-Tags sicher aus Javascript ändern (Sie können auch etwas hinzufügen wie https://prerender.io Wenn Sie Nicht-Google-Suchmaschinen unterstützen möchten), machen Sie sie einfach als separate URLs zugänglich (woher würde Google sonst wissen, dass dies unterschiedliche Seiten sind, die in den Suchergebnissen angezeigt werden sollen?). Das Ändern von SEO-bezogenen Tags (nachdem der Benutzer die Seite durch Klicken auf etwas gewechselt hat) ist einfach:

if (document.title != newTitle) {
    document.title = newTitle;
}
$('meta[name="description"]').attr("content", newDescription);

Stellen Sie einfach sicher, dass CSS und Javascript nicht in robots.txt blockiert sind, die Sie verwenden können Abrufen wie durch Google Dienst in den Google Webmaster-Tools.

1: http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

Question 4

Verwenden document.title.

Sehen diese Seite auch für ein rudimentäres Tutorial.

Question 5

Ich kann nicht sehen, wie das Ändern des Seitentitels über Javascript SEO helfen wird. Die meisten (oder alle) Suchbots führen kein Javascript aus und lesen nur den anfänglich geladenen Titel, der das Markup ist.

Wenn Sie SEO unterstützen möchten, müssen Sie den Seitentitel im Backend ändern und verschiedene Versionen der Seite bereitstellen.

Question 6

Der Code ist
document.title="test"

Question 7

Es gibt viele Möglichkeiten, den Titel zu ändern, die beiden wichtigsten sind wie folgt:

Die fragwürdige Methode

Fügen Sie ein Titel-Tag in den HTML-Code ein (z <title>Hello</title>), dann in Javascript:

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

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

Die offensichtlich richtige Methode

Am einfachsten ist es, die vom Document Object Model (DOM) bereitgestellte Methode tatsächlich zu verwenden.

document.title = "Hello World";

Die erstere Methode ist im Allgemeinen das, was Sie tun würden, um Tags zu ändern, die in gefunden werden Karosserie des Dokuments. Verwenden Sie diese Methode, um Metadaten-Tags zu ändern, wie sie im Kopf gefunden werden (wie z title) ist bestenfalls eine fragwürdige Praxis, ist nicht idiomatisch, von Anfang an kein sehr guter Stil und möglicherweise nicht einmal portabel. Sie können sich jedoch sicher sein, dass es andere Entwickler ärgern wird, wenn sie es sehen title.innerHTML = ... im Code, den sie pflegen.

Was du will zu gehen ist die letztere Methode. Diese Eigenschaft ist in der DOM-Spezifikation bereitgestellt speziell zu dem Zweck, wie der Name schon sagt, den Titel zu ändern.

Beachten Sie auch, dass Sie, wenn Sie mit XUL arbeiten, vielleicht überprüfen möchten, ob das Dokument geladen wurde, bevor Sie versuchen, den Titel festzulegen oder zu erhalten, da Sie sonst aufrufen undefined behavior (hier seien Drachen), was an sich schon ein beängstigendes Konzept ist. Dies kann über JavaScript geschehen oder auch nicht, da sich die Dokumente im DOM nicht unbedingt auf JavaScript beziehen. Aber XUL ist ein ganz anderes Tier, also schweife ich ab.

Apropos `.innerHTML`

Ein guter Rat, den Sie beachten sollten, wäre die Verwendung .innerHTML ist generell schlampig. Verwenden appendChild stattdessen.

Obwohl zwei Fälle, wo ich noch finde .innerHTML nützlich sein, um einfachen Text in ein kleines Element einzufügen …

label.innerHTML = "Hello World";
// as opposed to... 
label.appendChild(document.createTextNode("Hello World"));
// example:
el.appendChild(function(){
    let el = document.createElement("span");
    el.className = "label";
    el.innerHTML = label_text;
    return el;
}());

… und einen Container ausräumen …

container.innerHTML = "";
// as opposed to... umm... okay, I guess I'm rolling my own
[...container.childNodes].forEach(function(child){
    container.removeChild(child);
});

Question 8

Die Verwendung von document.title ist, wie Sie es in JavaScript erreichen würden, aber wie soll dies bei SEO helfen? Bots führen im Allgemeinen keinen Javascript-Code aus, wenn sie Seiten durchlaufen.

Die fragwürdige Methode

Die offensichtlich richtige Methode

Apropos .innerHTML

Apropos `.innerHTML`