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 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…
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.
Ejemplo de cómo muestra Google la información en sus resultadosTiene 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.
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.
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
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.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.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.
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.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.
Deja una respuesta