12 metaetiquetas Open Graph esenciales para Facebook y Twitter


Todos los especialistas en marketing conocen la frase «el contenido es el rey», pero el contenido no es nada sin lectores y seguidores.

En estos días, hay una forma segura de llevar su contenido a un público más amplio y compartir su nueva publicación de blog en las redes sociales.

Con una audiencia lista de millones, los sitios como Facebook y Twitter son excelentes formas de correr la voz. Sin embargo, si desea optimizar ese alcance, hay una manera extremadamente simple de hacerlo: etiquetas de gráficos abiertos (OGP).

¿Nunca ha oído hablar del Open Graph Protocol detrás de OGP? Luego, déjame explicarte qué son, por qué son importantes y, lo más importante, ¿cómo usarlos?

¿Qué es un gráfico abierto y por qué se creó?

Facebook introdujo Abra el gráfico en 2010 Para promover la integración entre Facebook y otros sitios web al permitir que las publicaciones sean objetos con una funcionalidad similar a otros objetos de Facebook.

En pocas palabras, ayuda a optimizar las publicaciones de Facebook al brindarle más control sobre cómo la información pasa de un sitio de terceros a Facebook cuando se comparte una página (o le gusta, etc.).

Información para implementar esto en la sección de código del sitio web Se entrega a través de Open Graph Labels.

Una instantánea de las etiquetas ogp en una serie de códigos de sitios web.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 25

Otros sitios de redes sociales también están utilizando etiquetas meta sociales. por ejemplo, Gorjeo Y LinkedIn Aprende etiquetas de gráficos abiertos; Twitter tiene sus propias metaetiquetas para las tarjetas de Twitter, pero si los bots de Twitter no pueden encontrar ninguna, usa etiquetas OGP en su lugar.

Por qué los especialistas en marketing deberían preocuparse

Las etiquetas OGP son importantes para los especialistas en marketing porque ayudan a garantizar que la información correcta se complete automáticamente cuando un usuario comparte su contenido en las redes sociales. Esto puede ayudar a aumentar el compromiso y ayudar a los clientes potenciales a obtener más información sobre su producto o servicio.

Además, los especialistas en marketing deben prestar atención a las etiquetas OGP, ya que los sitios de redes sociales son los principales impulsores de la mayor parte del tráfico web. Por lo tanto, la capacidad de aprovechar el poder de las metaetiquetas sociales es una habilidad fundamental para los especialistas en marketing de hoy.

Además, el uso de etiquetas OGP lo ayuda a realizar un seguimiento del rendimiento de su contenido en las redes sociales, lo que le permite adaptar su estrategia para compartir.

Pero, lo más importante: las etiquetas de gráficos abiertos pueden tener un gran impacto en la conversión y las tasas de clics al resolver problemas comunes.

Por ejemplo, ¿alguna vez compartió un enlace en Facebook solo para descubrir que la miniatura desapareció o que había una imagen diferente a la que esperaba?

Saber un poco sobre las etiquetas OGP puede ayudarlo a resolver estos problemas y mejorar su marketing en redes sociales.

Sin embargo, hay una cosa que no haces, y eso afecta tu SEO en la página. Sin embargo, vale la pena ver el impulso que puede obtener del alcance adicional en las redes sociales.

Ahora, veamos las etiquetas OGP más importantes para Facebook y cómo optimizarlas para compartirlas mejor.

Comprender las etiquetas OGP de Facebook

Como se discutió anteriormente, las cuentas de OGP son críticas porque le permiten controlar cómo aparece su contenido cuando se comparte en sitios como Facebook. Las etiquetas de gráficos abiertos le permiten controlar el título, la descripción y la imagen en la publicación; Es una excelente manera de asegurarse de que su contenido se vea increíble cuando lo comparte.

además:

  • Agregar etiquetas OGP garantiza que use la imagen y la descripción correctas, lo que puede ayudar a mejorar las tasas de clics, lo que le permite agregar detalles específicos, como una película, un libro o un producto.
  • El uso de etiquetas OGP le permite realizar un seguimiento del rendimiento de su contenido en Facebook. Cuando alguien comparte una de sus publicaciones en el sitio, las cuentas de OG enviarán datos de tráfico a Facebook. Estos datos le permiten ver qué artículos obtienen la mayor participación y cuáles necesitan mejorar.
  • La inclusión de etiquetas OGP garantiza que use la imagen y la descripción correctas al compartir sus enlaces en Facebook, lo que ayuda a mejorar las tasas de clics.
  • Agregar etiquetas OGP es fácil y la mayoría de los sistemas de administración de contenido tienen complementos o extensiones para simplificar el proceso.

