unijimpe

Con el uso extendido de las redes sociales es muy común que los visitantes a una web compartan el contenido en Facebook, pero si no tenemos cuidado en la configuración de nuestra página el resultado puede no ser el mejor.

Primera veamos el código de una página que no ha tenido en cuenta la configuración adecuada para ser compartida en Facebook:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SEO Parser | Search Engine analysis tool</title>

Se puede ver que sólo se ha utiliza el tag para el título de la página, si esta se comparte en Facebook se obtiene el siguiente resultado el cual no muestra la imagen de nuestra página y un resumen del contenido.

Utilizando og:tags

Para personalizar el contenido que se desea compartir, Facebook pone a disposición una seria de metatags HTML llamados og:tags, los mas importantes para compartir son los siguientes:

• og:url es el url absoluto de la página que se esta compartiendo.
• og:title es el título que se mostrará al compartir en Facebook.
• og:description es un resumen del contenido que se comparte.
• og:image contiene la ruta de la imagen que se mostrará.

Luego si tenemos en cuenta estas metatags, podemos personalizar el contenido que deseamos compartir para nuestra página.

<meta http-equiv="Content-Type" content"text/html; charset=UTF-8" />
<title>SEO Parser | Search Engine analysis tool</title>
<meta property="og:url" content="http://seoparser.com" />
<meta property="og:title" content="SEO Parser" />
<meta property="og:description" content="SEO Parser is a SEO analysis tool that can examine and understand how to view a Web page on Search Engines." />
<meta property="og:image" content="http://seoparser.com/img/seo-parser.png" >

Con lo cual obtenemos el siguiente resultado, el cual obviamente es muestra de manera correcta el contenido de nuestra web.

Depuración de los og:tags

Finalmente hay que saber que Facebook hace una copia temporal de contenido que se esta intentando compartir, por lo que una vez que se ha intentado compartir este contenido se utilizará posteriormente compartir en Facebook y se actualizará es las siguientes horas.

Entonces para visualizar el contenido final que estamos compartiendo Facebook ha creado una herramienta llamada: Open Graph Object Debugger que muestra: el contenido actual de nuestra página, un resumen de los tags utilizados y alertas en caso falten o esten errados alguns tags.

Mas Información

• Facebook: Basics for Webmasters
• Facebook: Open Graph Object Debugger
• Facebook Open Graph META Tags

Posts Relacionados

• Crear enlaces para compartir en Redes Sociales
• Detectar si un usuario ha hecho Like en Facebook
• Picasa Web Albums
• Adobe Kuler
• Box.net: 1GB Gratis