Añadir etiquetas META para protocolo Open Graph de Facebook en Blogger

El Protocolo Open Graph permite a las páginas web integrarse en la gráfica social. Por ejemplo, si se incluyen las etiquetas de apertura de gráficos, tendrá la capacidad de tratar a su misma página como página de Facebook. Además, si ha agregado el Botón Plus One para Blogger, también puede ayudarte para obtener su página integrada en el gráfico social de Google +.

Para activarlo es necesario agregar etiquetas <meta>. En este tutorial te diré cómo agregar estas meta tags a Blogger para que Facebook, Google + y otros sitios de redes sociales pueden recoger la información estructurada sobre su blog y páginas de entrada.

Antes de empezar, vamos a discutir sobre qué Etiquetas META importantes deben o pueden ser incluídas en Blogger.

og:title

<meta expr:content='data:blog.pageName' property='og:title'/>

Titulo del Objeto, por ejemplo: El titulo de la página o del post.

og:type

<meta content='blog' property='og:type'/>

Tipo de Objeto, por ejemplo: "Blog" para la página principal y "article" para las páginas estáticas y posts. Este en concreto es para la página principal del blog.

<meta content='article' property='og:type'/>

Y este para las páginas estaticas y posts.

og:url

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

La URL de la página donde nos encontramos.

og:image

<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.logo-de-tu-blog.jpg' property='og:image'/>
</b:if>

Hace poco tiempo, Blogger ofrece la posibilidad de incluir una miniatura del post en concreto donde queramos (Si previamente hemos incluido al menos una imagen en el post), con 'data:blog.postImageThumbnailUrl' tenemos una miniatura del post de 72px x 72px. Con esto incluimos una imagen en concreto para cada post. Si piensas que igual el botón "Me gusta" funciona perfectamente y que muestra las imágenes, ya que se agrega al mensaje, entonces no es necesario añadir esta etiqueta. La imagen para esta etiqueta debe tener mas que 50px x 50px, con una relación máxima de aspecto de 3:1 y debe estar en formato JPEG, GIF o PNG.

og:site_name

<meta content='El nombre del blog' property='og:site_name'/>

El nombre del blog, solo tendrás que sustituir "El nombre del blog" en la etiqueta.

og:description

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/><b:else/><meta content='Descripción personalizada' name='og:description'/></b:if>

Descripción del objeto, para mostrarlo correctamente, es necesario habilitar la opción de metadatos de Blogger, en la nueva vista de Blogger ir a Configuración -> Preferencias de búsqueda -> Etiquetas Meta y habilitar la opción indicando una metadescripción general para el blog. Luego en cada edición de posts, en la columna de la derecha, ir a Descripción de búsqueda e indicar una descripción para cada posts que escribas.

fb:admins

<meta content='tu-ID-de-perfil-de-Facebook' property='fb:admins'/>

Es opcional, funciona para el Facebook Open Graph, puedes elegir si incluyes esta etiqueta meta o no. Solo tendrás que sustituir "tu-ID-de-perfil-de-Facebook" por el Número de identificación de tu perfil de Facebook (la manera más fácil de conseguirlo en escribir esta URL en tu navegador (después de haberse logueado en Facebook) https://graph.facebook.com/tuNombreDeUsuario). Esta meta sirve más para moderar o administrar los comentarios del plugin "Facebook Comments Plugin".

fb:app_id

<meta content='ID-de-la-aplicación-Facebook' property='fb:app_id'/>

Esta también es opcional, ya que es necesario si te has inscrito para aplicaciones de Facebook. Reemplace "ID-de-la-aplicación-Facebook" con el identificador de la aplicación dada por Facebook. También sirve para moderar o administrar los comentarios del plugin "Facebook Comments Plugin" y también para configurar los permisos de publicación de los comentarios, para saber más ver http://developers.facebook.com/docs/reference/plugins/comments/. Si queréis mas información sobre el plugin de comentarios de Facebook y su configuración, dejarme un comentario (por no adentrarme en otro tema ahora... :P).

Cómo incluir las etiquetas <meta> en Blogger

Paso 1: Ir a la pantalla principal de Blogger, seleccionar el blog en el cual queremos incluir las etiquetas e ir a Plantilla (Diseño en la vista anterior de Blogger) -> Edición de HTML.

Paso 2: Buscar en la etiqueta <html> el atributo marcado en negrita:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>

Después de esto, agregar este Namespace del protocolo Open Graph:

xmlns:og='http://ogp.me/ns#'

Quedará así:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

Si ya ha añadido el Namespace para el XFBML Facebook anteriormente, la etiqueta completa se verá así:

<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>

Paso 3: Buscar la etiqueta <head> y debajo de ella incluir lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.el-logo-de-tu-blog.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/><b:else/><meta content='Descripción personalizada en caso de no haber indicado la metadescripión del sitio' property='og:description'/>
</b:if>
<meta content='el-id-de-la-aplicación-Facebook' property='fb:app_id'/>
<meta content='tu-id-de-perfil-de-Facebook' property='fb:admins'/>

Para usuarios avanzados

Se crea una cierta controversia sobre cuándo usar la propiedad "blog" de og:type, ya que como lo indica en Facebook, debe ser usado en la raíz de un dominio y el "article" se debe utilizar cuando se representa un artículo de noticias, blog, fotos, video, etc . Así que las etiquetas META que se pueden agregar son (con precaución):

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.el-logo-de-tu-blog.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/><b:else/><meta content='Descripción personalizada en caso de no haber indicado la metadescripión del sitio' property='og:description'/>
</b:if>
<meta content='ID-de-tu-aplicación-Facebook' property='fb:app_id'/>
<meta content='ID-de-tu-perfil-Facebook' property='fb:admins'/>

Paso 4: Guardar las modificaciones de la plantilla.

Verificar si están correctas las <meta> que has introducido en Blogger en este enlace http://developers.facebook.com/tools/debug.

Lo tengo hecho y funcionando en este blog y en otros, para cualquier duda, dejar un comentario y si os ha servido de ayuda este tutorial, Twittear o "Me gustear" este post o este blog :).

"Si tiene algún proyecto web que le gustaría desarrollar, si quiere anunciarse gratis en nuestra web o solo para conocer las múltiples posibilidades para mejorar su trafico web, contacte con comercial@epoint.es o visite www.epoint.es"