Generador de Meta Tags OG - Vista Previa Open Graph y Twitter Card
Genera meta tags Open Graph y Twitter Card con vista previa visual. Ve cómo se ve tu página al compartir en Facebook, X (Twitter) y LinkedIn.
Preguntas frecuentes
¿Qué son las etiquetas meta Open Graph?
Las etiquetas meta Open Graph (OG) son elementos HTML que controlan cómo se muestra una URL cuando se comparte en redes sociales como Facebook, Twitter, LinkedIn y Slack. Fueron creadas originalmente por Facebook en 2010 y se han convertido en el estándar para metadatos de compartición social. Las etiquetas clave incluyen og:title, og:description, og:image y og:url. Sin estas etiquetas, las plataformas intentan extraer información automáticamente, lo que a menudo produce vistas previas inexactas o poco atractivas.
¿Cómo uso este generador de meta OG?
Ingrese el título, descripción, URL de imagen y URL de página en los campos de Open Graph. Seleccione el tipo de contenido apropiado (sitio web, artículo, producto, etc.). Opcionalmente personalice los campos de Twitter Card — heredan de OG por defecto. Observe las vistas previas en tiempo real que muestran cómo aparecerá su enlace en Facebook, Twitter, LinkedIn y Slack. Elija su formato de exportación preferido (HTML, Next.js o Nuxt/Vue) y haga clic en Copiar código.
¿Es seguro? ¿Se envía algo a un servidor?
Toda la generación de etiquetas meta y renderización de vistas previas se realiza 100% del lado del cliente en su navegador usando JavaScript. No se transmiten títulos, descripciones, URLs ni referencias de imágenes a ningún servidor. Esta herramienta funciona completamente en su navegador, lo que la hace segura para usar con páginas de productos no publicados, campañas de marketing confidenciales y contenido previo al lanzamiento.
¿Cuál es la diferencia entre las etiquetas Open Graph y Twitter Card?
Las etiquetas Open Graph (usando property="og:...") son el estándar universal usado por Facebook, LinkedIn, WhatsApp, Slack y la mayoría de las plataformas. Las etiquetas Twitter Card (usando name="twitter:...") son específicas de Twitter/X y proporcionan control adicional sobre cómo aparecen los enlaces en los tweets. Twitter recurre a las etiquetas Open Graph si no hay etiquetas específicas de Twitter. La mejor práctica es incluir ambas.
¿Qué tamaño de imagen debo usar para compartir en redes sociales?
El tamaño de imagen recomendado es de 1200 x 630 píxeles para Open Graph (Facebook, LinkedIn). Para las tarjetas de Twitter con imagen grande, use 1200 x 628 píxeles (proporción 2:1 aproximadamente). Para las tarjetas de resumen de Twitter (pequeñas), el mínimo es 120 x 120 píxeles con proporción 1:1. Use siempre URLs HTTPS para las imágenes.
¿Por qué no se actualizan mis vistas previas después de agregar etiquetas meta?
Las plataformas sociales cachean agresivamente las vistas previas de enlaces. Después de agregar o actualizar sus etiquetas meta, necesita purgar la caché usando el depurador oficial de cada plataforma: Facebook Sharing Debugger, Twitter Card Validator y LinkedIn Post Inspector. Simplemente pegue su URL en estas herramientas y volverán a obtener los metadatos de su página.
Ejemplos de código
// Generate OG and Twitter Card meta tags
function generateMetaTags({ title, description, image, url, type = 'website', twitterCard = 'summary_large_image' }) {
const escape = (s) => s.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
const tags = [];
if (title) tags.push(`<meta property="og:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta property="og:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta property="og:image" content="${escape(image)}" />`);
if (url) tags.push(`<meta property="og:url" content="${escape(url)}" />`);
tags.push(`<meta property="og:type" content="${escape(type)}" />`);
tags.push(`<meta name="twitter:card" content="${escape(twitterCard)}" />`);
if (title) tags.push(`<meta name="twitter:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta name="twitter:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta name="twitter:image" content="${escape(image)}" />`);
return tags.join('\n');
}
console.log(generateMetaTags({
title: 'My Page',
description: 'A great page about something.',
image: 'https://example.com/image.jpg',
url: 'https://example.com'
}));