Implementar paso a paso los pines enriquecidos

Pines enriquecidos y Twitter Cards

En la última entrada, vimos con detalle cómo integrar las tarjetas de Twitter en nuestro sitio web. Pues bien, en esta ocasión cambiamos a otra red social: Pinterest, una plataforma que nos permite descubrir visualmente todo aquello que nos interesa. En la misma línea que Twitter, Pinterest cuenta con los pines enriquecidos o rich pins que a diferencia de los pines comunes, muestran desde la propia plataforma una serie detalles específicos acerca del contenido compartido.

Los pines enriquecidos funcionan tanto en la versión de escritorio como en la app para móvil y tablet. Para esta entrada, tomaremos de ejemplo uno de nuestros proyectos, Lab School, una escuela de formación cuya web está creada sobre WordPress con el plugin Woocommerce. Actualmente existen solo cinco tipos de pines enriquecidos según el tipo de contenido de nuestro sitio web:

  • Productos. Ver ejemplo
  • Artículos para blog.
  • Recetas.
  • Lugares.
  • Películas.

Esta funcionalidad está enfocada principalmente a usuarios avanzados como editores de contenidos y sobre todo tiendas online que quieran acercar al usuario de Pinterest ciertos detalles relevantes sobre el contenido compartido. Además, todos los pines enriquecidos o no que se compartan en esta red social se podrán medir a través del panel de “Análisis” para conocer su impacto en todo momento.

Los pines enriquecidos pueden configurarse en cualquier página web realizando modificaciones en el código de programación o instalando complementos dependiendo del CMS utilizado. En esta entrada veremos las opciones para incluir los pines enriquecidos en la plataforma WordPress.

Independientemente de la opción escogida para integrar los pines enriquecidos, una vez los hayamos incluido en nuestro sitio web, debemos probar que funcionan correctamente a través de la herramienta de validación que ofrece Pinterest, para ello utilizaremos cualquier enlace de nuestro sitio en el que hayamos habilitado un tipo de pin concreto, y si el resultado es válido, deberemos solicitar a Pinterest su uso para nuestro dominio lo que puede tardar varias semanas. Una vez habilitados, recibirás un correo electrónico de confirmación.

Pines enriquecidos en Lab School

Pines enriquecidos en WordPress

Plugin > Dificultad baja

Uno de los plugins más recomendados para integrar los pines enriquecidos, además del etiquetado válido para otras plataformas sociales es NextGEN Facebook: Open Graph, Pinterest Rich Pin, Twitter Card, SEO, Schema Meta Tags. A continuación detallamos los pasos de instalación y configuración del plugin:

  1. Accede al panel de control de WordPress.
  2. En la barra lateral izquierda, selecciona “Plugins > Añadir nuevo”.
  3. En el buscador escribimos “NextGEN Facebook” y pulsamos “Buscar”.
  4. Hacemos clic en “Instalar” en el resultado “NextGEN Facebook: Open Graph, Pinterest Rich Pin, Twitter Card, SEO, Schema Meta Tags”.
  5. Si has instalado correctamente el plugin, en la barra lateral izquierda aparecerá una nueva opción denominada “NGFB”.
  6. Al acceder al plugin, debemos completar todos los apartados.
  7. Por último, no olvides probar y validar tu sitio web en Pinterest.

Manualmente > Dificultad alta

La implementación manual de los pines enriquecidos es similar al proceso que explicamos anteriormente sobre las Twitter Cards. En este punto, puedes optar por varios tipos de integración:

    • Open Graph. Es el estándar creado por Facebook para etiquetar el contenido. Es la opción más sencilla y las etiquetas se incluyen dentro de la sección <head> de la página. A continuación se incluye el código que diferencia entre varios tipos de contenido: la página de inicio de WordPress, una entrada del blog y una página de producto de WooCommerce.
      1. Accede al panel de control de WordPress.
      2. En la barra lateral izquierda, selecciona “Apariencia > Editor”.
      3. Una vez en el editor HTML localiza el archivo “header.php” y dentro de él busca la etiqueta </head>.
      4. Justo encima de esta etiqueta copiamos y pegamos el siguiente código, modificando los apartados con comentarios:

    1. Guarda los cambios.
    2. No olvides probar y validar tu sitio web en Pinterest.
  • Schema.org. Es el estándar de etiquetado acordado por los principales buscadores (Google, Bing y Yahoo!) y permite marcar el contenido para que sea más entendible por éstos. Este método es aún más complejo que el anterior ya que requiere incluir etiquetas en el <head> y sobre todo en el <body>, sin embargo es el más recomendado para enriquecer no solo nuestros pines sino también los resultados de los buscadores. Más información.Cada vez es más habitual encontrar un mayor número de plantillas para WordPress que incluyan este etiquetado de forma predeterminada, lo que ahorra tiempo y recursos a la hora de optimizar nuestro sitio web. Antes de adquirir una plantilla es recomendable revisar sus características o comprobar a través del validador de Pinterest si están incluidas.
  • oEmbed. Es la opción más compleja de todas pero también la más flexible. Se requieren de unos conocimientos técnicos más avanzados y acceso a la APIs Más información.

Medir el impacto de tus pines enriquecidos

Una vez hayas configurado correctamente los pines enriquecidos y tu sitio web haya sido validado por Pinterest, podrás medir también el alcance de todos los pines que se compartan de tu sitio web a través de http://pinterest.com/source/dominio/analytics/. Para que todo este trabajo de resultados es importante incluir el botón de pinear en tu sitio web para facilitar al usuario compartir los contenidos.

Actividad en “Implementar paso a paso los pines enriquecidos

  1. Pingback:Implementar paso a paso los pines enriquecidos ...

  2. Pingback:Twitter Cards, cómo configurarlas paso a paso « Brandalismo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *