Las etiquetas de head que todo documento HTML debería tener

4min

En el siguiente artículo vamos a realizar un análisis detallado de las etiquetas head para la cabecera de la página, que son importantes para disponer de un documento HTML bien creado.

El head de la página contiene etiquetas que no aparecen en la pantalla del navegador, pero que ayudan a muchos consumidores de las páginas para identificarlas o mejorar su funcionalidad. A continuación, podrás ver un análisis de las etiquetas que no deberían faltar en tus páginas.

Índice

Etiquetas SEO

La mayor motivación de tener un buen head es porque ayuda en el posicionamiento de buscadores. Es importante, por ello, añadir algunas etiquetas fundamentales.

  • Title: con el título de la página y conviene que el título aparezca luego también dentro del cuerpo.
  • Meta description:  aunque ya no es tan importante como antes, sigue siendo un punto extra que ayuda a Google a identificar los temas que se abordan. Es importante que lo que pongamos en la «description» se vea reflejado en la página.

Otras meta tags, como autor, copyright, generator, etc. no son tan necesarias. Incluso las keywords. No agregan demasiado valor, por lo que no importa mucho si las incluyes o no.

<title>Mi sitio web</title>
<meta name='description' content='Aquí indico el tema principal que se trata' />

Opcionalmente en SEO

Sería importante evaluar la necesidad de usar estas etiquetas.

  • Meta Robots

La etiqueta robots ofrece directivas sobre cómo deben los robots tener en cuenta esta página. La debemos colocar si el valor que deseamos indicar es distinto de «index,follow», como por ejemplo cuando no deseamos que la página se indexe en buscadores.

  • Canonical

Mención especial para la etiqueta canonical, que no es estrictamente necesaria, puesto que depende de la arquitectura de las URLs de tu página web. Sin embargo, si existe contenido duplicado, es muy importante que se indique. De hecho, siempre merece la pena tenerla para curarse en salud.

<meta name='robots' content='noindex' />
<link rel='canonical' href='https://moz.com/blog/the-ultimate-guide-to-seo-meta-tags' />

Nota: Ojo, que la etiqueta robots del código anterior provocaría que la página no se indexase. Claro que la mayoría de las veces no queremos eso.

Abandonamos aquí la sección de SEO, pero ten en cuenta que, en mayor o menor medida, el resto de las etiquetas comentadas pueden afectar también positivamente al posicionamiento o, negativamente, si no las tienes.

Dispositivos

Los móviles requieren, o aceptan y agradecen, algunas etiquetas que vamos a comentar.

  • Viewport: Es la más importante y nunca debería faltar en tu web. Indica cómo la página se va a comportar a la hora de visualizarse, en relación a la pantalla del dispositivo. Es importante para el responsive y, sobre todo, en las pantallas de reducidas dimensiones.
<meta name=viewport content='width=device-width, initial-scale=1'>

Luego, hay una serie interminable de etiquetas para definir los iconos de aplicación para cada tipo de sistema operativo, que usarán cuando el sitio web se agregue a la pantalla de inicio, como un botón para acceder directamente a él. Además, estas etiquetas pueden especificar iconos en distintas resoluciones, lo que lo acaba de complicar. Aquí tienes un ejemplo para los iconos de dispositivos Apple, pero recuerda que existen también para Android, Windows, etc.

<link rel='apple-touch-icon' href='/images/icons/icon.png'>

<link rel='apple-touch-icon' sizes='72x72' href='/images/icons/icon.png'>

<link rel='apple-touch-icon' sizes='96x96' href='/images/icons/icon.png'>

<link rel='apple-touch-icon' sizes='144x144' href='/images/icons/icon.png'>

<link rel='apple-touch-icon' sizes='192x192' href='/images/icons/icon.png'>

Para dispositivos podemos también indicar nuestro tema de color, para personalizar la interfaz del navegador en Android.

<meta name='theme-color' content='#ff9944'>

Progressive Web Apps

Muy importante es el archivo del manifest.json, que caracteriza una PWA (Progressive Web App), junto con el uso de Service Workers. Aunque nuestra página no sea una aplicación progresiva, tenerla es siempre positivo.

  • Manifest:

Es un archivo que indica información de metadatos sobre una aplicación que se ejecuta en el contexto del navegador.

<link rel='manifest' href='manifest.json'>

Redes sociales

Si queremos que la página se comporte bien a la hora de compartirse en redes sociales, es muy importante colocar las etiquetas de Open Graph y Twitter Cards, donde la mayor parte de los servicios sociales toman sus datos para definir el análisis del documento HTML.

  • Twitter cards:

Sirven para decirle a Twitter cuál es tu usuario y, sobre todo, cómo debe mostrar tu página cuando se comparte en la red social.

  • Open Graph:

Originalmente creado por Facebook, aunque varias redes sociales usan estas etiquetas para obtener datos sobre cómo compartir la página.

Aquí tenemos un brevísimo resumen de estas etiquetas. Deberías documentarte en cada red social sobre el conjunto de datos que se aceptan, para incluir las informaciones que sean necesarias para tu web.

<meta name='twitter:card' content='summary'>

<meta name='twitter:site' content='@arsys'>

<meta property='og:type' content='website'>

<meta property='og:site_name' content='Mi web'>

<meta property='og:image' content='images/logo.png' />

Conclusión

¡Eso es todo! estamos seguros que te hemos dado algo de trabajo para mejorar tu página, colocando las etiquetas head que te puedan estar faltando.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: