Casi todo sobre Metatags y SEO en español

29-agosto-2011

Seguramente te habrás preguntado que valor aportan las metaetiquetas en cuanto al posicionamiento natural de una web a la hora de realizar la optimización SEO correspondiente.
Pues bien, mediante un twitt y su correspondiente post publicado por Miguel Angel Valero el pasado 25 de Agosto de 2011 encontré la mayor y más completa información al respecto del tema que puedas encontrar en Internet en español, y es por ello que la reproduzco a continuación de manera íntegra y sin apenas correcciones (sólo las imprescindibles de acentos, comas, agregando los atributos title de los enlaces y poco más) porque me parece plenamente acertado tanto el contenido como la manera de contarlo.

Sin más preámbulos vamos con ello:

En esta ocasión vamos a hablar de metadatos, pero a fondo. Diremos qué son e indicaremos cuales son los más importantes para el SEO. Al final hablaremos también de algunos protocolos que facilitan que los sitios y aplicaciones web puedan interactuar con tu sitio web basados precisamente en la implementación de las metaetiquetas oportunas en cada caso. Estás delante de un artículo muy extenso y que perfectamente podría ser dividido en varios, pero he preferido concentrar toda la información en un sólo punto. Sí sólo quieres leer este artículo parcialmente puesto que es muy extenso puedes ir directamente a la parte que te interese mediante los siguientes enlaces que pongo a tu disposición:

• Metaetiquetas “name”
• Metaetiquetas “http-equiv”
• Dublincore
• Open Graph Protocol
• Social Graph

Los metadatos que vamos a estudiar aquí son todos aquellos “tags” (etiquetas de marcado) que empiezan por la palabra meta. Aquí tienes la especificación oficial de los metatags. Puedes encontrarlos dentro de la sección “head” de tu página, sección donde se declaran todos aquellos elementos que no deben mostrarse en la página pero que son importantes para aportar informarción extra a los buscadores. Hay algunas metaetiquetas que debido a que, o bien son obsoletas o bien no tienen relevancia alguna para el posicionamiento, no serán comentadas en este artículo.

Hay dos tipos de metaetiquetas a considerar:

– meta names: contienen las propiedades del documento, por ejemplo el editor utilizado para generar el documento, el autor del mismo, la descripción del sitio, la lista de palabras clave, etc.

– http-equiv: se utilizan para decirle al navegador como mostrar la información del documento considerado. Es decir, se especifican aquí cosas como el juego de caracteres mostrado, tiempo de caducidad de la página, etc. Se tratan pues de metadatos de control. No te preocupes, veremos suficientes ejemplos en este artículo sobre ello.

Nota: Algunos metadatos tienen la misma función y existen en los dos tipos considerados. Se explicarán una vez considerando la posible diferencia si existiera.

Observación: Google explica en sus páginas de soporte que metaetiquetas entiende.

Meta names

Vamos a ofrecer una relación de los meta “names” más utilizados a continuación:

Title(título): el titulo de la página tiene una etiqueta de marcado propia con el siguiente formato: <title>Título de la página</title>. Pero no está demás que además se incluya el meta “title” (daremos un ejemplo a continuación). El contenido de este meta debe corresponderse exáctamente con el contenido mostrado entre las etiquetas “<title></title>”. Es junto al metadato description (descripción) de los más importates para el SEO. No debe tener más de 65 caracteres y además de contener keywords (palabras clave) importantes para tí, debiera ser también navegacional, es decir, además debes indicar al final la página donde esta el usuario, a no ser que estés en la página de inicio, donde puede omitir esto si lo deseas, todo esto en 65 caracteres, de ahí el arte de optimizar este metadato. Puedes utilizar la siguiente herramienta para esta optimización. Si las keywords también están presentes en la url mejor y si forman parte del dominio principal, mejor todavía. Un ejemplo de implementación sería:

<meta name="Title" content="vacaciones - Ofertas de vacaciones -
HALCON VIAJES">

Observación: Alternativamente puede codificarse en su expresión http-equiv como:

<meta http-equiv="title" content="vacaciones -
Ofertas de vacaciones - HALCON VIAJES" />

Puedes ver un ejemplo en la web de Iberia (ctrl + u para ver el código fuente si usas Mozilla Firefox)

Description (Descripción): este metadato también es bastante importante ya que es tu tarjeta de presentación en la hoja de resultados de Google (SERP) y no debe contener más de 155 caractéres; pero te hago una observación importante, si la búsqueda del usuario no contiene palabras clave contenidas en dicha descripción, entonces en el caso de Google tomará el contenido de tu página que si las contenga. Un ejemplo de implementación sería:

