23

Ago 2014

Las Metaetiquetas y los Formatos Enriquecidos

Las Metaetiquetas y los Formatos Enriquecidos

Las Metaetiquetas y los Formatos Enriquecidos
Las Metaetiquetas y los Formatos Enriquecidos

Las metaetiquetas o metatags son elementos que forman parte del código html de cada página web. Su objetivo es aportar información a los robots de búsqueda y a los navegadores sobre cada página del sitio web.
Tradicionalmente, las metaetiquetas han tenido gran importancia en el posicionamiento SEO. Actualmente, con los cambios en el algoritmo de Google, han perdido importancia respecto a otros factores. Aún así, es imprescindible hacer un buen uso de ellas para optimizar correctamente el sitio.
Las metaetiquetas no son visibles para los usuarios que visitan la página. Algunas de ellas se utilizan para construir el snippet, que es la información que aparece visible sobre cada resultado de búsqueda orgánico.
Este es un ejemplo de la información que aparece en un resultado de búsqueda:
Las metaetiquetas se definen dentro de la cabecera del código html, que se encuentra al principio del mismo y delimitado por las etiquetas <head> y </head>.
Nomenclatura básica de una metaetiqueta
<meta “tipo de etiqueta”=”nombre de la etiqueta” content=”contenido de la etiqueta”/>
Existen dos tipos de metaetiquetas:
 Meta=name. Orientadas a dar información a los robots de búsqueda sobre el contenido de la página.
 Meta=http-equiv. Orientadas a das información a los navegadores sobre como mostrar el contenido de la página.
Vamos a ver detalladamente cuáles son las metaetiquetas más importantes y como utilizarlas correctamente.

Metaetiquetas de tipo “name”

Metaetiqueta title
Su objetivo es indicar el título de página.
Sintaxis de la metaetiqueta title
<meta name=”title” content=”Título de la página” />
IMPORTANTE: Está metaetiqueta está obsoleta y no la tienen en cuenta los principales buscadores.
Por ello, Para indicar el título de la página no se debe utilizar la metaetiqueta title, sino la etiqueta title. Aunque tiene el mismo nombre, no es técnicamente una metaetiqueta pero siempre se considera junto con ellas y su sintaxis es diferente. Hay que tener cuidado de no confundir una con otra. Véase su sintaxis.
Sintaxis de title
<title>Título de la página</title>
La etiqueta title es la más importante de todas las que vamos a ver y que más afecta al
SEO.
Es utilizada por buscadores para generar el título del snippet en los resultados de búsqueda y por los navegadores para mostrar el título de la página en la pestaña o ventana.
Ejemplo de uso de la etiqueta title:
<title>Eimagina: Consultoria web y Marketing Online</title>
Consideraciones importantes sobre el uso de la etiqueta title:
 No debe superar los 70 caracteres incluyendo los espacios en blanco. Tampoco debe ser demasiado corta. Lo ideal, entre 35 y 65.
 Cada página web del sitio debe tener su propio title. En caso contrario, estamos duplicando una parte de la página y eso no es bueno para el SEO.
 Es obligatorio que aparezca en todas las páginas
 Debe incluir la palabra clave principal de la página.
 Debe estar escrita en lenguaje natural y con sentido semántico.
 Dentro del contenido de title se le da más importancia de izquierda a derecha por lo que la palabra clave debe estar lo más al principio posible.
 No se deben repetir las palabras clave.
 No se debe abusar de las letras mayúsculas, signos de puntuación y caracteres especiales.
 Como en los anuncios patrocinados, el título es lo que más resalta, por lo que debe captar la atención del usuario.
