Añadir etiquetas META Open Graph Protocol de Facebook en Blogger

• Si te gustó esto, ya sabes....:

  •  
  •  
  •  
  •  
  • 

• Si te gustó esto, ya sabes....:

  •  
  •  
  •  
  •  
  • 

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

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

para cualquier duda, dejar un comentario y si os ha servido de ayuda este tutorial, Twittear o «Me gustear» este post o este blog :).