Facebook tiene varios tipos de cuentas gráficas abiertas. Puede usar etiquetas OGP para definir cosas como el nombre del sitio, la imagen utilizada como miniatura en Facebook y la descripción que aparece cuando alguien comparte su página.

En esta sección cubriré los diferentes tipos y explicaré cómo usarlos.

Una captura de pantalla de la publicación de Facebook que muestra dónde aparecen las etiquetas ogp en la página web real.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 26

Y: titulo

Ag: Título es cómo describe el título de su contenido. Tiene el mismo propósito que una metaetiqueta de título tradicional en su código. De hecho, si Facebook no encuentra la etiqueta ag:arts en su página, utilizará el título de la etiqueta de gráfico abierto en su lugar.

Como explica Facebook, la mayoría del contenido se comparte como una URL. Si desea controlar la apariencia de su contenido en el sitio, debe agregar etiquetas OGP.

En las propias palabras de Facebook,

«A partir de estas etiquetas de gráficos abiertos, el rastreador de facebook Utiliza heurística interna para adivinar lo mejor para el título, la descripción y la imagen de vista previa de su contenido. Para garantizar publicaciones de alta calidad en Facebook, etiquetan claramente estos datos con etiquetas de gráficos abiertos.

Para aprovechar al máximo OGP, querrá pensar en cómo se verá su texto y cuánto tiempo durará.

Recuerda que el texto que aparece en el feed de Facebook está en negrita y es extremadamente llamativo. Al igual que cualquier buen título de publicación, debe ser convincente.

No hay límite para los caracteres, pero es mejor mantenerlo entre 60 y 90. Si su título tiene más de 100 caracteres, ¡Facebook lo reducirá a solo 88!

por ejemplo:

Y: URL

Cuando comparte un enlace en Facebook, puede agregar etiquetas de gráficos abiertos. Estas etiquetas ayudan a Facebook a mostrar información valiosa sobre el enlace, como la imagen, el título y la descripción.

Así es como lo configuras. Canónico La URL de la página que estás compartiendo. Esto significa que usted define una página donde van todos sus recursos compartidos. Útil si tiene más de una URL para el mismo contenido (por ejemplo, usando parámetros). Nota importante: la URL proporcionada no se mostrará en las noticias de Facebook, solo se mostrará el dominio.

por ejemplo:

<ሜታ ንብረት=”og:url” ይዘት=” />

Y: tipo de

Así es como especifica el tipo de contenido que está compartiendo: una publicación de blog, video, imagen u otra cosa. La lista para elegir es larga. Aquí hay unos ejemplos:

Basado en la web:

Entretenimiento:

Ubicación:

Gente:

Negocio:

Puedes ver la lista completa de tipos aqui.

Esta etiqueta es importante si su página tiene un botón «Me gusta» y representa un objeto de la vida real (como un libro o una película). Su contenido estará determinado por el segmento de interés del usuario si su perfil les gusta.

En la mayoría de los casos, utilizará el valor «sitio web» porque es un enlace de sitio web que está compartiendo. De hecho, si no especifica uno, Facebook lo leerá como «sitio web» de forma predeterminada.

por ejemplo:

Y: Descripción

Este descriptor de metadatos es muy similar a la etiqueta de descripción en HTML. Aquí es donde describe su contenido, pero en lugar de aparecer en la página de resultados del motor de búsqueda, aparece debajo del título del enlace en Facebook.

Sin embargo, a diferencia de una etiqueta de meta descripción normal, no afectará su SEO, pero sigue siendo una buena idea hacer que la gente haga clic en ella.

Og: Las etiquetas de descripción no limitan la cantidad de caracteres, pero es mejor usar alrededor de 200 caracteres. En algunos casos, como enlace/título/dominio, Facebook puede mostrar hasta 300 caracteres, pero sugiero que todo lo que supere los 200 se trate como un extra.

por ejemplo:

y: higo

Esta es la etiqueta OGP más atractiva para muchos especialistas en marketing porque una imagen siempre ayuda a que el contenido se destaque. Así es como te aseguras de que Facebook muestre una miniatura diferente cuando compartes tu página, y puede ser beneficioso para tus tasas de conversión.

