Imagen de Mira Bozhko

En más de una ocasión algún usuario de Nelio Content nos ha contactado comentando que ha planificado un mensaje social para promocionar sus entradas y al publicarse este en la red social elegida no le ha aparecido la imagen destacada de la entrada en la publicación social.

Del mismo modo, si en las entradas de ese blog también incluye los típicos botones para compartir en las redes sociales, le pasará lo mismo: al hacer click en compartir una entrada en Facebook, Twitter, LinkedIn, Google+ o Pinterest, la imagen no se carga o no es la de la entrada.

¿Por qué ocurre esto? Pues porque las redes sociales no han sabido interpretar correctamente la información de tu entrada. O mejor dicho, porque no has configurado correctamente tu WordPress para que las redes sociales sepan interpretar bien dicha información.

Antes de darte la solución, permíteme empezar con unos conceptos básicos para sentar las bases.

Meta etiquetas que Google entiende

Como bien sabes una página web es un documento escrito generalmente en HTML (Lenguaje de Marcado de HyperTexto). Este permite incluir enlaces (links) hacia otras páginas o documentos e incluso puede incluir o hacer referencia a scripts (pequeños programas) que pueden afectar al comportamiento del navegador web.

Si vas a ver el código fuente en tu navegador, se te abrirá un visor de texto con el código HTML de la página que estás visualizando.

Como puedes ver, una página en HTML está formada por una lista de elementos rodeados por corchetes angulares (<, >, /): cada elemento tiene una etiqueta inicial (<etiqueta>) en el que se indican las propiedades del elemento; el contenido del elemento; y una etiqueta de cierre (</etiqueta>). Por lo tanto, cuando tu navegador al interpretar una página HTML encuentra el elemento <strong>en negrita</strong> te mostrará en tu pantalla en negrita. Es decir, por un lado, en las etiquetas hemos indicado cómo interpretar el contenido y, por otro, el texto del propio contenido.

Además, en toda página HTML, después de las etiquetas <!DOCTYPE html> y <html> que definen el inicio del documento, encontrarás primero una sección <head> que incluye información sobre características de la página (que no se muestra al usuario) y más adelante una sección <body> que incluye el contenido que ves en la página.

Ejemplo de código fuente HTML
Ejemplo de código fuente de una página web. (Fuente)

Con esto ya tienes claro la pinta que tiene «por detrás» cualquier página web.

Ahora bien, si quieres que Google (o cualquier otro buscador) encuentre, indexe y clasifique el contenido de tu web en los resultados de una búsqueda, no es suficiente con haber definido bien en tu web el contenido del mismo.

Así, por ejemplo, si queremos que Google muestre la información que tiene «mas sentido» de la siguiente entrada

Captura de pantalla de una entrada del blog de Nelio.
Captura de pantalla de una entrada del blog de Nelio.

la página web de dicha entrada debe incluír unas meta etiquetas  que le facilitarán el trabajo de «entender el significado» del contenido.

¿Qué son las meta etiquetas?

No son más que información que se incluye en la sección <head> de la página (recuerda que la información que está incluida en esta sección no se está visualizando en el navegador, por eso son «meta») y que siguen el formato <meta />.

Así, por ejemplo, si en esta entrada se incluye la siguiente meta etiqueta:

<meta name="description" content="La pantalla de login de WordPress permite acceder a su escritorio de administración. Aquí tienes 3 trucos para modificar su comportamiento de forma fácil." />

Google entiende que estás proporcionando una breve descripción de la página y en algunos casos está descripción es la que Google utiliza como parte del fragmento que se muestra en los resultados de búsqueda.

Resultado de Google
Ejemplo de cómo muestra Google la información en sus resultados

Tiene sentido, ¿no? Imagínate si Google tuviera que hacer un resumen de tu página en dos líneas. Mucho mejor indicarle tú cómo quieres que se muestren los resultados de una búsqueda.

¿Cómo pones esta información en tu WordPress? La manera más fácil es tener instalado el plugin de Yoast (es gratuito) e introducir la descripción en apartado preparado para ello, Editar snippet.

Informacion del snippet con Yoast
Información del snippet introducida en el plugin de Yoast.

Y si te interesa, puedes consultar aquí la lista de todas las meta etiquetas HTML que entiende Google.

Meta etiquetas Sociales

De la misma forma en que Google utiliza unas meta etiquetas para indexar y mostrar mejor el contenido de tu web cuando se hacen búsquedas, hay otro tipo tipo de meta etiquetas que utilizan actualmente la mayoría de redes sociales. Estas meta etiquetas sirven, por ejemplo en el caso de Facebook, para compartir una entrada de tu blog como una publicación más de tu muro. Son meta etiquetas (título, imagen, descripción…) que le sirven a la red social para crear el «objeto gráfico enriquecido» que se publica en la red.

Protocolo Open Graph

El conjunto de estas meta etiquetas, que también deben incluirse en la sección <head> del código HTML, es ayudar a la red social a saber interpretar el contenido. De este modo es capaz de convertir la URL de una página web en un «objeto gráfico enriquecido». Este conjunto de etiquetas se conoce como el protocolo Open Graph. Y siguen el formato <meta property="og:…" content="…">

Así, para poder compartir la entrada anterior y que se visualice en nuestro muro de Facebook como:

Publicación de Facebook
Publicación de Facebook.

en la sección <head> se han incluido las siguientes meta etiquetas de Open Graph:

Fragmento del código HTML de una entrada mostrando las meta etiquetas Open Graph.

Fragmento del código HTML de una entrada mostrando las meta etiquetas Open Graph.Si te fijas en el detalle de cada una de ellas, fácilmente encontrarás su correspondencia en la publicación de Facebook.

Meta etiquetas básicas

Te resumo aquí las etiquetas básicas que necesita Facebook:

  • og:title — generalmente es el titulo del articulo, entrada, video o audio a compartir y el límite es 75 caracteres. Si esta etiqueta no existe, Facebook usa automáticamente el título del contenido a publicar.
  • og:description — se recomienda que la descripción no sea superior a 195 caracteres incluyendo espacios. Si esta etiqueta no existe, Facebook usa la descripción escrita para SEO y a falta de ésta usa el primer parrafo del post o contenido.
  • og:image — la imagen que debe aparecer en la publicación de Facebook debe tener un tamaño de 200px x 200px. Si esta etiqueta no existe, Facebook hace un poco lo que puede usando las imágenes que hay en el código del sitio web. Aunque lo más normal es que no use ninguna imagen, y de ahí la queja de nuestros clientes que comenté al principio.
  • og:url — la dirección url que se publica en Facebook debería ser el enlace al contenido por defecto.

Aquí encontrarás más información sobre meta etiquetas de Open Graph.

Meta etiquetas en WordPress

Pero, ¿cómo metemos toda esta información en nuestras páginas en WordPress?

Tranquilo, es fácil. Igual que antes, utiliza el plugin de Yoast. En el escritorio de WordPress, haz clic en la opción de menú Social del plugin y en la pestaña Facebook activa que se añadan los metadatos Open Graph.

Añadir metadatos Open Graph de Yoast
Asegúrate de tener activada la opción de añadir metadatos Open Graph en el plugin de Yoast para publicar en redes sociales.

Y lo mismo en las otras pestañas de las distintas redes sociales.

Ahora ya podrás compartir correctamente todas las entradas de tu blog en las redes sociales.

De hecho, para comprobar que todo está correcto, Facebook developers cuenta con una herramienta muy completa, Sharing Debugger, que tras introducir la dirección URL de tu entrada, te evalúa si todas las meta etiquetas están bien puestas.

Captura de pantalla de la la herramienta sharing debugger de Facebook.
Captura de pantalla de la la herramienta sharing debugger de Facebook.

