Generador de etiquetas Open Graph

Cómo funciona

Cuando se comparte un enlace a tu sitio en Facebook, LinkedIn, Slack, Discord o X (Twitter), estas plataformas buscan etiquetas meta Open Graph en el <head> de la página para construir una tarjeta de vista previa con un título, una descripción y una imagen. Sin estas etiquetas, la red social suele mostrar un enlace desnudo o una vista previa genérica poco atractiva. Esta herramienta genera las etiquetas og:title, og:description, og:url, og:image y og:type, así como los equivalentes twitter:card para que la tarjeta también se muestre correctamente en X.

¿Dónde colocar estas etiquetas?

Pega el resultado directamente en la sección <head> de tu página HTML, antes de la etiqueta de cierre </head>. En la mayoría de los frameworks (Nuxt, Next.js, etc.), existe un componente dedicado a la gestión del head que acepta estas mismas etiquetas meta.

¿Qué tamaño de imagen usar para og:image?

El tamaño recomendado suele ser 1200x630 píxeles (ratio 1.91:1), que corresponde al formato esperado por Facebook, LinkedIn y X para mostrarse en tarjeta grande. Una imagen demasiado pequeña o en una proporción incorrecta puede ser recortada de forma poco favorecedora por la plataforma.

¿Por qué no ha cambiado mi vista previa tras modificarla?

La mayoría de las redes sociales guardan en caché las etiquetas Open Graph de una URL la primera vez que se comparte. Después de modificar tus etiquetas, usa la herramienta de depuración oficial de la plataforma (por ejemplo, el «Sharing Debugger» de Facebook) para forzar un nuevo rastreo de la página.

Generación 100% local en tu navegador: nada se envía a un servidor.