¿Cómo cambiar dinámicamente el título de una página web?

Tengo una página web que implementa un conjunto de pestañas que muestran diferentes contenidos. Los clics en la pestaña no actualizan la página, sino que ocultan / muestran contenido en el lado del cliente.

Ahora hay un requisito para cambiar el título de la página de acuerdo con la pestaña seleccionada en la página (por razones de SEO). es posible? ¿Alguien puede sugerir una solución para alterar dinámicamente el título de la página a través de JavaScript sin volver a cargar la página?

Actualización : según los comentarios y la referencia en SearchEngineL, y la mayoría de los rastreadores web indexarán el título actualizado. La respuesta a continuación es obsoleta, pero el código sigue siendo aplicable.

Puedes hacer algo como, document.title = "This is the new page title.";pero eso anularía totalmente el propósito del SEO. La mayoría de los rastreadores no admitirán javascript en primer lugar, por lo que tomarán lo que esté en el elemento como título de la página.

Si desea que esto sea compatible con la mayoría de los rastreadores importantes, necesitará cambiar la etiqueta del título, lo que implicaría volver a cargar la página (PHP o similar). No podrá evitar eso, si desea cambiar el título de la página de una manera que pueda ver un rastreador.

Quiero saludar desde el futuro :) Cosas que sucedieron recientemente:

1. Google ahora ejecuta JavaScript que está en su sitio web ¹
2. La gente ahora usa cosas como React.js, Ember y Angular para ejecutar tareas complejas de JavaScript en la página y Google todavía lo indexa ¹
3. puede usar la API de historial html5 (pushState, react-router, ember, angular) que le permite hacer cosas como tener URL separadas para cada pestaña que desea abrir y Google indexará eso ¹

