Cuándo elaboramos una estrategia de posicionamiento web, no debemos olvidarnos de las redes sociales. Debemos cuidar los títulos, las descripciones y las imágenes ya que son los únicos elementos que el usuario verá y los que le harán decidir si hacer click o no.

¿Sabes cómo ven los usuarios tu página web cuando lo comparten en sus perfiles sociales? Piensa que cuánto mejor luzca el contenido y sea más atractivo, más viral será, y por lo tanto más repercusión tendrá tu sitio web, ayudando así también a mejorar tus resultados SEO.

¡Te lo contamos todo!

¿Qué son las etiquetas Open Graph?

Las meta etiquetas o protocolo Open Graph fue creado por Facebook y permite mostrar cualquier página web con un formato enriquecido en redes sociales. Estas etiquetas HTML serán las encargadas de mostrar el contenido (título, la descripción, la imagen de la página…) de una página que se comparte en las redes sociales. Si estas etiquetas no existen o no se indican, se mostrará aleatoriamente la información, escogiendo una fotografía al azar, un titulo o descripción poco descriptivos…

¿Para qué se utilizan?

Estas etiquetas son las llamadas etiquetas sociales y son muy importantes para conseguir posicionamiento en todas y cada una de las redes sociales. Depende de que red social sea será más fácil o más difícil, pero el posicionamiento en redes sociales existe, es real.

El protocolo Open Graph se utilizó inicialmente en Facebook y actualmente es reconocido también en LinkedIn. Por otro lado, las etiquetas de Twitter son exclusivas para esta red social.

Las etiquetas son las siguientes:

og:title:

El título “Title” se encarga de decirle al buscador sobre qué trata la página. Por lo que debe de ser claro, conciso y ser único en cada página. Su máxima extensión son los 67 caracteres.

Ejemplo:

<meta property=”og:title” content=”¿Qué son las etiquetas Open Graph?”/>

og:description

La “Meta description” será la que describa e informe más extensamente de la página. No debe superar los 155 caracteres y puede contener una frase o CTA que animen al usuario a hacer clic en el resultado. También debe ser única por cada página.

Ejemplo:

<meta property=”og:description” content=”¿Sabes cómo ven los usuarios tu página web cuando lo comparten en sus perfiles sociales? Las Open Graph serán las encargadas de mostrar toda la información.”/>

og:url:

Se muestra la URL de una página web, pudiéndose mostrar acortada. Intenta utilizar esta etiqueta con una URL lo más limpia posible y única en cada página.

Ejemplo:

<meta property=”og:url” content=”https://seoalive.com/open-graph” />

og:image

Debes especificar una URL de imagen para que se muestre en cada página. Este es seguramente uno de los grandes olvidados y uno de los más importantes. Google Discover, Google News, Facebook, Twitter, Linkedin… todos ellos cogerán esta imagen como reclamo para el usuario y si es de calidad, podrás conseguir muchísimas visitas. De lo contrario, si dejas el campo vacío, puede que se muestra la foto del autor, un campo vacío… ¡Tu eliges que es mejor! ;)

Ejemplo:

<meta property=”og:image” content=”https://seoalive.com/wp-content/uploads/2020/04/open-graph.jpg” />

og:video

En el caso de que tengas un vídeo en la página debes especificarlo mediante esta etiqueta que facilita su interpretación.

<meta property=»og:video» content=»http://example.com/bond/trailer.swf» />

og:type

Esta etiqueta indica en que consiste tu contenido. Si es un artículo, un viseo, un post del blog…Según el tipo que sea podrás asignar unas propiedades u otras.

Ejemplo:

<meta property=”og:type” content=”article” />

og:site_name

Con ella puedes especificar tu sitio web para que se muestre tu marca.

<meta property=»og:site_name» content=»SEO Alive» />

Tipos de meta etiquetas sociales que existen

Actualmente las etiquetas creadas por Facebook se utilizan en el resto de redes sociales, como LinkedIn. Twitter utiliza las llamadas Twiter Cards. Con estas etiquetas tienes tres opciones:

  • «Photo» para imágenes
  • «Player» para vídeos y
  • «Summary» para todo lo demás.

En este caso ocurre como con las tarjetas Open Graph y si no se optimiza, se mostrará contenido por defecto y no optimizado.

Herramientas de prueba de etiquetas

Analizar tal y cómo se ven las páginas cuando un usuario las comparte en redes sociales será crucial si queremos que todo funcione correctamente.

Twitter Card Validator

