Cuando se trata de posicionar contenido, las redes sociales pueden convertirse en grandes aliadas. Pero para ello, el usuario debe hacer clic en ellas, y esto es algo que puede que no suceda si no le muestras una imagen, un título, etc., que le llame la atención.
Y este es un tema en el que las etiquetas Open Graph tienen mucho que decir. Por eso, aquí te explicaremos en qué consisten estas etiquetas y cómo pueden ayudarte a mejorar tu posicionamiento.
¿Qué es Open Graph?
A veces, cuando publicas una entrada de blog en una red social, la información que aparece no es la más adecuada: ni el título, ni la imagen, ni la descripción coinciden. La razón es que la red social no sabe cuál es el título o la imagen principal de esa entrada, ni entiende de qué va.
Pues bien, el protocolo Open Graph es precisamente la solución a ese problema. Se trata de etiquetas que se añaden al código HTML de la página. El usuario no puede verlas, pero ayudan a la red social a conocer los elementos principales del artículo. En otras palabras, indican la estructura del post.
Puedes añadir etiquetas Open Graph para decidir qué elementos mostrar en redes sociales como Facebook, Twitter y LinkedIn. También funciona en aplicaciones como WhatsApp, Slack y Telegram.
También se conocen como etiquetas sociales, y son de crucial importancia a la hora de posicionar contenido en redes sociales. Veamos por qué.
¿Por qué Open Graph es bueno para el SEO?
Sí, las etiquetas Open Graph mejoran el posicionamiento SEO, y por razones muy sencillas. Principalmente porque facilitan la captación de la atención del usuario, creando tarjetas sociales atractivas.
Al mostrar la imagen, el título y la descripción más llamativos, mejoras las posibilidades de que el usuario de la red social se fije en la publicación. En otras palabras, es más probable que acaben haciendo clic, y el resultado es un mayor tráfico al sitio de la red social.
Además, estas etiquetas sociales sirven para optimizar el contenido que se comparte en redes sociales.
¿Por qué? Por la misma razón: porque conseguimos controlar cómo se muestran nuestros fragmentos de URL en las redes sociales. De este modo, generamos las llamadas tarjetas de Facebook, tarjetas de Twitter y otras previsualizaciones de contenido en las redes sociales.
Cómo implementar el protocolo Open Graph
Facebook es el desarrollador del protocolo Open Graph, y Twitter tiene su propia versión de esta etiqueta. Como hemos indicado, estas etiquetas también se pueden utilizar en LinkedIn, WhatsApp, Slack y Telegram.
Dicho esto, ¿cómo se implementan estas etiquetas? Se hace añadiéndolas al código HTML en la sección ‘head’.
Se puede hacer manualmente, pero normalmente encontrarás plugins para añadir Open Graph al gestionar la página a través de un CMS. De lo contrario, un desarrollador puede crear una funcionalidad para este propósito.
Ahora hablemos de la parte técnica de este tema. Hay cuatro propiedades de Open Graph que siempre son necesarias:
- og:url
- og:title
- og:description
- og:image
Indicando los datos relacionados con la URL, el título, la descripción y la imagen, Facebook sabe qué información mostrar cuando se comparte el contenido.
Dicho esto, hay otras dos propiedades que recomendamos implementar para proporcionar más información sobre el contexto del contenido:
- og:type (tipo de contenido, como producto, perfil, etc.).
- og:locale (región de destino de la página).
Buenas prácticas de Open Graph
Cuando trabajes con Open Graph, te conviene seguir los siguientes consejos:
- Por lo menos, deberías definir las propiedades obligatorias de Open Graph, pero lo ideal sería que implementaras también las recomendadas.
- El og:title no debería exceder los 55-60 caracteres.
- La og:description no debería exceder los 60-65 caracteres.
- En cuanto a la og:image, deberías usar imágenes de alta calidad, con unas dimensiones mínimas de 1200 x 630 píxeles. El tamaño del archivo no debería superar los 8 MB.
- Una vez que el marcado esté listo, deberías probarlo a través del depurador de Open Graph para obtener una vista previa del fragmento y asegurarte de que todos los elementos estén completos. Debería ajustarse y reajustarse hasta que se vea bien. El fragmento también se almacenará en caché, por lo que se mostrará correctamente la primera vez que lo compartas.
- Si quieres que Facebook muestre un nuevo fragmento después de cometer un error y corregirlo, ve al depurador de Open Graph de Facebook y haz clic en ‘Obtener nueva información de scraping’. Esta práctica actualizará la caché. Sin embargo, la imagen no se actualiza automáticamente, sino que tienes que definir una nueva URL og:image y luego hacer clic en ‘Obtener nueva información de scraping.’
- Usa og: image: width y og: image: height para permitir que la imagen correcta se cargue justo después de que se comparta por primera vez.
