Estás leyendo la publicación: ¿Qué es og:imagen? ¿Cómo generar automáticamente una imagen OG?
Imagen de gráfico abierto (OG) es la miniatura que se muestra en las redes sociales (como Facebook y LinkedIn) para obtener una vista previa de su página web cada vez que alguien comparte su enlace.
Una imagen OG relevante y llamativa y una meta descripción pueden captar la atención de los usuarios, lo que genera clics y un mayor interés.
Tener una sólida estrategia de marketing en redes sociales. puede aumentar el conocimiento de la marca y el compromiso del clienteespecialmente para medianas y grandes empresas.
Sin embargo, también debe vigilar otros aspectos de su presencia en línea, en particular la generación de imágenes de calidad, que posiblemente sea la más importante.
Aquí hablaremos más sobre og:images y su importancia y le mostraremos cómo generar automáticamente imágenes Open Graph.
Una imagen Open Graph o imagen OG es la imagen que se muestra en las cuentas de las redes sociales cuando usted u otra persona publica un enlace a un artículo o un video de su sitio web.
Por defecto, Metaetiquetas Open Graph determinar cómo se muestran las URL cuando se comparten en sitios de redes sociales.
Puede encontrarlos en la sección < /head > de una página. Las etiquetas con og: antes del nombre de una propiedad son etiquetas Open Graph.
El siguiente es un ejemplo de una etiqueta og:image de una publicación de blog:
Y así es como se ve el fragmento social cuando se vincula al artículo en LinkedIn:
og: la metaetiqueta de imagen es parte de un conjunto más amplio que afecta el rendimiento de las publicaciones en las redes sociales en Facebook, LinkedIn, Pinterest y Twitter.
El protocolo Open Graph permite que cualquier página web se convierta en un objeto rico en un gráfico social.
Además, una imagen Open Graph bien diseñada hace que su marca parezca más profesional y atractiva.
Cuando publica contenido que no tiene una imagen OG, verá un cuadro gris o un banner aleatorio con el título y alguna descripción, como el ejemplo a continuación:
Esto reduce sus posibilidades de obtener tráfico orgánico y generar clientes potenciales de calidad.
El contenido es más que solo texto. El hecho de que su artículo tenga un título intrigante o una meta descripción concisa no hará que la gente haga clic en él.
De hecho, te sorprenderá saber que alrededor del 65 % de las personas aprenden visualmente y que el 90 % de la información que se transmite al cerebro es visual.
Por lo tanto, es vital que utilices imágenes en tu contenido y metaetiquetas para captar su atención.
4 razones por las que las imágenes mejoran tus tasas de conversión
No es ningún secreto que el contenido es el rey para las redes sociales, pero ¿cómo logra que sus usuarios ingresen a su reino (sitio web AKA)?
Todos sabemos eso primeras impresiones cuentan. Y si está tratando de que su contenido sea visto por mucha gente, entonces es importante usar og:image para su contenido.
Las metaetiquetas de Open Graph, particularmente og:image, brindan a los usuarios su primera impresión de su blog o sitio web.
¡Puede pensar en ellos como vallas publicitarias digitales!
Es lo que ven cuando van a su página en Facebook o cualquier otra red social que se adapte a los protocolos de Open Graph, y les ayuda a decidir si quieren o no hacer clic en su sitio web o blog.
El uso de una imagen Open Graph relevante para su contenido puede ayudar a impulsar su participación en las redes sociales y aumentar su tráfico orgánico.
Por eso es tan importante que usted utilizar una vista previa precisa del enlace que promocionas en las redes sociales: quieres que la gente vea algo que convencerlos de que vale la pena hacer clic.
Cuando diseñe y codifique su sitio web en HTML, puede usar las etiquetas Open Graph antes del final < /cabeza > etiqueta. La propiedad meta para una imagen Open Graph es og:image.
Mira el ejemplo de abajo:
< meta property=”og:title” content=”Tu título”/>
Sería una buena idea considerar el uso de una herramienta generadora de marcas como Ubersuggest o Search Engine Reports para reducir la posibilidad de errores de sintaxis.
Solo asegúrese de agregar el ancho y el alto de su og: imagen para que Facebook o LinkedIn puedan mostrar la imagen más rápidamente.
Si usa WordPress, Yoast SEO o complementos similares proporcionan una manera fácil de agregar etiquetas Open Graph.
Profundicemos más para saber más.
Aquí hay diferentes formas de configurar etiquetas Open Graph para diferentes plataformas CMS.
Si usa WordPress, Yoast SEO o los complementos All in One SEO, será más fácil agregar imágenes Open Graph.
Todo lo que necesita hacer es ir al editor de una publicación o página y luego desplazarse hacia abajo.
Debería ver el cuadro del complemento allí. Golpea el “Social” y luego elija las plataformas para integrar las etiquetas Open Graph automáticamente.
Los temas gratuitos de Shopify muestran automáticamente el Foto principal para la página de su tienda cuando comparte un enlace en las redes sociales.
Estas son las páginas de Shopify que muestran imágenes destacadas automáticamente:
- Páginas de productos.
- Páginas de colección.
- Publicaciones de blogs.
Para páginas sin imágenes destacadas, como la página de inicio de su tienda Shopify o una “Sobre nosotros” página, puede configurar la imagen para compartir en redes sociales de la tienda.
1- Primero, ve a tu panel de control de Shopify y haz clic en Ajustes > Aplicaciones y canales de venta.
2- A continuación, desde la página Aplicaciones y canales de venta, haz clic en Tienda en línea.
3- En este paso, simplemente haga clic en Canal de venta abierto y luego haga clic preferencias.
4- Desplácese hacia abajo para encontrar la sección de imágenes para compartir en redes sociales y haga clic en Añadir imagen. Para cambiar la imagen existente, haga clic en Editar > Cambiar imagen.
6- Seleccione la imagen de su computadora que desea mostrar en las redes sociales y, al final, haga clic en Ahorrar.
Obtenga más información sobre las nuevas características de Shopify 2.0 SEO
Wix generalmente genera etiquetas OG a partir de otras variables, como el metatítulo, la imagen y la descripción de la página.
Pero, si desea personalizar el título, la descripción y la imagen de OG, puede hacerlo en el “Compartir social” configuración de cada página.
También es posible configurar una imagen OG personalizada para todo el sitio. Todo lo que necesita hacer es ir a su tablero Ajustes > Compartir en redes sociales en el menú principal.
En general, Wix hace que agregar etiquetas OG sea muy fácil, ya que no hay códigos duros de los que preocuparse y el proceso es bastante rápido.
Generar una imagen OG manualmente para cada publicación lleva mucho tiempo y consume mucha energía que podría gastarse en escribir la publicación.
Aquí hay una lista de servicios de generación de medios automatizados que lo ayudan a generar imágenes Open Graph dinámicamente con API.
Gatsby ofrece gatsby-plugin-image que puede automatizar la generación de imágenes Open Graph.
Este complemento de imagen incluye dos componentes para mostrar imágenes receptivas en su sitio. Uno se usa para imágenes estáticas y el otro para imágenes dinámicas.
¡Con este complemento, no tiene que preocuparse por producir imágenes en múltiples tamaños y formatos!
Combina las capacidades de procesamiento de imágenes nativas de Gatsby con técnicas avanzadas de carga de imágenes para optimizar fácil y completamente la carga de imágenes para sus sitios.
Con el editor de plantillas de Bannerbear, puede crear una plantilla reutilizable y generar automáticamente imágenes Open Graph para sus blogs.
Puede diseñar plantillas con arrastrar y soltar, reordenación de capas, controles tipográficos completos y mucho más.
De esta manera, cada plantilla se convierte en una API, lo que permite replicar miles o millones de diseños.
Todo lo que necesita hacer es acceder al punto final de la API de Bannerbear con sus solicitudes de modificación y, en unos segundos, se generará una imagen.
Vercel Open Graph Image as a Service es una biblioteca de código abierto para generar imágenes de tarjetas sociales dinámicas.
Este servicio genera imágenes dinámicas Open Graph que puedes incrustar en tus etiquetas < meta >.
Usando Vercel OG, puede definir sus imágenes usando HTML y CSS y generar automáticamente imágenes dinámicas a partir de los SVG generados.
Robolly es otro servicio premium en la nube para la generación automatizada de imágenes.
Con la API de Robolly, solo necesita obtener los parámetros correctos en un enlace URL.
Con Robolly, las imágenes se generan de forma remota en la nube, lo que permite generar imágenes personalizadas bajo demanda y a escala.
Crear una plantilla dinámica una vez, luego use las API y las integraciones de estas herramientas para generar imágenes o archivos PDF ilimitados en varios formatos, variantes y tamaños.
Placid presenta un editor gratuito que es similar a las herramientas de diseño como Canva, Sketch y Figma.
Puede crear fácilmente sus diseños de tarjetas sociales o personalizar nuestros ajustes preestablecidos.
Puede llenar dinámicamente los elementos de sus plantillas con texto, imágenes y videos.
Y, en última instancia, produzca diseños consistentes utilizando sus API o integraciones sin código.
Eche un vistazo a más herramientas de generación de imágenes
Probar su implementación de Open Graph puede ser útil antes de publicar para asegurarse de que funciona.
La mejor parte es que casi todas las redes sociales populares brindan herramientas para ayudar en el proceso de depuración.
La herramienta devuelve un mensaje de advertencia si hay algún problema con su enlace.
De esta forma, podrás obtenga una vista previa de su enlace para asegurarse de que sus etiquetas aparezcan correctamente en el código fuente.
Estas son las herramientas que puede usar para probar sus etiquetas Open Graph de redes sociales:
-
Las imágenes de Facebook Open Graph deben tener un tamaño aproximado de 1200 x 630 píxeles y nunca deben exceder los 5 MB; por lo tanto, recuerda siempre optimizar tu imagen antes de subirla.
-
Se recomienda a use imágenes 1: 1 en sus creatividades de anuncios de Facebook para un mejor rendimiento con los anuncios de enlaces de imágenes.
-
LinkedIn, Pinterest y Twitter también reconocerán imágenes OG. Sin embargo, El tamaño de la imagen de Twitter es diferente en comparación con el resto.
-
Twitter requiere que tu imagen sea al menos 144 x 144 píxelescon un tamaño de archivo de menos de 1 MB.
-
Twitter también cambiar el tamaño de las imágenes automáticamente que superen los 4096 x 4096 píxeles.
-
Las imágenes de gráficos abiertos se pueden cargar en su sitio de forma manual o automática utilizando la automatización.
-
Es posible que las plataformas CMS sube automáticamente la imagen destacada o la primera imagen de su página o publicación como la imagen OG si no se carga ninguna manualmente.
-
La og:imagen predeterminada también se puede eliminar si uno prefiere cargar sus imágenes OG manualmente.
El primer paso para aprovechar el protocolo Open Graph es entenderlo.
Y aunque eso puede ser un poco confuso al principio, estos recursos que le mostramos aquí pueden ayudarlo a comenzar con el pie derecho.
También le facilitan la automatización de su proceso de generación de imágenes de Open Graph y le ayudan a darle a su blog o sitio web una fuerte presencia inicial en sus redes sociales.
Mantenlo simple y concéntrate en lo básico. Agregue metaetiquetas, verifique las vistas previas de las redes sociales y depure.
¡Ahí lo tienes todo!
pantallas de twitter etiquetas de tarjeta que se ven casi idénticas a las etiquetas Open Graph y se basan en las mismas reglas que el protocolo Open Graph. Con el protocolo Open Graph, puede crear fácilmente tarjetas de Twitter sin duplicar etiquetas ni datos.
La resolución más comúnmente recomendada para una imagen OG es 1200 píxeles x 630 píxeles (proporción 1,91/1).
Simplemente yendo a Inspector de publicaciones de LinkedIn e ingresando su enlace, puede borrar el caché anterior y actualizar los datos.
A continuación se enumeran algunos blogs más relevantes que pueden resultarle interesantes:
