Generador de etiquetas meta y Open Graph
Genera etiquetas meta Open Graph, Twitter Card y SEO con vista previa en vivo de Google, Facebook y X. 100% gratis, en el navegador, sin registro — copia y pega el código.
Importar desde un <head> existente (analizado localmente, sin subir nada)
¿Qué son las etiquetas meta y Open Graph?
Las etiquetas meta son fragmentos de HTML en el <head> de tu página que describen la página a los navegadores, los motores de búsqueda y las plataformas sociales. Las etiquetas SEO clásicas son el <title>, la meta description y el enlace canonical. Las etiquetas Open Graph (og:title, og:type, og:image, og:url y compañía) son un protocolo, originario de Facebook, que controla el título, la descripción y la imagen que se muestran cuando se comparte tu enlace, y casi todas las plataformas las leen, incluidas LinkedIn, Slack, Discord, WhatsApp, Pinterest y Telegram.
Twitter/X usa sus propias etiquetas twitter:card, pero recurre a tus etiquetas Open Graph cuando faltan, así que un buen conjunto de etiquetas OG más un único valor twitter:card cubre todas las redes. Este generador escribe todas estas etiquetas, añade datos estructurados JSON-LD opcionales y previsualiza el resultado en vivo, para que nunca tengas que escribirlas a mano ni adivinar cómo se verá una publicación compartida.
Especificaciones de imagen y etiquetas por plataforma
Open Graph (Facebook y LinkedIn)
Ambos leen og:title, og:description, og:image y og:url. Imagen recomendada 1200×630 (1,91:1). Facebook la guarda en caché ~30 días; LinkedIn ~7 días: vuelve a rastrear con sus depuradores tras publicar.
Tarjeta de X (Twitter)
twitter:card es obligatoria (summary_large_image o summary). X recurre a og:* para el resto. Una sola imagen 1200×630 sirve tanto para OG como para X; las imágenes por debajo de 300×157 degradan una tarjeta grande a una pequeña.
Slack y Discord
Slack lee primero Twitter Card y luego Open Graph, y puede mostrar dos campos adicionales mediante twitter:label/data. Discord lee Open Graph y, de forma única, usa theme-color para la barra de acento del embed.
WhatsApp y Telegram
WhatsApp necesita og:title y og:image con los metadatos cerca del principio del HTML; Telegram lee Open Graph y solo se renderiza de forma fiable a partir de imágenes JPEG o PNG.
Rich Pins de Pinterest
Pinterest lee Open Graph o Schema.org. Un Rich Pin de artículo necesita og:type=article más article:published_time y article:author, que se generan aquí al elegir el tipo article.
Fragmento de búsqueda de Google
La vista previa en vivo de la SERP en escritorio y móvil mide tu título y tu descripción en píxeles, no solo en caracteres, para que veas el riesgo de recorte antes que Google.
Ejemplos de etiquetas meta
Página de inicio de un sitio web
Title: Acme — Ship faster Description: The all-in-one platform for modern teams. URL: https://acme.com Image: https://acme.com/og/home.png (1200×630)
<title>Acme — Ship faster</title> <meta name="description" content="The all-in-one platform for modern teams."> <link rel="canonical" href="https://acme.com"> <meta property="og:title" content="Acme — Ship faster"> <meta property="og:type" content="website"> <meta property="og:image" content="https://acme.com/og/home.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:url" content="https://acme.com"> <meta name="twitter:card" content="summary_large_image">
Una página de inicio solo necesita las cuatro etiquetas Open Graph obligatorias más un título, una descripción y el canonical. Como la imagen es 1200×630, el ancho y el alto se rellenan automáticamente, así que la primera vez que se comparte en Facebook se muestra al instante en lugar de en blanco.
Artículo de blog (con article:* + JSON-LD)
og:type: article Title: The Complete Guide to Open Graph Tags Author: Ada Lovelace Published: 2026-07-15
<meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script> Elegir el tipo article desbloquea las propiedades article:published_time y article:author y genera el JSON-LD de Article correspondiente, de modo que los motores de búsqueda y los Rich Pins de Pinterest obtienen datos estructurados sin esfuerzo.
Twitter/X hereda Open Graph
twitter:card: summary_large_image Inherit title/description/image from OG: on
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@acme">
X lee tus etiquetas Open Graph cuando falta la etiqueta twitter:* correspondiente, así que solo necesitas twitter:card. El generador nunca emite un twitter:image vacío, lo que rompería ese respaldo.
Cómo añadir etiquetas Open Graph a tu sitio
- 1
Introduce título, descripción y URL
Escribe el título de tu página, la meta description y la URL canonical. El medidor de píxeles indica si caben en el fragmento de búsqueda de Google.
- 2
Añade una og:image y elige el tipo
Pega una URL de imagen 1200×630 y elige website, article, product o profile: los campos de Open Graph y el JSON-LD correspondientes aparecen automáticamente.
- 3
Revisa las vistas previas en vivo
Cambia entre las pestañas de Google, Facebook, X, LinkedIn, Slack y Discord para ver exactamente cómo se verá tu enlace antes de publicarlo.
- 4
Copia en tu
Copia el bloque completo de etiquetas (o una sección) y pégalo dentro del
de tu HTML. Verifica después de publicar con los depuradores de Facebook y LinkedIn.
Errores comunes de Open Graph
Ruta relativa en og:image
Una ruta como /cover.png funciona en tu editor, pero aparece en blanco al compartir, porque los rastreadores necesitan una URL absoluta.
<meta property="og:image" content="/cover.png">
<meta property="og:image" content="https://example.com/cover.png">
Falta og:url
Sin un og:url canonical, los recuentos de veces compartido se reparten entre variantes de URL y las plataformas pueden elegir la dirección equivocada.
<!-- no og:url -->
<meta property="og:url" content="https://example.com/page">
Imagen demasiado pequeña o con proporción incorrecta
Facebook ignora las imágenes por debajo de 200×200 y recorta cualquier cosa lejos de 1,91:1.
600×600 og:image
1200×630 og:image (1.91:1)
Olvidar twitter:card
Incluso con etiquetas Open Graph completas, X no muestra ninguna tarjeta a menos que se defina twitter:card.
<!-- OG only, no twitter:card -->
<meta name="twitter:card" content="summary_large_image">
Un twitter:image vacío rompe el respaldo
Un twitter:image vacío impide que X recurra a og:image: omite la etiqueta en lugar de dejarla en blanco.
<meta name="twitter:image" content="">
<!-- omit it; X uses og:image -->
Charset colocado demasiado tarde
La declaración de charset debe aparecer dentro de los primeros 1024 bytes del documento o se ignora.
<meta charset> after many tags
<meta charset="utf-8"> first in <head>
Casos de uso habituales
- Lanzar una landing page
- Genera el bloque head completo para una nueva página de marketing para que se vea pulida en cuanto alguien comparta el enlace en X, LinkedIn o Slack.
- Vistas previas de blog y artículos
- Añade article:published_time, article:author y el JSON-LD de Article para que las publicaciones cumplan los requisitos de los Rich Pins de Pinterest y de las tarjetas sociales enriquecidas.
- Arreglar una publicación compartida que falla
- Importa tus etiquetas actuales, detecta la og:image que falta o la dimensión incorrecta en el panel de comprobaciones, corrígela y vuelve a rastrear con los enlaces de los depuradores.
- Fragmentos de head para frameworks
- Copia un conjunto de etiquetas limpio y correcto para insertarlo en un sitio estático, una plantilla de CMS o un parcial de head renderizado en el servidor.
Cómo funciona el generador
- Vista previa en vivo, en el navegador
- Cada tarjeta se renderiza a partir de los valores que escribes, nunca obteniendo tu URL. Eso mantiene las vistas previas instantáneas y privadas, y es la única forma honesta de previsualizar antes de que una página esté publicada.
- Medidor de SERP preciso al píxel
- Google recorta títulos y descripciones por ancho en píxeles, no por número de caracteres. Un canvas mide tu texto con la misma fuente, así que el medidor se pone ámbar justo cuando el fragmento se recortaría.
- Comprobación de imágenes en el lado del cliente
- Tu URL de og:image se carga en un objeto Image en tu navegador para leer su ancho y alto reales, y luego se compara con 1200×630 y con la relación de aspecto de la tarjeta. Las imágenes de origen cruzado siguen informando de su tamaño, así que la comprobación funciona sin ninguna subida.
- Conjunto de etiquetas completo y moderno
- SEO básico, Open Graph, Twitter Card y JSON-LD en un solo bloque, con el charset emitido primero para que quede dentro de los primeros 1024 bytes. Las etiquetas heredadas como meta keywords están desactivadas de forma predeterminada.
Buenas prácticas de etiquetas meta
- Usa URLs HTTPS absolutas
- og:image y og:url deben ser URLs https://… completas. Las rutas relativas funcionan localmente, pero se muestran en blanco cuando un rastreador obtiene la página en vivo.
- Define siempre og:image:width y height
- Declarar las dimensiones permite a las plataformas maquetar la tarjeta de inmediato, así la primera vez que se comparte no queda en blanco mientras obtienen la imagen de forma asíncrona.
- Mantén iguales canonical y og:url
- Apunta ambos a la única URL canonical para que los recuentos de veces compartido y las señales de búsqueda no se repartan entre variantes de URL.
- Escribe pensando en el presupuesto de píxeles
- Apunta a un título de unos 50–60 caracteres y a una descripción de unos 155, pero confía en el medidor de píxeles, ya que Google mide el ancho, no el número de caracteres.
- Renderiza las etiquetas en el servidor
- Los rastreadores de Facebook, LinkedIn, WhatsApp, Telegram y Discord no ejecutan JavaScript, así que las etiquetas Open Graph deben estar en el HTML estático o renderizado en el servidor.
Preguntas frecuentes
¿Qué es un generador de etiquetas meta?
¿Cómo añado etiquetas Open Graph a mi sitio web?
¿Qué tamaño debe tener una imagen de Open Graph?
¿Es obligatoria la etiqueta twitter:card?
¿Ayudan las etiquetas meta al SEO?
¿Esta herramienta sube mi contenido o mis imágenes?
¿Puedo importar etiquetas meta que ya tengo?
¿Por qué mi vista previa actualizada sigue mostrando la imagen antigua en Facebook o LinkedIn?
Herramientas relacionadas
Ver todas las herramientas →Generador y constructor de comandos cURL
Web & API
Construye comandos curl en tu navegador: define método, cabeceras, autenticación y cuerpo, y obtén el comando listo para copiar al instante. Presets para Bearer, POST JSON y subida de archivos. Gratis, privado, sin registro.
Generador htpasswd — bcrypt, Apache MD5 (apr1) y Basic Auth
Web & API
Genera entradas htpasswd con bcrypt, Apache MD5 (apr1), SHA-1 y más. Obtén configuración lista para pegar en Apache, nginx y Docker. 100% en tu navegador — sin subidas.
Conversor de Bases — Binario, Hex, Decimal, Octal
Herramientas de Conversión
Convierte números entre binario, hexadecimal, decimal, octal y cualquier base personalizada (2-36) al instante. Gratis, privado, sin registro — todo el procesamiento ocurre en tu navegador.
Decodificador y Codificador Base64
Codificación y Formato
Decodifica y codifica Base64 online de forma gratuita. Conversión en tiempo real con soporte completo de UTF-8 y emojis. 100% privado — funciona en tu navegador. Sin registro.
Conversor de Base64 a Imagen
Codificación y Formato
Decodifica una cadena Base64 o data URI de vuelta a una imagen en tu navegador. Previsualiza, lee dimensiones y MIME, luego descarga como PNG, JPG, GIF, SVG. Sin subir.
Generador y verificador de hash bcrypt
Herramientas de Seguridad
Genera y verifica hashes bcrypt de contraseñas online — coste ajustable, prefijos $2b$/$2a$/$2y$. 100 % en tu navegador; tu contraseña nunca se sube.