Question Comment modifier 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 les onglets n'actualisent pas la page mais masquent / affichent le contenu du côté client.

Maintenant, il y a une obligation 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 proposer une solution pour modifier dynamiquement le titre de la page via javascript sans recharger la page?


420
2018-01-05 15:25


origine


Réponses:


Mettre à jour: selon les commentaires et références 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 juste faire quelque chose comme, document.title = "This is the new page title.";, mais cela irait totalement à l’encontre du but du référencement. Plus   les robots ne vont pas supporter javascript en premier lieu, donc   ils prendront tout ce qui est dans l'élément comme titre de la page.

Si vous voulez que cela soit compatible avec la plupart des robots d'exploration importants,   vous devrez changer la balise de titre elle-même, qui   impliquerait de recharger la page (PHP ou similaire). Tu ne vas pas   pour pouvoir contourner cela, si vous voulez changer le titre de la page   une façon dont un robot peut voir.


619
2018-01-05 15:29



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 Web1
  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 il est toujours indexé par Google.1
  3. vous pouvez utiliser l'API d'historique html5 (pushState, react-router, braise, angulaire) qui vous permet de faire des choses comme avoir des URL séparées pour chaque onglet que vous voulez ouvrir et Google indexera1

Donc, pour répondre à votre question, vous pouvez changer en toute sécurité le titre et les autres balises META de javascript (vous pouvez également ajouter quelque chose comme https://prerender.io si vous souhaitez prendre en charge les moteurs de recherche autres que Google), rendez-les simplement accessibles sous forme d'URL distinctes (sinon, comment Google sait-il que ces pages sont différentes dans les résultats de recherche?). Changer les tags liés au SEO (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 Récupérer en tant que Google service dans Google Webmaster Tools.

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


122
2018-02-04 08:26



Je ne vois pas comment changer le titre de la page via Javascript aidera SEO. La plupart (ou tous) les robots de recherche n'exécutent pas Javascript et ne lisent que le titre initialement chargé qui est le balisage.

Si vous voulez aider le SEO, alors vous devrez changer le titre de la page dans le back-end et servir différentes versions de la page.


46
2018-01-05 15:29



Utilisation document.title.

Voir cette page pour un tutoriel rudimentaire aussi bien.


31
2018-01-05 15:27



Le code est
document.title = 'test'


27
2018-01-05 15:27



Il y a plusieurs façons de changer le titre, les deux principaux sont comme ça:

La méthode douteuse

Mettez une balise de titre dans le code HTML (par ex. <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 de tous est d'utiliser réellement 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. En utilisant cette méthode pour modifier les balises de méta-données comme celles trouvées dans la tête (comme title) est au mieux une pratique discutable, n’est pas idiomatique, pas très bon au départ, et peut même ne pas être portable. Une chose que vous pouvez être sûr, cependant, est que cela va ennuyer les autres développeurs s'ils voient title.innerHTML = ... dans le code qu'ils maintiennent

Ce que tu vouloir aller avec est la dernière méthode. Cette propriété est fourni 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 pouvez vérifier que le document a été chargé avant d’essayer de définir ou d’obtenir le titre, sinon vous appelez undefined behavior (ici des dragons), ce qui est un concept effrayant à part entière. Cela peut ou non se faire via JavaScript, car les documents sur le DOM ne concernent pas nécessairement JavaScript. Mais XUL est une toute autre bête, alors je m'égare.

En parlant de .innerHTML

Un bon conseil à garder à l’esprit serait que .innerHTML est généralement bâclé. Utilisation appendChild au lieu.

Bien que deux cas où je trouve encore .innerHTML pour être utile, insérez du texte en clair 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 dégager un conteneur ...

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

11
2018-03-26 18:41



Utiliser le document.title est la façon dont vous pourriez l'accomplir en JavaScript, mais comment cela est-il supposé aider avec le SEO? Les robots n'exécutent généralement pas de code javascript lorsqu'ils traversent des pages.


10
2018-01-05 15:30



Les crawlers modernes sont capables d'analyser le contenu généré dynamiquement dans le DOM, donc en utilisant document.title = ... est parfaitement bien.


8
2018-06-04 19:18



Vous devrez réapprovisionner la page avec un nouveau titre pour 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.


3
2018-01-05 16:04



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

ex: d'abord définir votre titre à

my app | description | contact | about us | 

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

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

3
2017-11-18 22:26