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 elementolink
en el mismo documento, y dicho elemento
link
debe de tener un atributohref
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.
- El nombre debe coincidir con el valor del atributo
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 elementohtml
:<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
onoindex
. Indicamos si queremos que indexe o no nuestras páginas web. - Seguimiento de enlaces:
follow
onofollow
. 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 property="fb:admins" content="1456677" />
, <meta property="og:title" content="Título" />
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
Excelente artículo, muchas gracias!
Gracias por este artículo, está muy bien explicado y, además, me ha sido útil para comprender y poner en práctica.
Que Dios les bendiga.
hola buenas que diferencia hay entre comilla simple y comilla doble?
No debería de existir ninguna en HTML5 aunque se recomienda utilizar las dobles
Hola, debo dar las gracias, estoy aprendiendo html5, y me sirvió mucho tu post.
Quisera mostrarte lo que hice y ver si me puedes comentar si lo abre hecho bien.
estos dos se usan?
<meta name="url" content=""
Desde ya gracias, seguire muy de cerca su sitio
te lo agradeceria mucho
La meta url se puede usar, no hay problema. Simplemete indica la url del sitio pero no tienen mucho interés. Gracias port us comentarios
Me ayudo mucho a entender la etiqueta meta, gracias
Una duda, arriba en las de ejemplo terminan en “>” y en las explicaciones en “/>” ¿cual sería la forma correcta? gracias
Ambas sirven aunque desde el punto de vista de cumplir estrictamente el estándar es mejor que acabe en “/>”
Buen artículo. Muy claro y conciso.
Muy buen artículo me sirvio mucho. Muchas gracias por tomarse su tiempo y escribir esto jaja
Excelente artículo, definitivamente a favoritos, muy bien explicado. Gracias
Muy buena información y muy clara. 🙂 Gracias
Buen artículo. Me ha aportado bastante.