La herramienta de validación de Twitter es Twitter Card Validator. Antes de publicar nada, si quieres asegurarte de que todo se muestra correctamente, no dudes en introducir la url que deseas compartir. Es también muy útil si has actualizado la imagen de una página y en el feed aún está mostrando la antigua. El hecho de volver a analizarla actuará como una «depuración de caché».

Twitter Card Validator

Ejemplo de Twitter-Card con la home de SEO Alive.

Facebook Debugger

La herramienta de depuración de Facebook se conoce como Facebook Debugger. Con ella puedes ver qué información se está utilizando y el aspecto que tiene cuando se comparte una página de tu web. Además, en el caso de que alguno de los campos sea incorrecto o falte, saltará un aviso.

Facebook Debugger

Ejemplo de la home de SEO Alive en la herramienta de validación de Facebook.

Google Structured Data Testing Tool

Google también pone a nuestra disposición la herramienta de prueba de datos estructurados llamada Google Structured Data Testing Tool. Es muy útil para comprobar el tipo de marcado que está cogiendo Google de una página. El marcado es reconocido por los motores de búsqueda que propicia que una web sea “semántica” introduciendo los microdatos de Schema específicos para cada caso.

Google Structured Data Testing Tool

Google Structured Data Testing Tool

Rich Pins Validator

Pinterest no se podría quedar atrás y trae su validador de pins, también conocido como Rich Pins Validator. Funciona igual que el validador de Twitter: se requiere un proceso de aprobación para obtener la funcionalidad del Pin Enriquecido y comprobar el marcado de datos al mismo tiempo.

Rich Pins Validator

Rich Pins Validator

¿Cómo optimizar estas etiquetas en WordPress?

Como sabrás, una de las grandes ventajas que nos ofrece WordPress es su flexibilidad y la gran comunidad que tiene. Fruto de ello, procesos como la introducción de las etiquetas open-graph en nuestras páginas y artículos es cuestión de segundos gracias a los plugins.

Existen multitud de maneras de lograrlo. En nuestro caso, creemos que lo más sencillo es realizarlo mediante el plugin SEO Rank Math.

Artículo recomendado > Tutorial SEO a fondo sobre Rank Math

Lo único que tendrás que hacer es ir al apartado SEO de la página o artículo en cuestión, hacer click en la pestaña «Social» y allí nos aparecerá la opción de configurar la imagen. En muchos casos, si hemos subido una imagen destacada, nos la cogerá directamente.

Open Graph Rank Math

En Rank Math, podremos personalizar todas las variables y además tendremos una vista previa.

Consejos y mejoras

A continuación, podrás ver algunos consejos basados en la experiencia que nos han funcionado para conseguir muy buenos resultados.

Optimiza las imágenes

Elige imágenes de calidad. Debes elegir a la perfección cada imagen porque va a representar su contenido. También, será la imagen que aparezca cuando el usuario comparta el contenido.

Cada plataforma tiene unos estándares, lo mejor es elegir una imagen grande que se pueda adecuar a cada red social.

Los contenidos visuales son los más atractivos en redes sociales, y si consigues ser viral conseguirás más visitas a tu sitio web. Ya sabes, a invertir tiempo en elegir la imagen perfecta para conseguir likes, shares y comentarios.

  • Twitter: 120x120px pequeña y 4096x4096px para la grande
  • Facebook: la más pequeña de 200px y las más grande de 1200px

Utiliza siempre Open Graph

Al ser un formato ya conocido, son los que más plataformas pueden utilizarlo. Se recomienda el uso de plantillas de código para insertar las etiquetas sociales, puedes consultar toda la información en la siguiente guía.

Guía Recomendada -> Meta Tags en SEO

Prueba y experimenta

Prueba y testea siempre en los validadores para asegurarte de que se están mostrando correctamente los resultados de tu web en las redes sociales.

Conclusiones

Son pequeños detalles que harán grande tu marca ante la vista de los usuarios. Piensa que estas etiquetas son imprescindibles para mostrar tu página adecuadamente y atraer visitas. Además facilitan a los motores de búsqueda la comprensión de tu sitio web. Así que la optimización SEO incluye también atención a las redes sociales.

Recuerda además que las señales sociales, es decir, el tráfico que viene de redes, puede llegar a afectar positivamente a una estrategia SEO por lo que cada click desde redes, ¡vale su peso en oro!

¿Dudas o sugerencias? ¡Aquí estamos encantados de ayudarte!


Referencias: