Generador gratuito de meta Open Graph y Twitter Card

Rellena el título de página, descripción, URL e imagen de compartición para producir etiquetas meta listas para pegar en Open Graph y Twitter Card. Una vista previa sencilla muestra cómo puede verse la tarjeta — todo el procesamiento permanece en tu navegador.

Usa URLs https absolutas para og:url y og:image. El tamaño de imagen recomendado es 1200×630 para tarjetas grandes.

TítuloDescripciónURL de la páginaURL de la imagen

Ancho de imagenAlto de imagen

Nombre del sitioIdioma/región (opcional)

Tipo Open Graph

Tarjeta Twitter

My Site

My page title

A short summary for social previews and search snippets.

Etiquetas HTML meta

<meta property="og:title" content="My page title" />
<meta property="og:description" content="A short summary for social previews and search snippets." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="My Site" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My page title" />
<meta name="twitter:description" content="A short summary for social previews and search snippets." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

Loading…

Cómo usar esta herramienta

1
Abrir Generador de meta OG
Prepara etiquetas de compartición social para una nueva página.
2
Introduce URLs de página e imagen
Añade título, descripción, URL canónica e imagen de 1200×630 si es posible.
3
Copia el HTML en tu sitio
Pega las etiquetas meta en la sección head de tu HTML o plantilla.

Datos rápidos

¿Funciona localmente?	Sí — las etiquetas se generan solo en tu navegador.
¿Se sube algo?	No. Tu texto y URLs permanecen en esta pestaña.
¿Metadata de Next.js?	Copia el HTML en el head, o mapea los campos a la API de metadata de tu framework.
¿Vista previa de imagen?	Si la URL de imagen permite enlace directo, aparece una vista previa aproximada de la tarjeta a la derecha.

Casos de uso principales

Crea etiquetas meta Open Graph y Twitter Card con vista previa en vivo — copia HTML, solo local.
¿Funciona localmente?: Sí — las etiquetas se generan solo en tu navegador.
¿Se sube algo?: No. Tu texto y URLs permanecen en esta pestaña.
¿Metadata de Next.js?: Copia el HTML en el head, o mapea los campos a la API de metadata de tu framework.
¿Vista previa de imagen?: Si la URL de imagen permite enlace directo, aparece una vista previa aproximada de la tarjeta a la derecha.

Preguntas frecuentes

¿Qué etiquetas se incluyen?▾

Propiedades og:* comunes más twitter:card, title, description e image cuando se proporcionan.

¿Necesito una imagen?▾

Recomendado para compartir enlaces; déjalo en blanco solo si aceptas vistas previas solo de texto.

¿Qué formato de idioma/región?▾

Usa códigos de idioma Open Graph como en_US o zh_CN.

¿Las plataformas mostrarán exactamente esta vista previa?▾

Cada red almacena en caché y recorta de forma diferente — prueba siempre con sus herramientas de depuración.

¿Caracteres especiales en el título?▾

Las comillas y los ampersands se escapan automáticamente en el atributo content.

¿Tipo article vs website?▾

Usa article para entradas de blog; website para páginas de inicio y landing pages.