Como puedes ver en la imagen anterior, Facebook ha comprobado que la entrada en cuestión tiene todas las meta etiquetas que necesita para poderla publicar como un post completo en el muro.

Conclusiones

Por un lado, hemos visto que utilizar metadatos en tu web es una buena práctica de SEO recomendada directamente por Google. Si quieres conseguir un buen posicionamiento, debes incorporar las meta etiquetas en tu web.

Y por otro, cuanto mejor promociones tus entradas en tus redes sociales, más posibilidades tendrás de aumentar el número de visitas. Asegúrate de añadir todas las meta etiquetas relevantes para que se visualicen bien en las diferentes redes. ¡Recuerda que la primera impresión es lo que cuenta!

Imagen destacada de Mira Bozhko.

14 respuestas a «¿Por qué debes saber qué son las meta etiquetas de Open Graph?»

  1. Avatar de jean paul
    jean paul

    y entonces uso ambas?
    o si uso las etiquetas opengraph es suficiente para que tanto las redes sociales como google usen bien la información?

    1. Avatar de Ruth Raventós

      Si. Las etiquetas opengraph sólo son para redes sociales.

      Un saludo,

      Ruth

  2. Avatar de Gloria

    Buenos dias, una pregunta.
    mi web es una tienda online, necesito incluir metaetiquetas para productos, esta activado FB en Yoast, pero las etiquetas que me salen no son todas las que necesito para productos, donde las puedo encontrar?.
    MUy buen articulo, la unica en todo internet que lo explica tan claro, llevo dias buscando esto y en ningun lado lo encontraba.
    Mil gracias

    1. Avatar de Ruth Raventós

      Gracias Gloria,
      como comentas la versión gratuita de Yoast no incluye estas metaetiquetas. En caso de que tus productos los tengas con el plugin de WooCommerce, el plugin Yoast WooCommerce SEO (39€ al año) fue creado precisamente para hacer lo que buscas.
      ¡Gracias por leernos!
      Ruth

  3. Avatar de David
    David

    Ooops, es un buen cacao…nada fácil…bueno, comentaros que segun vuestras indicaciones, en esta página creo que es falta la ID de Facebook…creo

    1. Avatar de Ruth Raventós

      Hola David,
      La ID de Facebook está indicada en fb:app_id tal y como puedes en la sección .
      Muchas gracias por leernos!

  4. Avatar de Lidia
    Lidia

    He configurado los ajustes de Yoast SEO que indicas, pero hay algunas url que en las que sí se muestra la vista previa y otras en las que no. ¿A qué crees que se puede deber?

    ¡Gracias!

    1. Avatar de Nelio

      Hola Lidia,
      La vista previa del snippet de Yoast, justo muestra la información que has introducido en el Título SEO, el Slug y la Meta descripción. Si no la ves en alguna URL, seguramente falta alguna información de estos campos.
      Un saludo

  5. Avatar de gustavo
    gustavo

    Muy interesante, gracias.

    1. Avatar de Ruth Raventós

      Gracias a ti, Gustavo, por leernos.

  6. Avatar de Alex
    Alex

    Hola soy nuevo en este mundo, si hay no estoy trabajando en wordpress, y creo blog desde blogger, puedo agregar metaetiquetas? Sirve de algo?.
    Gracias.

    1. Avatar de Ruth Raventós

      Hola Alex, no tengo ninguna experiencia con Blogger pero seguro que también debes poder agregar meta-etiquetas.

  7. Avatar de Colectivo Freelance
    Colectivo Freelance

    Excelente artículo Ruth, es importante entender que estas etiquetas aún son relevantes en SEO y que las integran automáticamente en wordpress con plugins como el yoast o Rank math si se configura adecuadamente.

    Saludos!

    1. Avatar de Ruth Raventós

      ¡Gracias por tu aportación y leernos!

Deja una respuesta

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

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.