<meta name="Description" content="Ofertas de vacaciones en CANARIAS,
BALEARES,EUROPA y CARIBE. Reservar vacaciones de forma segura con
Halcónviajes.com - 902 091 800, 7% DESCUENTO hasta 31 Julio 2011.">

Nota: puedes acompañar el metadato “description” con el atributo lang, de esta manera puedes ofrecer diferentes versiones en diferentes lenguajes de la descripción de la misma página. Ejemplo:

<meta name="description" lang="en" content="the main purpose of
 this page ..." />
<meta name="description" lang="es" content="El principal objetivo
de esta p&aacute;gina es ..." />

Observación: Si has tenido la suerte de que tu sitio haya sido incluido en directorios importantes como DMOZ, Yahoo y MSN los buscadores tomarán la descripción de dichos directorios en lugar de tu metadato “description”. Puedes solucionarlo con los siguientes metadatos:

<meta name="robots" content="noydir" /> (bots no usen yahoo)
<meta name="robots" content="noodp"> (bots no usen DMOZ)
<meta name="robots" content="noodp,noydir"> (bots no usen ambos)
<meta name="slurp" content="noydir"> (bot yahoo no use dir yahoo)
<meta name="msnbot" content="noodp"> (bot msn no use DMOZ)
<meta name="googlebot" content="noodp"> (bot Google no use DMOZ)

Keywords (palabras clave): Este metadato carece de importancia en la actualidad para los grandes buscadores. No obstante se sigue implementando para todos aquellos navegadores minoritarios que sigue haciendo uso de él. No debieran usarse más de 5 ó 6 palabras clave. No voy a extenderme más en explicar este metadato porque, como ya indico, carece de interés para tu posicionamiento. Un ejemplo de implementación sería:

<meta name="keywords" content="vacaciones, ofertas de vacaciones,
vacaciones  en oferta, halcon viajes">

Por cierto, también puede utilizarse el atributo lang para dar una versión diferente de las keywords según el lenguaje considerado. Por ejemplo, la palabra “tuna” en español puede significar conjunto de personas armadas de panderetas y guitarras dispuestas a atormentar al personal con una versión discutible del tema “clavelitos” o similar. Un ejemplo sería:

<meta name="keywords" lang="en" content="tuna,grupo m&uacute;sical
alternativo..." />
<meta name="keywords" lang="es" content="tuna, alternative
band ..." />

Los tres metadatos anteriores forman parte de un ejemplo real, véase el siguiente snippet:

Este snippet se ha obtenido mediante la consulta a Google de “vacaciones”; figura en cuarta posición. Fijaos que en este caso se ha dedicado todo un subdominio para incorporar la palabra clave “Vacaciones” en primera posición en la URL. Por otro lado también es la primera en el título. Recordar que el orden de las palabras clave también influye en la URL y título de la página. La importancia aumenta cuanto más a la izquierda y decrece cuanto más a la derecha. Esta es la principal razón de porqué aparecen cuartos ante la consulta “vacaciones”, pero no la única, además la página tiene un PR4 fruto de que tiene una buena cantidad de enlaces de dominio apuntando directamente a ella. A este nivel no basta con el SEO on PAGE (Seo en la página), en este grado de competencia es necesario apoyarse en el SEO OFF Page (Seo externo o seo fuera de la página) que consiste básicamente en lograr enlaces apuntando a la página. Fijaos que Halcon Viajes no ha renunciado al Branding. Por otro lado la descripción rebasa los 155 caracteres, ante esta situación Google mostrará puntos suspensivos para indicar que no se ha mostrado toda la descripción..

Observación: Puede sorprender, pero si por el motivo que sea no te interesa que se muestre el snippet o la vista previa de tu página puedes utilizar la siguiente metaetiqueta:

<meta name="googlebot" content="nosnippet">

De igual modo también puedes controlar que no aparezca en el snippet el enlace en caché de la página mediante la siguiente metaetiqueta:

<meta name="googlebot" content="noarchive">

También puede especificarse que no aparezca la página como la página de referencia a una imágen mostrada en la hoja de resultados de búsqueda de Google.

<meta name="googlebot" content="noimageindex">

Nota: hay otros usos interesantes del bot de Google, como el indicarle la hora exacta a partir de la cual una página debiera de dejar de ser indexada, por ejemplo una página que informa de un artículo que se va a dejar de fabricar (por ejemplo puede ser el caso de las tabletas de HP…). Se haría con la siguiente metaetiqueta:

<meta name="googlebot" content="unavailable_after:[date]">

Robots. Este metatag también tiene su importancia para el SEO, dependiendo de los valores introducidos servirá para indicar a los buscadores que se sigan los enlaces contenidos en la página o bien que se indexe o no la página en las hojas de resultados de búsqueda. Explicaremos esto con gran detalle a continuación, pero primero te anticipo el formato de uso:

<meta name="ROBOTS" content="lista de valores">

Los valores que puedes utilizar se explican a continuación, en ausencia de este meta o un atributo “content” vacío, el valor por defecto de la página sería el par: INDEX, FOLLOW. Si quieres saber más sobre este tema puedes consultar algunas páginas de la W3C.

• INDEX: valor por defecto, la página será indexada y aparecerá en las hojas de resultados de los buscadores.
• NOINDEX: la página no será indexada por los buscadores.
• FOLLOW: todos los enlaces presentes en la página serán seguidos por los buscadores.
• NOFOLLOW: todos los enlaces presentes en la página no serán seguidos por los buscadores, si sólo quieres que no se siga algún enlace en particular pero si el resto, es mejor declarar follow y en el enlace en cuestión, declarar un rel=”nofollow” como atributo dentro de la etiqueta del enlace (<a rel=”nofollow” href=”url del enlace”>). El atributo rel con el valor “nofollow” es en realidad un microformato introducido por Google en el año 2005. Otros buscadores pueden ignorarlo.
• ALL: equivale a INDEX, FOLLOW (por tanto innecesario)
• NONE: equivale a NOINDEX, NOFOLLOW (me parece también innecesario)

Nota: el archivo robots.txt presente en el directorio raiz del sitio web es prioritario, si existe se menciona que prohiba el acceso a una página determinada, los robots o spiders no leerían los metas de dicha página.

Observación: Si declaras sólo “NOINDEX” se seguirán todos los enlaces aunque no se indexe la página, igualmente si declaras sólo “NOFOLLOW”, la página será indexada aunque no se seguiran los enlaces presentes en ella. Por otro lado aunque Google dice que no se haga y sobre este punto hay controversia por parte de los expertos, en mi opinión considero interesante marcar los enlaces salientes con el atributo rel instanciado con el valor “nofollow” para preservar o no diluir el “pagerank”.

“language”: este metadato se utiliza para especificar el idioma de la página (se especifica el nombre en inglés como valor del atributo content). Algunos ejemplos de uso son:

<meta name="language" content="Spanish">
<meta name="language" content="English">

Si observas las páginas más importantes en lugar de este metadato, utilizan:

<meta http-equiv="content-language" content="en-US">

Lo anterior sería para una página de Estados Unidos. Para una página española sería:

<meta http-equiv="content-language" content="es-ES" />

Nota: “Content-language” también especifica el lenguaje original de la página, ayuda a las arañas o spiders a categorizar el contenido en el lenguaje apropiado. Se puede indicar más de un idioma ya que perfectamente una página puede tener contenido en varios lenguajes. Un ejemplo sería:

<meta http-equiv="Content-Language" content="en-US,fr">

Google: Google dispone de metaetiquetas específicas, veremos las más importantes.

• google-site-verification: se utiliza en la página raiz del sitio para verificar la propiedad del mismo en las herramientas de Webmasters tools. Es buena cosa acceder a dicha herramienta para vigilar el posicionamiento de la página. Un ejemplo de uso sería:

<meta name="google-site-verification"
content="6s08QTaZ33p_it0fKuVYHleg39-IpCKYyw3tvOkTa0I" />

• notranslate:Google puede proporcionar una traducción de la página cuando no coincide con el idioma del usuario que busca. Podemos impedir esto añadiendo la siguiente metaetiqueta.

  <meta name="google" content="notranslate" />

Nota: es posible indicar a Google que no traduzca un determinado fragmento añadiendo class=”notranslate” al elemento de html que nos interese (div, span, etc.).

Revisit-after: Esta metaetiqueta sirve para indicar a los buscadores el promedio con el que modificamos la página para que vuelvan a visitarla e indexar los cambios. Los Buscadores más importantes ignoran olímpicamente esta metaetiqueta. Un ejemplo de uso sería:

<meta name="revisit-after" content="periode" />

Nota: el periodo debe indicarse en unidades completas en el idioma ingles, weeks, days, months… por ejemplo: 14 days, 1 month, etc.