Asegúrate de configurar la imagen publicitaria de tu elección, de lo contrario, Facebook mostrará algo estúpido como un banner publicitario que se ha eliminado de la página. ¡Definitivamente no quieres eso!

Aquí hay algunos consejos más:

  • Si su página es estática y no utiliza ningún sistema de administración de contenido (CMS) (como WordPress), es importante recordar que deberá cambiar manualmente la imagen og: para cada una de sus páginas.
  • Si administra su sitio web con un CMS e instala el complemento correspondiente, las etiquetas og:image se asignarán automáticamente a cada página. Encuentre la lista de complementos a continuación.
  • La resolución recomendada con más frecuencia para una imagen OG es de 1200 píxeles x 627 píxeles (proporción 1,91/1). Con este tamaño, su miniatura será más grande y se destacará entre la multitud. Simplemente no exceda el límite de tamaño de 5 MB.
Una captura de pantalla de una publicación de Facebook con un ejemplo de la etiqueta OGP og:image, con la imagen representada en tamaño completo.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 27

Si usa una imagen de menos de 400 píxeles x 209 píxeles, la miniatura será mucho más pequeña. No es tan llamativo.

Una captura de pantalla de una publicación de Facebook con un ejemplo de una etiqueta og:image ogp con una imagen representada en un tamaño pequeño.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 28

Tenga en cuenta que la imagen que utiliza como imagen de gráfico abierto puede ser diferente de la de su página.

¿Por qué no aprovechar esa oportunidad para destacar aún más?

Por ejemplo, si su título es bueno pero la imagen que está usando no es muy interesante (no es información o una persona atractiva, etc.), considere usar una imagen con una buena línea o dos de copia en su lugar (vea el ejemplo abajo).

Una cosa para recordar si haces esto: coloca tu texto o la parte más importante en el medio de la imagen. Esto es importante porque Facebook borra los lados de las miniaturas.

Una captura de pantalla de una publicación de Facebook que muestra un ejemplo de cómo poner texto en una sección de miniaturas que es muy efectivo.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 29

por ejemplo:

<ሜታ ንብረት=”og:image” ይዘት=” />

Una manera fácil de agregar OGP, Hay un generador en línea..

Cuentas avanzadas de grafo abierto de facebook.

Las etiquetas de gráficos abiertos de arriba son todo lo que necesita saber. Sin embargo, puede utilizar otras etiquetas más avanzadas para proporcionar información más detallada.

por ejemplo

  • og:locale – especifica la configuración regional; El inglés estadounidense es el predeterminado.
  • og:site_name – si la página (objeto) que está compartiendo es parte de una red más grande
  • og:audio u og:video: para agregar archivos de audio o video adicionales a su contenedor
  • fb:app_id – para asociar la aplicación de Facebook (por ejemplo, FB Comments) con el objeto

Verifique sus cuentas OGP

Una vez que haya configurado sus cuentas gráficas abiertas, debe asegurarse de que funcionen correctamente. Para hacer esto, puede usar Share Editor para ver cómo aparecerá su contenido cuando lo comparta en Facebook, Messenger y otros lugares. Además, Batch Invalidator le permite actualizar esta información para múltiples URL al mismo tiempo.

Para usarlo, simplemente ingrese la URL de la página con la que tiene problemas y haga clic en Editar.

Herramienta de edición de Facebook Tiene dos funciones importantes.

Primero, cuando escriba el enlace que desea verificar, devolverá cualquier error y comentario para la etiqueta OG. También puede verificar cómo se ve la imagen de la marca, su descripción, etc.

En segundo lugar, borra el caché de Facebook. Imagínese esto: publica un enlace en Facebook, pero ve un error en la miniatura, por lo que regresa a su sitio web, ajusta las etiquetas OGP y publica en Facebook nuevamente.

Tal vez, no pasará nada. Queda la miniatura. Esto se debe a la memoria caché. El editor de Facebook Share actualiza el caché de tus enlaces después de cualquier edición, así que recuerda usarlo cada vez.

Es una captura de pantalla de la herramienta de edición de Facebook.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 30

Abrir cuentas gráficas para Twitter: Twitter Cards

Si no está familiarizado con las Twitter Cards, le permiten adjuntar archivos multimedia y agregar información adicional a sus tweets. Esto puede ser útil para aumentar la visibilidad de sus tweets y proporcionar más contexto para los usuarios que hacen clic.

