Meta Tags Open Graph - Lo que necesitas saber

¿Quieres que la gente note tus publicaciones en redes sociales?

Cada día se escriben más de 4 millones de entradas de blog, por lo que es fundamental compartir tu trabajo en redes sociales. Open Graph es uno de los componentes más importantes para llegar a una audiencia más amplia.

No todo el mundo conoce la importancia de Open Graph. ¿Qué es exactamente? ¿Cómo puede ayudarte a que te noten?

¿Qué es Open Graph?

“Las meta tags, como las meta descriptions y los títulos, rigen cómo se escriben las URL cuando se comparten en redes sociales.”

Es más sencillo definir el contenido de la página en los sitios de redes sociales gracias al proyecto Open Graph de Facebook para estandarizar la información social en todos los sitios web.

Estas tags proporcionan a los servicios de redes sociales información como el título de la página, la descripción y la imagen destacada en la sección head de una página web. Este proceso preserva la coherencia y autenticidad de la información mostrada.

¿Por qué usar Open Graph?

Open Graph es compatible con varias redes sociales como:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

Según Google, el protocolo mejora los “Bloques de Contenido Recomendado”.

¿Qué pasa si no se usa Open Graph?

Como Facebook no está seguro de qué mostrar en la vista previa, puede usar cualquier imagen que encuentre (incluso puede tomar un banner publicitario o algo de tu encabezado).

Como resultado, Facebook no puede determinar qué secciones de la vista previa mostrar.

• Open Graph crea vistas previas para sitios web relacionados con redes sociales.
• Las tags Open Graph ayudan a las personas a localizar material en los feeds sociales, lo que conduce a un aumento de las visitas.

A medida que los visitantes se desplazan por la página de tu sitio web, cuanto más arriba aparece tu material, más atención recibe. Permite a los usuarios obtener una vista previa antes de hacer clic.

Usa las tags OG para ayudar a la gente a localizar tu material en Facebook y otras plataformas de redes sociales.

Los elementos meta OG se utilizan para crear fragmentos cuando se comparten URL en conversaciones privadas en sitios que utilizan el protocolo.

La importancia del protocolo Open Graph para tu negocio

Este tipo de interacción se simplifica con el protocolo Open Graph de Facebook. El marcado Open Graph es un método para organizar y rastrear datos de vista previa. Te permite un control total sobre cómo se muestra tu material en redes sociales distintas a las tuyas.

Para facilitar la integración, se crearon objetos de grafo enriquecidos que comparten el conjunto estándar de características de Facebook. Facebook tiene control sobre el flujo de información de fuentes externas (o a las que se les dio "me gusta", etc.). Esta información es proporcionada por las meta tags Open Graph a medida que se mueven a través del encabezado de un sitio web.

Debido a que muchas personas acceden a una página a través de las redes sociales, las tags Open Graph son más vitales que nunca. El CTR puede aumentar cuando se mejora la búsqueda. Open Graph facilita el proceso de compartir en redes sociales. Open Graph es ampliamente compatible en los sitios de redes sociales. Las tags Open Graph de Twitter/X son un buen ejemplo; Twitter/X es compatible con Open Graph.

¿Qué significa esto exactamente?

¿Por qué molestarse en etiquetar tu contenido del lado del servidor usando Open Graph? ¿Existe la posibilidad de que las tags adicionales mejoren el rendimiento de tu sitio web y atraigan más visitantes? Aquí te presentamos algunas de las razones por las que creemos que Open Graph puede marcar una gran diferencia.

La mayoría de las redes sociales prominentes utilizan tags Open Graph

Si no tienes tiempo para aprender HTML, puedes utilizar las tags Open Graph de Facebook. Puedes usar estas etiquetas para personalizar los nombres, descripciones y fotos que aparecen en todos los principales sitios de redes sociales.

Las tags Open Graph son realmente para redes sociales

Open Graph fue diseñado para mostrar muestras de información dentro de la red social. Organiza la información de formas que van más allá de simplemente compartir una página web.

Imagen optimizada destacada

Puedes usar las tags Open Graph para especificar qué imagen debe aparecer en tu vista previa social. No es necesario elegir la opción predeterminada. Las personas están más inclinadas a hacer clic en los enlaces de tu entrada de blog o sitio web si se ven excelentes.

Se trata de vistas previas sociales, no de vistas previas de búsqueda

