Generador de Open Graph y Meta Tags
Genera etiquetas Open Graph y Twitter Card. Previsualiza cómo aparecerá tu enlace en redes sociales.
<!-- Open Graph --> <meta property="og:title" content="Mi Sitio Web — Título principal"> <meta property="og:description" content="Descripción de mi sitio web para redes sociales."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="Mi Sitio"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Mi Sitio Web — Título principal"> <meta name="twitter:description" content="Descripción de mi sitio web para redes sociales."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Por qué usarlo
Controla cómo se comparte tu web en redes sociales
Vista previa real
Ve exactamente cómo aparecerá tu enlace antes de publicarlo.
Todas las plataformas
Facebook, LinkedIn, Twitter, WhatsApp y Telegram en un solo paso.
Código listo para copiar
Etiquetas HTML generadas correctamente. Pega en tu <head> y listo.
Sin registro
Genera y prueba tus meta tags sin crear cuenta ni instalar nada.
Cómo funciona
Tres pasos, sin complicaciones
Introduce los datos de tu página
Rellena el título, descripción, URL e imagen de tu página. Estos son los datos que verán los usuarios cuando compartan tu enlace.
Elige las redes sociales
Selecciona si necesitas Open Graph (Facebook, LinkedIn, WhatsApp), Twitter Card o ambos. Puedes personalizar campos específicos para cada plataforma.
Copia el código HTML
Copia las etiquetas meta generadas y pégalas dentro del <head> de tu página HTML. Verifica el resultado con Facebook Debugger o Twitter Card Validator.
Preguntas frecuentes
¿Tienes dudas?
Open Graph Protocol es un protocolo web creado por Facebook (presentado en F8 2010) que permite a cualquier página web convertirse en un objeto rico en el grafo social. Al incluir etiquetas meta og: en el <head> de tu HTML, controlas exactamente qué título, descripción e imagen aparecen cuando alguien comparte tu enlace en Facebook, LinkedIn, WhatsApp, Telegram y la mayoría de plataformas sociales. Sin estas etiquetas, las plataformas intentan adivinar el contenido con resultados impredecibles.
Las cuatro propiedades básicas obligatorias son: og:title (título del objeto), og:type (tipo de objeto: website, article, product...), og:image (URL de la imagen de previsualización) y og:url (URL canónica de la página). Propiedades opcionales pero importantes: og:description (descripción breve), og:site_name (nombre del sitio), og:locale (idioma en formato es_ES), og:image:width y og:image:height (dimensiones de la imagen para evitar reflows al cargar). Para artículos, og:type=article habilita propiedades adicionales: article:author, article:published_time, article:section.
Facebook tiene el Sharing Debugger (developers.facebook.com/tools/debug) que renderiza exactamente cómo aparecerá tu URL al compartirse y permite forzar el refresco del caché. Twitter tiene el Card Validator (cards-dev.twitter.com/validator). LinkedIn tiene el Post Inspector (linkedin.com/post-inspector). Para desarrollo local, herramientas como ngrok o localtunnel permiten exponer tu localhost para que los debuggers externos puedan acceder. Recuerda que las plataformas cachean los metadatos — si cambias las etiquetas, usa las herramientas de depuración para invalidar el caché.
La dimensión recomendada por Facebook y la mayoría de plataformas es 1200×630 píxeles (ratio 1.91:1). Esta resolución es suficiente para pantallas Retina y se escala bien a todos los tamaños de vista previa. El tamaño mínimo aceptado es 200×200 px. Facebook rechaza imágenes de menos de 200×200 o de más de 8 MB. Twitter requiere mínimo 300×157 px para summary_large_image y máximo 4096×4096 px con límite de 5 MB. Para WhatsApp, la imagen debe ser cuadrada (1:1) si quieres previsualización en chats de grupo.
Open Graph (og:) es un protocolo abierto adoptado por la mayoría de plataformas sociales. Twitter Cards (twitter:) son específicas de Twitter/X y ofrecen tipos adicionales: summary, summary_large_image, app y player. Si defines og: tags, Twitter las usa como fallback cuando no hay twitter: tags. La recomendación es definir ambos conjuntos para máxima compatibilidad. Los campos clave de Twitter Card son twitter:card (tipo de tarjeta), twitter:site (cuenta Twitter del sitio), twitter:creator (cuenta del autor) y twitter:image (puede diferir de og:image para optimizar dimensiones).
Open Graph Protocol: historia, Schema.org y rastreadores de redes sociales
Open Graph Protocol fue presentado por Facebook en la conferencia F8 el 21 de abril de 2010. El objetivo era convertir cualquier página web en un objeto de primera clase en el grafo social de Facebook, análogo a cómo las páginas de artistas, películas y lugares ya tenían estructura de datos rica. El protocolo fue inspirado en RDFa (Resource Description Framework in Attributes), una extensión de HTML para datos estructurados, pero simplificado para adopción masiva. El nombre y dominio ogp.me fue registrado ese mismo día. Desde su lanzamiento, Open Graph fue adoptado por LinkedIn (2011), Twitter como fallback (2012), WhatsApp (2013) y prácticamente todas las plataformas de mensajería y redes sociales relevantes.
La relación entre Open Graph y Schema.org es complementaria pero a veces confusa. Schema.org (lanzado en 2011 por Google, Bing y Yahoo) define un vocabulario de datos estructurados para motores de búsqueda, implementado via JSON-LD (recomendado), Microdata o RDFa. Open Graph está optimizado para la previsualización de enlaces en redes sociales. Una misma página debería tener ambos: Schema.org para SEO y Featured Snippets de búsqueda, y Open Graph para sharing en redes sociales. Google utiliza og:title y og:description como señales secundarias para su índice, pero JSON-LD Schema.org tiene mayor peso. Los crawlers sociales (facebookexternalhit, Twitterbot, LinkedInBot) solo leen og: tags, no JSON-LD.
Los rastreadores de redes sociales tienen características técnicas importantes para desarrolladores. El user-agent 'facebookexternalhit/1.1' indica que Facebook está procesando la URL para generar una previsualización. Estos rastreadores NO ejecutan JavaScript — solo procesan el HTML estático del servidor. Esto significa que aplicaciones React/Vue/Angular con renderizado del lado del cliente (CSR) sin SSR o SSG no tendrán metadatos OG correctos, ya que las etiquetas meta se generan dinámicamente en el cliente. La solución es Server-Side Rendering (Next.js, Nuxt), Static Site Generation, o un servicio de prerendering (Prerender.io, rendertron) que sirve HTML pre-renderizado a los bots de redes sociales.