';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Cambiar title de la página web al ir a otra pestaña del navegador

En este artículo, que será bastante corto, aprenderás con un simple código a cambiar el title de la página web, que se muestra en la pestaña del navegador, cuando el usuario deja esta en segundo plano.

Podrás personalizarlo con el mensaje que tu quieras mostrar. Si te gusta la idea, sigue leyendo para aplicarlo.

¿Qué es la etiqueta title?

La etiqueta <TITLE> es uno de los factores más importante de la optimización on page de una página web. En un documento HTML, se coloca dentro del apartado <HEAD>. Cuando realizamos una búsqueda a través de Google, el título de cada resultado es el texto que hemos introducido dentro de la etiqueta <TITLE>. Este título también se muestra en la pestaña de cada navegador.

Me centraré en esta última parte, en cambiar el title en la pestaña del navegador cuando el usuario cambia a otra pestaña. Paso una imagen de como se vería por ejemplo en esta página web. Puedes probar con esta web para ver el resultado.

cambiar title de la pagina web al ir a otra pestaña del navegador img - iborra web design

Cómo cambiar el title cuando se cambia de pestaña

Es bien sencillo de hacer aplicando un poco de JavaScript. Si utilizas WordPress, abre el archivo footer.php de tu Child Theme y antes de la etiqueta de cierre </body> pega el siguiente código:

<script>
//Cambiar title al ir a otra pestaña
jQuery(document).ready(function () {
    titleCameBack();
});
function titleCameBack() {
    jQuery(function () {
        var message = "¡Vuelve pronto a Iborra Web Design!";
        var original;

        jQuery(window).focus(function () {
            if (original) {
                document.title = original;
            }
        }).blur(function () {
            var title = jQuery('title').text();
            if (title != message) {
                original = title;
            }
            document.title = message;
        });
    });
}
</script>

Si tienes un archivo donde estás poniendo todos los scripts de tu página web, también puedes pegar el código ahí sin poner las etiquetas <script></script>.

Tan sólo tienes que cambiar donde dice «¡Vuelve pronto a Iborra Web Design!» por el mensaje que quieras mostrar. Con esto se conseguirá que tu sitio web sea algo diferente a los demás dándole un toque de originalidad.

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design

Comments
Compartir
Paco (Iborra Web Design)

Artículos destacados

Leave a reply

¿Necesitas ayuda? Escríbeme por Whatsapp