Por lo tanto, para responder a su pregunta, puede cambiar de forma segura el título y otras metaetiquetas desde javascript (también puede agregar algo como https://prerender.io si desea admitir motores de búsqueda que no sean de Google), simplemente haga que sean accesibles como URL separadas ( de lo contrario, ¿cómo sabría Google que son páginas diferentes para mostrar en los resultados de búsqueda?). Cambiar las etiquetas relacionadas con SEO (después de que el usuario haya cambiado de página haciendo clic en algo) es simple:

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

Solo asegúrese de que css y javascript no estén bloqueados en robots.txt, puede usar Fetch como servicio de Google en las Herramientas para webmasters de Google.

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

No puedo ver cómo cambiar el título de la página a través de Javascript ayudará a SEO. La mayoría (o todos) los robots de búsqueda no ejecutan Javascript y solo leerán el título cargado inicialmente que es el marcado.

Si desea ayudar al SEO, deberá cambiar el título de la página en el back-end y mostrar diferentes versiones de la página.

Uso document.title.

Vea esta página para un tutorial rudimentario también.

El código es
document.title = 'test'

Hay muchas formas de cambiar el título, las dos principales son las siguientes:

El método cuestionable

Ponga una etiqueta de título en el HTML (por ejemplo <title>Hello</title>), luego en javascript:

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

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

El método obviamente correcto

Lo más simple de todo es usar el método provisto por el Modelo de Objetos del Documento (DOM)

document.title = "Hello World";

El método anterior generalmente es lo que haría para alterar las etiquetas que se encuentran en el cuerpo del documento. Usando este método para modificar etiquetas de metadatos como las que se encuentran en la cabeza (comotitle ) es una práctica cuestionable en el mejor de los casos, no es idiomático, no es un estilo muy bueno para empezar y puede que ni siquiera sea portátil. Sin embargo, una cosa de la que puede estar seguro es que molestará a otros desarrolladores si ventitle.innerHTML = ... en el código que mantienen.

Con lo que quieres ir es con el último método. Esta propiedad es proporciona en la especificación DOM específicamente para, como su nombre indica, cambiar el título.

Tenga en cuenta también que si está trabajando con XUL, es posible que desee verificar que el documento se haya cargado antes de intentar establecer u obtener el título, ya que de lo contrario está invocando undefined behavior (aquí hay dragones), que es un concepto aterrador por derecho propio. Esto puede o no suceder a través de JavaScript, ya que los documentos en el DOM no necesariamente pertenecen a JavaScript. Pero XUL es una bestia completamente diferente, así que me estoy desviando.

Hablando de .innerHTML

Un buen consejo a tener en cuenta sería que el uso .innerHTMLes generalmente descuidado. UtilizarappendChild lugar.

Aunque dos casos en los que todavía me parece .innerHTMLútil incluyen insertar texto sin formato en un elemento pequeño ...

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

... y limpiando un contenedor ...

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

Usar el document.title es cómo lo lograrías en JavaScript, pero ¿cómo se supone que esto ayudará con el SEO? Los bots generalmente no ejecutan código javascript mientras atraviesan las páginas.

Los rastreadores modernos pueden analizar contenido generado dinámicamente en el DOM, por lo que el uso document.title = ...está perfectamente bien.

Tendrá que volver a publicar la página con un nuevo título para que los rastreadores noten el cambio. Hacerlo a través de JavaScript solo beneficiará a un lector humano, los rastreadores no van a ejecutar ese código.

Para aquellos que buscan la versión npm, hay una biblioteca completa para esto:

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

Tal vez pueda cargar en su título todos los títulos de pestañas en una cadena, y luego, una vez que cargue una de las pestañas, cambie el título a través de javascript

Ej: al principio establezca su título en

my app | description | contact | about us | 

una vez que cargue una de las pestañas, ejecute:

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

Una forma que viene a la mente que puede ayudar con el SEO y aún tener sus páginas de pestañas como es sería usar anclas con nombre que correspondan a cada pestaña, como en:

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

Debería tener un procesamiento del lado del servidor para analizar la url y establecer el título de la página inicial cuando el navegador la muestre. También seguiría adelante y convertiría esa pestaña en la "activa". Una vez que se carga la página y un usuario real está cambiando las pestañas, usaría JavaScript para cambiar, document.titlecomo lo han dicho otros usuarios.

Puedes usar JavaScript. Algunos bots, incluido Google, ejecutarán JavaScript en beneficio del SEO (mostrando el título correcto en el SERP).

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

Sin embargo, esto es más complejo ya que está mostrando y ocultando pestañas sin actualizar la página o cambiar la URL. Tal vez agregar un ancla ayudará como lo han dicho otros. Es posible que deba retractar mi respuesta.

Artículos que muestran resultados positivos: 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

No siempre asuma que un bot no ejecutará JavaScript. http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157 Google y otros motores de búsqueda saben que los mejores resultados para indexar son los resultados que el usuario final real verá en su navegador, incluido JavaScript.

Utilizar document.title . Será útil para la mayoría de las cosas, pero destruirá el SEO en su sitio web.

Ejemplo:

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>

Dado que los motores de búsqueda ignoran la mayoría de javascript, deberá hacerlo para que los motores de búsqueda puedan rastrear usando las pestañas sin usar Ajax. Haga que cada pestaña sea un enlace con un href que cargue toda la página con esa pestaña seleccionada. Entonces la página puede tener ese título en la etiqueta.

El controlador de eventos onclick aún puede cargar las páginas a través de ajax para los espectadores humanos.

Para ver las páginas como la ve la mayoría de los motores de búsqueda, desactive Javascript en su navegador e intente hacerlo de modo que al hacer clic en las pestañas se cargue la página con esa pestaña seleccionada y el título correcto.

Si está cargando a través de ajax y desea cambiar dinámicamente el título de la página con solo Javascript, haga lo siguiente:

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

Sin embargo, los motores de búsqueda no verán este cambio realizado en javascript.

Pero para obtener los beneficios SEO

Debe volver a cargar la página cuando la página cambia para que el motor de búsqueda vea los diferentes títulos, etc.

Así que asegúrese de que la recarga de la página funcione primero y luego agregue cambios de document.title

Solo quiero agregar algo aquí: cambiar el título a través de JavaScript es realmente útil si está actualizando una base de datos a través de AJAX, por lo que el título cambia sin tener que actualizar la página. El título en realidad cambia a través del lenguaje de secuencias de comandos del lado del servidor, pero hacer que cambie a través de JavaScript es solo una cosa de usabilidad e interfaz de usuario que hace que la experiencia del usuario sea más agradable y fluida.

Ahora, si está cambiando el título a través de JavaScript solo por el placer de hacerlo, entonces no debería estar haciendo eso.

Google mencionó que todos los archivos js se procesaron, pero en realidad, ¡perdí mi título y otras metaetiquetas proporcionadas por Reactjs en este sitio web y realmente perdí mi posición en Google! He buscado mucho, ¡pero parece que todas las páginas deben haberse renderizado previamente o usar SSR (Representación del lado del servidor) para tener su protocolo compatible con SEO!
Se expande a Reactjs, Angularjs, etc.
Para abreviar, todas las páginas que han visto la fuente de la página en el navegador están indexadas por todos los robots, si no es probable que Google pueda indexar, pero otros omiten la indexación.

La forma más sencilla es eliminar la <title>etiqueta de index.html e incluir

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

en cada página de la web. Las arañas encontrarán esto y se mostrarán en los resultados de búsqueda :)