<img height="1" width="1" style="display:none;" alt="" src="https://dc.ads.linkedin.com/collect/?pid=40687&amp;fmt=gif">

¿Qué es Open Graph y Cómo se hace?

El Open Graph es una tira de código que le especifica a las redes sociales y a los buscadores ciertos parametros de visualización al compartir un artículo.

¿Por qué a se ven mal los artículos compartidos en redes sociales? Porque la red no sabe interpretar cuál es el título del artículo, ni la imagen principal, ni el propio contenido de lo que se está compartiendo.

Todo eso se define en el Open Graph o MetaTag. Al compartir un link en Facebook, Linkedin o Twitter es importante que el artículo se vea bien y atractivo, para eso se debe definir la etiqueta "Meta" en la sección del código Head de la página.

Open Graph son una serie de etiquetas que se añaden al código de la página, invisibles de cara al visitante de la web, que ayudan a Facebook y a otra redes sociales como Twitter, Linkedin y Google+ a identificar los elementos principales del artículo que se quiere compartir: título, imagen, descripción, etc.

Así es cómo se verá un artículo con sus Tags bien definidos:

1-487968879093.png

 

La etiqueta de Open Graph debería ser parecida a la siguiente (pueden copiar y pegar):

<!-- COMMON TAGS -->
<meta charset="utf-8">
<title>TÍTULO DEL ARTÍCULO</title>
<!-- Search Engine -->
<meta name="description" content="DESCRIPCIÓN DEL ARTÍCULO, MÁXIMO 155 CARACTERES">
<meta name="image" content="LINK A LA IMAGEN DEL ARTÍCULO, DEBE TENER UN TAMAÑO DE 705 PÍXELES POR 368 PÍXELES">
<!-- Schema.org for Google -->
<meta itemprop="name" content="TÍTULO DEL ARTÍCULO">
<meta itemprop="description" content="DESCRIPCIÓN DEL ARTÍCULO, MÁXIMO 155 CARACTERES">
<meta itemprop="image" content="LINK A LA IMAGEN DEL ARTÍCULO">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="TÍTULO DEL ARTÍCULO">
<meta name="twitter:description" content="DESCRIPCIÓN DEL ARTÍCULO, MÁXIMO 155 CARACTERES">
<meta name="twitter:site" content="@USUARIO DE TWITTER">
<meta name="twitter:creator" content="@USUARIO DE TWITTER">
<meta name="twitter:image:src" content="LINK A LA IMAGEN DEL ARTÍCULO">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="TÍTULO DEL ARTÍCULO">
<meta name="og:description" content="DESCRIPCIÓN DEL ARTÍCULO, MÁXIMO 155 CARACTERES">
<meta name="og:image" content="LINK A LA IMAGEN DEL ARTÍCULO">
<meta name="og:url" content="LINK AL ARTÍCULO">
<meta name="og:site_name" content="TÍTULO DEL ARTÍCULO">
<meta name="og:locale" content="en_US">
<meta name="og:type" content="article">
<!-- Open Graph - Article -->
<meta name="article:section" content="Social Media">
<meta name="article:author" content="NOMBRE DE LA EMPRESA">
<meta name="article:tag" content="Social Media">

Cada etiqueta representa algo en la imagen:

3.png

 

Cómo añadir Open Graph a WordPress

No es necesario aplicar cambios en el código de WordPress para agregar las meta-etiquetas Open Graph. 

Por suerte existen multitud de plugins que se encargan de realizar esta tarea de forma automática. Incluso algunos temas de WordPress, normalmente de pago, incluyen esa opción en su configuración.

Aconsejamos utilizar el plugin WordPress SEO by Yoast para generar estas etiquetas, ya que además mejorara el posicionamiento de nuestro WordPress en los buscadores con otras funciones que tiene.

Cómo añadir Open Graph a Hubspot en una página de destino

El código que más arriba detallamos debe ser editado, copiado y pegado en el editor de encabezados HTML.

2.png

Verificar etiqueta de Open Graph

Cada red social tiene el suyo, lo interesante es que si este artículo ya había sido compartido en redes sociales, estos verificadores también funcionan como depuradores, es decir, que si realizaste cambios en la etiqueta, esta herramienta los actualizará. Ingresa a la página de desarrolladores de Facebook que se encarga de verificar las etiquetas Open Graph y pon una url de algún artículo nuevo de tu web. Aquí te mostrará la información que está leyendo Facebook y que mostrará en la red social cuando se comparte un artículo.
Para Twitter es el siguiente link.

Contanos cómo te fue.

¿Quieres republicar nuestro contenido? Sigue estos preceptos por favor.