Wie kann man den Titel einer Webseite dynamisch ändern?

Ich möchte Hallo aus der Zukunft sagen :) Dinge, die in letzter Zeit passiert sind:

1. Google führt jetzt Javascript aus, das sich auf Ihrer Website befindet¹
2. Die Leute verwenden jetzt Dinge wie React.js, Ember und Angular, um komplexe Javascript-Aufgaben auf der Seite auszuführen, und es wird immer noch von Google indiziert¹
3. sie können die HTML-History-API (PushState, Reakt-Router, Glut, eckig) verwenden, mit der Sie für jeden Tab, den Sie öffnen möchten, separate URLs verwenden können, und Google indiziert dies¹

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

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

Stellen Sie nur sicher, dass css und javascript nicht in robots.txt blockiert sind. Sie können Fetch als Google -Dienst in den Google Webmaster-Tools verwenden.

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

Ich kann nicht erkennen, wie das Ändern des Seitentitels über Javascript SEO hilft. Die meisten Suchbots (oder alle Such-Bots) führen kein Javascript aus und lesen nur den ursprünglich geladenen Titel (Markup).

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

Verwenden Sie document.title.

Siehe diese Seite für ein einfaches Tutorial.

Der Code lautet
document.title = 'test'

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

Die fragwürdige Methode

Fügen Sie ein Titel-Tag in das HTML ein (z. B. <title>Hello</title>) und 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 entspricht im Allgemeinen dem Ändern von Tags im Hauptteil des Dokuments. Die Verwendung dieser Methode zum Ändern von Metadaten-Tags wie die im Kopf gefundenen (wie titlename__) ist im besten Fall fragwürdig, nicht idiomatisch, von Anfang an nicht sehr gut und möglicherweise nicht einmal portabel. Sie können sich jedoch sicher sein, dass es andere Entwickler ärgert, wenn sie title.innerHTML = ... im von ihnen verwalteten Code sehen.

Was Sie wollen , ist die letztere Methode. Diese Eigenschaft ist in der DOM-Spezifikation angegeben , um, wie der Name schon sagt, den Titel zu ändern.

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

Apropos .innerHTML

Einige gute Ratschläge, die Sie berücksichtigen sollten, sind, dass die Verwendung von .innerHTML im Allgemeinen schlampig ist. Verwenden Sie stattdessen appendChildNAME _ .

Obwohl zwei Fälle, in denen ich .innerHTML immer noch für nützlich halte, das Einfügen von einfachem Text in ein kleines Element umfassen ...

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 räumen ...

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

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

Moderne Crawler können dynamisch generierten Inhalt im DOM analysieren, sodass die Verwendung von document.title = ... vollkommen in Ordnung ist. 

Sie müssen die Seite mit einem neuen Titel erneut bereitstellen, damit alle Crawler die Änderung bemerken. Wenn Sie dies über Javascript tun, wird dies nur einem menschlichen Leser zugute kommen. Crawler werden diesen Code nicht ausführen.

für diejenigen, die sich die npm-Version ansehen, gibt es dafür eine komplette Bibliothek:

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: 'Some Meta Title',
      description: 'I am a description, and I can create multiple tags',
      canonical: 'http://example.com/path/to/page',
      meta: {
        charset: 'utf-8',
        name: {
          keywords: 'react,meta,document,html,tags'
        }
      }
    };

    return (
      <div>
        <DocumentMeta {...meta} />
        <h1>Hello World!</h1>
      </div>
    );
  }
}

React.render(<Example />, document.getElementById('root'));

Vielleicht können Sie alle Tabulatortitel in einem String auf Ihren Titel laden und dann, wenn Sie eine der Tabulatoren laden, den Titel über Javascript ändern

beispiel: Setzen Sie zunächst Ihren Titel auf

my app | description | contact | about us | 

sobald Sie eine der Registerkarten geladen haben:

document.title = "my app | tab title";

Eine Möglichkeit, die Ihnen in den Sinn kommt, die bei SEO hilfreich sein kann und Ihre Registerseiten so wie sie sind, wäre, benannte Anker zu verwenden, die jeder Registerkarte entsprechen. 

http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.

Sie müssten serverseitig verarbeitet werden, um die URL zu analysieren und den ersten Seitentitel festzulegen, wenn der Browser die Seite darstellt. Ich würde auch weitermachen und dieses Register zum "aktiven" machen. Sobald die Seite geladen ist und ein tatsächlicher Benutzer zwischen Registerkarten wechselt, verwenden Sie Javascript, um den document.title zu ändern, wie andere Benutzer angegeben haben.

Verwenden Sie document.title. Es wird für die meisten Dinge nützlich sein, aber es wird SEO auf Ihrer Website zerstören.

