Integrar el protocolo OpenGraph en Genesis
Cada vez que alguien comparte una página en Facebook o Google+, estas plataformas intentan obtener información del documento para generar la vista previa que verá el resto de los usuarios.
Si no proporcionamos esa información, la red social intentará adivinar cuál es el título, la descripción o la imagen que mejor representan nuestro contenido. Algunas veces el resultado es aceptable, pero otras termina mostrando una imagen equivocada o un fragmento de texto que no dice absolutamente nada.
El protocolo Open Graph resuelve precisamente ese problema.
Mediante un conjunto de etiquetas HTML podemos describir el contenido de una página para que las redes sociales sepan exactamente qué información utilizar al compartirla.
Gracias a que Facebook publicó este protocolo, cualquier sitio puede integrarse con las principales redes sociales sin depender de una plataforma específica.
Podemos describir un artículo, una fotografía, un video, un evento o prácticamente cualquier tipo de objeto, indicando propiedades como el título, la descripción, la dirección del recurso, el idioma o la imagen que debe acompañarlo.
En Cyberia.MX decidí generar estas propiedades directamente desde Genesis Framework.
Una de las ventajas de Genesis es que incorpora información SEO para cada entrada, por lo que ya disponemos de gran parte de los datos necesarios para construir las etiquetas Open Graph. Sólo necesitamos escribirlas dentro del encabezado del documento.
Integrando Open Graph con Genesis Framework
Las etiquetas Open Graph son metadatos del documento y, por lo tanto, deben generarse dentro del elemento <head>.
En WordPress el lugar adecuado para hacerlo es el hook wp_head.
Ahí registramos nuestra función cyberia_opengraph.
add_action ('wp_head', 'cyberia_opengraph', 15);
El tercer parámetro indica la prioridad con la que WordPress ejecutará la función. En este caso utilizo el valor 15, suficiente para que las etiquetas se inserten junto con el resto de la información del encabezado.
La función únicamente genera las propiedades cuando se está mostrando una entrada individual.
if ( is_single() ) {
...
}
En este ejemplo no agrego propiedades para la portada ni para otras secciones del sitio, aunque naturalmente podrían implementarse siguiendo exactamente el mismo principio.
Las propiedades utilizadas
Las propiedades definidas por Open Graph tienen nombres bastante descriptivos.
Éstas son las que utilizo en Cyberia.MX.
og:title
Corresponde al título del objeto.
Utilizamos el título del artículo mediante:
the_title_attribute('echo=0')
og:site_name
Es el nombre del sitio al que pertenece el contenido.
En mi caso utilizo el nombre del blog acompañado de su descripción.
og:type
Indica el tipo de objeto.
Como todas las páginas que procesa esta función son artículos, utilizo simplemente:
article
og:url
Es la dirección permanente del artículo.
Aquí conviene utilizar get_permalink() y no the_permalink().
La diferencia es importante: get_permalink() devuelve únicamente la dirección, mientras que the_permalink() genera directamente un enlace HTML, que no resulta útil dentro de una etiqueta <meta>.
og:description
Una de las ventajas de Genesis es que incorpora campos SEO propios.
Por esa razón aprovecho directamente la descripción definida para el artículo.
genesis_get_custom_field('_genesis_description')
De esta manera no es necesario mantener una segunda descripción únicamente para Open Graph.
og:locale
Indica el idioma del contenido.
En Cyberia.MX utilizo:
es_LA
correspondiente al español de Latinoamérica.
og:image
Ésta es probablemente la propiedad más importante.
Si no especificamos una imagen, Facebook intentará elegir una automáticamente, y el resultado no siempre es el deseado.
Como buena práctica, cada artículo de Cyberia.MX tiene una imagen destacada, por lo que utilizo directamente la función de Genesis encargada de recuperarla.
genesis_get_image(
array(
'format' => 'url',
'size' => 'cyberia_home'
)
)
De esta forma mantengo un control completo sobre la miniatura que acompañará al artículo cuando sea compartido.
og:image:width y og:image:height
Finalmente indico las dimensiones de la imagen.
Esto permite que las redes sociales conozcan de antemano el tamaño de la miniatura y evita parte del trabajo de detección automática.
El código completo
A continuación se muestra la función completa utilizada por Cyberia.MX.
{% block metafacebook %}
<meta property="og:site_name" content="namespace.mx - Programamos en Python, Django y WordPress">
<meta property="og:locale" content="es_LA">
<meta property="og:type" content="article">
<meta property="og:title" content="{{entry.title}}">
<meta property="og:image" content="http://namespace.mx{% static 'img/namespace.logo.png' %}">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="200">
<meta property="og:image:height" content="200">
<meta property="og:description" content="{{ entry.resumen|truncatewords_html:30|striptags|safe }}">
<meta property="og:url" content="http://namespace.mx{{ entry.permalink }}">
{% endblock metafacebook %}
El resultado
Una vez agregadas estas propiedades, Facebook y Google+ dejan de intentar interpretar el contenido de la página y utilizan exactamente la información que nosotros proporcionamos.
Eso significa que el título, la descripción y la imagen serán siempre los que hemos elegido para representar el artículo.
Aunque el número de etiquetas es pequeño, el efecto es considerable.
Compartir un enlace deja de depender de la forma en que cada red social interpreta nuestro HTML y pasa a estar completamente bajo nuestro control. Además, al aprovechar la información SEO que ya administra Genesis evitamos duplicar datos y mantenemos toda la descripción del contenido en un único lugar.
Usa Genesis Framework
Genesis proporciona una base sólida para construir temas sobre WordPress. Gracias a su sistema de hooks, filtros y funciones auxiliares resulta muy sencillo incorporar características como Open Graph sin modificar el núcleo del framework.