Google Authorship, Facebook OpenGraph y Twitter Cards

20 de septiembre del 2012 鈥 1032 palabras 鈥 5 min

Una de las t茅cnicas sociales que debes desarrollar en tu sitio son las meta etiquetas, las cuales indican qu茅 informaci贸n vas a pasar a una aplicaci贸n en linea para ser mostrada en los campos disponibles en esta misma. Estas aplicaciones que mantienen una importancia relativa actualmente son:

Muestra de etiquetas sociales

Para agregar estas etiquetas a nuestro sitio web deberemos ser capaces de modificar y agregar etiquetas a nuestro <head></head>, si tienes un theme que llama al header.php, o un layout donde se hagan parciales, deber谩s agregarlo para que surta efecto en todas.

Dependiendo de como adminstres tu sitio, ya sea con PHP o con RoR, las etiquetas deber谩n cambiar dependiendo de cada vista; esto para asegurar una buena pr谩ctica SEO.

Google Authorship

Para mostrar y linkear tu perfil de Google+ directamente a los resultados de Google cuando aparezca en un resultado tu blog o p谩gina web, deber谩s hacer lo siguiente.

Opci贸n uno

Con esta opci贸n se es cap谩z de agregar la autor铆a a los resultados de manera autom谩tica, pero necesitar谩s tener un correo electr贸nico con el mismo dominio de tu p谩gina o blog; si no lo tienes, revisa el paso n煤mero dos.

Primero que nada, comprueba tu correo electr贸nico coincida con tu dominio.

En cada p谩gina, deber谩 existir una firma de autor que te identifique, es decir, un campo que diga por ejemplo: 鈥淒e Alejandro AR鈥 o 鈥淎utor: Alejandro AR鈥.

Deber谩s de ingresar a este enlance, ingresar y comprobar tu correo electr贸nico.

Una vez realizado esto, te tocar谩 esperar, si quieres comprobar que Google est谩 haciendo su trabajo, puedes utilizar la herramienta de pruebas de fragmentos enriquecidos.

Opci贸n dos

Esta agrega la autor铆a de Google de manera manual en conjunto con un enlace a tu perfil. Deber谩s agregar el siguiente link en alguna parte de tu p谩gina web o blog:

<a href="[url_de_perfil]?rel=author">Google</a>

D贸nde [url_de_perfil] debe de ser reemplazado por tu perfil de Google+, para que quede de la siguiente manera.

<a href="https://plus.google.com/101785269533784724692?rel=author">Google</a>

Revisa bien tu enlace antes de subirlo a tu servidor, ya que la parte final de tu url deber谩 ser ?rel=author, de lo contrario Google no podr谩 leer ni asociar el enlace.

El siguiente paso es agregar el sitio a tu perfil de Google+ en la parte de tu perfil de Colaborador en.

Igualmente si quieres comprobar que Google est谩 leyendo el enlace, accede a la herramienta de pruebas de fragmentos enriquecidos.

Puedes ver m谩s informaci贸n consulta este este enlace.

Facebook OpenGraph

OpenGraph es un protocolo que utiliza Facebook para poder leer informaci贸n sobre p谩ginas web que son ingresadas a la red social de manera apuntada y controlada. Esta informaci贸n puede contener desde t铆tulo, descripci贸n, un thumbnail o bien, un video.

Los protocolos m谩s comunes son los siguientes:

Estos protocolos deben de ser agregados entre las etiquetas <head></head>, con el campo <meta ... />. Esto es logrado de la siguiente manera; el siguiente ejemplo es sobre mi art铆culo anterior Google Authorship, Facebook OpenGraph y Twitter Cards:

<meta
  property="og:title"
  content="Google Authorship, Facebook OpenGraph y Twitter Cards"
/>
<meta property="og:type" content="blog" />
<meta
  property="og:description"
  content="Las etiquetas sociales son un elemento importante la promoci贸n correcta en redes sociales y buscadores, esto para posicionar la p谩gina web o blog de manera correcta. 驴Cu谩les son y c贸mo se usan estas etiquetas?"
/>
<meta
  property="og:url"
  content="http://abarcarodriguez.com/blog/google-authorship-facebook-opengraph-y-twitter-cards"
/>
<meta property="og:image" content="http://abarcarodriguez.com/blog/logo2.png" />

Para agregar un reproductor de video, deber谩s agregar la siguiente meta etiqueta:

<meta property="og:video" content="http://ejemplo.com/video.swf" />

Para ver m谩s informaci贸n consulta este enlace.

Twitter Cards

Este m茅todo no est谩 abierto para todos los sitios web, por lo pronto, deber谩s solicitar acceso con la siguiente solicitud, una vez aceptada, tus meta etiquetas funcionar谩n desde Twitter.

Los protocolos que utiliza Twitter son los siguientes.

Deber谩s agregar la siguientes meta etiquetas dentro de tu <head></head> para que sean le铆das por Twitter:

<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="http://concierti.co" />
<meta name="twitter:title" value="Conciertico" />
<meta
  name="twitter:description"
  value="Todos los conciertos en un mismo lugar."
/>
<meta name="twitter:image" value="http://concierti.co/assets/social.png" />
<meta name="twitter:site" value="@conciertico" />
<meta name="twitter:creator" value="@kinduff" />

Una vez agregadas las etiquetas, seremos capaces de ver el contenido en los tuits expandidos. Para ver m谩s informaci贸n consulta este enlace.