Generador de etiquetas meta Open Graph — Herramienta gratuita
Rellena título, descripción, URL e imagen y obtén las etiquetas Open Graph, de tarjeta de Twitter y meta estándar para pegar en el <head> de tu página. Todos los valores se escapan, los campos vacíos se omiten y se avisa de títulos y descripciones demasiado largos antes de que una plataforma los corte.
Características
- Open Graph, tarjeta de Twitter, <title> y meta descripción generados desde un único conjunto de campos
- Cada valor se escapa como HTML, así que un título con comillas, un ampersand o un signo de mayor sigue produciendo etiquetas válidas
- Contadores en vivo que avisan si el título pasa de 60 caracteres o la descripción de 200: los mismos umbrales que usa nuestro verificador de vista previa de enlaces
- Los campos vacíos se omiten por completo en vez de emitir un atributo content en blanco que un rastreador leería como intencionado
- Funciona por completo en tu navegador: sin registro, sin subir nada y sin descargar ninguna página
Preguntas frecuentes
¿Dónde van estas etiquetas?
Dentro del elemento <head> de la página, antes de </head>. El orden no le importa a ningún rastreador, pero mantener el bloque Open Graph junto facilita el mantenimiento. Si tu sitio usa un CMS o un framework, busca sus ajustes de head o SEO en lugar de editar la plantilla a mano: muchos ya emiten algunas de estas etiquetas, y dos og:title en una página es peor que uno.
¿Por qué sigo viendo la vista previa antigua tras pegarlas?
Porque la plataforma guardó la tarjeta en caché la primera vez que vio el enlace, a veces durante días. La solución es obligarla a leer la página otra vez: el Facebook Sharing Debugger, el LinkedIn Post Inspector y el X Card Validator vuelven a rastrear bajo demanda. Hasta entonces, las etiquetas nuevas están en tu página pero son invisibles en la plataforma.
¿Necesito etiquetas Open Graph y de Twitter a la vez?
No estrictamente: X recurre a Open Graph cuando falta una etiqueta twitter:, y la mayoría de lectores hacen lo mismo. La que sí se gana su sitio es twitter:card, porque decide si X muestra una imagen ancha o una miniatura cuadrada pequeña. Este generador emite ambos conjuntos para que nada dependa de un fallback que no puedes ver.
¿Qué tamaño debe tener la imagen?
1200 × 630 píxeles es la opción segura: la proporción 1,91:1 que esperan Facebook, LinkedIn y el summary_large_image de X. Sírvela desde una URL https absoluta —una ruta relativa no se resuelve para un rastreador—, mantén el archivo por debajo de unos 5 MB y aleja el texto de los bordes, porque cada plataforma recorta de forma ligeramente distinta.
¿Qué pasa con las comillas y los caracteres especiales de mi título?
Se escapan por ti. Los ampersands, los signos de mayor/menor y las comillas dobles se convierten en entidades antes de entrar en un atributo, así que un título como Ben & Jerry’s "mejor" sabor produce una etiqueta válida en vez de marcado roto. Y no es solo pulcritud: una comilla sin escapar dentro de content cierra el atributo antes de tiempo y todo lo que sigue pasa a ser marcado.
