Generador de Open Graph
Cuatro etiquetas deciden tu tarjeta
Este generador de Open Graph escribe el bloque og: que controla cómo se ve tu enlace en un chat, un feed o un mensaje. Además, marca las cuatro propiedades obligatorias y muestra la tarjeta mientras escribes.
- GratisPrecio
- 4Etiquetas obligatorias
- NingunoRegistro
- NingunoSubidas
Generador de Open Graph
Las etiquetas og: que deciden cómo se ve un enlace compartido
Listo. Las cuatro etiquetas obligatorias se marcan a medida que las rellenas.
Lo que controla realmente Open Graph
Pega un enlace en un chat y ocurre algo. Aparece una imagen, un titular, una línea de texto y el nombre del sitio.
Esa tarjeta sale de las etiquetas de tu elemento head. Sin ellas, la app adivina, y lo que adivina suele ser tu logotipo y tu menú.
Facebook publicó el protocolo en 2010, y después se extendió. Hoy LinkedIn, WhatsApp, Slack, Discord, Signal y Telegram leen las mismas cuatro propiedades.
El propio protocolo las nombra: og:title, og:type, og:image y og:url. Todo lo demás en esta página es un retoque opcional.
En la tarjeta, la imagen lo es casi todo
Una tarjeta con imagen ocupa varias veces más espacio que una sin ella. Por eso la imagen es la única etiqueta que conviene hacer bien primero.
Por eso conviene una imagen de 1200 × 630 píxeles, la proporción 1,91:1 que usan todas las redes. Luego mantén el archivo por debajo de unos cinco megabytes, y usa siempre una dirección https absoluta.
El texto dentro de la imagen se recorta en las tarjetas pequeñas. En su lugar, pon las palabras en og:title, donde siguen siendo legibles a cualquier tamaño.
Property, no name
Las etiquetas Open Graph usan el atributo property, mientras que las de Twitter usan name. Así que, si copias una etiqueta del ejemplo equivocado, la red la ignora en silencio.
La diferencia viene de RDFa, sobre el que se construye Open Graph. Parece un detalle, y sin embargo explica la mitad de las tarjetas rotas, como detalla la referencia del elemento meta.
Este generador de etiquetas Open Graph escribe cada una con el atributo correcto, así que esa distinción nunca se convierte en tu problema.
Tipos más allá de website
La mayoría de las páginas son website. Un artículo añade autor y fecha de publicación, un producto puede llevar precio y un perfil nombra a una persona. Elige el que encaje y luego ignora el resto.
Por qué tu tarjeta no se actualiza
Las redes guardan en caché lo que leen, a menudo durante días. Arreglas una etiqueta, vuelves a compartir el enlace y aparece la tarjeta antigua.
Cada red tiene un depurador que fuerza una actualización, y esa es la única cura fiable. Facebook, LinkedIn y X ofrecen uno.
Por lo tanto, configura las etiquetas antes de un lanzamiento y no después. Una tarjeta en caché el día de una campaña es un problema lento de deshacer.
Las descripciones de una tarjeta se comportan de otra forma
Una descripción de búsqueda compite con otros nueve resultados. En cambio, una descripción de tarjeta compite con todo el feed que la rodea, y tiene menos espacio.
Limítala a una frase, porque la mayoría de las redes muestran unas dos líneas en un móvil. Una segunda frase larga rara vez sobrevive.
Di qué ofrece el enlace, no qué contiene la página. Una tarjeta no tiene una búsqueda detrás, así que nada indica por qué debería importarle a alguien.
Luego deja que el título cargue con el peso. En una tarjeta pequeña, la descripción a veces desaparece por completo.
Las descripciones de una tarjeta se comportan de otra forma
Una descripción de búsqueda compite con otros nueve resultados. En cambio, una descripción de tarjeta compite con todo el feed que la rodea, y tiene menos espacio.
Limítala a una frase. La mayoría de las redes muestran unas dos líneas en un móvil, así que una segunda frase larga rara vez sobrevive.
Di qué ofrece el enlace, no qué contiene la página. Una tarjeta no tiene una búsqueda detrás, así que nada indica por qué debería importarle a alguien.
Luego deja que el título cargue con el peso. En una tarjeta pequeña, la descripción a veces desaparece por completo.
Un bloque sirve para todas las redes
Twitter recurre a las etiquetas og: cuando faltan las suyas, y casi todo lo demás también. Escribe Open Graph una vez, añade una línea twitter:card y listo.
En esta página
- La herramienta
- Lo que controla realmente Open Graph
- El generador de Open Graph, paso a paso
- Lo que distingue a esta herramienta de Open Graph
- Reglas para tarjetas que se ven bien
- Seis errores de Open Graph que rompen tarjetas
- Dudas habituales sobre Open Graph
- Herramientas para enlaces compartidos
Sigue leyendo
El generador de Open Graph, paso a paso
Cuatro pasos, y el panel de notas sigue las cuatro obligatorias a medida que las rellenas.
- 1
Elige el tipo
Website cubre la mayoría de las páginas. Elige article para una entrada de blog, y aparecen dos campos más para el autor y la fecha.
- 2
Escribe un título para la tarjeta
Hasta 70 caracteres se muestran completos. Puede ser distinto del título de tu página, y a menudo debería, porque una tarjeta no tiene una búsqueda detrás.
- 3
Añade la imagen y la dirección
Ambas necesitan direcciones https completas. La vista previa muestra el recorte 1,91 a 1, así que ves qué conserva una tarjeta estrecha.
- 4
Pega el bloque y vuelve a leer la página
Ponlo en tu head y luego pasa el enlace por el depurador de cada red. De lo contrario, una tarjeta en caché puede quedarse ahí durante días.
Lo que distingue a esta herramienta de Open Graph
La mayoría de los generadores emiten todas las propiedades de la especificación. En cambio, este escribe lo que necesita una tarjeta y nombra lo que falta.
Sigue las cuatro obligatorias
Título, tipo, imagen y url mantienen cada uno una nota hasta que los rellenas. Nada más finge ser obligatorio.
Una vista previa de la tarjeta en directo
Ves la forma del recorte y las longitudes de corte mientras escribes, ya que ahí es donde fallan la mayoría de las tarjetas.
Atributos correctos en todo
Las etiquetas og: usan property, mientras que las twitter: usan name. Hacerlo al revés es la tarjeta rota más común que existe.
Sin bloque de Twitter duplicado
Twitter ya lee las etiquetas og:, así que marcar la casilla solo añade twitter:card y el texto alternativo de la imagen. Tener dos de lo mismo no ayuda a nadie.
Campos de artículo cuando los necesitas
El autor y la fecha de publicación aparecen para los artículos y quedan ocultos en los demás casos. Al fin y al cabo, un formulario lleno de campos irrelevantes invita a respuestas equivocadas.
Las imágenes nunca salen de esta pestaña de Denwix
Por aquí pasan textos de campañas aún no lanzadas. Como la página no descarga nada, ninguna dirección ni ningún titular llega a un servidor.
Reglas para tarjetas que se ven bien
Las tarjetas fallan de unas pocas formas previsibles. Cada regla de abajo cierra una de ellas.
- Usa una dirección de imagen https absoluta. La mayoría de las redes ignoran las rutas relativas y el http simple. El lector no es tu navegador, y no tiene el contexto de la página para resolverlas.
- Haz la imagen de 1200 por 630. Ese es el tamaño de imagen og hacia el que recorta cada red. Las imágenes más pequeñas acaban en una tarjeta cuadrada pequeña o en ninguna.
- Deja el texto importante fuera de la imagen. Los recortes cortan los bordes, y las tarjetas pequeñas lo encogen todo. Las palabras van en og:title, donde siguen siendo legibles.
- Escribe un título de tarjeta, no un título de página. Un título de búsqueda responde a una consulta. Un título de tarjeta tiene que funcionar sin contexto, en un feed, junto a cosas que compiten por la misma mirada.
- Apunta og:url a la dirección canónica. Los compartidos se acumulan en esa dirección. Así que, si no coincide con tu etiqueta canonical, los recuentos se dividen entre dos versiones de una misma página.
- Añade og:image:alt. Un lector de pantalla lo lee en lugar de la imagen, y cuesta una línea. Aunque muy pocos sitios se molestan, esa es una mala razón para saltárselo.
- Vuelve a leer la página tras cada cambio. Las redes guardan en caché de forma agresiva. Hasta que fuerzas una actualización, la tarjeta antigua es la que ve todo el mundo.
- Nombra también el sitio. og:site_name pone tu publicación junto al titular. En un feed abarrotado, esa línea trabaja tanto como el título.
- Prueba en un móvil. La mayoría de la gente abre los enlaces en una app de chat en una pantalla pequeña. La vista previa de escritorio es la indulgente.
Seis errores de Open Graph que rompen tarjetas
Cada uno produce una página que funciona perfectamente y un enlace que parece roto.
Usar name en lugar de property
Las etiquetas Open Graph necesitan el atributo property. Con name, la etiqueta es HTML válido y se ignora por completo.
Poner la imagen sin la URL completa
Como el lector no tiene una base contra la que resolverla, la tarjeta llega sin imagen.
Etiquetas añadidas con JavaScript
La mayoría de los lectores leen el HTML tal como se sirve y no ejecutan nada. Así que las etiquetas inyectadas después de cargar siguen siendo invisibles para ellos.
Una imagen tras un inicio de sesión
Como una contraseña de pruebas o una regla antihotlink bloquea al lector, la tarjeta se queda en texto plano.
Dos etiquetas og:image
Un tema pone una, y luego un plugin pone otra. Las redes eligen una, aunque rara vez la que querías.
Esperar una actualización instantánea
Las cachés duran días. Así que pasa el enlace por el depurador de cada red, en lugar de volver a compartirlo y esperar.
Dudas habituales sobre Open Graph
¿Qué etiquetas Open Graph necesita una tarjeta?
Son cuatro las imprescindibles: og:title, og:type, og:image y og:url. El protocolo las define como los metadatos básicos, y además una tarjeta sin imagen es una tarjeta mucho más pequeña.
¿Qué tamaño de imagen og debo usar?
Usa 1200 por 630 píxeles, que coincide con la proporción 1,91 a 1 a la que recortan las redes. Además, mantenla por debajo de cinco megabytes y sírvela por https.
¿Necesito también las etiquetas de Twitter?
Solo twitter:card, y el texto alternativo de la imagen si lo quieres. Si no encuentra sus etiquetas propias, X recurre a og:title, og:description, og:image y og:url.
¿Por qué no ha cambiado mi tarjeta?
La red guardó en caché la antigua. Por eso, usa su depurador para forzar una nueva lectura, ya que volver a compartir el enlace suele servir la copia guardada.
¿Google tiene en cuenta las etiquetas Open Graph?
No directamente. Influye en cuántas veces se pulsa un enlace compartido, y además Google ha dicho que puede usar og:title como una señal al reescribir un enlace de título.
¿Puedo usar el resultado de un generador de etiquetas Open Graph en cualquier plataforma?
Sí. El mismo bloque funciona en Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram y Signal, porque todos leen el mismo protocolo.
¿Dónde van estas etiquetas?
Dentro del elemento head, junto a tus otras metaetiquetas. El orden no importa, aunque mantenerlas juntas facilita revisarlas después.
¿Qué pasa si no pongo ninguna etiqueta og?
La red adivina a partir de tu página. Normalmente eso significa tu logotipo, un encabezado del menú y la primera frase que encuentra, lo que rara vez vende el enlace.
¿Pueden varias páginas compartir una imagen?
Pueden, y una imagen general del sitio es mejor que nada. Sin embargo, una página con su propia imagen consigue más clics, así que usa la general solo donde no haya una imagen específica.
¿Pueden varias páginas compartir una imagen?
Pueden, y una imagen general del sitio es mejor que nada. Sin embargo, una página con su propia imagen consigue más clics, así que usa la general solo donde no haya una imagen específica.
¿Se sube algo de lo que escribo aquí?
No. Tu navegador escribe las etiquetas, y la página no descarga ninguna dirección. Por eso este sitio no guarda nada ni registra nada.
Herramientas para enlaces compartidos
Una tarjeta se compone de etiquetas y una imagen. Estas tres cubren ambas mitades.
Generador de Twitter Card
Las etiquetas twitter:, y solo las que no tienen equivalente og:.
Abrir herramienta →Convertidor de imágenes
Convierte una imagen de tarjeta a WebP, JPG o PNG en tu navegador.
Abrir herramienta →Generador de metaetiquetas
Las etiquetas head que van junto a tu bloque og:.
Abrir herramienta →
¿Listo para arreglar tu tarjeta?
Rellena cuatro propiedades, mira la vista previa y pega el bloque en tu head. El generador de Open Graph no cuesta nada, no pide cuenta y hace todo el trabajo en tu navegador.