En el siguiente bloque consideramos la Geolocalización, a este respecto tienes aquí un generador de metaetiquetas de geolocalización. Incluyendo estas metaetiquetas facilitas tu geolocalización a los buscadores y aplicaciones web que puedan hacer uso de ella, diferenciandote de tu competencia que no haga uso de ella. Google no las considera, pero otros buscadores como BING sí que les presta importancia. Todo suma, así que mejor implementarlas. Un ejemplo breve de este tipo de “Geo-etiquetas” sería:

<meta name="geo.region" content="ES-VC" />
<meta name="geo.placename" content="Valencia" />
<meta name="geo.position" content="39.470239;-0.376805" />
<meta name="ICBM" content="39.470239, -0.376805" />

Las metaetiquetas “name” siguientes no tienen apenas valor para el posicionamiento.

Author: Esta metaetiqueta sirve para indicar el autor de la página. En principio no tiene valor de posicionamiento, pero… Un ejemplo de uso sería:

<meta name="author" content="nombre del autor" />

Copyright: Si consideras necesario indicar el autor de la propiedad intelectual de los contenidos de tu sitio puedes utilizar esta metaetiqueta de la manera descrita a continuación:

<meta name="copyright" content="nombre de la persona u organización
propietaria de los derechos" />

Generator: Especifica el nombre del editor con el que se ha generado la página web. Es una meta que se suele generarla de manera automática dicho editor.

<meta name="generator" content="nombre-del-editor-del-documento" />

Hay todavía más etiquetas de este tipo que podríamos mencionar pero no es el objeto de este post ser exhaustivo, sobre todo si no aportan nada apreciable al posicionamiento. No obstante, si necesitas algo específico pon un comentario con la metaetiqueta de tu interés al final de este artículo y lo comentaremos expresamente.

Metadatos http-equiv

El estádar HTTP define un buen número de metadatos, veremos los más útiles para ti a continuación.

Content-Type (Tipo de codificación de lo carácteres): este metadato indica el juego de caracteres considerado en el documento. En “content” indicamos a los buscadores que el contenido puede interpretarse en un navegador web en formato html (indiferentemente si se trata de html o xhtm) o texto plano (hay buscadores de sólo texto). El atributo importate en esta declaración sería el charset (juego de caracteres) considerado. En España son usuales los valores ISO-8859-1 y utf-8. De esta manera incorporas la correcta visualización de nuestra querida “ñ” y los acentos en el contenido de la web. Un ejemplo de codificación sería:

<meta http-equiv="Content-Type" content="text/html;
 charset=ISO-8859-1">

Nota: Puedes saber mucho más sobre este metatag visitando está página.

Pragma (control de la caché): este me parece interesante, el valor que se debe emplear es «no-cache«, permite al usuario refrescar su navegador sin deshabilitar la caché. Aunque es un meta name, realmente es un metatag de control, lo pongo en la sección de control porque también tiene su expresión como metatag http-equiv. Algunos ejemplos de codificación serían:

<meta content="no-cache" name="Pragma">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache"> (Internet Explorer)

En el caso del ejemplo valedero sólo para Internet Explorer los valores posibles del atributo content son:

• “public”: el contenido se cacheará en una caché de acceso compartido.
• “private”: el contenido se cacheara en una cache privada.
• “no-cache”: el contenido no será cacheado.
• “no-store”: el contenido será cacheado pero no almacenado. Puedes consultar esta directiva a nivel de encabezado http en el manual de apache y ahí se explica que precisamente la información no se almacenará en una memoria no volatil. No obstante mira dicho manual si necesitases ampliar más tu conocimiento sobre esto.

Expires (tiempo de expiración): indica la fecha a partir de la cual el documento expira y el navegador volverá a cachear esa página. El valor de la fecha ha de estar en formato GMT. Un ejemplo de uso sería:

<meta http-equiv="expires" content="Mon, 15 Sep 2011 11:50:10 GMT">

Si se desea que siempre se renueve la página, es decir que siempre se vuelva a cachear, bastaría con realizar cualquiera de las dos expresiones siguientes:

<meta http-equiv="expires" content="0">
<meta http-equiv="Expires" content="never" >

Esta opción no te la aconsejo porque incrementas el tiempo de carga de la página en el navegador del usuario, con la consiguiente penalización de Google por ello. Ahora bien, si has realizado cambios en la página y durante un tiempo quieres obligar a todos los visitantes que vean la última versión, este es un modo de hacerlo. Pero no está de más que para esto uses el metadato que explico a continuación, que es el apropiado, ya que se ha diseñado precisamente para este fin.

