jQuery: ¿cómo cambiar el título del documento durante .ready ()?


146

Estoy usando algunos diseños anidados en Ruby on Rails, y en uno de los diseños necesito leer en una cadena desde un div y establecerlo como el título del documento. ¿Cuál es la forma correcta (si la hay) de establecer el título del documento?

<script type="text/javascript">
$(document).ready(function() {

    // ???

});
</script>

Solo una explicación para los que se preguntan por qué no solo configuran la etiqueta del título del lado del servidor: a veces, la página se genera con contenido y acción mezclados. Es decir, es posible que primero tenga un archivo incude, que forma el encabezado, luego el contenido se extrae de una base de datos, por ejemplo, el nombre del cliente. Lo que significa que en el momento en que se envió el título, no se conoce el nombre del cliente. Es una codificación descuidada que no separa la lógica de negocios y la presentación, primero obtiene todos los datos y luego los muestra, pero a veces eso es lo que tiene. Jefe: "Solo ponga el nombre del cliente en el título" Usted "Tengo que refactorizar todo el código".
Leif Neland

Respuestas:


310

Lo siguiente debería funcionar, pero no sería compatible con SEO. Es mejor poner el título en la etiqueta del título.

<script type="text/javascript">

    $(document).ready(function() {
        document.title = 'blah';
    });

</script>

14
¿No sería HTML HTML generado por JavaScript incompatible con SEO? Estoy bastante seguro de que googlebot no ejecuta javascript ...
Orion Edwards

1
He leído que hay formas de decirle a Google Bot qué leer cuando tus páginas están hechas con Ajax ... intentando buscar en Google.
trusktr

2
@trusktr: Creo que estás hablando de este artículo de Google: Hacer que las aplicaciones AJAX sean rastreables . Pero no tiene NADA que ver con este tipo de problema, por lo que Orion Edwards tiene razón. Es solo un método para permitir que Google lea contenidos que normalmente se generan con AJAX, a través de instantáneas HTML y algunas modificaciones del lado del servidor.
Sk8erPeter

1
para mí no funciona en FF 29.0.1, pero esta solución que se describe a continuación funciona: stackoverflow.com/a/11171548/1915920
Andreas Dietrich

2
@OrionEdwards Ahora, más de cinco años después, rimmkaufman.com/blog/googlebot-crawling-javascript-site-ready/…
kqr

48

No lo use $('title').text('hi'), porque IE no lo admite.

Es mejor usar document.title = 'new title';



36

Me gusta esto:

$(document).ready(function ()
{
    document.title = "Hello World!";
});

Asegúrese de establecer un título predeterminado si desea que los motores de búsqueda indexen correctamente su sitio.

Un pequeño consejo:

$(function ()
{
    // this is a shorthand for the whole document-ready thing
    // In my opinion, it's more readable 
});

3
Debería publicar la taquigrafía como una nueva "Pregunta" en sí misma. ¡Útil!
MDCore

No estoy seguro de que te entiendo, MDCore.
cllpse

Jeff ha sugerido que uno use stackoverflow para esos consejos técnicos que uno podría poner en su blog. Estaba sugiriendo publicar el consejo como una nueva pregunta que usted mismo responde.
MDCore

16
<script type="text/javascript">
$(document).ready(function() {

    $(this).attr("title", "sometitle");

});
</script>

2
sí, en realidad, no se puede usar $('title').text(...)debido a un error en IE
TMS

1
¿Por qué no document.title?
adardesign

6

document.title no funcionaba para mí.

Aquí hay otra forma de hacerlo usando JQuery

$('html head').find('title').text("My New Page Title");

para mí tampoco (FF 29.0.1) y si no hay ninguna <title>configuración, incluso $('html head').add('<title>override default title</title>')no funciona
Andreas Dietrich

2
¿Es esto SEO amigable?
SearchForKnowledge

5

Estoy usando algunos diseños anidados en Ruby on Rails, y en uno de los diseños necesito leer en una cadena desde un div y establecerlo como el título del documento.

La forma correcta de hacerlo es en el lado del servidor.

En su diseño, en algún momento habrá algún código que coloque el texto en el div . Haga que este código también establezca alguna variable de instancia como @page_title, y luego en su diseño externo haga que funcione<%= @page_title || 'Default Title' %>


-2

Si tiene un script del servidor get_title.php que se hace eco de la sesión de título actual, esto funciona bien en jQuery:

$.get('get_title.php',function(*respons*){
    title=*respons* + 'whatever you want'   
    $(document).attr('title',title)
})

2
hacer una solicitud de ajax para establecer el título es un desperdicio en mi opinión.
Jason Miesionczek

2
OP solicitó específicamente una solución jQuery para un problema del lado del cliente.
Joel Etherton el

1
Establecer el título a través de ajax es útil, ya que puede ayudar a identificar la pestaña del navegador actual para el usuario cuando está en una página diferente.
chim
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.