Wie kann man den Titel einer Webseite dynamisch ändern?

Ich habe eine Webseite, die eine Reihe von Registerkarten implementiert, die jeweils unterschiedliche Inhalte anzeigen. Durch Klicken auf die Registerkarte wird die Seite nicht aktualisiert, sondern der Inhalt auf der Clientseite ein- oder ausgeblendet.

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

Update : Gemäß den Kommentaren und Verweisen auf SearchEngineLand indizieren die meisten Webcrawler den aktualisierten Titel. Die folgende Antwort ist veraltet, aber der Code ist weiterhin gültig.

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 überhaupt nicht unterstützen, daher nehmen sie alles, was sich im Element befindet, als Seitentitel.

Wenn Sie möchten, dass dies mit den meisten wichtigen Crawlern kompatibel ist, müssen Sie das Titel-Tag selbst ändern, was ein erneutes Laden der Seite (PHP oder ähnliches) erfordern würde. Sie werden das nicht umgehen können, wenn Sie den Seitentitel so ändern möchten, dass ein Crawler ihn sehen kann.

Ich möchte Hallo aus der Zukunft sagen :) Dinge, die kürzlich 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 sie wird immer noch von Google ¹ indiziert
3. Sie können die HTML5-Verlaufs-API (PushState, React-Router, Ember, Angular) verwenden, mit der Sie beispielsweise separate URLs für jede Registerkarte erstellen können, die Sie öffnen möchten, und Google indiziert diese ¹

Um Ihre Frage zu beantworten, können Sie Titel und andere Meta-Tags sicher aus Javascript ändern (Sie können auch https://prerender.io hinzufügen, wenn Sie Suchmaschinen unterstützen möchten, die nicht von Google stammen). Machen Sie sie einfach als separate URLs zugänglich ( Wie würde Google sonst wissen, dass dies verschiedene Seiten sind, die in den Suchergebnissen angezeigt werden sollen?). Das Ändern von SEO-bezogenen 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 einfach sicher, dass CSS und Javascript in robots.txt nicht 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 sehen, wie das Ändern des Seitentitels über Javascript SEO hilft. Die meisten (oder alle) Such-Bots führen kein Javascript aus und lesen nur den ursprünglich geladenen Titel, der das Markup darstellt.

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

Verwenden Sie document.title.

Auf dieser Seite finden Sie auch ein rudimentäres Tutorial.

Der Code ist
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 den HTML-Code 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 ist im Allgemeinen das, was Sie tun würden, um Tags im Hauptteil des Dokuments zu ändern . Die Verwendung dieser Methode zum Ändern von Metadaten-Tags, wie sie im Kopf (wie title) zu finden sind, ist bestenfalls fragwürdig, nicht idiomatisch, zunächst nicht sehr gut und möglicherweise nicht einmal portabel. Eine Sache, auf die Sie sich jedoch verlassen können, ist, dass es andere Entwickler nervt, wenn sie title.innerHTML = ...in Code sehen, den sie pflegen.

Was Sie wollen , ist die letztere Methode. Diese Eigenschaft wird in der DOM-Spezifikation speziell zum Zweck der Änderung des Titels bereitgestellt , wie der Name schon sagt.

Beachten Sie auch, dass Sie, wenn Sie mit XUL arbeiten, möglicherweise überprüfen möchten, ob das Dokument geladen wurde, bevor Sie versuchen, den Titel festzulegen oder abzurufen, da Sie sonst undefined behavior(hier Drachen) aufrufen , was für sich genommen ein beängstigendes Konzept ist. Dies kann über JavaScript geschehen oder 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 beachten sollten, wären, dass die Verwendung .innerHTMLim Allgemeinen schlampig ist. Verwenden Sie appendChildstattdessen.

Obwohl zwei Fälle, in denen ich es immer .innerHTMLnoch nützlich finde , 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 der Datei document.title würden Sie dies in JavaScript erreichen, aber wie soll dies bei der Suchmaschinenoptimierung hilfreich sein? Bots führen im Allgemeinen keinen Javascript-Code aus, wenn sie Seiten durchlaufen.

Moderne Crawler können dynamisch generierte Inhalte im DOM analysieren , daher ist die Verwendung document.title = ...vollkommen in Ordnung.

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

Für diejenigen, die die npm-Version davon suchen, gibt es dafür eine ganze 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'));

Möglicherweise können Sie alle Tabulatortitel in einer Zeichenfolge auf Ihren Titel laden. Wenn Sie dann eine der Registerkarten laden, ändern Sie den Titel über Javascript

Beispiel: Setzen Sie zuerst Ihren Titel auf

my app | description | contact | about us | 

Sobald Sie eine der Registerkarten geladen haben, führen Sie Folgendes aus:

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

Eine Möglichkeit, die Ihnen bei der Suchmaschinenoptimierung hilft und Ihre Registerkarten weiterhin so wie sie sind, besteht darin, benannte Anker zu verwenden, die den einzelnen Registerkarten entsprechen, wie in:

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

Sie benötigen eine serverseitige Verarbeitung, um die URL zu analysieren und den anfänglichen Seitentitel festzulegen, wenn der Browser die Seite rendert. Ich würde auch weitermachen und diesen Tab zum "aktiven" machen. Sobald die Seite geladen ist und ein tatsächlicher Benutzer die Registerkarte wechselt, würden Sie Javascript verwenden, um Änderungen vorzunehmen, document.titlewie 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>

Sie können JavaScript verwenden. Einige Bots, einschließlich Google, führen das JavaScript zugunsten von SEO aus (wobei der richtige 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. Möglicherweise muss ich 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 / Ändern einer_Seite_Titel_mit_Javascript_zu_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 wissen, dass die besten zu indizierenden Ergebnisse die Ergebnisse sind, die der tatsächliche Endbenutzer in seinem Browser sieht, einschließlich JavaScript.

Da Suchmaschinen das meiste Javascript ignorieren, müssen Sie es so gestalten, dass Suchmaschinen mithilfe der Registerkarten ohne Verwendung von Ajax crawlen können. Machen Sie jede Registerkarte zu einem Link mit einem href, der die gesamte Seite mit dieser ausgewählten Registerkarte 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 so zu sehen, wie die meisten Suchmaschinen sie sehen, deaktivieren Sie Javascript in Ihrem Browser und versuchen Sie es so zu gestalten, dass durch Klicken auf die Registerkarten die Seite mit dieser ausgewählten Registerkarte und dem richtigen Titel geladen wird.

Wenn Sie über Ajax laden und den Seitentitel nur mit Javascript dynamisch ändern möchten, gehen Sie wie folgt vor:

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

Suchmaschinen sehen diese Änderung jedoch nicht in Javascript.

Aber um die SEO angemessen zu bekommen

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

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

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

Wenn Sie den Titel nur zum Teufel über JavaScript ändern, sollten Sie das nicht tun.

Google erwähnte, dass alle js-Dateien gerendert wurden, aber in Wirklichkeit habe ich meinen Titel und andere Meta-Tags verloren, die von Reactjs auf dieser Website bereitgestellt wurden, und tatsächlich meine Position bei Google verloren! Ich habe viel gesucht, aber es scheint, dass alle Seiten vorgerendert oder SSR (Server Side Rendering) verwendet haben müssen, um ihr SEO-freundliches Protokoll zu erhalten!
Es dehnt sich auf Reactjs, AngularJS usw.
Für kurze, Jede Seite , die hat Ansicht Seite Quelle auf Browser wird von allen Roboter indiziert, wenn es nicht wahrscheinlich Google kann Index ist aber andere überspringen Indizierung!

Am einfachsten ist es, das <title>Tag aus der index.html zu löschen und einzuschließen

<head>
<title> Website - The page </title></head>

auf jeder Seite im Web. Spinnen werden dies finden und in den Suchergebnissen angezeigt :)