Beispiel:

document.write("title - " + document.title + "<br>");
document.title = "New title here!";
// Notice: this will defeat purpose of SEO. Not useful for SEO-friendly sites.
document.write("title - " + document.title + "<br>");

body {
  font-family: Consolas, 'Courier New', monospace;
}

<!DOCTYPE html>
<html>
  <head><title>Old title</title></head>
  <body><p>
    Lorem ipsum dolor sit amet, at movet detraxit mediocritatem eam, nam iusto abhorreant ne. Ei pro          debet adolescens voluptaria, eu minim scaevola conceptam vel. Vim ea torquatos constituto                complectitur, usu eu civibus insolens eleifend. Ex ubique quaerendum his.

  </p></body>
</html>

Da Suchmaschinen die meisten Javascript ignorieren, müssen Sie es so einrichten, dass Suchmaschinen mithilfe der Registerkarten ohne Ajax crawlen können. Machen Sie aus jedem Tab einen Link mit einer Href, die die gesamte Seite mit dem ausgewählten Tab lädt. Dann kann die Seite diesen Titel im Tag haben.

Der onclick-Ereignishandler kann die Seiten weiterhin über ajax für menschliche Betrachter laden.

Um die Seiten anzuzeigen, die von den meisten Suchmaschinen angezeigt werden, deaktivieren Sie Javascript in Ihrem Browser und versuchen Sie es so zu gestalten, dass durch Klicken auf die Registerkarten die Seite mit der ausgewählten Registerkarte und dem richtigen Titel geladen wird.

Wenn Sie über ajax laden und den Seitentitel nur mit Javascript dynamisch ändern möchten, tun Sie Folgendes:

document.title = 'Put the new title here';

Suchmaschinen sehen diese Änderung jedoch nicht in Javascript.

Sie können JavaScript verwenden. Einige Bots, einschließlich Google, führen das JavaScript zum Vorteil von SEO aus (wobei der korrekte Titel im SERP angezeigt wird).

document.title = "Google will run this JS and show the title in the search results!";

Dies ist jedoch komplexer, da Sie Registerkarten anzeigen und ausblenden, ohne die Seite zu aktualisieren oder die URL zu ändern. Vielleicht hilft das Hinzufügen eines Ankers, wie von anderen angegeben. Ich muss möglicherweise meine Antwort zurückziehen.

Artikel mit positiven Ergebnissen: http://www.aukseo.co.uk/use-javascript-to-generate-seo-friendly-title-tags-1275/http://www.ifinity.com.au/2012/10/04/Changing_a_Page_Title_with_Javascript_to_update_a_Google_SERP_Entry

Gehen Sie nicht immer davon aus, dass ein Bot kein JavaScript ausführt . http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google und andere Suchmaschinen kennen es dass die besten zu indizierenden Ergebnisse die Ergebnisse sind, die der tatsächliche Endbenutzer in seinem Browser sieht, einschließlich JavaScript.

Aber um das SEO zu bekommen, passt 

Sie müssen die Seite neu laden, wenn sich die Seite ändert, damit die Suchmaschine die verschiedenen Titel usw. sieht.

Stellen Sie also sicher, dass das Neuladen der Seite zuerst funktioniert und fügen Sie dann document.title-Änderungen hinzu

Ich möchte hier nur etwas hinzufügen: Das Ändern des Titels über JavaScript ist eigentlich nützlich, wenn Sie eine Datenbank über AJAX aktualisieren. Der Titel wird also geändert, ohne dass Sie die Seite aktualisieren müssen. Der Titel ändert sich tatsächlich über die serverseitige Skriptsprache. Die Änderung über JavaScript ist jedoch nur eine Benutzerfreundlichkeit und eine Benutzeroberfläche, die das Benutzererlebnis angenehmer und flüssiger macht.

Wenn Sie nun den Titel einfach per JavaScript ändern, sollten Sie das nicht tun. 

Google erwähnte, dass alle js-Dateien gerendert wurden, aber in Wirklichkeit, ich habe meinen Titel und andere Metatags, die von Reactjs auf diese Website bereitgestellt wurden, verloren und meine Position bei Google tatsächlich verloren! Ich habe viel gesucht, aber es scheint, dass alle Seiten vorgerendert sein müssen oder SSR (Server Side Rendering) verwenden müssen, um ein SEO-freundliches Protokoll zu erhalten!
Es erweitert sich auf Reactjs, Angularjs usw.
Kurz gesagt: Jede Seite, die über view page source im Browser verfügt, wird von allen Robots indiziert, sofern Google nicht wahrscheinlich indizieren kann, andere jedoch die Indizierung überspringen!