Aunque no son lo mismo, las tarjetas de Twitter usan el mismo protocolo de gráfico abierto y son similares a las etiquetas OGP. La aplicación de estas etiquetas hace que la creación de tarjetas de Twitter sea muy fácil sin duplicación de molestias.

Al igual que las cuentas gráficas abiertas de Facebook, las tarjetas de Twitter también le permiten Destaca entre la mayoría de los tweets. En resumen, le permiten generar contenido extra a partir de su tweet de 140 caracteres.

Esto no aparecerá automáticamente en los feeds de las personas, pero agregará un pequeño botón «Resumen» debajo del tweet.

Puede usar etiquetas de gráficos abiertos para definir el título, la descripción y la imagen de su contenido, y para definir el tipo de contenido de su página y la audiencia a la que desea llegar.

Un ejemplo de una captura de pantalla de Twitter con "Resumen visual" Etiquetas opg opcionales resaltadas en rojo para Twitter.
Un ejemplo de etiquetas de gráficos abiertos para Twitter.

Cuando haces clic en él:

Una captura de pantalla de la página de Twitter que muestra cómo se usan las etiquetas de título, descripción e imagen en Twitter.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 31

La tarjeta de Twitter es tentadora para hacer clic y proporciona un resumen útil de la página compartida. Pero, sorprendentemente, muchos sitios web no usan estas etiquetas, lo que le brinda una gran oportunidad para que sus tweets se destaquen de otros feeds.

La instalación de estas tarjetas no es difícil y existe una solución rápida, incluso si no es experto en tecnología. Simplemente instale el complemento de WordPress.

WordPress SEO con Yoast hace el trabajo perfectamente.

Para habilitar Twitter Cards en Yoast:

Una captura de pantalla de un sitio de WordPress que muestra cómo habilitar Twitter Cards en WordPress SEO con el complemento Yoast.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 32

Si el método anterior no es una opción, pregúntele a su desarrollador web y proporcióneles cuentas de Twitter Card listas para implementar. Aquí está cómo hacerlos.

twitter: tarjeta

Esta etiqueta requerida funciona de la misma manera que og:type. Define el tipo de contenido que compartes. Hay siete opciones: Resumen, Foto, Video, Producto, Aplicación, Galería y Resumen de «Versión grande».

El enlace debajo de su tweet cambiará según el tipo de contenido que seleccione. Puede encontrar «Ver resumen» para resúmenes, «Ver foto» para fotos, etc. Si esta etiqueta no está configurada, Twitter leerá su enlace como un «resumen» de forma predeterminada.

por ejemplo:

twitter: tema

Esto básicamente hace lo mismo que su contraparte OG. El título de su artículo se resaltará en negrita. Es aconsejable evitar repetir el mismo texto en tu Twitter. Aproveche al máximo el espacio provisto y deje que las dos grabaciones se reproduzcan entre sí para reforzar el mensaje. Utilice hasta 70 caracteres.

por ejemplo:

Gorjeo: Descripción

Use esta etiqueta para escribir prospectos descriptivos para la página que está compartiendo. Al igual que con las etiquetas de gráficos abiertos, no se concentre en las palabras clave porque no serán importantes para su SEO. Cree una copia convincente que complemente bien su tweet y tema. Twitter ha limitado esta sección a 200 caracteres.

por ejemplo:

Twitter: URL

esto prepara La URL canónica del contenido que compartes. (Para obtener más información, consulte la descripción del gráfico abierto de Facebook para el mismo).

por ejemplo:

<ሜታ ስም=”twitter:url”ይዘት=”/>

Gorjeo: Imagen

Sí, lo has adivinado. A continuación, le mostramos cómo configurar la imagen para que vaya con su tweet. Twitter permite dos opciones, una tarjeta con una imagen pequeña o grande.

Tú decides qué tipo de cuenta quieres. Si elige la opción grande, asegúrese de que tenga una resolución de al menos 280×150 píxeles y que el tamaño del archivo no supere 1 MB. Puede considerar usar la misma técnica que la miniatura de Facebook: agregue texto a la imagen para agregar un mensaje.

por ejemplo:

<ሜታ ስም=”twitter:image”content=”/image-name.jpg” />

Solicitar aprobación de Twitter

