Tutorial <meta> HTML

¡Hola! En esta entrada explicaré el funcionamiento de los <meta> tags HTML, etiquetas imprescindibles en nuestra página web.

meta-tags

Los metatags o meta etiquetas son un pilar fundamental en el SEO (Posicionamiento organico en buscadores) y además aportarán información a distintas redes sociales, como nombre, descripción, imagen, icono, etc…

La estructura de una etiqueta <meta> es muy sencilla. Contiene dos atributos esenciales: name y content. En el atributo name tendremos que poner que tipo de metatag es el que vamos a detallar. Y en el atributo content pondremos el contenido.


Content-Type:
Esta meta etiqueta es distinta a la mayoría, como diferencia, en ella no tendremos el atributo name si no el atributo http-equiv. Esta meta informará al servidor el tipo de documento y la codificación de caracteres en el que está escrito (o debe de estar escrito), para así evitar problemas de codificación.

Lo más normal para el desarrollo web es usar la codificación UTF-8_unicode_ci, la cual acepta todos los caracteres unicode, sin tener que determinar a qué idioma pertenece.

El content de esta etiqueta no es editable, tiene una estructura exacta que es la siguiente:

En HTML5 nos bastará con tan solo lo siguiente:


Description:
La meta etiqueta Description es una de las más importantes. En ella especificaremos de forma resumida en que consiste o que se muestra en nuestra web en forma de descripción, como su nombre indica. La longitud idónea para nuestra meta description ha de ser de más de 160 caracteres pero menos de 250. Sintaxis:


Keywords:
La meta etiqueta Keywords también es muy importante en nuestra web, en ella añadiremos las palabras clave de la página en la que se encuentra y alguna palabra clave general de nuestra web. Los tags (o keywords) deben estar separados por comas. La longitud idónea para esta meta es de 25 palabras como máximo e intentar nunca sobrepasar los 500 caracteres. Sintaxis:


Author:
La meta etiqueta Author, como su nombre indica, nos informa del autor de la página o artículo (en el caso de un blog). Habitualmente se suele escribir tal cual el nombre del autor. Pero algunos gestores de contenido utilizan un enlace a alguno de los perfiles personales de redes sociales como puede ser Google+. Sintaxis:


Copyright:
La meta etiqueta copyright informa a quien pertenecen los derechos de autor de la página en cuestión. La estructura interna es a elección de la persona/empresa. Normalmente se opta por añadir © (Caracter del copyright), el año desde el que está registrado hasta la fecha actual, de ser el mismo, solo fecha actual y la empresa o nombre de la persona con el que está registrado. Sintaxis:


Language:
La meta etiqueta language indica el idioma en el que está escrito la totalidad o la mayoría del texto de la página. El nombre del lenguaje tiene que ser el nombre internacional del idioma. Sintaxis:


Revisit:
La meta etiqueta revisit informa al buscador cuando ha de ser su próxima visita. El periodo que se le indicará al rastreador es recomendable que sea similar al periodo de actualización de la página, de tal forma que cada vez que el rastreador nos visite, se encuentre contenido nuevo. La expresión con la que se indica tiene que ser el numero de días seguidos de «day» o «days» según corresponda. Esta etiqueta mejorará la velocidad en la que nuestro sitio será indexado. Si el rastreador visita nuestra web y ve exactamente el mismo contenido que la última vez, tardará mas en volver a visitarnos. Esto hay que tenerlo en cuenta.

Si ya usamos un archivo robots.txt no es necesaria esta meta etiqueta. Sintaxis:


Distribution:
La meta etiqueta distribution informará a al rastreador a que región va dirigida nuestra página web. Si va en general al publico de todo el planeta se determinará como Global, por el contrario, si queremos que se enfoque solo a nuestro país, situaremos en el content el nombre internacional de nuestro país. Sintaxis:


Robots:
La meta etiqueta robots, indicará al rastreador si queremos que se indexe la página y sus enlaces. Esta etiqueta presenta más dificultad, ya que tiene varias posibilidades para el atributo content. Paso a detallarlas:

· All o Index: Cualquiera de estas dos le indicará al rastreador que se puede indexar todo el contenido de la página, tanto la pagina en cuestión como los enlaces internos que presenta.

· None o NoIndex: Cualquiera de estos dos le indicará al rastreador que NO se puede indexar la página, ni los enlaces internos que contiene.

· Follow: Le indicará al rastreador que puede seguir tanto los enlaces internos, como los enlaces externos. Esto es necesario para hacer pingback a páginas amigas y que así dicha página se beneficie a largo plazo del pagerank.

· NoFollow: Justo lo contrario que Follow, no le permitiremos al rastreador que se sigan los enlaces internos u externos. De esta forma no compartiremos nuestro pagerank con el resto de páginas externas compartidas. Hablando a largo plazo, claro.

· Archive: Indica que el rastreador puede archivar el contenido web en su caché, para de esta forma cargar el resultado en los buscadores más rapidamente. La desventaja de esta metaetiqueta, es que si actualizamos alguno de los metatags anteriores en los buscadores se seguirá mostrando tal y como aparecía anteriormente y tendremos que esperar a que actualice la caché.

· NoArchive: Es justamente lo contrario que la anterior, no permite al rastreador archivar en cache información sobre la página.

Estas dos etiquetas no son muy frecuentes en cuanto a uso, pero está bien explicarlas.
También cabe explicar que se pueden unir varias de estas opciones, separadas por comas.

Ejemplos:


Generator:
En el caso de usar un gestor de contenido, entra la posibilidad de añadir la meta etiqueta Generator, la cual indicará con que CMS (Gestor de contenidos) esta generada dicha página. Sintaxis:


Date:
La meta etiqueta Date, en el caso de ser un articulo de un blog, un evento o similar, nos muestra la fecha de publicación. Los formatos de fecha permitidos son ISO9601, RFC822 o FGDC. Sintaxis:


Por el momento creo que he englobado todas las metatags o al menos todas las importantes. Si recuerdo alguna más la añadiré a este glosario.

Si quieres añadir meta etiquetas específicas para la red social Facebook puedes visitar el articulo sobre Tutorial &lt;meta&gt; en Facebook

En la próxima entrega, explicaré el funcionamiento de otras etiquetas como <link> y <base>.

¡Saludos!

Únete a la conversación

1 comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *