¿Necesito tanto etiquetas OG como etiquetas de Twitter?

Técnicamente no — la mayoría de las plataformas recurren a las etiquetas og si no hay etiquetas twitter: . Pero Twitter/X no mostrará el formato de imagen grande sin que la etiqueta twitter:card esté establecida en summary_large_image, por lo que añádala de todos modos.

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

1200×630px es la recomendación estándar. Slack requiere al menos 600px de ancho para mostrar cualquier imagen. Menor de 200×200px y la mayoría de las plataformas la omiten completamente.

Mis etiquetas son correctas pero el antebresillo sigue siendo incorrecto. ¿Qué hago ahora?

Las plataformas almacenan los datos de OG de forma agresiva. Utilice el Depurador de Facebook (developers.facebook.com/tools/debug) o el Inspector de publicaciones de LinkedIn para forzar una nueva extracción. Para Slack, agregue un parámetro de consulta para romper la URL almacenada.

¿Puedo establecer etiquetas OG diferentes por página en una aplicación de página única?

Sí, pero requiere renderizado en el servidor o un servicio de prerenderizado. Los cambios realizados por JavaScript en las etiquetas meta en el lado del cliente no son detectados por la mayoría de los robots; estos obtienen el HTML bruto antes de que el JavaScript se ejecute.

¿Odias los anuncios? Ir Sin publicidad Hoy 

Etiquetas Open Graph Detente de que tus enlaces se vean terribles en Slack

Actualizado en 15 de mayo de 2026

Usted pasó semanas construyendo la aplicación. La vista previa de enlace en Slack muestra "Sin título" y un icono dañado. Eso es un problema de Open Graph. Aquí está cómo solucionarlo en 10 minutos.

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

ANUNCIO · ¿ELIMINAR?

Pasaron tres semanas construyendo la aplicación. La vista previa del enlace en Slack muestra "Sin título" y una miniatura de tu logo de pie de página. Este es un problema de Open Graph y tarda aproximadamente 10 minutos en solucionarse.

¿Qué son las etiquetas Open Graph?

Open Graph (og:) es un protocolo que Facebook introdujo en 2010 que ahora es utilizado por todas las plataformas principales para generar vistas previas de enlaces. Cuando Slack, Twitter, LinkedIn o iMessage despliegan tu URL, obtienen la página, buscan <meta> etiquetas con el og: prefijo, y utilizan esas etiquetas para construir la tarjeta.

Sin etiquetas → adivinan. Normalmente adivinan mal.

Las etiquetas que realmente importan

Etiqueta	Obligatorio?	Qué hace
`og:title`	Sí	El título mostrado en la tarjeta de vista previa
`og:description`	Sí	El texto de subtítulo o resumen (mantén bajo 200 caracteres)
`og:image`	Sí	La imagen de vista previa. Debe ser una URL absoluta.
`og:url`	Sí	La URL canónica de la página
`og:type`	Recomendado	Usa `website` para la mayoría de las páginas, `article` para publicaciones
`twitter:card`	Recomendado	Controla el tamaño de la tarjeta de Twitter/X. Usa `summary_large_image`.
`twitter:title`	Opcional	Se queda con `og:title` en la mayoría de los clientes
`twitter:description`	Opcional	Se queda con `og:description`
`twitter:image`	Opcional	Se queda con `og:image`

La que más confusión causa es og:image. Debe ser una URL absoluta (sin rutas relativas), idealmente de 1200×630px y bajo 8MB. Slack en particular omitirá silenciosamente imágenes que no cumplan con sus requisitos de tamaño. Asegúrate de que la imagen tenga al menos 600px de ancho, de lo contrario simplemente no aparecerá.

Un conjunto completo de etiquetas OG

Colócalo en el <head> de tu página. Sustituye los valores de lugar:

<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />

Para un artículo o entrada de blog, cambia og:type a article y añade el autor y la fecha de publicación:

<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />

Cómo verificar tus etiquetas sin desplegar

La forma más rápida: pega tu URL en IO Tools Open Graph Checker. Este herramienta obtiene la página, analiza las etiquetas y te muestra exactamente lo que verá Slack (o cualquier otra plataforma), incluyendo una vista previa de cómo se renderizará la tarjeta. No se requiere inicio de sesión ni instalación de extensiones.

Si deseas verificar una URL local o un entorno de pruebas que no sea accesible públicamente, el verificador no podrá alcanzarla. En ese caso, revisa la fuente de tu página y verifica manualmente que las etiquetas estén presentes en el <head>. Una vez desplegado, ejecuta el verificador nuevamente para confirmar que la versión en vivo coincida.

Verificadores específicos por plataforma (cuando necesitas forzar una actualización de caché):

Facebook/Meta: developers.facebook.com/tools/debug — también limpia el caché de Facebook de tus etiquetas OG
LinkedIn: linkedin.com/post-inspector — útil cuando tu vista previa está obsoleta tras una actualización
Twitter/X: cards-dev.twitter.com/validator — más lento para actualizarse pero útil para confirmar el formato de la tarjeta

Slack almacena de forma agresiva. Si corriges tus etiquetas y la vista previa antigua sigue mostrándose, puedes forzar una nueva carga agregando una cadena de consulta (por ejemplo, ?v=2) a la URL antes de compartir — no ideal para enlaces en producción, pero adecuado para pruebas.

Generación de etiquetas

Si deseas generar un conjunto completo de etiquetas de forma interactiva en lugar de codificarlas manualmente, el IO Tools HTML Meta Tag Generator abarca etiquetas OG, tarjetas de Twitter y etiquetas estándar en una sola ocasión. Copia el resultado en tu <head>.

Errores comunes que es importante evitar

URLs de imágenes relativas. /images/og.png no funciona. Cada plataforma obtiene las etiquetas OG desde un servidor externo que no tiene contexto sobre tu URL base. Siempre utiliza la ruta absoluta. https:// path.
Usar la misma imagen para todo. Un avatar de 300×300 como imagen OG aparecerá técnicamente, pero como una miniatura pequeña y fea. Crea una imagen adecuada de 1200×630 para cada página clave.
No establecer og:url. Sin ello, algunas plataformas utilizan la URL que obtuvieron, otras inventan una canónica propia. Establece explícitamente.
Olvidarse de invalidar los cachés. La mayoría de las plataformas almacenan las etiquetas OG durante 24 a 72 horas. Si actualizas las etiquetas en una página en vivo, utiliza los verificadores de plataforma anteriores para forzar una nueva carga.
Mezclar property y name atributos. Las etiquetas OG utilizan property=. Las etiquetas de Twitter utilizan name=. Mezclarlas causa que algunos analizadores ignoren completamente la etiqueta.

Las etiquetas Open Graph son aquellas cosas que toman cinco minutos en agregar y que se ven embarazantes cuando faltan. Arreglalas una vez, verifica con el Verificador de Open Graph, y continúa.