¿Cómo usar las meta etiquetas de HTML5?

Una de las múltiples piezas para mejorar el posicionamiento SEO y la información que damos a los rastreadores web sobre nuestro sitio web son las etiquetas <meta> de HTML. Su utilización es altamente recomendable. ¿Por qué es importante utilizar etiquetas meta?  Aunque no sea, por supuesto, una receta mágica para subir puestos en el ranking de búsqueda y aunque existe un debate abierto sobre qué etiquetas meta son realmente útiles e importantes para los motores de búsqueda, es muy recomendable utilizarlas pues siempre facilitaremos el trabajo de rastreo e indexación de las arañas web.

¿Qué son las etiquetas <meta>?

Las etiquetas meta son la mínima aportación semántica que HTML, desde su creación, proporciona a los buscadores web. Describen el documento con una serie de datos básico: autor, descripción, palabras clave, codificación de caracteres… HTML 5 define una serie de metadatos estándares y la forma correcta de escribirlos. En general siempre tienen las misma forma:

<meta name=” ” content=” ” />,

donde name, es el nombre del metadato y content el valor o contenido de dicho metadato.

Vamos a ver cada una de las etiquetas meta y cual es la forma correcta de implementaras en nuestro sitio web.

La etiqueta <meta> application-name: descripción de una aplicación Web

Está exclusivamente pensada para describir el nombre de una aplicación Web. Su valor es cualquier cadena de texto que sirva para dar un nombre a la aplicación y solo puede aparecer una vez. No se debe incluir si no estamos dentro de una aplicación Web.

<meta name="application-name" content="Servicio web de base de datos 1.0" />

Importancia: media

La etiqueta <meta> author: ¿quién es el autor?

Esta metaetiqueta sirve para describir al autor de la página web. Su valor es cualquier cadena de texto. Su uso es muy importante y debe de incluir siempre además de realizar otras acciones específicas como relacionar  al autor de un documento como su perfil de Google+ pero esta no es una acción que sea haga con metadatos. Solo puede haber una metaetiqueta de este tipo.

<meta name="author" content="Javier Iglesia Aparicio" />

Importancia: alta

La etiqueta <meta> description: ¿de qué trata esta página web?

Con esta metaetiqueta describimos la página web: qué contiene, cuál es su tema principal, etc. Atención: su uso es importante porque es el texto que suele aparecer en los resultados de búsqueda, luego conviene cuidar su contenido. Solo puede haber una metaetiqueta de este tipo.

<meta name="description" content="Un blog sobre analítica web, SEO y web semántica: avanzando hacia un SEO semántico" />

Una de las preguntas cruciales: ¿Qué longitud tiene que tener el texto de meta descripción? El estándar no restringe su longitud pero sí lo hacen los motores de búsqueda a la hora de presentar los resultados. Por eso se recomienda que el campo descripción tenga una longitud nunca mayor de 160 caracteres, incluidos los espacios en blanco. Tampoco la hagas muy corta, mínimo 50 caracteres.

Importancia: alta

La etiqueta <meta> generator: ¿con qué herramienta se ha hecho la página web?

Esta metaetiqueta sirve para identificar el software con el cual se ha elaborado una página web. Sólo se puede utilizar una web y no debe añadirse si el sitio web ha sido elaborado manualmente, sin utilizar un software o un gestor de contenidos.

<meta name="generator" content="Joomla 3.0" />

Importancia: baja

La etiqueta <meta> keywords: ¿qué palabras son clave en la página web?

Punto clave, a pesar de que siempre se ponga en cuestión su verdadero valor en el posicionamiento debido a su uso abusivo, la lista de palabras clave, importantes, del contenido de nuestra página web. Su contenido tienen que ser un conjunto de palabras separadas por comas.

<meta name="keywords" content="analítica web, seo, web semántica, seo semántico, analytics" />

A pesar de las dudas sobre su efectividad, ¿quién se atreve a dejar de usarlas? Nadie. Luego es necesario seguir teniendo cuidado en este punto.

