¿Los etiquetas Open Graph afectan al SEO?

No directamente — los motores de búsqueda como Google no utilizan las etiquetas OG para el posicionamiento. Pero influyen en las tasas de clic en plataformas sociales y aplicaciones de mensajería, lo que puede generar tráfico que indirectamente indica relevancia. Piénsalas como optimización de conversión para enlaces compartidos.

¿Con qué frecuencia las plataformas re-recopilan las etiquetas Open Graph?

Varía. Facebook almacena los datos hasta por 30 días. LinkedIn puede almacenar los datos durante una semana o más. Slack vuelve a obtener los datos cada vez que se publica un enlace en un canal, por lo que normalmente están actualizados. Siempre use la herramienta de depuración de la plataforma para forzar una actualización después de modificar las etiquetas.

¿Puedo usar una imagen diferente para Twitter que para otras plataformas?

Sí. Establezca og:image para Facebook, LinkedIn, Discord y Slack. Luego, establezca una imagen separada para Twitter/X. Pueden apuntar a archivos diferentes — útil si desea un corte cuadrado para Twitter y una imagen amplia de 1200×63.0 para todo lo demás.

¿Qué pasa si no agrego etiquetas OG en absoluto?

La plataforma rastrea tu página y adivina. Podría extraer el título de la página del etiquete , tomar el primer párrafo de texto como descripción y elegir una imagen aleatoria de la página — a menudo un logotipo, una unidad de anuncio o un icono. El resultado es normalmente incorrecto y raramente clicables.

¿Funcionan las etiquetas Open Graph en aplicaciones de página única (SPAs)?

Solo si los tags OG están presentes en el HTML renderizado por el servidor. Las plataformas no ejecutan JavaScript al hacer scraping; solo leen la respuesta HTML bruta. Si tu aplicación de página única (SPA) renderiza contenido solo en el lado del cliente, los tags OG en ese contenido no serán visibles. Utiliza renderizado por el servidor (SSR) o generación estática para asegurarte de que los tags estén en el payload inicial de HTML.

¿Odias los anuncios? Ir Sin publicidad Hoy 

Etiquetas de Open Graph — Detenga que sus enlaces se vean terribles en Slack

Publicado el 23 de mayo de 2026

Las etiquetas Open Graph controlan la imagen, el título y la descripción que se muestran cuando comparten enlaces en Slack, LinkedIn, Twitter y Discord. Aprende las 6 etiquetas esenciales, cómo ajustar correctamente el tamaño de og:image y cómo probar que tus previsualizaciones funcionen realmente.

Etiquetas Open Graph — Detén que tus enlaces se vean mal en Slack 1

ANUNCIO · ¿ELIMINAR?

Pegas una URL en Slack. En lugar de una vista previa rica con una imagen grande, un título y un resumen de dos líneas, obtienes un enlace puro — o una oración aleatoria sacada del medio de la página. Tus compañeros hacen clic de todos modos, pero no tenían idea de lo que iban a ver.

Las etiquetas Open Graph solucionan eso. Son unas cuantas <meta> líneas en tu página’s <head> que indican a Slack, LinkedIn, Twitter, Discord y a cada plataforma otra exactamente qué mostrar cuando alguien comparte tu URL. Si las omites, la plataforma adivina — mal.

¿Qué son las etiquetas Open Graph?

Open Graph (OG) es un protocolo que Facebook introdujo en 2010 para que las páginas web pudieran controlar cómo se muestran al compartirse en la plataforma. La idea era simple: añadir metadatos estructurados al HTML <head> y las plataformas pueden extraer un título, una descripción y una imagen adecuadas en lugar de adivinar.

Funcionó tan bien que todas las principales plataformas lo adoptaron. Hoy en día, Slack, LinkedIn, Twitter/X, Discord, iMessage, WhatsApp y Telegram leen las etiquetas OG al generar vistas previas de enlaces. Facebook también las utiliza.

Las 6 etiquetas esenciales de Open Graph

Estas seis etiquetas deben estar en cada página que quieras compartir. Omitir alguna de ellas y las plataformas llenarán los espacios en blanco por sí solas — normalmente mal.

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />

og:title — El título mostrado en la vista previa. Manténlo bajo 70 caracteres. No copies simplemente tu <title> etiqueta — los títulos OG pueden ser más impactantes porque no necesitan incluir el nombre del sitio.
og:description — El resumen de dos líneas bajo el título. 150–200 caracteres es el punto óptimo. Hazlo útil, no vago.
og:image — La imagen mostrada en la tarjeta de vista previa. Esta es la etiqueta que hace o rompe la apariencia de tu enlace. Más abajo se detalla el tamaño.
og:url — La URL canónica de esta página. Usa siempre la URL completa incluyendo https://. Esto evita que las vistas previas se repitan cuando el mismo contenido se enlaza desde diferentes URLs.
og:type — Usa website para la mayoría de las páginas. Usa article para artículos de blog, junto con article:published_time y article:author.
og:site_name — El nombre de tu marca. Algunas plataformas lo muestran separadamente del título, así que manténlo corto.

Etiquetas de Tarjeta de Twitter/X

