Configura tus páginas para compartir en Facebook

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:

  1. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  2. <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.

share-ogtags-not

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.

  1. <meta http-equiv="Content-Type" content"text/html; charset=UTF-8" />
  2. <title>SEO Parser | Search Engine analysis tool</title>
  3. <meta property="og:url" content="http://seoparser.com" />
  4. <meta property="og:title" content="SEO Parser" />
  5. <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." />
  6. <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.

share-ogtags-yes

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

Comentarios Total 2 comentarios


Gianni
Publicado: 25/03/2015 1:12 am

Te faltó el “og:site_name”

desarrollo de software bogota
Publicado: 13/12/2015 5:14 pm

ya me queda claro no sabia para que eran esas etiquetas

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)