¿Cuántas palabras clave se deben añadir? ¿Cuál es la longitud adecuada? La recomendación más extendida es la de no superar un total de 256 caracteres, incluidos los espacios en blanco. Y por palabras es prudente tener entre 5 y 8 palabras clave. Cada palabra clave puede estar constituida por hasta 4 o 5 palabras.

Importancia: alta

La etiqueta <meta> charset: la codificación de caracteres

Una metaetiqueta cuya definición es muy importante pues de nada nos sirve haber elegido bien todas las palabras y contenido de nuestra página si luego el navegador no las muestra adecuadamente por haber elegido una codificación de caracteres distinta a la que utilizamos. Porque no es lo mismo que aparezca analítica web a que aparezca anal^?ticaweb. Siempre se debe especificar la misma codificación de caracteres con la que estemos trabajando en nuestro gestor de contenidos.

Importante: HTML 5 designa la codificación utf-8 como el estándar por defecto y es el que yo también os recomiendo seguir. Para especificar la codificación se usa una metaetiqueta un poco distinta de las anteriores:

<meta name="encoding" charset="utf-8" />

Esta declaración es obligatoria es HTML 5 y sustituye al modo en que se declaraba en antiguas versiones de HTML y en XHTML:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Atención:

• No se deben utilizar ambas declaraciones en simultáneo. Si usamos HTML 5, utilizaremos la primera declaración; en cualquier otro caso la segunda.
• La declaración de codificación siempre tiene que estar en los primeros 1024 bytes del documento HTML.

Importancia: alta

Las metaetiquetas http-equiv

Todos aquellos metadatos que en vez de utilizar name como atributo utilizan http-equiv se llaman directivas pragma. Nunca se deben repetir en una misma página y sirven para crear mensajes de respuesta HTTP e interactuar con el servidor. estas son las opciones actualmente disponibles:

• http-equiv=”content-type”. Para declarar la codificación del documento como hemos visto anteriormente.
• http-equiv=”default-style”. Para definir la hoja de estilos por defecto del sitio web. El valor del atributo content tiene que ser cualquiera de estos valores:
  • El nombre debe coincidir con el valor del atributo title de un elemento link en el mismo documento, y dicho elemento link debe de tener un atributo href que indique la localización del archivo de la hoja de estilos.
  • El nombre debe coincidir con el atributo title de un elemento style en el mismo documento, y el contenido de dicho elemento debe de ser una hoja de estilo CSS.

Para aclararlos. Si en nuestra cabecera hemos indicado que usamos una hoja de estilos de este modo <link rel="stylesheet" type="text/css" href="hojaestilos.css" title="hoja-por-defecto" />, entonces podemos hacer esta declaración:<meta http-equiv="default-style" content="hoja-por-defecto" />.

Igualmente, si dentro de la web tenemos un código CSS descrito así: <style type="text/css" title="estilo2">body{color:black;}</style>, entonces podremos definirlo como estilo por defecto mediante la declaración <meta http-equiv="default-style" content="estilo2" />.

• http-equiv=”refresh”. Nos permite definir un tiempo de refresco de la página web e incluso una redirección pasado un tiempo definido. Si sólo hay un valor, tienen que ser una valor numérico entero que indica los segundos que han de pasar para que la página se refresque. Así que si escribimos <meta http-equiv="refresh" content="300" />, la página se refrescará pasados 5 minutos. Si además queremos indicar que pasado un tiempo se dirija a una página nueva, deberemos escribir: <meta http-equiv="refresh" content="300; URL=nuevapagina.html" />. De esta forma, pasados 5 minutos cargaremos nuevapagina.html.
• http-equiv=”X-UA-Compatible”. Para indicar compatibilidades con navegadores.

Existen otras metaetiquetas que se usan pero no están declaradas en el estándar como:

• http-equiv=”set-cookie”, para crear una cookie HTTP. Se deben usar cabecera HTTP reales para crearlas en vez de esta metaetiqueta.
• http-equiv=”content-language”, para definir el idioma por defecto. Ahora se debe usar el atributo lang en el elemento html: <html lang="es-ES">.

