Cómo usar Generador de etiquetas Open Graph: guía completa (2026)

¿Qué es Generador de etiquetas Open Graph?

Un generador de etiquetas Open Graph crea los meta tags que leen las apps sociales cuando alguien comparte tu URL. El generador gratis de ToolsMinify convierte título, descripción, URL, imagen, tipo, nombre del sitio y locale en HTML og:* listo para copiar - más etiquetas Twitter Card opcionales - con una vista previa social en vivo. Pega el markup en el head para que Facebook, LinkedIn, Slack, Discord e iMessage muestren la tarjeta que querías en lugar de una miniatura adivinada.

Genera etiquetas Open Graph y Twitter Card a partir de un título, una descripción, una URL y una imagen. Generador OG gratis con HTML en vivo y vista previa social.

¿Por qué usar Generador de etiquetas Open Graph?

• Genera og:title, og:description, og:url, og:type, og:image, og:site_name y og:locale mientras escribes
• Etiquetas Twitter Card opcionales (summary o summary_large_image) en el mismo snippet
• HTML en vivo con escape de atributos para comillas y ampersands
• Vista previa social para detectar un título débil o una imagen que falta antes de publicar
• Corre por completo en el navegador: los borradores no salen del dispositivo

Cómo usar Generador de etiquetas Open Graph paso a paso

1. Paso 1: Introduce el título, la descripción, la URL canónica y la URL de la imagen.
2. Paso 2: Elige un og:type (website, article, product o profile).
3. Paso 3: Añade un nombre de sitio y un locale opcionales (por ejemplo es_ES).
4. Paso 4: Deja las etiquetas Twitter Card activas salvo que solo quieras markup Open Graph.
5. Paso 5: Copia el HTML y pégalo dentro del head de tu página.

La Generador de etiquetas Open Graph está en Herramientas SEO. Abre la página de la herramienta, introduce tu texto o datos en el campo principal y los resultados se actualizan al instante. Usa el botón de copiar para pegar la salida en documentos, editores de código u hojas de cálculo.

Casos de uso comunes

Artículos y posts

Pon og:type en article, añade una portada 1200 x 630 y copia las etiquetas a la plantilla del post para que el share muestre el titular que escribiste.

Productos y landings

Usa tipo product o website con una imagen hero y una descripción centrada en el beneficio para que anuncios y chats coincidan con la página.

Portada y marca

Añade og:site_name y un locale como es_ES para que LinkedIn y Slack muestren tu marca bajo el título.

CMS y metadatos del framework

Genera el HTML una vez y mapea cada propiedad a Next.js, WordPress o un snippet de head cuando los editores pegan títulos y URLs de imagen.

Ejemplos

• Tarjeta de un artículo: Título "Etiquetas Open Graph para un artículo", tipo article, imagen 1200 x 630 y la URL del post generan og:title, og:type, og:image y og:url listos para pegar en la plantilla.
• Portada con nombre del sitio: Usa tipo website, tu marca como og:site_name y la URL de inicio para que Slack y LinkedIn muestren la marca bajo el título.
• Ficha de producto: Tipo product más título, descripción, URL e imagen hero da una tarjeta con aspecto de tienda en Facebook y iMessage.
• Comillas y ampersands: Un título como Shop "A & B" se escapa a Shop "A & B" para que el HTML siga siendo válido al pegarlo.

Consejos profesionales

• Usa una URL de imagen https absoluta. Las rutas relativas suelen fallar en los crawlers de Facebook y Slack.
• 1200 x 630 px es el tamaño apaisado habitual. Las imágenes cuadradas se recortan en la mayoría de redes.
• Mantén títulos cortos (unos 60 caracteres) y descripciones por debajo de ~200 para que las tarjetas no corten a mitad de palabra.
• Tras publicar, rastrea la URL en Facebook Sharing Debugger y LinkedIn Post Inspector para refrescar la caché.
• Combínalo con el comprobador de meta description para el snippet de Google: Open Graph cubre las tarjetas sociales, no la SERP.

Preguntas frecuentes

¿Qué son las etiquetas Open Graph?

Son elementos meta (og:title, og:description, og:image, og:url, og:type) que dicen a las apps sociales cómo pintar la vista previa de un enlace. Sin ellas, Facebook, LinkedIn y Slack suelen adivinar un título débil o la imagen equivocada.

¿Qué etiquetas Open Graph necesito?

Empieza por og:title, og:type, og:image y og:url. Añade og:description, og:site_name y og:locale cuando los tengas. Este generador emite solo los campos que rellenas, más og:type (por defecto website).

¿Qué tamaño debe tener og:image?

Usa una URL https absoluta. 1200 x 630 píxeles es el tamaño apaisado habitual para Facebook y LinkedIn. Las imágenes más pequeñas se recortan o caen a una miniatura.

¿También necesito etiquetas Twitter Card?

X (Twitter) puede leer Open Graph, pero twitter:card, twitter:title, twitter:description y twitter:image te dan control explícito. Activa la opción para incluirlas. Con imagen se usa summary_large_image; sin imagen, summary.

¿Dónde pego el HTML?

Pega las etiquetas dentro del head del documento HTML (o de la API de metadatos de tu framework). Deben estar en la URL pública que pones en og:url para que los crawlers las vean.

¿Sale mi texto del dispositivo?

No. El generador de etiquetas Open Graph corre por completo en tu navegador. Títulos, URLs e imágenes no se suben ni se guardan en un servidor.

Herramientas relacionadas

Explora otras herramientas seo en ToolsMinify. En la página de Generador de etiquetas Open Graph encontrarás utilidades relacionadas para completar tu flujo sin salir del sitio.