Open Graph y Twitter Card Tags

Este término, Open Graph (El protocolo Open Graph), aparece para que podamos tener un mayor control sobre cómo compartimos en las redes sociales, en concreto en Facebook. He leído muchas cosas sobre ella y a veces creo que todo es para enrevesar. En resumen diré, que son unas etiquetas que ponemos en la cabecera de nuestra web (metatag social), que van a indicar a Facebook y otras redes que las usan, como Google+ y LinkedIn, cómo y qué están publicando. Aprovecharemos y hablaremos de las Twitter Card Tags, que es lo mismo, sólo que para twitter.

Es muy sencillo, hay que meter las etiquetas dentro del HEAD, hay muchisimos ejemplos por internet:

 <meta property="og:type" content="article" /> <meta property="og:title" content="Creando nuestras tags de Open Graph" /> <meta property="og:url" content="http://www.undesign.es" /> <meta property="og:image" content="http://www.undesign.es/imagen/nombreimagen.jpg/>  

Sin embargo, no creo que sirvan a nadie, pues hoy en día usamos gestores de contenidos que nos piden que metamos todas estas cosas de manera dinámica, y para los que no entendemos de programación, se nos puede enquistar el problema. Pero no hay problema sin solución.

Pero paso a paso:

Paso 1: Qué lee Facebook en nuestro enlace.

Usamos la herramienta Debug de facebook,https://developers.facebook.com/tools/debug/, te pedirá que te loges primero.

Herramienta Debug de Facebook
Herramienta Debug de Facebook

Una vez se nos muestre el contenido, veremos todo, si tenemos etiquetas “og:” qué imagen, titulo, descripción toma, etc. Cómo las vamos a colocar, dirá que no tiene.

Paso 2: Instalar plugin dependiendo de nuestro CMS (gestor de contenidos):

Es muy habitual que los plugins incorporen tanto las etiquetas para Facebook, Google+, etc, y las de twitter, las twitter card tags. Los plugins se van a encargar de inyectar esos códigos en el head de vuestra web y que muestre uno u otro contenido dependiendo de la página en la que estés.
Los más habituales y gratuitos son:

Una vez instalados, he notado que en cualquiera de ellos, acabas necesitando especificar la imagen para la home. Normalmente los plugins te permiten dar una imagen por defecto, en caso de que no encuentren la imagen, eso sí, debe ser de 200x200px para facebook y de 280x150px para twitter. Y casi sale del tirón.

Paso 3: Pasar el debug, de nuevo.

Esta herramienta es muy importante para confirmar que está todo ok, sino te irá diciendo cuál es el error o qué es lo que te falta.

Salvo con la imagen, no he tenido problemas sin plugins, para que detecte el título del artículo, su descripción en joomla, al menos. Esto es porque he rellenado los metadatos dentro del gestor en cada artículo. En wordpress y prestashop también se deben rellenar, aunque a veces, las prisas por publicar hace que nos olvidemos de esos contenidos, son realmente importantes.

Hablamos de los campos de Metadescripción y Metapalabras clave (Meta description, meta keywords). Estos campos existen en todos los gestores que conozco, en el artículo, en el producto, en el post, etc. Existen siempre.
Metadescription, debe ser un texto explicativo y breve, sobre lo que va el artículo o el producto. Es un contenido visible al usuario, por ejemplo, cuando compartimos en facebook o cuando buscamos en google.

Ejemplo de metadescription
Ejemplo de metadescription

Keywords, son palabras separadas por comas y no visibles al usuario, solo a los buscadores.

Principales meta etiquetas sociales para Facebook

No obstante, también es necesario entender qué son y cuáles, por si los plugins no te funcionan bien, buscarle las vueltas…

Las meta etiquetas para facebook más usadas, son:

 <meta property="og:type" content="article" /> <meta property="og:title" content="Creando nuestras tags de Open Graph" /> <meta property="og:url" content="http://www.undesign.es" /> <meta property="og:image" content="http://www.undesign.es/imagen/nombreimagen.jpg/>  

