Comment changer dynamiquement le titre d'une page Web?

J'ai une page Web qui implémente un ensemble d'onglets affichant chacun un contenu différent. Les clics sur l'onglet ne rafraîchissent pas la page mais masquent / affichent le contenu côté client.

Maintenant, il est nécessaire de changer le titre de la page en fonction de l'onglet sélectionné sur la page (pour des raisons de référencement). Est-ce possible? Quelqu'un peut-il suggérer une solution pour modifier dynamiquement le titre de la page via javascript sans recharger la page?

Mise à jour : selon les commentaires et la référence sur SearchEngineLand, la plupart des robots d'indexation Web indexeront le titre mis à jour. La réponse ci-dessous est obsolète, mais le code est toujours applicable.

Vous pouvez simplement faire quelque chose comme ça document.title = "This is the new page title.";, mais cela irait totalement à l'encontre du but du référencement. La plupart des robots ne prendront pas en charge javascript en premier lieu, ils prendront donc tout ce qui est dans l'élément comme titre de page.

Si vous souhaitez que cela soit compatible avec la plupart des robots d'exploration importants, vous devrez réellement changer la balise de titre elle-même, ce qui impliquerait de recharger la page (PHP, ou similaire). Vous ne pourrez pas contourner cela, si vous souhaitez modifier le titre de la page d'une manière qu'un robot peut voir.

Je veux dire bonjour du futur :) Les choses qui se sont passées récemment:

1. Google exécute maintenant javascript qui est sur votre site Web ¹
2. Les gens utilisent maintenant des choses comme React.js, Ember et Angular pour exécuter des tâches javascript complexes sur la page et elle est toujours indexée par Google ¹
3. vous pouvez utiliser l'api d'historique html5 (pushState, react-router, ember, angular) qui vous permet de faire des choses comme avoir des URL distinctes pour chaque onglet que vous souhaitez ouvrir et Google l'indexera ¹

Donc, pour répondre à votre question, vous pouvez modifier en toute sécurité le titre et les autres balises META à partir de javascript (vous pouvez également ajouter quelque chose comme https://prerender.io si vous souhaitez prendre en charge les moteurs de recherche non Google), il suffit de les rendre accessibles sous forme d'URL distinctes ( sinon, comment Google saurait-il qu'il s'agit de pages différentes à afficher dans les résultats de recherche?). Changer les balises liées au référencement (après que l'utilisateur a changé de page en cliquant sur quelque chose) est simple:

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

Assurez-vous simplement que css et javascript ne sont pas bloqués dans robots.txt, vous pouvez utiliser Fetch en tant que service Google dans Google Webmaster Tools.

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

Je ne vois pas en quoi le changement du titre de la page via Javascript aidera le référencement. La plupart (ou tous) les robots de recherche n'exécutent pas Javascript et ne liront que le titre initialement chargé qui est le balisage.

Si vous souhaitez aider le référencement, vous devrez modifier le titre de la page dans le back-end et servir différentes versions de la page.

Utilisez document.title.

Consultez également cette page pour un didacticiel rudimentaire.

Le code est
document.title = 'test'

Il existe de nombreuses façons de modifier le titre, les deux principaux étant les suivants:

La méthode discutable

Mettez une balise de titre dans le HTML (par exemple <title>Hello</title>), puis en javascript:

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

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

La méthode évidemment correcte

Le plus simple est d’utiliser la méthode fournie par le Document Object Model (DOM)

document.title = "Hello World";

La première méthode est généralement ce que vous feriez pour modifier les balises trouvées dans le corps du document. L'utilisation de cette méthode pour modifier des balises de métadonnées comme celles trouvées dans la tête (comme title) est au mieux une pratique discutable, n'est pas idiomatique, pas un très bon style pour commencer, et pourrait même ne pas être portable. Une chose dont vous pouvez être sûr, c'est que cela ennuiera les autres développeurs s'ils voient title.innerHTML = ...dans le code qu'ils gèrent.

Ce que vous voulez utiliser, c'est cette dernière méthode. Cette propriété est fournie dans la spécification DOM spécifiquement dans le but, comme son nom l'indique, de changer le titre.

Notez également que si vous travaillez avec XUL, vous voudrez peut-être vérifier que le document a été chargé avant d'essayer de définir ou d'obtenir le titre, sinon vous invoquez undefined behavior(ici des dragons), ce qui est un concept effrayant à part entière. Cela peut ou non se produire via JavaScript, car les documents sur le DOM ne concernent pas nécessairement JavaScript. Mais XUL est une bête entière, donc je m'égare.

En parlant de .innerHTML

Un bon conseil à garder à l'esprit serait que l'utilisation .innerHTMLest généralement bâclée. Utilisez appendChildplutôt.

Bien que deux cas où je trouve encore .innerHTMLutile incluent l'insertion de texte brut dans un petit élément ...

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;
}());

... et vider un conteneur ...

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

L'utilisation du document.title est la façon dont vous le feriez en JavaScript, mais comment cela est-il censé aider au référencement? Les bots n'exécutent généralement pas de code javascript lorsqu'ils traversent les pages.

Les robots d'exploration modernes sont capables d'analyser le contenu généré dynamiquement dans le DOM, donc l'utilisation document.title = ...est parfaitement bien.

Vous devrez renvoyer la page avec un nouveau titre afin que les robots d'exploration remarquent le changement. Le faire via javascript ne bénéficiera qu'à un lecteur humain, les robots ne vont pas exécuter ce code.

pour ceux qui en recherchent la version npm, il existe une bibliothèque complète pour cela:

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'));

Peut-être que vous pouvez charger sur votre titre tous les titres des onglets dans une chaîne, puis une fois que vous chargez l'un des onglets, changez le titre via javascript

ex: définissez d'abord votre titre sur

my app | description | contact | about us | 

une fois que vous avez chargé l'un des onglets, exécutez:

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

Une façon qui vient à l'esprit qui peut aider avec le référencement et conserver vos pages à onglets telles qu'elles seraient serait d'utiliser des ancres nommées qui correspondent à chaque onglet, comme dans:

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

Vous auriez besoin d'un traitement côté serveur pour analyser l'URL et définir le titre de page initial lorsque le navigateur rend la page. Je voudrais également aller de l'avant et faire de cet onglet "actif". Une fois que la page est chargée et qu'un utilisateur réel change d'onglet, vous utiliserez javascript pour changer document.titlecomme d'autres utilisateurs l'ont déclaré.

Vous pouvez utiliser JavaScript. Certains bots, dont Google, exécuteront le JavaScript au profit du référencement (en affichant le titre correct dans le SERP).

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

Cependant, cela est plus complexe car vous affichez et masquez des onglets sans actualiser la page ni modifier l'URL. Peut-être que l'ajout d'une ancre aidera comme indiqué par d'autres. Je devrai peut-être retirer ma réponse.

Articles montrant des résultats positifs: 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

Ne supposez pas toujours qu'un bot n'exécutera pas JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google et les autres moteurs de recherche savent que les meilleurs résultats à indexer sont les résultats que l'utilisateur final verra dans son navigateur, y compris JavaScript.

Utilisez document.title. Il sera utile pour la plupart des choses, mais il détruira le référencement de votre site Web.

Exemple:

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>

Étant donné que les moteurs de recherche ignorent la plupart des javascript, vous devrez le faire pour que les moteurs de recherche puissent explorer en utilisant les onglets sans utiliser Ajax. Faites de chaque onglet un lien avec un href qui charge la page entière avec cet onglet sélectionné. Ensuite, la page peut avoir ce titre dans la balise.

Le gestionnaire d'événements onclick peut toujours charger les pages via ajax pour les téléspectateurs humains.

Pour voir les pages comme la plupart des moteurs de recherche les voient, désactivez Javascript dans votre navigateur et essayez de le faire de sorte que cliquer sur les onglets charge la page avec cet onglet sélectionné et le titre correct.

Si vous chargez via ajax et que vous souhaitez modifier dynamiquement le titre de la page avec juste Javascript, alors faites:

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

Cependant, les moteurs de recherche ne verront pas cette modification effectuée en javascript.

Mais pour obtenir les avantages SEO

Vous devez effectuer un rechargement de page lorsque la page change afin que le moteur de recherche voit les différents titres, etc.

Assurez-vous donc que le rechargement de la page fonctionne d'abord, puis ajoutez les modifications de document.title

Je veux juste ajouter quelque chose ici: changer le titre via JavaScript est en fait utile si vous mettez à jour une base de données via AJAX, donc le titre change sans que vous ayez à rafraîchir la page. Le titre change en fait via votre langage de script côté serveur, mais le faire changer via JavaScript n'est qu'une fonctionnalité et une interface utilisateur qui rendent l'expérience utilisateur plus agréable et fluide.

Maintenant, si vous changez le titre via JavaScript juste pour l'enfer, alors vous ne devriez pas le faire.

Google a mentionné que tous les fichiers js étaient restitués mais en réalité, j'ai perdu mon titre et une autre balise META qui avait été fournie par Reactjs sur ce site Web et j'ai en fait perdu ma position sur Google! J'ai beaucoup cherché mais il semble que toutes les pages doivent avoir été pré-rendues ou utiliser SSR (Server Side Rendering) pour avoir leur protocole SEO-friendly!
Il se développe à Reactjs, AngularJS, etc.
Pour bref, chaque page a voir la source de la page sur le navigateur est indexé par tous les robots, si ce n'est pas probablement l' indice Google ne peut que l'indexation des autres!

Le moyen le plus simple consiste à supprimer la <title>balise de index.html et à inclure

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

dans chaque page du Web. Les araignées trouveront cela et seront affichées dans les résultats de recherche :)