Los especialistas en marketing crean una gran cantidad de contenido. Sí, el contenido es el rey, pero este rey es impotente sin seguidores.
Entonces, ¿qué es lo primero que te viene a la mente cuando quieres llegar a un público más amplio con tu nueva publicación de blog?
Compartir en las redes sociales, por supuesto. Las audiencias masivas de sitios como Facebook y Twitter hacen de esta una de las mejores acciones, pero ¿sabes cómo maximizar ese potencial de difusión?
Las metaetiquetas de gráfico abierto fueron diseñadas para hacer precisamente eso. Pero, ¿qué son, por qué son importantes y, lo más importante, cómo los usa?
¿Qué es un gráfico abierto y por qué se creó?
Facebook introdujo Open Graph en 2010 para promover la integración entre Facebook y otros sitios web al permitir que las publicaciones se conviertan en objetos enriquecidos con la misma funcionalidad que otros objetos de Facebook.
En pocas palabras, ayuda a optimizar las publicaciones de Facebook al proporcionar más control sobre cómo viaja la información desde un sitio web de terceros a Facebook cuando se comparte una página (o le gusta, etc.).
Para que esto sea posible, la información se envía a través de metaetiquetas Open Graph en el
parte del código del sitio.
Ahora, otros sitios de redes sociales también están aprovechando las metaetiquetas sociales.
Varias otras plataformas grandes, incluidas Gorjeo y LinkedIn, reconocen las etiquetas Open Graph. Twitter en realidad tiene sus propias metaetiquetas para las tarjetas de Twitter, pero si los bots de Twitter no pueden encontrar ninguna, Twitter usa etiquetas Open Graph en su lugar.
Por qué los especialistas en marketing deberían preocuparse por Open Graph
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 vital para los especialistas en marketing de hoy.
Lo más importante: las metaetiquetas de gráfico abierto pueden tener un gran impacto en las conversiones y las tasas de clics.
¿Alguna vez compartiste un enlace en Facebook solo para descubrir que faltaba la miniatura o había una imagen totalmente diferente a la que esperabas?
Saber un poco sobre las etiquetas Open Graph puede ayudarlo a resolver estos problemas y mejorar su marketing en redes sociales.
Agregar etiquetas Open Graph a su sitio web no afectará directamente su SEO en la página, pero influirá en el rendimiento de su enlace en las redes sociales, lo que significa que vale la pena el esfuerzo para hacerlo. Echemos un vistazo a las metaetiquetas más importantes para Facebook y cómo optimizarlas para compartir mejor.
Comprender las metaetiquetas Open Graph de Facebook
Facebook tiene varios tipos de metaetiquetas de gráficos abiertos. Repasemos los diferentes tipos, luego hablaré sobre cómo usarlos.
og: título
Como puede adivinar, así es como establece el título de su contenido. Tiene un propósito similar al de la etiqueta de título meta tradicional en su código. De hecho, si Facebook no puede encontrar la etiqueta og: title en su página, usa el meta título en su lugar.
Tenga en cuenta que el texto que se muestra en un feed de Facebook es en negrita y muy llamativo. Tiene que ser convincente, como un buen título laboral.
No hay límite en el número de caracteres, pero es mejor permanecer entre 60 y 90. Si su título tiene más de 100 caracteres, Facebook lo truncará a 88 solamente.
Ejemplo:
og: url
Así es como configura la URL canónica de la página que está compartiendo. Esto significa que configura una página a la que irán todos sus recursos compartidos. Esto es útil si tiene varias URL para el mismo contenido (por ejemplo, usando parámetros). Nota importante: la URL proporcionada no se muestra en el feed de Facebook, solo el dominio es visible.
Ejemplo:
og: tipo
Así es como describiría el tipo de objeto que comparte: publicación de blog, video, imagen o lo que sea. La lista para elegir es larga. He aquí algunos ejemplos:
Basado en la Web:
Entretenimiento:
Consuegro:
Personas:
Negocio:
Puede ver la lista completa de tipos aquí.
Esta etiqueta es importante si su página tiene un botón "Me gusta" y representa un objeto real (como un libro o una película). Determina si su contenido aparecerá en la sección de intereses de un usuario de su perfil en caso de que le guste.
En la mayoría de los casos, utilizará el valor "sitio web" porque lo que está compartiendo es un enlace a un sitio web. De hecho, si no establece un tipo, Facebook lo leerá como "sitio web" de forma predeterminada.
Ejemplo:
og: descripción
Este descriptor de metadatos es muy similar a la etiqueta de meta descripción en HTML. Aquí es donde describe su contenido, pero en lugar de mostrarse en la página de resultados de un motor de búsqueda, aparece debajo del título del enlace en Facebook.
A diferencia de una etiqueta de metadescripción normal, esto no afectará su SEO. (Por lo tanto, no pierda demasiado tiempo averiguando cómo insertar palabras clave). Sin embargo, es una buena idea hacerlo atractivo porque desea que la gente haga clic en él.
No está limitado a una cantidad de caracteres, pero es mejor usar alrededor de 200 letras. En algunos casos, dependiendo de un enlace / título / dominio, Facebook puede mostrar hasta 300 caracteres, pero sugiero tratar cualquier cosa por encima de 200 como algo más.
Ejemplo:
og: imagen
Esta es la etiqueta Open Graph más interesante para muchos especialistas en marketing porque una imagen siempre ayuda a que el contenido se destaque. Así es como se asegura de que se muestre una miniatura en particular cuando se comparta su página. Esto puede resultar muy útil para sus tasas de conversión.
Asegúrate de configurar la imagen og: que elijas, de lo contrario, Facebook mostrará algo estúpido como un banner publicitario no deseado rayado en la página, o nada en absoluto (como a continuación). ¡Ciertamente no queremos eso!
Es importante recordar que si su página es estática y no usa un sistema de administración de contenido (CMS) (como WordPress), debe editar manualmente la imagen og: para cada una de sus páginas.
Si su sitio web está controlado con un CMS y tiene instalado el complemento correcto, las etiquetas og: image se asignan automáticamente a cada página. Busque la lista de complementos a continuación.
La resolución recomendada con más frecuencia para una imagen OG es 1200 píxeles x 627 píxeles (relación 1,91 / 1). En este tamaño, tu pegatina será alta y se destacará entre la multitud. No exceda el límite de tamaño de 5 MB.
Si usa una imagen de menos de 400px x 209px, se renderizará como una miniatura mucho más pequeña. No es tan llamativo.
Tenga en cuenta que la imagen que usa como imagen de Open Graph puede verse diferente a la que tiene en su página.
¿Por qué no aprovecharías esta oportunidad para destacar aún más?
Por ejemplo, si su título es bueno, pero la imagen que está usando no es muy emocionante (no es una infografía o una persona hermosa, etc.), considere usar una imagen con una buena línea o dos en su lugar (vea el ejemplo debajo).
Una cosa que debe recordar si está haciendo esto: coloque su texto, o la parte más importante, en el medio de la imagen. Esto es importante porque Facebook corta los lados de las miniaturas.
Ejemplo:
Etiquetas avanzadas de gráficos abiertos de Facebook
Las etiquetas de Open Graph anteriores son las que realmente necesita saber (og: descripción no tanto, pero es útil). Hay otras etiquetas más avanzadas que puede utilizar para proporcionar especificaciones aún más detalladas.
- og: locale: establece el idioma, el inglés de EE. UU. 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 objeto
- fb: app_id – para vincular a una aplicación de Facebook (por ejemplo, comentarios de FB) con el asunto
Verifique sus etiquetas de Open Graph
Para hacer su vida más fácil, Facebook ha creado una herramienta llamada Sharing Debugger. Tiene dos funciones muy útiles.
En primer lugar, cuando ingresa el enlace que desea verificar, devuelve todos los errores y sugerencias para etiquetas OG, si las hubiera. También puede verificar cómo se ve la imagen og:, cuál es su descripción, etc.
En segundo lugar, borra la caché de Facebook. Imagínese esto: publica un enlace en Facebook, pero luego ve un error en la miniatura, por lo que regresa a su sitio y ajusta las etiquetas OG, y lo vuelve a publicar en Facebook.
Probablemente no pasará nada. La pegatina seguirá siendo la misma. Es por el caché. El depurador de recursos compartidos de Facebook actualizará la caché de enlaces después de cualquier ajuste, así que asegúrese de usarlo siempre.
Metaetiquetas de Open Graph para Twitter: Tarjetas de Twitter
Al igual que las etiquetas Open Graph de Facebook, las tarjetas de Twitter te hacen destacar entre la multitud de tweets. Le permiten generar contenido adicional a partir de su tweet de 140 caracteres.
No aparece automáticamente en People Feeds, pero agrega un pequeño botón "Mostrar resumen" debajo del tweet.
Cuando haces clic en él:
Es tentador hacer clic y proporciona un resumen útil de la página compartida, la Tarjeta de Twitter. Sorprendentemente, pocos sitios aprovechan estas etiquetas. Esta es una gran oportunidad para hacer que sus tweets se destaquen en los feeds de Twitter abarrotados.
La mejor manera de obtenerlos es instalar uno de los complementos de WordPress. WordPress SEO by Yoast, mencionado anteriormente, hace el trabajo. Si esa no es una opción, pregúntele a su desarrollador web y entréguele las etiquetas de la Tarjeta de Twitter listas para implementar. Así es como los preparará.
twitter: mapa
Esta etiqueta obligatoria funciona igual que og: type. Describe el tipo de contenido que comparte. Hay 7 opciones para elegir: resumen, foto, video, producto, aplicación, galería y resumen en “versión grande”.
Dependiendo del tipo de contenido que elija, el enlace en la parte inferior de su tweet cambia. Puede obtener "Ver resumen" para resúmenes, "Ver foto" para fotos, etc. Si esta etiqueta no está configurada, Twitter lee su enlace como un "resumen" de forma predeterminada.
Ejemplo:
twitter: título
Básicamente hace lo mismo que su contraparte OG. Usted especifica el título de su artículo que aparecerá en negrita. Es una buena idea evitar repetir el mismo texto que tiene en su tweet. Aproveche al máximo el espacio proporcionado y deje que las dos copias se superpongan para reforzar el mensaje. Utilice hasta 70 caracteres.
Ejemplo:
twitter: descripción
Utilice esta etiqueta para escribir un cliente potencial descriptivo de la página que está compartiendo. Al igual que con las etiquetas Open Graph, no se centre en las palabras clave, ya que no serán importantes para su SEO. Cree una copia convincente que complemente su tweet y su título de manera agradable. Twitter limita esta parte a 200 caracteres.
Ejemplo:
twitter: url
Esto establece la URL canónica para el contenido que está compartiendo. (Para obtener más información, consulte la descripción de la etiqueta equivalente de Facebook Open Graph anterior).
Ejemplo:
twitter: imagen
Sí, lo adivinaste. Así es como configuras la imagen para que vaya con tu tweet. Twitter permite dos opciones, una tarjeta con una imagen más pequeña o una imagen más grande.
Tú decides cuál quieres en la etiqueta de tipo. Si elige la opción ancha, asegúrese de que tenga una resolución de al menos 280x150px y que el tamaño del archivo no sea superior a 1 MB. Puede considerar usar el mismo truco que con la miniatura de Facebook: agregue texto a la imagen para mejorar la publicación .
Ejemplo:
Solicitar aprobación de Twitter
Tenga en cuenta que antes de poder aprovechar al máximo las tarjetas de Twitter, debe solicitar la aprobación de su página de Twitter. Afortunadamente, esto no lleva mucho tiempo y se puede hacer fácilmente con sus Validador de tarjetas. Una vez que haya obtenido la aprobación, Card Validator tiene exactamente el mismo propósito que el depurador de acciones de Facebook, lo que le permite verificar sus enlaces antes de comprometerse.
Complementos de tarjetas de Twitter
Al igual que con Facebook, hay muchos complementos disponibles para implementar tarjetas de Twitter. Éstos son solo algunos:
Cómo implementar etiquetas Meta Open Graph
¿Cómo se implementan las etiquetas OG? Básicamente pertenecen a la
parte del código HTML de su página. Si no maneja el código, deberá pedir ayuda a su desarrollador web. Puede preparar todo el paquete usted mismo utilizando los consejos anteriores para ahorrar un tiempo valioso.Si está utilizando WordPress, simplemente instale uno de los complementos que implemente perfectamente el código para usted. Me encanta usar WordPress SEO de Yoast, pero hay un complemento oficial de Facebook y otros para elegir.
Aquí hay otros complementos / extensiones / complementos de OG para:
Conclusión de las metaetiquetas de Open Graph
El código final para Facebook y Twitter debería verse más o menos así:
Puede sonar un poco confuso, pero afortunadamente hay varias herramientas que facilitan el proceso; no es necesario que sepas cómo codificar.
Es sorprendente la poca gente que optimiza estas etiquetas. Vale la pena porque te ayuda a destacarte y a obtener más clics y vistas, e incluso puede ayudarte a mejorar tu SEO, todo lo cual genera más ganancias.
¿Ha implementado alguna metaetiqueta de gráfico abierto? ¿Cómo ha afectado esto a su sitio?
Descubra cómo mi agencia puede liderar Masivo Cantidades de tráfico a su sitio web
- SEO – desbloquear cantidades masivas de tráfico SEO. Vea resultados reales.
- Marketing de contenidos – Nuestro equipo crea contenido épico que se compartirá, obtendrá enlaces y generará tráfico.
- Medios de pago – Estrategias rentables eficaces con un claro retorno de la inversión.
Reservar una llamada