Desde hace un tiempo Google Plus incorporó un formato muy vistoso para compartir enlaces. Este formato incluye una imagen recortada en forma de "serrucho" y el título por debajo. Desde el primer momento en que lo vi quise que mis posts en Google Plus tuvieran ese llamativo formato al compartir mis artículos. He aquí la solución.

Este formato para compartir enlaces se llama "Share preview snippet". En la plataforma para desarrolladores de Google Plus es posible encontrar información detallada del mismo:

developers.google.com/+/web/snippet/

Al insertar un enlace en un post, lo que hace Google Plus es buscar metadatos (metadata, meta información) que contengan información acerca de la página que está cargando (como por ejemplo el título, descripción, autor, imágenes, etc.) para generar una vista previa de la página.

Google Plus soporta diferentes formatos de metadatos: microdatos Schema.org, el protocolo Open Graph y tags HTML <title> y <meta name="description" ... />. Si no encuentra ningún metadato, parsea el contenido de la página para tratar de averiguar el título, descripción, autor, etc. Por supuesto esta situación no es recomendable, ya que la menos precisa de todas.

En general los manejadores de contenido (CMS), como por ejemplo Joomla!, insertan los tags HTML <title> y <meta name="description" ... /> automáticamente. Aunque esta información no es suficiente, ya que al compartir el enlace en Google Plus, el resultado es el siguiente:

Se observa que el título no es adecuado, y la imagen es muy pequeña.

Para solucionar esto es necesario configurar adecuadamente uno de los métodos para especificar metadatos (microdatos Schema.org o metadatos Open Graph) en cada una de las páginas de nuestro sitio.

Afortunadamente para el CMS Joomla! existe una amplia variedad de plugins de terceros disponibles para realizar esta tarea automáticamente a partir del título, descripción y tags de cada artículo:

MetaData - Joomla! Extensions Directory

En mi caso decidí utilizar el plugin Link with Article Images on Facebook, el cual realiza la tarea de forma efectiva. Luego de instalarlo no es necesaria ninguna configuración más que activarlo desde el gestor de plugins. Opcionalmente es posible especificar una imagen por defecto para aquellos artículos que no poseen ninguna. Una vez activado el plugin, cada artículo incluye automáticamente los metadatos Open Graph, por ejemplo:

  <!-- Perfect Link with Article Images on Facebook -->
  <meta property="og:title" content="Cómo ahorrar tinta"/>
  <meta property="og:type" content="article"/>
  <meta property="og:url" content="http://www.linuxito.com/15-miscelaneo/346-como-ahorrar-tinta"/>
  <meta property="og:site_name" content="Linuxito"/>
  <meta property="og:image" content="http://www.linuxito.com/images/2014/4/rymaneco.jpg"/>

Al compartir artículos en Google Plus, el resultado es el siguiente:

Es importante destacar que para que se vea la imagen recortada con forma de serrucho, la misma debe tener al menos 500 pixeles de ancho.

Tanto Google como Facebook poseen herramientas muy útiles que permiten comprobar el estado de los metadatos de nuestras páginas:

www.google.com/webmasters/tools/richsnippets

developers.facebook.com/tools/debug/

Supongo que para otros CMS como Wordpress, Drupal, etc. existen plugins para realizar la misma tarea, sólo es cuestion de investigar un poco.

¡Espero que les sirva!


Tal vez pueda interesarte


Compartí este artículo