og:type article

Este es el tipo más usado, pero hay muchos, según lo que se publique principalmente, puedes revisar la más adecuada para ti en la documentación de facebook de open graph.

og:url

Este contenido, es la url, como se muestra en el ejemplo. Se recomienda usar la URL canonical, sino sabes cuál es, la herramienta DEBUG, te lo especifica.

Twitter Card Tags

Por último y de manera resumida, veremos las principales tags para twitter, que cómo digo, suelen implementar los mismos plugins, pero conviene entender.
Las principales son:

Twitter Card tags
Twitter Card tags

Igual que para facebook, tenemos varios tipos de contenidos (twitter:card) estos son sus significados:

  • Twitter:card – Define como se mostrará el contenido (summary(texto),ummary_large_image(texto e imagen grande), photo(imagen) o player(video).
  • Twitter:url – URL canonical del contenido.
  • Twitter:title – El titulo del contenido.
  • Twitter:description – Descripcion del contenido (maximo 200 caracteres).
  • Twitter:image – URL de la imagen que representara el contenido.
  • Twittter:site – (opcional) @username de la pagina.
  • Twitter:creator – (opcional) – @username del autor del contenido

Herramienta de validación

Para twitter también tenemos un validador muy útil: https://cards-dev.twitter.com/validator

Insertar código Open Graph y Twitter Card

Si no se quiere usar plugins, hay que insertar código, hay que hacer lo que se conoce por override, un método para insertar código en los corazones de todos los gestores, sirve para que si hay alguna actualización, no machaque los cambios que hayas introducido en algún archivo del core.

En el caso de joomla, el archivo que incrusta código en el head de las páginas está en:

   components --> com_content --> views --> article --> default.php

Pero como decía, si metemos aquí el código, en la próxima actualización lo perderemos. Por lo que vamos a llevarnos una copia del archivo a la carpeta de nuestra template:

Templates --> Tutheme -->html

Como vamos a coger un contenido de:

components --> com_content --> views --> article --> default.php

Construiremos una nueva ruta:

 Templates --> Tutheme -->htm l--> com_content --> article --> default.php

Fíjaete que la vista es distinta.

Luego abrimos el archivo y pegamos el siguiente código tras:

JHtml::_('behavior.caption');

justo antes del cierre de php:

  ?>

Éste es el código a pegar:

  if       (isset($images->image_intro) and !empty($images->image_intro))       {          $timage= htmlspecialchars(JURI::root().$images->image_intro);       } elseif   (isset($images->image_fulltext) and !empty($images->image_fulltext))        {          $timage= htmlspecialchars(JURI::root().$images->image_fulltext);        } else        {          $timage= 'http://www.example.com/default-image.jpg';        } $doc =& JFactory::getDocument(); $doc->addCustomTag( ' <meta name="twitter:title" content="'.$this->escape($this->item->title).'"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@TwitterUsernameOfWebsite"> <meta name="twitter:creator" content="@TwitterUsernameOfAuthor">> <meta name="twitter:url" content="'.JURI::current().'"> <meta name="twitter:description" content="'.strip_tags($this->item->introtext).'"> <meta name="twitter:image" content="'.$timage.'"> <meta property="og:title" content="'.$this->escape($this->item->title).'"/> <meta property="og:type" content="article"/> <meta property="og:email" content="info@example.com"/> <meta property="og:url" content="'.JURI::current().'"/> <meta property="og:image" content="'.$timage.'"/> <meta property="og:site_name" content="Your Website Name Here"/> <meta property="fb:admins" content="your admin face"/> <meta property="og:description" content="'.strip_tags($this->item->introtext).'"/> '); 

Esto hará que se muestren las etiquetas dentro del head de los artículos. Y si tu home, no es un artículo, como es mi caso, tendrás que editar éste contenido en concreto. Y listo.

Enlaces relacionados:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s