Ejemplo práctico.
Vamos a analizar diferentes opciones para crear una etiqueta title para la página web de este curso:
<title>Eimagina: Consultoria web y Marketing Online<| Curso SEO – Posicionamiento en buscadores</title>
Demasiado larga, el buscador la recortará llegando a los 70 caracteres aproximadamente y se verá así: Eimagina: Consultoria web y Marketing Online- …
<title>Eimagina | Curso SEO</title>
No está mal pero es demasiado Corta.
<title>Curso SEO Online – Eimagina- Curso SEO</title>
Repetición de palabras clave, puede parecer poco natural y ser penalizado.
<title>*** Curso SEO Online —– Apúntate!!! —— Eimagina***</title>
Abuso de caracteres especiales.
<title>Eimagina– Curso SEO – Especialízate en Posicionamiento Web‎ </title>
No está mal, pero la palabra clave principal no está todo a la izquierda posible
<title>Curso SEO‎ – Eimagina: Consultoria Online</title>
Mejor que la anterior, pero no induce del todo al clic.
<title>Curso SEO – Especialízate en Posicionamiento Web‎ – Eimagina </title>
Óptima.
Metaetiqueta description
Sirve para informar a los buscadores del contenido de la página, mediante un texto resumen.

Sintaxis de la metaetiqueta description
<meta name=”description” content=”Resumen del contenido de la página” />
Con el texto que incluimos se genera la descripción del snippet en los resultados de búsqueda. Junto con la etiqueta title es la que más afecta al posicionamiento SEO.
Consideraciones importantes sobre el uso de la metaetiqueta description:
 No debe superar los 156 caracteres incluyendo los espacios en blanco. Tampoco debe ser demasiado corta.
 Al igual que el title, debe haber una descripción diferente para cada página del sitio. Si se duplica, afecta negativamente al SEO.
 Debe incluir las palabras claves más importantes de la página. Hay bastantes caracteres, así que es una buena oportunidad para incluir texto relevante pero además con nuestras palabras clave importantes para esa página.
 Debe estar escrita en lenguaje natural y con sentido semántico.
 Se le da más importancia de izquierda a derecha por lo que las palabras claves más importantes debe estar lo más al principio posible.
 Aunque no obligatoria, sí muy recomendable. Si no existe, el buscador elegirá un fragmento del contenido de la página para incluirlo en el snippet en lugar de la descripción. Mejor que eso no ocurra.
 Debe completar la información del título dando un resumen del contenido de la página, pero también aportando valor y llamadas a la acción.
 No se debe abusar de letras mayúsculas, signos de puntuación y caracteres especiales.

Metaetiqueta keywords
Esta etiqueta se utiliza para informar a los buscadores de las palabras clave relevantes con el contenido de la página web.
Importante: Hace años tenía mucha importancia pero desde 2009 Google no la tiene en cuenta para SEO. Ponerla no molesta, pero tampoco esperemos que nos beneficie.
Sintaxis de la metaetiqueta keywords
<meta name=”description” content=”Palabra Clave 1, Palabra Clave 2, Palabra Clave 3…” />
Metaetiqueta robots
Se utiliza para informar a los buscadores de si deben o no indexar y rastrear/seguir la página según los enlaces internos (son dos acciones bien diferenciadas).
Indexar implica que la página aparecerá en los buscadores.
Rastrear/seguir los enlaces internos implica que el robot de búsqueda actúa como si pulsara en los enlaces para llegar a otras páginas que estén vinculadas con ésta.
Es muy importante tenerla en cuenta porque un mal uso puede provocar problemas graves de indexación de nuestro sitio web.
Sintaxis de la metaetiqueta robots
<meta name=”robots” content=”Valor1, Valor2” />
El valor 1 puede ser Index o NoIndex.
El valor 2 puede ser Follow o NoFollow.
Por lo que tenemos cuatro combinaciones posibles:
 Index, Follow – Autoriza la indexación y rastreo de la página.
 NoIndex, Follow – Impide la indexación pero permite el rastreo.
 Index, NoFollow – Autoriza la indexación pero impide el rastreo.
 NoIndex, NoFollow – Impide la indexación y el rastreo.

Si no se define esta metaetiqueta, el valor por defecto es Index, Follow
Otros valores que podemos encontrar en esta Metaetiqueta son:
 All – Equivalente a Index, Follow
 None – Equivalente a NoIndex, NoFollow
