Hola a todos!

Un saludo especial para todos aquellos que nos dedicamos al seo en valencia y al posicionamiento web en general. En esta ocasión vamos hablar de las metaetiquetas. Diremos que 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 basados precisamente en el uso de metaetiquetas. Estas delante de un artículo muy extenso y que perfectamente podría haber 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 puedes ir directamente a la parte que te interese mediante los siguientes enlaces que pongo a tu disposición:

• Metaetiquetas “name”
• Metaequiquetas “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 información extra a los buscadores. Hay algunas metaetiquetas que debido a que o bien son ya obsoletas o bien no tienen relevancia alguna para el posicionamiento no serán comentadas.

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 instancie 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 importantes para el SEO. No debe tener más de 65 caracteres y además de contener keywords (palabras clave) importante 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 optimizacion. 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 caracteres 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 o 6 palabras clave. 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 afectar al personal con una versión discutible del tema “clavelitos” o similar, pero en inglés, “tuna” significa atún. 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 titulo. 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 este nivel no basta con el SEO on PAGE (Seo en la página) ante 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 Halcón 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 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 imagen 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 tambien 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” vacio 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” rel=”nofollow”>). 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 hay se menciona que prive 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 no obstante 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: ejemplo 14 days, 1 month, etc.

En el siguiente bloque consideramos el la Geolocalización, a este respecto tienes un generador de este tipo de metaetiquetas aquí. Instanciando estas metaetiquetas facilitas la tu geolocalización a los buscadores y aplicaciones web. Google no las considera pero otros buscadores como BING si 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. 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 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 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. No obstante si lo necesitas pon un comentario con la metaetiqueta de tu interés al final de este artículo y lo comentaremos.

Metadatos http-equiv

El estandar 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 considerado. En España son usuales los valores ISO-8859-1 y utf-8. De esta manera incorporas nuestra querida “ñ” y acentos. 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"> (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 volátil. 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. 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á demás que para esto uses el siguiente metadato que explico a continuación que es el apropiado ya que se ha diseñado para este fin.

Refresh: este metadato originalmente sirve para refrescar la pagina. 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 solo 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 como se abre la página. Esta especificación viene determinada por el valor del atributo content. De los valores comentados anteriormente el que más nos 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 eliminara 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. En principio yo no las uso en este sitio web de caracter personal.

P3P: la Plataforma de Preferencias de Privacidad (P3P) es ya todo 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áticamente. Igualmente y esto es una gran ventaja 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 el algunos documentos de mejores prácticas de organizaciones de importancia, por ejemplo esta url de la web del gobierno americano. Debido a este estándar, te puedes encontrar en las webs de importancia 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 aras de determinar el contenido original y penalizar el contenido copiado. Pienso que no está demás ponerlo pero que ya no es tan importante.

<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.

¿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 validos para HTML y XHTML, sin más que quitar o añadir el carácter “/” inmediatamente antes del carácter final “>” según corresponda. Por cierto si quieres beber de la fuente original (en inglés) te invito a visitar el siguiente enlace.

Estás 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 solo aluden a datos técnicos como los recién comentados y también tenemos algunos datos que atañen al autor, derechos de propiedad intelectual, etc. Pero esos metadatos en este aspecto 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 intrínseca 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 susceptibles 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 como 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 esto.  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 alterntivo, 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 hoja 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, también 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 mas 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 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, 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 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 tambien entiende BING) cuando compartes un enlace de tu sitio en facebook, si has implementado los metas en la página (debieran implementarse en todas las páginas de tu sitio) mostrará muchas 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 tu 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 de todo, una película, un disco, un producto, etc. Facebook es ya una red social con 500 millones de usuarios tiene su importancia. Puedes ver por ejemplo 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).

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 que 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 estés considerando por ejemplo un feed rss de dicho usuario en Twitter. Mira el ejemplo oficial.

Bueno esto ha sido todo por favor no olvides en compartir la información en tus redes sociales favoritas. Es un pequeño clic para tí pero gran un gran paso para este blog. Amen!

Miguel Valero

Desarrollador Web y Analista Seo en Valencia