Twitter tiene su propio sistema llamado Twitter Cards. La buena noticia: si las etiquetas de Twitter Card faltan, cae de vuelta a las etiquetas OG. La mala noticia: la caída no es perfecta, y Twitter no mostrará tarjetas con imágenes grandes a menos que te inscribas explícitamente.

Agrega estas junto a tus etiquetas OG:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />

La etiqueta clave es twitter:card. Establecida en summary_large_image obtienes la tarjeta grande. Establecida en summary obtienes un miniatura pequeña. Sin esta etiqueta, Twitter se queda con summary y tu imagen OG cuidadosamente diseñada desaparece.

og:image — La etiqueta que realiza el trabajo pesado

Si hay una etiqueta que debes hacer bien, es og:image. Una vista previa vacía aún puede ser clicada. Una vista previa con una imagen borrosa, estirada o ausente no será.

Dimensiones recomendadas

1200 × 630 píxeles — la norma universal que funciona en Facebook, LinkedIn, Twitter y Slack
Mínimo: 600 × 315 píxeles — cualquier tamaño más pequeño y algunas plataformas omiten la imagen por completo
Tamaño del archivo: menos de 8 MB — Facebook y la mayoría de las plataformas rechazan archivos más grandes
Formato: JPG o PNG — JPG para fotos, PNG para gráficos con texto

Mantén el contenido clave lejos de los bordes

Las plataformas procesan las imágenes OG de forma diferente. Slack muestra una tarjeta amplia, LinkedIn recorta a cuadrado en algunos contextos y las aplicaciones móviles hacen lo suyo. Mantén tu logo, texto y punto focal dentro de una zona segura centrada — aproximadamente el interior de 80% de la imagen — para evitar que cualquier contenido importante se corte.

Cómo agregar etiquetas Open Graph a tu sitio

Sitios HTML simples

Pega las etiquetas dentro del <head> de tu HTML, antes del cierre del </head> etiqueta:

<head>
  <!-- your existing tags -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Page description." />
  <meta property="og:image" content="https://yoursite.com/og.jpg" />
  <meta property="og:url" content="https://yoursite.com/page/" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Site Name" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

WordPress

Si estás usando WordPress, no necesitas tocar el código. Las extensiones como Yoast SEO, Rank Math o All in One SEO manejan las etiquetas OG por defecto. Después de instalarlas, busca la sección “Social” en el editor de publicaciones/páginas — puedes establecer un título, descripción y imagen personalizados para cada contenido independientemente del título y descripción SEO.

Aplicaciones Next.js y React

En el Router de Next.js, usa el exportado integrado metadata en tu page.tsx:

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
    url: 'https://yoursite.com/page/',
    type: 'website',
    siteName: 'Site Name',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description.',
    images: ['https://yoursite.com/og.jpg'],
  },
};

Cómo probar tus etiquetas Open Graph

No asumas que tus etiquetas funcionan — las plataformas almacenan las vistas previas de forma agresiva y la versión almacenada puede tener varios días de antigüedad. Usa estas herramientas para verificar y forzar una actualización:

Debugger de Compartición de Facebook — muestra exactamente lo que lee Facebook y te permite limpiar el caché y volver a extraer
Inspector de Publicaciones de LinkedIn — LinkedIn almacena con fuerza, así que esta es la única forma confiable de forzar una actualización
Validador de Tarjetas de Twitter — muestra cómo se verá tu tarjeta en Twitter/X
Verificador de Open Graph — verifica cualquier URL directamente desde tu navegador sin necesidad de iniciar sesión en ninguna plataforma

El Verificador de Open Graph En IO Tools es útil para auditorías rápidas — pega cualquier URL y se obtienen todas las etiquetas OG y de Tarjeta de Twitter en una vista, así que puedes detectar etiquetas faltantes sin tener que cambiar entre los depuradores específicos de plataforma.

Si necesitas generar etiquetas OG limpias y correctamente formateadas desde cero, el Generador de etiquetas meta HTML produce el marcado exacto que necesitas para cualquier página.

5 errores comunes de Open Graph

Usar una URL relativa de imagen — og:image debe ser una URL absoluta (https://yoursite.com/image.jpg). Rutas relativas como /images/og.jpg fallan silenciosamente y la imagen no se cargará.
Una sola imagen OG para todo el sitio — Una imagen de respaldo funciona bien para la página principal, pero los artículos de blog, las páginas de productos y las páginas de destino merecen cada una su propia imagen. Una imagen genérica para todo el sitio destruye el sentido de contexto que hace que las vistas previas sean clicables.
Olvidar twitter:card — Sin ella, Twitter se queda con una miniatura pequeña incluso si tienes una imagen OG perfecta de 1200×630. Añádela explícitamente siempre.
Publicar cambios sin actualizar el caché — Las plataformas almacenan los datos OG de forma agresiva. Después de actualizar las etiquetas, usa el depurador de la plataforma para forzar una re-extracción, o la vista previa antigua seguirá mostrándose durante varios días.
Escribir una descripción og:description que suene como un título — Usa el campo de descripción para añadir información que no esté en el título: qué aprenderá el lector, a quién va dirigido, qué problema resuelve.