Agregar tarjetas a sus tweets es fácil: todo lo que tiene que hacer es agregar un código adicional al final de su tweet. El código nos dice qué tipo de tarjeta quieres usar y cómo quieres que aparezca el contenido.

Existen muchos tipos de tarjetas de Twitter, por lo que puedes elegir la que se adapte a tus necesidades.

Sin embargo, antes de que pueda aprovechar al máximo las Twitter Cards, recuerde que debe pedirle permiso a Twitter para su página.

Afortunadamente, esto solo toma alrededor de 15 minutos y se puede hacer fácilmente usando su Verificación de tarjeta.

Para empezar,

  • Seleccione el tipo de tarjeta que desea utilizar.
  • Añade tus metaetiquetas
  • Verifica la URL con la herramienta de validación de Twitter.
  • Pruébelo en Authenticator o autorice su tarjeta, luego envíe un tweet con la URL para mostrar su tarjeta.

Después de obtener el permiso, Card Validator tiene el mismo propósito que Facebook Share Validator, lo que le permite verificar sus enlaces antes de comprometerse.

Complementos de tarjetas de Twitter

Al igual que Facebook, existen muchos complementos para implementar las tarjetas de Twitter. Éstos son algunos de ellos:

¿Cómo se implementan las etiquetas de gráficos abiertos?

¿Cómo implementas las etiquetas OGP? Básicamente, son la parte HTML de tu página. son parte Si no está administrando el código, debe pedir ayuda a su desarrollador web. Puede preparar todo el paquete usted mismo siguiendo los consejos anteriores para ahorrar un tiempo valioso.

Si está utilizando WordPress, simplemente instale uno de los complementos que realmente implementará el código. Como dije, me encanta usarlo. WordPress SEO por YoastPero hay algunas otras herramientas gratuitas que puede usar, que incluyen:

Captura de pantalla de WordPress SEO by Yoast que muestra cómo implementar etiquetas ogp con la función de complemento.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 33

Otros complementos/extensiones/complementos de OG para:

Me gusta Facebook Twitter proporciona una herramienta para verificar sus cuentas de OGP; TwitterCard Verification es una herramienta para probar y obtener una vista previa de cómo aparecerán sus tweets cuando se compartan en otros sitios. Para usar el validador, ingrese la URL del sitio web con el que desea compartir su tweet y haga clic en «Verificar».

El verificador le mostrará una vista previa de cómo aparecerá su tweet en el sitio web y mostrará el título, la descripción y la imagen.

Preguntas que se deben hacer

¿Qué es un gráfico abierto y por qué se creó?

El Open Graph Protocol (OGP) es un conjunto de etiquetas que se utilizan para definir la estructura de las páginas web para compartirlas fácilmente en las plataformas de redes sociales. Las cuentas de OGP permiten a los webmasters controlar cómo aparece su contenido cuando se comparte en sitios de redes sociales como Facebook y LinkedIn.

¿Cómo encontrar etiquetas de gráficos abiertos?

En el sitio web <ራስ> Encontrarás un gráfico abierto en clase.

¿Qué es SEO OGP?

¿Cómo se verifican las cuentas de OGP?

Hay herramientas gratuitas disponibles para verificar sus etiquetas OGP. Los sitios web como Facebook también ofrecen un validador para que pueda verificar las cuentas en busca de errores.

Resumen

El código final para Facebook y Twitter se ve más o menos así.

Captura de pantalla de la codificación del sitio web que muestra el código optimizado para las publicaciones de Facebook y Twitter.
12 metaetiquetas Open Graph esenciales para Facebook y Twitter 34

Puede parecer un poco confuso, pero afortunadamente muchas herramientas facilitan el proceso: ni siquiera necesita saber codificar.

Hay tres tipos principales de metaetiquetas gráficas: og:título, og:imagen y og:descripción, y hacer el esfuerzo de implementarlas tiene beneficios distintos, que incluyen mejores clics y compromiso, todo lo cual puede conducir a más conversiones. . Las dimensiones adicionales de agregar un gráfico abierto también aumentan la visibilidad.

Sin embargo, a pesar de estas ventajas, sorprende la poca gente que desarrolla estas cuentas. Vale la pena hacerlo porque te ayuda a sobresalir. Atraerá más clics y vistas y ayudará a mejorar su SEO, todo lo que conduce a más ganancias.

¿Ha implementado metaetiquetas Open Graph? ¿Cómo ha afectado a su sitio?



Deja un comentario

Ir arriba