La importancia del OpenGraph y las Etiquetas Sociales en tu sitio web

newsletter_importancia_opengraph

Las (meta) etiquetas sociales son porciones de código HTML que podemos incluir en nuestros Sitios Web y que ayudarán a la optimización del contenido que se comparte a través de las redes sociales como Facebook y Twitter. A través de ellas podemos definir de manera concreta el título, la descripción e incluso la imagen que deseamos aparezcan cuando la URL de una página o publicación de nuestro sitio es compartida, todo esto en pro de ayudar a la tasa de conversión.

Con el título, la descripción y la imagen optimizadas se garantiza una mayor difusión de nuestro contenido en las redes sociales, aumentando inevitablemente el valor SEO de nuestro sitio web.

¿Qué es el protocolo OpenGraph (OG)?

Tal como nos lo indica la página oficial, OpehGraph nos permite enriquecer nuestro sitio web para una visualización óptima en el ámbito social (o gráfico social que llaman ellos), ayudando a los desarrolladores a implementar, de una única forma, la imagen social que tendrá el contenido al momento de ser compartido.

Aunque algunas de las redes sociales distintas a Facebook han comenzado a implementar sus propias etiquetas sociales, todas las plataformas pueden usar las del protocolo "OG" como alternativa si un sitio no cuenta con las de cada red, incluido Twitter en gran medida; allí radica la importancia del OpenGraph y las etiquetas sociales.

¿Cuáles son las etiquetas que se deben usar?

En este artículo queremos enfocarnos en las etiquetas sociales más comunes hoy día y que serían las que se usan para Facebook y Twitter.

Facebook

Facebook es la red social por excelencia para el uso del OpenGraph. A través de sus etiquetas podemos definir la URL, el título, la descripción y la imagen (entre otras) para que se visualicen cuando alguien comparte el contenido.

newsletter_opengraph_facebook_example

Las etiquetas básicas son:

  • og:title: Este es el título del contenido. Use un titular que atraiga la audiencia.
  • og:type: Es el tipo de objeto que es el contenido. Generalmente será un blog, un sitio web o un artículo.
  • og:image: Esta es la imagen que Facebook mostrará en la captura de pantalla del contenido. Asegúrese de especificar una imagen cuadrada para garantizar la mejor visibilidad en el timeline de un usuario.
  • og:url : Es simplemente la URL de la página.
  • og:description: Es la descripción que Facebook mostrará en la captura de pantalla del contenido. Al igual que el título, debería ser atractiva y en lo posible contener un llamado a la acción.

Un ejemplo del uso de estas etiquetas puede ser:

newsletter_opengraph_facebook_example_code

Twitter

Aunque Twitter tiene la capacidad de interpretar las etiquetas del protocolo OpenGraph, sus desarrolladores han decidido crear sus propias etiquetas sociales y que deberían ser usadas para garantizar la funcionalidad.

newsletter_opengraph_twitter_example

Las etiquetas comunes serían:

  • twitter:card: Este es el tipo de tarjeta. Twitter usa de forma predeterminada "summary" si no se especifica otro.
  • twitter:url: Esta es la URL del contenido que se comparte.
  • twitter:title: Es el título del contenido que se compartirá. Una vez más, busque titulares llamativos.
  • twitter:description : Es la descripción del contenido. Busque un texto atractivo, tiene más oportunidades aquí que el tuit real.
  • twitter:image: Esta es la imagen que se mostrará en la tarjeta de Twitter.
  • twitter:site y twitter:creator: En estas etiquetas se indica la cuenta (como mención) de quien sería el autor del contenido. En nuestro caso sería nuestra cuenta de Twitter.

El uso de estas etiquetas podría ser:

newsletter_opengraph_twitter_example_code

Consejos y tips finales

La imagen que usted proporcione no necesariamente debe estar en su sitio web, pero si es importante que represente visualmente el contenido que está compartiendo. Recuerde que el interés del lector se despierta más rápidamente con una imagen llamativa.

Respecto a los tamaños, aunque cada plataforma tiene sus estándares, se sugiere:

  • Miniatura de Twitter: 120x120 pixeles
  • Imagen grande de Twitter: 280x150 píxeles
  • Facebook: Una imagen de al menos 200x200 píxeles funciona muy bien. Facebook recomienda imágenes grandes de hasta 1200x630 píxeles de ancho.

Para ampliar la información y seguir descubriendo la importancia del OpenGraph y las etiquetas sociales, puede consultar las ayudas tanto de Facebook como de Twitter en sus sitios oficiales.

Únete al boletín

Recibe tips, consejos y estrategias de Diseño Web, Mercadeo y Redes Sociales en tu correo electrónico:

¡Califica este artículo!
Sending
User Review
5 (1 vote)

Únete al boletín

Recibe tips, consejos y estrategias de Diseño Web, Mercadeo y Redes Sociales en tu correo electrónico:

¡Califica este artículo!
Sending
User Review
5 (1 vote)

¿Te gustó? Compártelo y comenta

influodia © Todos los derechos reservados | Política de Privacidad | Política de Cookies