Tanto la optimización para motores de búsqueda como el marketing en redes sociales son cruciales, pero tienen requisitos distintos. Los componentes de Open Graph resolvieron un antiguo problema de SEO: el hecho de que las vistas previas de las publicaciones en redes sociales tenían títulos y descripciones poco atractivos.

El título de la página, las meta descriptions y las tags de título, descripción, URL e imagen de Open Graph deben ser únicos para que el contenido se optimice para los motores de búsqueda y las redes sociales.

Tienes control sobre tu material

Ya sea que publiques tu material tú mismo o lo haga otra persona, tienes control total sobre cómo aparecerá en las redes sociales.

Incluso si personalizas cada publicación en redes sociales, la mayoría de tus clientes ignorarán la vista previa. Los visitantes que decidan compartir tu material lo harán con una imagen, título y descripción bien elegidos si tus tags Open Graph son tan excelentes como sea posible. Esto es muy importante porque tienes control total sobre la información que se difunde sobre tu negocio.

Tipos de tags Open Graph

Las tags Open Graph como og:title, og:image, og:type y og:url permiten a las plataformas de redes sociales ver tu información. Debes usar estas tags críticas, pero también puedes usar otras.

Una captura de pantalla de Facebook que contiene conexiones a los componentes og:image, og:url, og:title y og:description.

og:site_name

La tag og:site_name debe contener el dominio donde se puede encontrar tu contenido. Como resultado, reemplaza el nombre de la marca, que habría estado en el meta título (y por lo tanto no estaría permitido en la tag og:title tag).

La tag og:site_name debe incluir el nombre de tu sitio o marca, mientras que la tag og:title debe contener el título de tu artículo.

Código og:site_name <meta property="og:site_name" content="Your Site Name" />

Usa la misma tag de nombre de sitio en todo tu sitio web.

og:title

La tag og:title se sugiere para establecer el título de la página. Es similar a cómo se usan los meta títulos en SEO. Al usar un meta título existente, asegúrate de mantener el campo og:title libre de cualquier contenido específico de tu marca o sitio web.

Código og:title <meta property="og:title" content="Title" />

Esta tag debe aparecer en cualquier página de tu sitio web que un usuario pueda querer compartir en Facebook, Twitter/X u otro sitio de redes sociales.

Mantén el título entre 40 y 50 caracteres; de lo contrario, se cortará.

Si quieres que más personas visiten tu sitio web, el título debe hacer más que simplemente describirlo.

A diferencia de los meta títulos de los motores de búsqueda, no debes incluir tu nombre de dominio ni ninguna otra información que pueda usarse para identificarte.

og:type

Usa la tag og:type para especificar el tipo de material que se envía. Esto informa al sitio de redes sociales sobre el tipo de contenido que estás compartiendo, como una entrada de blog, una página web, un video o un archivo de audio.

Código og:type <meta property="og:type" content="article" />

Usa el tipo de objeto "article" para información que requiera explicación, como entradas de blog.

Añade el tipo "website" a las otras páginas del sitio web.

Debes usar el formato de archivo correcto si deseas transferir un archivo que contenga texto y audio o video. Esta página contiene una lista de todas las Categorías de Objetos.

og:locale

La tag og:locale proporciona información sobre el idioma en el que está redactado el material que se transfiere. Los usuarios de los sitios de redes sociales deben saber que el contenido publicado en los sitios web se puede ver en varios idiomas.

Código og:locale <meta property="og:locale" content="en_GB" />

Debido a que Facebook asume que todo lo que carece de una tag og:locale está escrito en inglés americano, si administras un sitio web en los Estados Unidos que está compuesto completamente de material en inglés, puedes ignorar esta tag (en_US).

Si el contenido que proporcionas está escrito en un idioma que no sea inglés americano, asegúrate de usar la tag OG correcta.

og:url

Simplemente usa la tag og:url para especificar dónde deseas publicar el contenido.

Código og:url <meta property="og:url" content="https://www.yourdomain.com/title.html" />

Esta tag debe proporcionar la URL canónica de la página.

og:description

La declaración que se incluye en una tag og:description debe ser concisa, sencilla y lo más atractiva posible para animar a los lectores a visitar un sitio web.

Puedes reutilizar la información siempre que sea relevante, debido a que esta tag es similar a una utilizada por los motores de búsqueda.

Código og:description <meta property="og:description" content="Your description." />

Sería útil si pudieras mantener tu descripción entre 50 y 100 caracteres. Las publicaciones de Facebook deben tener entre dos y cuatro palabras como máximo; las publicaciones de más de cuatro palabras tienen más probabilidades de ser eliminadas.