Refresh: este metadato originalmente sirve para refrescar la página. Ahora bien, si en el atributo “content” introduces una url de destino, entonces se hará una redirección hacia dicha url, si además indicas un tiempo en segundos, se cargará la página actual y tras dicho tiempo se hará la redirección a la página indicada. Igualmente si no hay url y sólo hay en el atributo “content” una cantidad, se esperará esos segundos para refrescar la página. El tiempo siempre ha de expresarse en segundos. Vease el ejemplo de uso a continuación.

<meta http-equiv="refresh" content="30;URL="url-destino">

Observación: personalmente me gusta decidir lo que hago y no me gustan las sorpresas, considero mejor mostrar al usuario el pertinente enlace para que sepa donde pueda ir a continuación y decida si lo hace o no. El W3C recomienda no hacer uso de esta metaetiqueta y Google por su parte prefiere el uso de redirecciones 301.

Window-Target: tiene su similitud con el atributo target de un enlace y puedes aplicar los mismos valores: _blank, _self, _parent y _top. Este “metatag” especifica el modo en cómo y dónde se abre la página (en una nueva ventana o pestaña, en la misma, en la ventana «madre» o en una ventana a pantalla completa en exclusiva, respectivamente). Esta especificación viene determinada por el valor del atributo content. De los valores comentados anteriormente el que más interesa para el SEO es el valor “_top”. Determina que la página se muestre a ventana completa, imposibilitando de esta forma que se pueda mostrar dentro de un Frame (marco).

Un ejemplo de uso sería el siguiente:

<meta http-equiv="Window-target" content="_top">

Set-cookie: Es posible establecer cookies también desde un metadato. Un ejemplo de uso sería:

<meta http-equiv="set-cookie"
content="nombre-cookie=valor-cookie;expires=fecha-formato-GMT;
path=url">

Observación: “content” debe albergar el nombre de la cookie y su valor, es conveniente declarar una fecha de expiración en formato GMT de la cookie. En caso contrario se eliminará la cookie en cuanto cierres el navegador. Opcionalmente puedes guardar una url. Se puede declarar este “metatag” para cuantas cookies se necesiten, las cookies tienen diversos usos, por ejemplo pueden utilizarse para detectar la primera visita de un usuario y ofrecerle una versión diferente de la página en su primera visita. Es interesante segmentar a los usuarios y ofrecerles contenido en virtud de sus intereses para aumentar el tráfico pero también las conversiones. Las cookies pueden jugar un papel muy importante en este tema.

P3P: la Plataforma de Preferencias de Privacidad (P3P) es un estándar del W3C con servicio de validación y permite a las páginas web recoger su políticas de privacidad en un documento con un formato estandarizado y fácil de interpretar por los navegadores, de esta manera es posible diseñar interfaces inteligentes que presenten esta información de manera amigable al usuario (persona o máquina) que acceda al sitio. De esta manera es posible configurar navegador del usuario de manera que no necesite leer el documento de políticas de privacidad cada vez que acceda al sitio, es decir lo haría el navegador automáticasmente. Igualmente sería posible conocer las políticas de privacidad del sitio antes de cargar la página y por tanto que dicha página almacene en sus cookies posibles datos nuestros. Se estima que al menos el 15% de las primeras 5000 webs a nivel mundial lo implementan. Su valor para el SEO es discutible, no he encontrado ninguna fuente oficial que se pronuncie en ese sentido. La implementación de P3P si que se haya recogida en algunos documentos de prácticas recomendadas por parte de organizaciones de cierta entidad, por ejemplo esta url de la web del gobierno americano. Debido a este estándar te puedes encontrar un metadato como el que te cito a continuación (tomado de la web de Trivago).

<meta http-equiv="P3P" content="CP=NON DSP COR CURa PSA PSD OUR
BUS NAV STA" />

Date: Especifica la fecha en formato GMT en la que se creó la web. Antes esto podía ser de utilidad a buscadores como Google para encontrar contenido fresco, en el caso de Google con la implementación del algoritmo Google Panda, las webs se indexan en cuestión de minutos en arás de determinar el contenido original y penalizar el contenido copiado. Pienso que no está de más ponerlo, pero ya no es tan importante como lo era antes:

<meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT" />

last-modified: Especifica la fecha de la última modificación en la página web. Un ejemplo de uso sería:

<meta http-equiv="last-modified" content="date" />

Bueno, con este metadato hemos visto las metaetiquetas de este tipo más importantes, todavía queda mencionar algunas, pero no tienen mucho interés desde el punto de vista del SEO, no obstante repito la invitación a considerar cualquier otra metaetiqueta que necesites a través de los comentarios.

¿Hemos terminado? Pues no. En los últimos tiempos han surgido diversos estándares sobre metaetiquetas que no podemos dejar de comentar. Echaremos un vistazo a los más importantes a continuación.

Dublincore

DCMI (Dublin Core Metadata Initiative) ha especificado metaetiquetas para documentos y diversos lenguajes. En esta ocasión sólo vamos a prestar atención a las aplicadas a los lenguajes HTML y XHTML. Hacemos aquí la misma observación que en los apartados anteriores, las siguientes ejemplos son válidos para HTML y XHTML, sin más que quitar o añadir el caracter “/” inmediatamente antes del carácter final “>” según corresponda.

Estas metaetiquetas son entendidas por los buscadores más importantes. Las etiquetas que hemos explicado anteriormente ayudan y son necesarias para definir aspectos importantes de las páginas (si se cachean, si se indexan, si se siguen los links, etc), cierto es que los metadatos anteriores no sólo aluden a datos técnicos como los recien comentados y también tenemos algunos datos que atañen al autor, derechos de propiedad intelectual, etc. Pero esos metadatos se nos quedan cortos a la hora de buscar o intercambiar información. Para esto necesitamos menos datos técnicos y más datos que aludan a la naturaleza intrinseca del documento en sí. Esta ha sido la motivación final de la norma Dublincore.

Un inciso previo sobre el lenguaje utilizado. Aunque lo normal es usar el elemento meta, es mejor para aquellos recursos suceptibles de contener una url el usar el elemento “link” mejor que el meta. No obstante te pongo un ejemplo con el meta para que veas cómo se detalla:

<meta name="DC.Identifier" scheme="URI" content="http://catalog.loc.gov/67-26020">

Más adelante verás un ejemplo con este mismo elemento (identifier) pero codificado instanciado con una etiqueta link.

Si utilizas link y quieres detallar el lenguaje del recurso, puedes añadir el atributo hreflang=”» con el valor apropiado (ver ejemplo); en cambio si utilizas la etiqueta meta, debieras utilizar xml:lang=”» con el mismo fin. Ejemplos:

<meta name="DC.subject" xml:lang="en-GB"
content="seafood" />
<meta name="DC.subject" xml:lang="fr"
content="fruits de mer" />
<link rel="DC.relation" hreflang="en"
href="http://www.example.org/en/" />
<link rel="DC.relation" hreflang="de"
href="http://www.example.org/de/" />

En la wikipedia se ha realizado una clasificación que me parece muy apropiada y fácil de entender. Me permito aquí el seguimiento de esta clasificación por lo didáctica que resulta para el tema que estamos considerando. La norma Dublincore ha definido 15 elementos que pueden clasificarse en tres grupos.

• Contenido del recurso
• Propiedad intelectual
• Instanciación del recurso

Algunos de estos elementos permiten grados de refinamiento (ejemplo title, te daré un ejemplo en dicho punto), no los veremos aquí pero si quieres saber más sobre ello, puedes visitar esta página para ver ejemplos de ello. Ahora bien, si quieres tener clara la sintaxis de cada elemento mejor visita esta otra.

Adelante pues con cada uno de estos grupos:

Contenido:

