Generador de Meta Etiquetas Open Graph

Las etiquetas Open Graph son pequeños fragmentos de HTML que determinan cómo se ve tu página cuando alguien la comparte en Facebook, LinkedIn, Slack, Discord o X (Twitter). Completa un título, una descripción, la URL, una imagen y algunas opciones más abajo, observa cómo se actualiza al instante la vista previa de la tarjeta y copia las etiquetas <meta> generadas directamente en el <head> de tu página. Todo ocurre en tu navegador — no se envía nada a ningún servidor.

¿Qué es esta herramienta?

Open Graph es un protocolo, creado originalmente por Facebook, que permite que cualquier página web se describa a sí misma mediante un pequeño conjunto de etiquetas <meta property="og:..."> ubicadas en el <head> del HTML. Cuando alguien pega tu enlace en una app social, un chat o una herramienta de mensajería, esa app lee estas etiquetas para construir la tarjeta de vista previa — título, descripción e imagen — en lugar de adivinar a partir del contenido de la página.

Twitter (X) utiliza un conjunto de etiquetas relacionado pero independiente, <meta name="twitter:...">, para controlar específicamente cómo se previsualiza un enlace en su plataforma. La mayoría de los sitios configuran ambos: las etiquetas Open Graph para una compatibilidad amplia, y las Twitter Card para ajustar la vista previa en X (por ejemplo, eligiendo una tarjeta con imagen grande frente a una tarjeta de resumen pequeña).

Sin estas etiquetas, un enlace compartido no muestra ninguna vista previa, o la plataforma intenta adivinar un título e imagen a partir del contenido bruto de la página — a menudo eligiendo el titular equivocado, una imagen aleatoria del cuerpo del texto, o nada en absoluto. Definir explícitamente og:title, og:description y og:image te da control total sobre cómo se presenta tu contenido antes de que alguien haga clic.

¿Por qué utilizarlo?

Vista previa en vivo — comprueba exactamente cómo se verá la tarjeta de compartir mientras escribes, antes de publicar nada.
Genera tanto las etiquetas Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) como las etiquetas Twitter Card en un solo paso.
Cubre los campos que las plataformas realmente leen: título, descripción, URL canónica, imagen, nombre del sitio, tipo de contenido y estilo de tarjeta de Twitter.
Funciona completamente en tu navegador — tu título, descripción y URLs nunca salen de él.
Gratis, sin registro y sin límite de uso — copia el resultado y pégalo en tu HTML.

Cómo utilizarlo

Introduce el título de tu página y una descripción breve (procura que el título tenga menos de ~60 caracteres y la descripción entre ~155 y 160).
Introduce la URL canónica de la página y la URL absoluta de la imagen de vista previa (las URL de imagen deben ser completas, como https://example.com/imagen.jpg, no una ruta relativa).
Opcionalmente, define el nombre del sitio, elige un og:type (website, article, product, profile, video, music) y selecciona un tipo de Twitter Card (summary o summary_large_image).
Revisa la tarjeta de vista previa en vivo para confirmar que el título, la descripción y la imagen encajan bien juntos.
Haz clic en «Copiar» y pega las etiquetas <meta> generadas en el <head> de tu página, justo antes de la etiqueta de cierre </head>.

Ejemplo

Entrada

Título: «10 herramientas gratis para desarrolladores que realmente usarás»
Descripción: «Una selección de herramientas de navegador para JSON, expresiones regulares, UUID y más — sin instalación.»
URL: https://example.com/blog/dev-tools
Imagen: https://example.com/images/dev-tools-cover.jpg

Resultado

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Solo se incluyen los campos que rellenas, así que si dejas el nombre del sitio en blanco, simplemente se omite og:site_name del resultado.

Errores comunes que hay que evitar

No incluir og:image en absoluto — sin ella, la mayoría de las plataformas no muestran ninguna imagen de vista previa o toman una imagen aleatoria de la página, lo cual suele verse poco profesional.
Usar una ruta de imagen relativa como /images/portada.jpg en lugar de una URL completa como https://example.com/images/portada.jpg — los rastreadores sociales generalmente no pueden resolver rutas relativas.
Proporción de imagen incorrecta — una imagen cuadrada o vertical se recorta de forma extraña cuando la plataforma la fuerza al formato horizontal 1.91:1; diseña siempre tu imagen de compartir cerca de 1200×630.
Títulos o descripciones que se truncan — mantén og:title por debajo de ~60 caracteres y og:description por debajo de ~155–160 para que no se corten con puntos suspensivos en la mayoría de las plataformas.
Olvidar actualizar las vistas previas en caché — tras cambiar las etiquetas og en una página ya publicada, la vista previa antigua puede seguir apareciendo en la caché de Facebook o LinkedIn hasta que fuerces manualmente un nuevo rastreo con sus herramientas de depuración.

Dónde se usa cada etiqueta

og:title, og:description y og:image son las tres etiquetas que casi todas las plataformas leen para construir una vista previa. og:url indica a los rastreadores a qué enlace canónico debe asociarse la vista previa, algo importante si el mismo contenido es accesible desde varias URL. og:site_name muestra una pequeña etiqueta (como el nombre de la publicación o la marca) encima del título en algunas plataformas, como Facebook.

og:type cambia el tipo de objeto que representa la página para los rastreadores que admiten el modelo de objetos más completo de Open Graph — por ejemplo, article habilita og:article:published_time y og:article:author en las plataformas que las leen, aunque la mayoría de las vistas previas sociales ignoran estos campos adicionales y solo usan el trío principal de título, descripción e imagen.

twitter:card controla específicamente el diseño en X: summary muestra una pequeña miniatura cuadrada junto al texto, mientras que summary_large_image muestra una imagen a todo lo ancho encima del texto — esta última es casi siempre la mejor opción para contenido con una imagen de portada significativa.

Preguntas frecuentes

¿Qué tamaño debe tener mi og:image?

El tamaño recomendado es 1200×630px — es lo bastante grande para pantallas de alta densidad y coincide con la proporción de aproximadamente 1.91:1 a la que recortan Facebook, LinkedIn y X. Mantén el archivo por debajo de 5–8MB, usa JPG o PNG, y asegúrate de que la URL de la imagen sea absoluta y completa, no una ruta relativa — la mayoría de los rastreadores no resuelven bien las rutas relativas.

¿Por qué no aparece la vista previa al compartir el enlace?

Las causas más comunes son: falta el og:image, la URL de la imagen es relativa en lugar de absoluta, el rastreador está bloqueado por robots.txt, o la plataforma muestra una versión antigua en caché. Facebook y LinkedIn almacenan en caché las vistas previas de forma agresiva — usa el Sharing Debugger de Facebook o el Post Inspector de LinkedIn para forzar un nuevo rastreo tras actualizar tus etiquetas.

¿Cuál es la diferencia entre las etiquetas og: y twitter:?

Las etiquetas og: (og:title, og:description, og:image, etc.) forman parte del estándar Open Graph y las leen Facebook, LinkedIn, Slack, Discord, WhatsApp y la mayoría de las demás plataformas. Las etiquetas twitter: son el formato propio de Twitter/X. Si faltan twitter:title o twitter:image, X recurre automáticamente a la etiqueta og: equivalente — pero definir ambas explícitamente te da más control, incluida la posibilidad de elegir summary_large_image para una imagen de vista previa grande.

¿Qué og:type debería usar?

«website» es la opción por defecto más segura para la mayoría de páginas, incluidas las páginas de inicio y contenido general. Usa «article» para entradas de blog y noticias (habilita etiquetas adicionales específicas de artículo, como la fecha de publicación), «product» para páginas de comercio electrónico y «profile» para páginas de perfil personal o de usuario. El tipo afecta sobre todo a qué propiedades adicionales de Open Graph son válidas, no a la apariencia básica de la tarjeta de vista previa.

¿Esta herramienta almacena o envía mis datos a algún sitio?

No. Todo el proceso ocurre localmente en tu navegador mediante JavaScript. Nada de lo que escribes se transmite, se registra ni se almacena — al cerrar la pestaña todo desaparece.