INTEGRACIÓN DE ETIQUETAS OPENGRAPH CON YII2

Open Graph es un protocolo que, añadiendo etiquetas en las cabeceras de las páginas web, permite convertir éstas en objetos utilizables por otras aplicaciones. Este protocolo es empleado por Facebook y Twitter para generar, a partir de una página web, un objeto con la misma funcionalidad que el resto de objetos de Facebook o Twitter Cards.

En este artículo se va a mostrar cómo incorporar etiquetas Open Graph a una página web empleando el Framework Yii2. En primer lugar, se mostrará como configurar el componente para poder hacer uso del mismo. A continuación se explicará cómo incorporar las etiquetas Open Graph a nuestras páginas web. Finalmente, se mostrarán los resultados obtenidos.

 

Configuración

Para poder emplear la implementación de Open Graph de Yii2, es necesario añadir el componente ‘opengraph’ en el fichero de configuración de su proyecto, como se muestra a continuación:

 

Uso

Una vez añadido el componente Open Graph, en el controlador de Yii2, antes de generar la vista, se deben dar valores las distintas propiedades de OpenGraph. Por cada una de las propiedades de Open Graph que se configure, el componente añadirá en la cabecera de nuestra página web una etiqueta con la correspondiente información.

A continuación se enumeran varias de las propiedades de Open Graph que pueden ser empleadas:

  • title: título.
  • description: descripción a mostrar.
  • type: tipo de elemento al cual se le están añadiendo las etiquetas de OpneGraph. Algunos de los tipos posibles son ‘website’ o ‘article’ entre otros.
  • url: url del sitio web o artículo.
  • image: imagen a mostrar. Esta imagen debe tener un tamaño de al menos, 200×200 px para que sea mostrada correctamente.
  • locale: idioma empleado en el título y descripción.

Algunas las propiedades de Open Graph, como ‘url’, ‘title’ o ‘locale’, se inicializan con valores obtenidos de la sesión de Yii si no se les da ningún valor de forma explícita. Es importante tener esto en cuenta, ya que si el valor asignado no es un valor válido de acuerdo con el estándar Open Graph (cómo puede ocurrir con ‘locale’), se produciría errores cuando otra aplicación intentase procesar las etiquetas Open Graph de muestra página web.

A continuación se muestra, a modo de ejemplo, el código que se emplearía en el controlador de Yii2 para añadir etiquetas Open Graph para un anuncio de filtro de aceite de coches

Resultados

Empleando el componente Open Graph de Yii2, se añaden en la cabecera del html de nuestras páginas etiquetas con la correspondiente información. A continuación se pueden ver las etiquetas html que se añadirían a la página web del ejemplo anterior:

El objeto creado por Facebook a partir de las etiquetas de Open Graph añadidas en este anuncio de aceite sería el siguiente:

ejemploOpenGraph