• Título (Title): Debiera coincidir con el título dado a la página web. Ejemplo: <meta name=”DC.title” content=”Services to Government” /> (un ejemplo de grado de refinamiento sería la declaración de un título alternativo, esto sería: <meta name = “DC.title.alternative” content= “titulo alternativo el que sea” />

• Asunto del documento (Subject): Se describe aquí las palabras clave o incluso un texto o descripción sobre el propósito de la página. Se puede anexar lenguaje formalizado, listas de clasificación, etc. Ejemplo: <meta name=”DC.subject” content=”artículo sobre el seo en los metadatos; Dublin Core, Schema org; Geo Tags”>

• Descripción (Description): No se trata de una descripción al uso de la realizada en la metaetiqueta “description” vista anteriormente. No se trata de atraer en una hora de resultados de Google. En esta ocasión la descripción debe estar referida al contenido de la página. Debiera ser un breve resumen sobre dicho contenido o una descripción de los elementos mostrados en el caso de ser información visual. Ejemplo: <meta name=”DC.description” content=”Seo en tus metatiquetas. Consideraciones sobre Dublin Core y otras normas similares.”>

• Fuente (Source): Cadena alfanumérica para denotar la fuente de la que se ha derivado el contenido de la página actual, no tiene porque ser una url, tambien puede ser un código ISBN si se tratase de un libro por ejemplo. Ejemplo: <link rel=”DC.Source” href=”http://es.wikipedia.org/wiki/Dublin_Core” />

• Lenguaje (Language): Se específica el idioma de la página. Es posible especificar más de un idioma. Ejemplo: <meta name=”DC.language” content=”en;fr”>
• Cobertura (Coverage): se trata del ámbito de acción geográfica o temporal del contenido considerado. Ejemplo: <meta name=”DC.coverage” content=”World”>

• Relación (Relation): indica el tipo de relación del contenido considerado. Puede ser parte de una obra (IsPartOf), una versión (IsVersionOf), si es parte de una colección de más elementos, es decir, si hay más partes a considerar que la presentada en el contenido (HasPart), o bien si el contenido está basado en otro contenido de diferente naturaleza, por ejemplo, se está presentando el trailer de una película que a su vez está basada en un libro (isBasedOn), en el contenido hay presentes citas (References), o bien puedes aludir a otras personas, instituciones, sitios webs que hayan podido referenciar tu contenido (IsReferencedBy), otras relaciones de otra naturaleza como adaptaciones del contenido (isBasisFor), que el contenido considerado requiera o dependa de algún recurso previo (Requieres) sería el caso de algunas librerias, por ejemplo de un lenguaje servidor, también puede expresarse lo anterior como (isRequiredBy), por ejemplo la información codificada de una imagen (IsFormatOf), también podría especificarse la relación anterior como (HasFormat). He aquí un buen ejemplo (omitiré los metadatos no vistos todavía):

<meta name="DC.title" content="Candle in the Wind" />
<meta name="DC.subject" content="Diana, Princess of Wales">
<meta name="DC.description" content="Tribute to a dead princess">
<meta name="DC.language" content="en">
<meta name="DC.relation"content="IsVersionOf Elton John's 1976 song
Candle in the Wind">

Propiedad Intelectual:

• Autor o Creador (Creator): persona, entidad u organización que ha creado el contenido considerado. Ejemplo: <meta name=”DC.creator” content=”Miguel Valero”>

• Editor (Publisher): la entidad responsable de mantener el contenido disponible en la red. Ejemplo: <meta name=”DC.publisher” content=”Asociación de Medios Digitales de la Comunicad Valenciana”>

• Otros Colaboradores (Contributor): Otras personas, entidades u organizaciones que también han aportado contenidos. Ejemplo: <meta name=”DC.contributor” content=”ONCE”>

• Derechos (Rights): se trata de la típica nota legal donde se detallan los derechos de uso, tipo de licencia, etc. Ejemplo: <link rel=”DC.Rights” href=”http://www.miguel-valero.es/aviso-legal” />

Instanciación:

• Fecha (Date): Fecha en la que se presenta el contenido al usuario. Ejemplo: <meta name=”DC.date” content=”2011-01-26″>

• Tipo del Recurso (Type): Tipo de recurso (texto por ejemplo) pero también puede indicar la categoría, por ejemplo, una página personal. Ejemplo: <meta name=”DC.type” scheme=”DCMIType” content=”Personal Website”>

• Formato (Format): Formato del lenguaje o del tipo de datos utilizado para mostrar el contenido, debiera utilizarse vocabulario formal como por ejemplo la lista de los tipos MIME. Ejemplo: <meta name=”DC.format” scheme=”IMT” content=”text/html”>

• Identificador del Recurso (Identifier): Vale aquí lo dicho para Fuente, se trata de una cadena alfanumérica que identifica el contenido de manera única. Puede ser una URL, un código ISBN, etc. Ejemplo: <link rel=”DC.Identifier” href=”http://www.miguel-valero.es/” />

Puedes ver un ejemplo de implementación de esta norma en la web de la BBC (haz clic en ctrl+u si usas Mozilla Firefox o Chrome para ver el código fuente): http://www.bbc.co.uk/mundo/

Metaetiquetas para redes sociales

Es tedioso tener que ir añadiendo scripts cada vez para interactuar con los sitios más importantes, en lugar de esto es más interesante usar una serie de protocolos que facilitan a esos sitios importantes interactuar con tu sitio. En este artículo estoy hablando de metadatos para el posicionamiento natural, pero dado el reconocido poder y el papel cada vez más importante que juegan las redes sociales en la difusión de tus contenidos y por tanto la alta cuota de tráfico que te pueden aportar y esto precisamente es lo que persigue el SEO, un incremento notable de tu tráfico, no puedo hacer otra cosa que hablar de los protocolos más importantes.

The Open Graph Protocol

El protocolo Open Graph es un protocolo desarrollado por Facebook (que también entiende BING) cuando compartes un enlace de tu sitio en Facebook, si has implementado los correspondientes metas en la página (debieran implementarse en todas las páginas de tu sitio) mostrará mucha más información que dicho simple enlace, por ejemplo, una imagen, el título de la página, la descripción, la url, etc…, todos estos elementos los defines tú previamente utilizando los metadatos que definen este protocolo. Te los enumero a continuación:

<meta property="og:title" content="el título de tu sitio"/>

<meta property="og:type" content="lista de valores aquí"/>

<meta property="og:url" content="url de tu sitio o del post"/>

<meta property="og:image" content="url de la imagen a mostrar"/>

<meta property="og:site_name"
content="El nombre del sitio web por ejemplo Seo Adictos 24H"/>

<meta property="fb:admins" content="Tu Id en facebook"/>

<meta property="og:description" content="Descripción página" />

Pero todavía hay muchos más, puedes aprender más visitando la página oficial de Facebook.

Por ahí hay un ejemplo de como dar datos completos para facilitar la geolocalización (dos primeras líneas) y los datos de contacto (siguientes):

<meta property="og:latitude" content="37.416343" />
<meta property="og:longitude" content="-122.153013" />
<meta property="og:street-address" content="1601 California Ave" />
<meta property="og:locality" content="Palo Alto" />
<meta property="og:region" content="CA" />
<meta property="og:postal-code" content="94304" />
<meta property="og:country-name" content="USA" />

Realmente se puede mostrar información de casi todo: una película, un disco, un producto, etc. Facebook es una red social con 500 millones de usuarios que tiene una gran importancia en el tráfico web a nivel mundial. Puedes ver que la web de Cocacola en España implementa estos metadatos (haz clic en ctrl + u para ver el código fuente si usas Mozilla Firefox o Google Chrome).

Social Graph

Con Google tengo un dilema. Por su parte también está desarrollando su propia api sobre grafos sociales, pero no funciona instanciando metaetiquetas en la página, lo hace mediante microformatos, pero ya que he abierto la caja de Pandora al menos debo dar una pequeña referencia. Esta API interactúa sólo con información pública y está basada en estándares abiertos como los microformatos XFN (XHTML Friends Network ) y FOAF (Friend of a Friend) entre otros. Que las webs implementen estos microformatos permiten la aparición de herramientas capaces de ver que webs están relacionadas con la tuya, o bien qué personas están relacionadas con tu web.

Esta api funciona con parámetros y actualmente sobre el protocolo seguro https (todavía valen las llamadas sobre http). Un ejemplo de uso sería:

https://socialgraph.googleapis.com/<method_name>?<parameter 1>
&<parameter 2>&<parameter n>

Los métodos disponibles actualmente son:

• lookup: Te da un acceso de bajo nivel al grafo social que quieras explorar. Para comprender la salida de información que se genera, te invito a probar esta herramienta introduciendo la url de tu sitio web.
• otherme: dado un identificador único de una persona (puede ser una url, un email etc), este método te devolverá toda la información pública de esa persona en redes sociales.
• testparse: Sirve para testear tu sitio y encontrar personas relacionadas con tu sitio. Puedes probar la herramienta para comprender la salida generada introduciendo la url de tu sitio web.
• geturl: Dado un nodo correspondiente a un grafo social, por ejemplo un pérfil de una red social como Twitter, se te devolverá la url completa del tipo que estes considerando por ejemplo, un feed rss de dicho usuario en Twitter. Mira el ejemplo oficial.

Particularmente recomiendo usar este artículo a modo de checklist a la hora de optimizar los sitios web que administres, siendo este uno de los motivos a reproducirlo en mi blog.

Gracias a Miguel Angel por compartirlo, espero desde aquí que te guste como ha quedado maquetado y corregido y te animo a continuar en la misma línea.

Escrito por: aqua2webs Publicado en Facebook, Posicionamiento SEO, Redes Sociales, Twitter Etiquetado con Bing, Dublincore, facebook, google, metaetiquetas, metatags, opengraph, socialgraph, twitter, W3C