Generador de Open Graph y tarjetas sociales

Cómo usar el generador de Open Graph

1. Escribe el Título y la Descripción que quieres que vea la gente cuando se comparta tu enlace. Pueden ser distintos de tu título SEO: redáctalos pensando en un feed social.
2. Añade la URL de la página (la dirección canónica) y la URL de la imagen. Ambas deben ser absolutas y empezar por https://.
3. Describe la imagen en Descripción de la imagen (texto alternativo) para que quienes usan lectores de pantalla sepan qué muestra.
4. Elige o arrastra la misma imagen en Imagen de vista previa. Se queda en tu dispositivo: la herramienta solo la usa para dibujar las vistas previas y rellenar Ancho de la imagen (px) y Alto de la imagen (px).
5. Indica el Nombre del sitio, el Tipo de contenido y la Configuración regional (por ejemplo es_ES o es_MX), elige el estilo de Tarjeta de X (Twitter) y, si las tienes, las cuentas de X del sitio y del autor.
6. Revisa las vistas previas y la lista de Comprobaciones, y luego pulsa Copiar o Descargar para pegar las etiquetas dentro del <head> de la página.

Para qué sirven las etiquetas Open Graph

Cuando se pega un enlace en Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage y muchas otras apps, un rastreador descarga la página y lee sus metaetiquetas Open Graph (og:) para construir una tarjeta: una imagen, un título, una breve descripción y el dominio. Sin estas etiquetas, la app tiene que adivinar, y a menudo acaba mostrando un logotipo, el banner de cookies o la primera frase del menú.

Las cuatro propiedades básicas son og:title, og:type, og:image y og:url. Esta herramienta añade también og:description, og:site_name, og:locale y los detalles de la imagen (og:image:width, og:image:height, og:image:alt). Declarar el tamaño de la imagen permite a algunas plataformas mostrar la tarjeta desde la primera vez que se comparte, sin esperar a descargar la imagen.

X lee sus propias etiquetas twitter:, pero si faltan recurre al título, la descripción y la imagen de Open Graph. Por eso la herramienta solo añade lo que X necesita de verdad: twitter:card, las cuentas opcionales y la descripción de la imagen. Así se evita duplicar cada valor.

Tamaños de imagen que funcionan en todas partes

Usa JPEG o PNG, mantén un peso de archivo razonable (muy por debajo de 5 MB) y evita poner texto importante cerca de los bordes, porque cada plataforma recorta de forma algo distinta. Las vistas previas de esta herramienta son aproximaciones de esos diseños, no capturas de pantalla.

Después de publicar

Las redes sociales guardan en caché las vistas previas de los enlaces, a veces durante días. Cuando cambies las etiquetas, pídeles que vuelvan a leer la página con el Depurador de contenido compartido de Facebook o con LinkedIn Post Inspector. La página debe ser accesible públicamente: los rastreadores no ven páginas protegidas por inicio de sesión ni en localhost.