javascript - titulo - ¿Cómo cambiar dinámicamente el título de una página web?
cambiar titulo javascript (18)
Tengo una página web que implementa un conjunto de pestañas que muestran contenido diferente. Los clics en las pestañas no actualizan la página, sino que ocultan / muestran los contenidos 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? ¿Puede alguien 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?
Dado que los motores de búsqueda ignoran la mayoría de los 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 carga 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 todavía puede cargar las páginas a través de ajax para espectadores humanos.
Para ver las páginas como la mayoría de los motores de búsqueda las ven, desactive Javascript en su navegador y trate de hacerlo para 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, entonces 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.
El codigo es
document.title = ''test''
Hay muchas maneras de cambiar el título, las dos principales son así:
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
El más simple de todos es utilizar el método proporcionado por el Modelo de objetos de documento (DOM)
document.title = "Hello World";
El método anterior es generalmente lo que haría para modificar las etiquetas que se encuentran en el cuerpo del documento. El uso de este método para modificar etiquetas de metadatos como las que se encuentran en la cabeza (como el title ) es, en el mejor de los casos, una práctica cuestionable, no es idiomático, no es un estilo muy bueno para empezar, y puede que ni siquiera sea portátil. Sin embargo, de lo que puede estar seguro es que molestará a otros desarrolladores si ven title.innerHTML = ... en el código que mantienen.
Lo que quieres es con este último método. Esta propiedad se proporciona en la Especificación DOM específicamente para el propósito de, 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í puede encontrar dragones), que es un concepto aterrador en sí mismo Correcto. Esto puede o no suceder a través de JavaScript, ya que los documentos en el DOM no se refieren necesariamente a JavaScript. Pero XUL es una bestia entera, así que estoy divagando.
Hablando de .innerHTML
Un buen consejo a tener en cuenta sería que el uso de .innerHTML es generalmente descuidado. Utilice appendChild en appendChild lugar.
Aunque dos casos en los que todavía encuentro .innerHTML para ser útil incluyen la inserción de 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);
});
La forma más sencilla es eliminar la etiqueta <title> 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 :)
Los rastreadores modernos searchengineland.com/… en el DOM, por lo que usar document.title = ... es perfectamente correcto.
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 bots de búsqueda no ejecutan Javascript y solo leerán el título cargado inicialmente que es el marcado.
Si desea ayudar a la SEO, entonces necesitará cambiar el título de la página en el back-end y servir diferentes versiones de la página.
Para aquellos que buscan la versión npm de la misma, 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''));
Pero para conseguir los beneficios de SEO.
Debe hacer una recarga de página cuando la página cambie 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 los cambios document.title
Puede utilizar JavaScript. Algunos bots, incluido Google, ejecutarán el JavaScript en beneficio de 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 ni cambiar la URL. Tal vez la adición de un ancla ayude según lo indicado por otros. Puede que tenga que retractar mi respuesta.
Artículos que muestren 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. 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.
Quiero saludar desde el futuro :) Cosas que sucedieron recientemente:
- Google ahora ejecuta javascript que está en su sitio web searchengineland.com/…
- La gente ahora usa cosas como React.js, Ember y Angular para ejecutar tareas complejas de javascript en la página y Google lo sigue indexando. searchengineland.com/…
- puede usar la API de historial de html5 (pushState, react-router, brasa, angular) que le permite hacer cosas como tener direcciones URL separadas para cada pestaña que desea abrir y Google indexará que searchengineland.com/…
Entonces, 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), solo haga que sean accesibles como direcciones URL separadas ( De lo contrario, ¿cómo sabría Google que esas 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.
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, entonces el título cambia sin que tenga que actualizar la página. El título realmente cambia a través del lenguaje de programación del lado del servidor, pero cambiarlo a través de JavaScript es solo una cuestión de usabilidad y UI 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 gusto de hacerlo, entonces no debería hacerlo.
Tal vez pueda cargar en su título todos los títulos de las pestañas en una cadena, y luego, una vez que cargue una de las pestañas, cambie el título mediante javascript
ej: al principio pon tu título a
my app | description | contact | about us |
una vez que cargue una de las pestañas ejecute:
document.title = "my app | tab title";
Tendrá que volver a servir 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 ejecutarán ese código.
Una forma que me viene a la mente es que puede ayudar con el SEO y aún tener sus páginas de pestañas tal como están sería usando anclajes con nombre que correspondan a cada pestaña, como en:
http://www.example.com/mypage#tab1, http://www.example.com/mypage#tab2, etc.
Necesitarí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 muestre la página. También me gustaría seguir y hacer de esa pestaña la "activa". Una vez que la página está cargada y un usuario real está cambiando las pestañas, usaría javascript para cambiar document.title como han indicado otros usuarios.
Usar document.title es cómo lo lograrías en JavaScript, pero ¿cómo se supone que esto ayude con SEO? Los bots generalmente no ejecutan el código javascript cuando atraviesan las páginas.
Utilice 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>
Utilice document.title .
Ver esta página para un tutorial rudimentario también.
Actualización : según los comentarios y la referencia en SearchEngineLand mayoría de los rastreadores web indexarán el título actualizado. Abajo la respuesta es obsoleta. pero el código sigue siendo aplicable.
Solo 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 van a admitir javascript en primer lugar, por lo que tomarán todo 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, tendrá que 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 manera que un rastreador pueda verlo.