La metaetiqueta robots

Con esta metaetiqueta declaramos cuál deseamos que sea el comportamiento de los rastreadores web cuando indexan nuestro sitio web. El valor del atributo name siempre tiene que ser robots. Y los posibles valores del atributo content son:

• Indexación:index o noindex. Indicamos si queremos que indexe o no nuestras páginas web.
• Seguimiento de enlaces: follow o nofollow. Indicamos si deseamos que el rastreador siga o no siga los enlaces encontrados en el código de la página web

Se permite siempre una combinación de indexación y seguimiento pero que tenga lógica:

• <meta name=”robots” content=”index, follow” />. Permite indexar todo el contenido y seguir los enlaces. Es siempre el valor por defecto así que si no tenemos un meta robots en nuestra página web, los rastreadores siempre asumirán este comportamiento por defecto.
• <meta name="robots" content="noindex, nofollow" />. Ni permitimos indexar ni seguir los enlaces. En este caso nuestra web será invisible para los buscadores.
• <meta name="robots" content="index, nofollow" />. Permitimos indexar pero no seguir los enlaces.
• <meta name="robots" content="noindex, follow" />. No queremos que nos indexen pero si permitimos seguir los enlaces.

Para identificar mejor qué páginas queremos que rastreen o que no rastreen es necesario definir un archivo robots.txt.

Otras metaetiquetas no estándares

Existe una enorme multitud de metaetiquetas propietarias y utilizadas únicamente por algunas aplicaciones. Otras que tratan de aportar metadatos respecto a estándares como Dublin Core. Y otras cuantas que se usan aunque generalmente no les importe a nadie su contenido. Este es un recorrido rápido y sin ánimo de ser exhaustivo.

Facebook y Twitter

Mediante metaetiquetas pasamos información a Twitter y a Facebook cuando alguien comparte un artículo nuestro en esas redes. Estos son algunos ejemplos:

<meta >, <meta > y <meta name="twitter:card" content="summary" />

Información para plantillas responsivas

Si utilizamos una plantilla responsiva en nuestro sitio web, tipo Bootstrap, también se utilizan metaetiquetas para dar información de cómo debe verse en cada dispositivo. Con el ejemplo siguiente indicamos que se tiene que tener como ancho base la anchura del dispositivo e iniciar a escala 1, sin zoom.

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

Verificación de sitios

Para utilizar algunos servicios como las herramientas Google Console Search de Google o Bing uno de los métodos de autenticación es incluir metaetiquetas en la cabecera, como estas:

<meta name="google-site-verification" content="4634ab636e3" /> o <meta name="verification" content="234124dae24" />.

Indicaciones a los navegadores

Por ejemplo, si queremos indicar que un sitio web es adecuado para verse en dispositivos móviles de Apple, podemos decir al navegador Safari que:

<meta name="apple-mobile-web-app-capable" content="yes" />

Con esta:

<meta http-equiv=""X-UA-Compatible" content="IE=edge, chrome=1" />

se indica al navegador Internet Explorer que utilice la versión más avanzada de su intérprete y si dispone del add-on Google Frame para Internet Explorer, que lo utilice, evitando problemas por errores conocidos de Interner Explorer.

Metaetiquetas para incluir metadatos de otros estándares

Si por ejemplo queremos incluir metadatos del estándar Dublin Core, se usan metaetiquetas como estas:

<meta name="dcterms.title" content="Título de la página" /> o <meta name="DC.title" content="Título de la página" />

Otras muchas más

Con el paso de los años se han ido utilizando multitud de metaetiquetas. Algunas estaban especificadas en versiones anteriores de HTML. Estos son algunos ejemplos:

<meta name="date" content="2014-02-19T19:12:31+01:00"/>

<meta name="organization" content="Organización S.A." />

<meta name="lang" content="es-ES" />

<meta name="revisit" content="7" />

¿Sirven de algo? Dependerá del navegador o del rastreador web el hacerlas caso o no, pero si estás interesado en conocer más aquí va un completo enlace: https://gist.github.com/kevinSuttle/1997924