Metaetiqueta author
Sirve para indicar a los buscadores el nombre de la persona o empresa autora de la web. No tiene influencia sobre el SEO.
Sintaxis de la metaetiqueta author
<meta name=”author” content=”Nombre del desarrollador de la web” />
Metaetiqueta subject
Su objetivo es similar a la de la metaetiqueta description pero más breve. Debemos indicar cuál es la temática del contenido de la página. No tiene influencia sobre el SEO.
Sintaxis de la metaetiqueta subject
<meta name=”subject” content=”Temática de la web” />
Metaetiqueta revisit-after
Sirve para indicar a los robots de búsqueda la frecuencia con la que se actualiza la página. Google y otros buscadores importantes no la tienen en cuenta. El periodo se especifica en inglés. Por ejemplo, 1 month, 2 weeks, 3 days
Sintaxis de la metaetiqueta
<meta name=”revisit-after” content=”Periodo de actualización” />
Metaetiqueta generator
Se utiliza para indicar el programa con el que ha sido generado el código html, caso de haber usado alguno. En este caso se suele generar automáticamente. No tiene influencia sobre el SEO.

Sintaxis de la metaetiqueta generator
<meta name=”generator” content=”Nombre del programa editor del html” />
Metaetiqueta Copyright
Sirve para indicar quién es el propietario intelectual de los contenidos que se encuentran en la página. No tiene influencia sobre el SEO.
Sintaxis de la metaetiqueta copyright
<meta name=”copyright” content=”Nombre del propietario de los contenidos” />
Metaetiqueta Google-Site-Verification
Sirve para verificar la propiedad del sitio web en las Herramientas para Webmasters de Google (hay varios métodos, usar esta metaetiqueta es uno de ellos). El valor del atributo content se proporciona por dicha herramienta y es diferente para cada sitio web. Por lo tanto, sólo la usa Google y no tiene influencia sobre el SEO.
Sintaxis de la metaetiqueta google-site-verification (ejemplo, ya que
<meta name=”google-site-verification” content=”…” />
Metaetiquetas de geolocalización
Son un grupo de etiquetas orientadas a dar información sobre la ubicación física del propietario de la web. Actualmente sabemos que el buscador Bing las tiene en cuenta pero parece que Google las ignora.
Existen herramientas online que nos permiten generarlas como por ejemplo:
http://www.geo-tag.de/generator/en.html
Ejemplo de Metaetiquetas de Geolocalización para la sede de Google en Madrid (Plaza Pablo Ruiz Picasso, 1, 28020 Madrid):
<meta name=”geo.region” content=”ES-M” />
<meta name=”geo.placename” content=”Madrid” />
<meta name=”geo.position” content=”40.450605;-3.692658″ />
<meta name=”ICBM” content=”40.450605, -3.692658″ />

Metaetiquetas Dublin Core
Se conocen como Metaetiquetas Dublin Core un conjunto de metaetiquetas que ha sido elaborado por la DCMI (Dublin Core Metadata Initiative). Es una organización dedicada a la creación de estándares para diferentes lenguajes.
Muchas de la metaetiquetas Dublin Core que vamos a ver son similares a las que hemos visto anteriormente. Es importante tener en cuenta que no sustituyen a las tradicionales, por lo que es interesante indicarlas junto a las principales.
No se sabe con certeza si los buscadores más importantes las tienen en cuenta, por lo que debemos partir de la base de que tienen un impacto neutral o sólo ligeramente positivo en SEO.
El objetivo de estas metaetiquetas es ampliar la información que dan las tradicionales.
Vamos a ver brevemente algunos ejemplos de estas metaetiquetas:
 Title, título de la página.
<meta name=”DC.title” content=”Título de la página” />
 Subject, temática de la página.
<meta name=”DC.subjetc” content=”Temática de la página” />
 Description, resumen del contenido de la página.
<meta name=”DC.description” content=”Resumen del contenido” />
 Creator, creador del contenido de la página.
<meta name=”DC.creator” content=”Nombre del creador del contenido” />
Metaetiquetas de tipo “http-equiv”
Como hemos comentado antes, estas metaetiquetas están orientadas a proporcionar información a los navegadores sobre cómo mostrar el contenido de la página web.
Sintaxis de las metaetiquetas http-equiv
<meta http-equiv=”nombre de la etiqueta” content=”contenido de la etiqueta” />
Vamos a comentar brevemente algunas de las más importantes:
 Content-Type. Con ella indicamos el conjunto de caracteres con el que está codificado el código html. Cuando al ver una página web detectamos problemas con tildes o con la letra “ñ” suele ser debido a una mala especificación del valor de la metaetiqueta.
Sintaxis de la metaetiqueta Content-Type:
<meta http-equiv=”content-type” content=”Conjunto de caracteres”/>
Ejemplos de uso:
<meta http-equiv=” content-type” content=”text/html; charset=UTF-8”/>
<meta http-equiv=” content-type a” content=”text/html; charset=ISO-8859-1” />
 Content-Language, se utiliza para indicar el idioma de la página web.
Sintaxis de la metaetiqueta content-language:
<meta http-equiv=”content-language” content=”Idioma” />
Ejemplos de uso:
<meta http-equiv=”content-language” content =”en-US” />
<meta http-equiv=”content-language” content=”es-ES” />
 Pragma, se utiliza principalmente para evitar que el navegador guarde la página en su caché.
Sintaxis de la metaetiqueta pragma:
<meta http-equiv=”pragma” content=”no-cache” />
 Expires, también está relacionada con la caché de la página. Se utiliza para indicar al navegador cuando caduca el contenido y debe recargar la web.
Sintaxis de la metaetiqueta expires:
<meta http-equiv=”expires” content=”Fecha de Caducidad” />
Ejemplo de uso:
<meta http-equiv=”expires” content=”Mon, 10 Sep 2013” />

 Refresh, sirve para que el navegador recargue la página pasado un tiempo. Si se añade una URL redirigirá al usuario a esa URL pasado ese tiempo. Google no recomienda su uso.
Sintaxis de la metaetiqueta Refresh:
<meta http-equiv=”refresh” content=”tiempo”;URL=”Destino” />
Ejemplo de uso:
<meta http-equiv=”refresh” content=”15”;URL=”http://www.mistioweb.com” />

Fragmentos Enriquecidos (Rich Snippets)

Introducción a los Rich Snippets
Los Rich Snippets o Fragmentos Enriquecidos nacieron en el año 2009 tras un acuerdo entre Google, Yahoo! y Bing. Su objetivo es que los buscadores entiendan mejor cuál es el contenido de nuestra página desde un punto de vista semántico y así poder ampliar la información que aparece en los resultados de búsqueda, para que el usuario tenga más datos sobre el contenido que tiene una web antes de visitarla.
Como hemos visto, el snippet tradicional está compuesto por el título, la URL y la descripción. Gracias a los Rich Snippets podemos añadir elementos adicionales que nos resulten útiles a la hora de captar la atención del usuario.
El uso de Rich Snippet favorece nuestro posicionamiento SEO y aumenta en gran medida la visibilidad de nuestro snippet en la página de resultados y, por lo tanto, la tasa de clic (CTR). La idea es que si ayudamos a los buscadores a entender mejor cuál es el contenido, tendremos más posibilidades de posicionamiento y visibilidad.
Tipos de Rich Snippets
Vamos a ver algunos ejemplos de los Rich Snippets más importantes:
Rich Snippets de Autor
Muestra información de la persona que es autora del contenido. Se suele utilizar para los blogs y nos permite añadir al snippet, la foto, nombre, empleo, etc.

Rich Snippets de Opiniones
Muestra al usuario una valoración del producto o servicio que ha sido consultado. Está especialmente indicado para comercio electrónico.
Rich Snippets de Recetas
Está orientado a recetas de cocina y nos permite añadir la foto del plato, sus ingredientes, tiempo de preparación, etc.
Rich Snippets de Organizaciones
Aumentan la información acerca de una empresa, añadiendo el teléfono, dirección, etc.
Rich Snippets de Eventos
Permite incluir información sobre eventos, como la fecha, lugar, horario
Rich Snippets de Video
Nos permite insertar una miniatura de un video similar a la que aparece cuando Google nos muestra un resultado de YouTube.
Rich Snippets de Música
Muestran enlaces para acceder diariamente a la reproducción de un tema musical.
Rich Snippets de Noticias
Mostrará el titular de la noticia, una foto, su fecha de publicación, etc.
Rich Snippets Sociales
Nos muestra las veces que se ha compartido o recomendado nuestra página en redes sociales.
Cómo crear los Rich Snippets
Para poder disponer de Rich Snippets en nuestra web es necesario dar a los buscadores información extra para que comprendan el contenido de nuestra página.
Esto se hace mediante el marcado de código html, que no es otra cosa que el uso de etiquetas y atributos especiales en el html. Tenemos varias formas de hacerlo, a través de:
 Microdatos.
 Microformatos.
 RDFa
Marcado con microdatos
Es una forma de etiquetar contenido para describir un tipo específico de información (por ejemplo, opiniones, información sobre personas o eventos). Cada tipo de información describe un tipo de elemento específico como, por ejemplo, una persona, un evento o una opinión. Por ejemplo, un evento incluye las propiedades “venue”, “starting time”, “name” y “category”.
Los microdatos usan atributos simples en etiquetas HTML (con frecuencia, <span> o<div>) para asignar nombres breves y descriptivos a los elementos y propiedades.
Marcado con microformatos
Los microformatos son sencillas convenciones (conocidas como entidades) que se usan en las páginas web para describir un tipo concreto de información (por ejemplo, una opinión, un evento, un producto, una empresa o una persona). Cada entidad tiene sus propias propiedades. Por ejemplo, una persona tiene las siguientes propiedades: nombre, dirección, cargo, empresa y dirección de correo electrónico.
En general, los microformatos hacen uso del atributo class en las etiquetas HTML (que suelen ser <span> o <div>) para asignar nombres breves y descriptivos a las entidades y a sus propiedades.
Marcado con RDFa
RDFa es una forma de etiquetar contenido para describir un tipo específico de información, como la opinión sobre un restaurante, un evento, una persona o una ficha de un producto. Este tipo de información se denomina entidad o artículo. Cada entidad tiene una serie de propiedades; por ejemplo, una persona tiene las siguientes propiedades: nombre, dirección, cargo, empresa y dirección de correo electrónico.
En general, RDFa emplea atributos simples en etiquetas XHTML (a menudo, <span> o<div>) para asignar nombres breves y descriptivos a las entidades y propiedades.
En resumen, cualquier a de estos tres formatos se utiliza para agregar información semántica sobre el contenido de la web, y gracias a ello ayudamos a los robots de búsqueda a entender mejor el contenido.
Con el fin de crear un estándar a la hora de dar esta información extra a los buscadores, Google, Bing y Yahoo! han creado lo que se denomina el “Schema.org”, un conjunto de marcas basado en el uso de Microdatos y compatible con todos estos buscadores. Por lo tanto, recomendamos usar Microdatos para crear los Rich Snippets.
Podemos ver toda la información técnica de los diferentes tipos de Rich Snippets y ejemplos para crearlos mediante Microdatos, Microformatos o RDFa en el siguiente enlace:
https://support.google.com/webmasters/topic/1088474?hl=es&ref_topic=21997

Conclusiones

 Es importante una buena optimización de las metaetiquetas, especialmente en el caso del title y description. Tienen que tener un contenido adecuado, incluyendo nuestras palabras clave, una extensión correcta y no deben duplicarse.

 Gracias a los fragmentos enriquecidos podremos dotar a nuestra web de información semántica, que será utilizada por los buscadores para entender mejor el contenido de nuestra web y poder mejorar la forma que aparecen nuestros resultados de búsqueda.
Como ocurre con otros elementos de los factores On-Page, si nuestra web está creada sobre una plataforma de tipo CMS, tendremos a nuestra disposición plugins y extensiones para gestionar de forma sencilla todo lo relacionado con metaetiquetas y Rich Snippets.

Share this post with the world!

|

Be the first to comment “Las Metaetiquetas y los Formatos Enriquecidos”