web-dev-qa-db-fra.com

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

Il est maintenant 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?

javascripthtml
439
user12129

Update: selon les commentaires et la référence sur SearchEngineLand la plupart des robots 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, document.title = "This is the new page title.";, mais cela irait totalement à l'encontre de l'objectif 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 réellement 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 dans une manière qu'un robot d'exploration peut voir.

642
Alex Fort

Je veux dire bonjour du futur :) Ce qui s'est passé récemment:

  1. Google exécute maintenant le javascript qui se trouve sur votre site Web.1
  2. Les internautes utilisent désormais des outils tels que React.js, Ember et Angular pour exécuter des tâches javascript complexes sur la page, et celle-ci est toujours indexée par Google.1
  3. vous pouvez utiliser une api d'historique html5 (pushState, react-router, ember, angular) qui vous permet d'effectuer des opérations telles que des URL distinctes pour chaque onglet que vous souhaitez ouvrir et Google l'indexera.1

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 des moteurs de recherche autres que Google), il suffit de les rendre accessibles. en tant qu'URL distinctes (sinon, comment Google saurait-il qu'il s'agit de pages différentes à afficher dans les résultats de recherche?). Changer les tags liés au référencement (après que l'utilisateur ait 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 le fichier robots.txt. Vous pouvez utiliser le service Fetch en tant que Google dans les outils pour les webmasters de Google.

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

133
JLarky

Je ne vois pas en quoi le changement du titre de la page via Javascript faciliterait le référencement. La plupart (ou tous) des robots de recherche ne fonctionnent pas avec Javascript et ne liront que le titre initialement chargé qui est la marque.

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

47
Sarat

Utilisez document.title.

Voir cette page pour un tutoriel rudimentaire.

31
lc.

Le code est
document.title = 'test'

27
Kev

Vous pouvez changer le titre de plusieurs façons. Les deux principales sont comme suit:

La méthode discutable

Placez une balise de titre dans le code HTML (par exemple, <title>Hello</title>), puis dans le code 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 modèle d'objet de document (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 les balises de métadonnées telles que celles trouvées dans la tête (comme title) est au mieux une pratique discutable, n'est pas idiomatique, n'est pas très bon style pour commencer et pourrait même ne pas être portable. Une chose dont vous pouvez être sûr, cependant, est que cela gênera les autres développeurs s'ils voient title.innerHTML = ... dans le code qu'ils gèrent.

Ce que vous voulez allez utiliser est la 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 pouvez vérifier que le document a été chargé avant de tenter 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 arriver via JavaScript, car les documents sur le DOM ne sont pas nécessairement liés à JavaScript. Mais XUL n'est pas une bête, alors je m'éloigne du sujet.

En parlant de .innerHTML

Un bon conseil à garder à l’esprit serait que l’utilisation de .innerHTML est généralement bâclée. Utilisez appendChild à la place. 

Bien que deux cas dans lesquels je trouve toujours .innerHTML utile, 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 nettoyer un conteneur ...

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

Utiliser le document.title, c'est comment le réaliser en JavaScript, mais comment cela est-il censé faciliter le référencement? Les robots n'exécutent généralement pas de code javascript lorsqu'ils traversent des pages.

10
TheTXI

Les robots modernes sont capables d’analyser le contenu généré dynamiquement dans le DOM, donc utiliser document.title = ... convient parfaitement. 

8
Dimitry_N

Vous devrez ré-servir la page avec un nouveau titre pour que les robots d'exploration remarquent le changement. Le faire via javascript ne profitera qu’à un lecteur humain, les robots n’exécutent pas ce code.

4
Bryan Denny

pour ceux qui 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'));
3
mel3kings

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

ex: au début 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
Salvador Villegas

Une façon de penser qui pourrait vous aider avec le référencement tout en conservant vos pages d'onglets consiste à utiliser des ancres nommées correspondant à 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 la page initiale lorsque le navigateur affichera la page. Je voudrais aussi aller de l'avant et faire de cet onglet l'onglet "actif". Une fois que la page est chargée et qu'un utilisateur réel change d'onglet, vous utiliseriez javascript pour modifier document.title comme d'autres utilisateurs l'ont indiqué.

2
Rich

Utilisez document.title. Ce sera utile pour la plupart des choses, mais cela détruira le référencement sur 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>

1
goblin01

Étant donné que les moteurs de recherche ignorent la plupart des scripts javascript, vous devez le faire pour qu'ils puissent explorer à l'aide des 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énement onclick peut toujours charger les pages via ajax pour les visualiseurs humains.

Pour afficher les pages de la même manière que la plupart des moteurs de recherche, désactivez JavaScript dans votre navigateur et essayez de faire en sorte que le fait de cliquer sur les onglets chargera 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 du Javascript, faites:

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

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

1
dougd_in_nc

Vous pouvez utiliser JavaScript. Certains robots, y compris Google, exécuteront le JavaScript au profit du référencement (montrant le titre correct dans le SERP).

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

Toutefois, cela est plus complexe car vous affichez et masquez des onglets sans actualiser la page ni modifier l'URL. Peut-être qu’ajouter une ancre aidera, comme l’ont dit d’autres. J'ai peut-être besoin de retirer ma réponse.

Articles affichant 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_Titre_avec_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 connaissent que les meilleurs résultats à indexer sont ceux que l'utilisateur final verra dans son navigateur, y compris JavaScript.

1
yazzer

Mais pour obtenir les avantages du référencement 

Vous devez recharger une page lorsque celle-ci change pour que les moteurs de recherche voient les différents titres, etc.

Assurez-vous donc que le rechargement de page fonctionne en premier, puis ajoutez les modifications apportées à document.title

0
Pbearne

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

Maintenant, si vous changez le titre via JavaScript uniquement pour le plaisir, alors vous ne devriez pas le faire. 

0
shootingrubber

Google a mentionné que tous les fichiers js étaient restitués, mais en réalité, j'ai perdu mon titre et une autre balise méta 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 pré-rendu ou utiliser SSR (Server Side Rendering) pour avoir leur protocole SEO-friendly!
Il se développe en Reactjs, Angularjs, etc.
Pour résumer, chaque page ayant view page source sur le navigateur est indexée par tous les robots. S'il n'est pas probable que Google puisse l'indexer, les autres ignorent l'indexation!

0
Hamed