Para obtener la mayor cantidad de clics y atención para el material que proporcionas, la descripción que ofrezcas debe ser lo más detallada y convincente posible.

og:image

Proporciona la URL de la imagen que se utilizará en el extracto social usando el elemento og:image. Usa una imagen que sea intrigante y directamente relevante para el contenido del artículo para aumentar la probabilidad de que las personas hagan clic en tu sitio web.

Este elemento OG funciona de manera similar al schema markup, que es utilizado por los motores de búsqueda para proporcionar resultados enriquecidos.

Código og:image <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Si quieres que las páginas compartibles de tu sitio web se clasifiquen mejor en la optimización de motores de búsqueda de imágenes, usa fotos innovadoras que coincidan con tu marca. Incluso si una página no es probable que se comparta con frecuencia, marcarla con tu logo es una buena idea en caso de que alguien la comparta en el futuro.

Para evitar que parezca pixelada o de baja calidad, tu obra de arte original debe tener una relación de aspecto de 1.91:1 y una resolución de al menos 1200 por 630 píxeles.

Las tags og:image:width y og:image:height aseguran que las imágenes compartidas previamente aparezcan correctamente. Instala Yoast en tu sitio de WordPress si aún no lo has hecho para que se añadan automáticamente. Si aún no lo has hecho, aquí tienes el código:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Añadir Open Graph a WordPress

Añadir tags OG a WordPress es la forma más fácil, común y sencilla de lograrlo con el plugin Yoast SEO. Este plugin ya debería estar instalado si tu sitio está configurado para que los motores de búsqueda puedan localizarlo fácilmente.

Actualiza la página o el artículo donde se debe insertar Open Graph usando la opción “social” de Yoast SEO.

Rellena los cuadros og:image, og:title y og:description en el acordeón de Facebook.

Yoast configurará tu tag og:url, Twitter/X Card y los tamaños de imagen por ti. Si no le indicas a Yoast que use una imagen específica, utilizará la imagen principal de la publicación.

Cuando se comparte tu sitio web, no se muestra ninguna imagen por defecto. Puedes cambiar esto proporcionando una captura de pantalla de todo el sitio. Este error ocurre cuando una URL de imagen carece de la tag og:image.

En la página de configuración principal de Yoast, puedes seleccionar la og:image para todo el sitio.

Añadir tags OG en tu blog de WordPress es realmente fácil. Solo tienes que ir a:

Barra lateral de WordPress : Yoast>Social>Facebook.

Activa el interruptor y luego guarda la imagen existente. Creemos que deberías seleccionar un logo. También puedes hacer lo mismo para Twitter/X y Pinterest.

Añadir Open Graph manualmente

Si sabes cómo programar y no estás utilizando uno de los sistemas anteriores, las tags OG son fáciles de instalar.

Puedes copiar y pegar el contenido a continuación en tu sitio web, pero por favor modifícalo para que se adapte a tus necesidades.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Probando tus meta tags Open Graph

Asumamos que has entendido cómo incluir un Open Graph en tu sitio web.

Si tu sitio web está correctamente clasificado, debería verse excelente cuando se comparte en redes sociales. Siempre prueba tu trabajo antes de publicarlo.

Antes de compartir una URL, verifica que tus tags OG se estén extrayendo y mostrando correctamente.

Estas herramientas pueden ser útiles para probar tus tags OG:

• Validador de Rich Pins de Pinterest
• Validador de Twitter/X Card
• Depurador de Compartir de Facebook
• Inspector de Publicaciones de LinkedIn

Simplemente introduce una URL en cualquiera de estos servicios para obtener las meta tags originales. Cuando lo compartas, tendrás una idea de cómo se verá para los demás.

Examina la imagen, el título y la descripción de la vista previa antes de continuar. Puedes recibir alertas sobre tags que no necesitas, las cuales puedes añadir o ignorar.

Si la prueba de URL falla, deberías intentarlo de nuevo con una tag diferente. Verifica que cada herramienta esté operativa visitando su URL. Puedes hablar de ello cuando esté terminado.

Veredicto

Es fundamental mantener el control sobre lo que compartes en redes sociales. El tráfico y las tasas de conversión aumentan cuando se muestran elementos enriquecidos en Open Graph. Empieza con una sola entrada de blog. Una vez que hayas visto el resultado, será mucho más fácil aplicar las tags Open Graph en tus próximas publicaciones en el futuro.

Preguntas frecuentes