Contents
Open Graph y Twitter Cards: guía completa
Cómo controlan los metadatos de Open Graph la vista previa de los enlaces, en qué se diferencian de los snippets de Google y cómo validar títulos, imágenes y descripciones.
Cuando un usuario comparte un enlace en Facebook, Telegram, LinkedIn o WhatsApp, la plataforma no toma los datos de tu sitio al azar: lee unas metaetiquetas especiales dentro del <head> de la página. Es el Open Graph Protocol, desarrollado por Facebook en 2010.
Sin marcado de OG, las redes sociales adivinan por su cuenta el título, la descripción y la imagen, y el resultado es impredecible. Con un marcado correcto controlas por completo el aspecto de la vista previa y maximizas el CTR de los enlaces compartidos.
<head> se convierten en una tarjeta con título, descripción e imagen.Open Graph no afecta directamente al posicionamiento: es una herramienta para el tráfico social. Pero compartir con una vista previa atractiva aumenta el alcance y puede influir de forma indirecta en la autoridad de enlace y en el tráfico de marca.
Qué es Open Graph
Open Graph Protocol (OGP) es un conjunto de metaetiquetas dentro del <head> de una página HTML que define cómo se presenta la página al compartirla en redes sociales. El protocolo usa el espacio de nombres og: y lo admiten todas las plataformas principales: Facebook, LinkedIn, Telegram, WhatsApp, Pinterest y Slack.
Etiquetas básicas de OG
| Etiqueta | Obligatoria | Descripción |
|---|---|---|
| og:title | Sí | Título de la página en la vista previa (hasta 60–70 caracteres) |
| og:description | Recomendada | Descripción (hasta 155–160 caracteres) |
| og:image | Sí | URL de la imagen de vista previa (mín. 200×200, recomendado 1200×630) |
| og:url | Sí | URL canónica de la página |
| og:type | Sí | Tipo de objeto: website, article, product |
| og:site_name | Recomendada | Nombre del sitio (por ejemplo, 'seohead.tech') |
| og:locale | Recomendada | Idioma de la página: en_US, ru_RU |
| og:image:width | Recomendada | Ancho de la imagen en píxeles |
| og:image:height | Recomendada | Alto de la imagen en píxeles |
| og:image:alt | Recomendada | Texto alternativo de la imagen de vista previa |
Ejemplo de implementación en código:
html
<!-- Full OG tag set for an article -->
<head>
<meta property="og:title" content="Open Graph and Twitter Cards: complete guide" />
<meta property="og:description" content="How to set up Open Graph markup for maximum CTR when sharing on social media" />
<meta property="og:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph and Twitter Cards guide" />
<meta property="og:url" content="https://seohead.tech/en/blog/open-graph" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="seohead.tech" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ru_RU" />
<!-- Additional for article -->
<meta property="article:published_time" content="2026-05-17T00:00:00Z" />
<meta property="article:author" content="https://seohead.tech/en/about" />
<meta property="article:section" content="On-Page SEO" />
</head>og:image: requisitos y tamaños
La imagen de OG es el elemento más importante de la vista previa. Ocupa más del 80 % del área de la tarjeta y determina si el usuario hace clic en el enlace. Con un tamaño o un formato incorrectos, Facebook recorta la imagen o directamente no la muestra.
| Plataforma | Tamaño recomendado | Mínimo | Formato |
|---|---|---|---|
| Facebook / Meta | 1200×630 px | 600×315 px | JPG, PNG, GIF, WebP |
| Twitter / X | 1200×600 px | 300×157 px | JPG, PNG, WebP, GIF |
| 1200×627 px | 200×200 px | JPG, PNG, GIF | |
| Telegram | 1280×720 px (16:9) | cualquiera | JPG, PNG, WebP |
| 1200×630 px | 300×200 px | JPG, PNG |
Solución universal: 1200×630 px en formato WebP. Es una proporción de 1,91:1 que se muestra bien en todas las plataformas principales. El tamaño del archivo puede llegar a 8 MB (límite de Facebook), pero lo ideal es que pese menos de 300 KB.
Twitter Cards
Twitter (X) admite las etiquetas de OG, pero también tiene su propio marcado: Twitter Cards. La plataforma lee primero las etiquetas twitter: y, si no las encuentra, recurre a las og:. Especifica ambos conjuntos.
| Etiqueta de Twitter Card | Equivalente en OG | Descripción |
|---|---|---|
| twitter:card | — | Tipo de tarjeta: summary, summary_large_image, app, player |
| twitter:title | og:title | Título (hasta 70 caracteres) |
| twitter:description | og:description | Descripción (hasta 200 caracteres) |
| twitter:image | og:image | URL de la imagen |
| twitter:image:alt | og:image:alt | Texto alternativo de la imagen |
| twitter:site | — | @usuario de la cuenta del sitio |
| twitter:creator | — | @usuario del autor del contenido |
Ejemplo de implementación en código:
html
<!-- Twitter Cards markup -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@seohead_tech" />
<meta name="twitter:creator" content="@seohead_tech" />
<meta name="twitter:title" content="Open Graph and Twitter Cards: complete guide" />
<meta name="twitter:description" content="Setting up OG markup for maximum CTR when sharing" />
<meta name="twitter:image" content="https://seohead.tech/images/blog/open-graph.webp" />
<meta name="twitter:image:alt" content="Open Graph guide" />Tipos de objeto de OG
| og:type | Cuándo usarlo | Etiquetas adicionales |
|---|---|---|
| website | Página de inicio, páginas de servicio, landing pages | — |
| article | Entradas de blog, noticias, guías | article:published_time, article:author, article:section |
| product | Fichas de producto en una tienda online | product:price:amount, product:price:currency |
| profile | Páginas de autor, perfiles de usuario | profile:first_name, profile:last_name |
| video | Páginas con contenido de vídeo | video:duration, video:release_date |
Implementación en Next.js
En Next.js 13+ (App Router), las etiquetas de OG se definen de forma cómoda con la Metadata API. Es un enfoque tipado que evita escribir a mano las metaetiquetas HTML.
typescript
// app/[locale]/blog/[slug]/page.tsx
import type { Metadata } from 'next';
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const article = await getArticle(params.slug);
return {
title: article.titleEn,
description: article.leadEn,
openGraph: {
title: article.titleEn,
description: article.leadEn,
url: `https://seohead.tech/en/blog/${params.slug}`,
siteName: 'seohead.tech',
images: [
{
url: `https://seohead.tech${article.coverImage}`,
width: 1200,
height: 630,
alt: article.coverImageAltEn,
},
],
locale: 'en_US',
type: 'article',
publishedTime: article.date,
authors: ['https://seohead.tech/en/about'],
section: article.tagEn,
},
twitter: {
card: 'summary_large_image',
title: article.titleEn,
description: article.leadEn,
images: [`https://seohead.tech${article.coverImage}`],
creator: '@seohead_tech',
},
};
}Validación y depuración
| Herramienta | Plataforma | URL |
|---|---|---|
| Facebook Sharing Debugger | Facebook, Instagram, WhatsApp | developers.facebook.com/tools/debug/ |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ | |
| Open Graph Checker | Universal | opengraph.xyz |
| Telegram | Telegram | Basta con pegar el enlace en un chat: la vista previa aparece al momento |
Facebook guarda en caché las etiquetas de OG. Si has actualizado el marcado, pero la vista previa no ha cambiado, usa Facebook Sharing Debugger (botón «Scrape Again»). La caché de Telegram se actualiza sola; para forzar una actualización, añade
?v=2 a la URL.Preguntas frecuentes
¿Open Graph afecta al posicionamiento en Google?
Directamente, no. Google no usa las etiquetas de OG para posicionar. Indirectamente, sí: una vista previa atractiva aumenta las veces que se comparte, lo que puede traducirse en más enlaces y tráfico de marca.
¿Qué es más importante: og:title o <title>?
Para el buscador,
<title>. Para las redes sociales, og:title. Pueden diferir: en el buscador, el título se optimiza con palabras clave (50–60 caracteres); en las redes sociales, para el clic y la emoción (hasta 70 caracteres). Ambas etiquetas deben estar presentes.¿Por qué Telegram no muestra la vista previa?
Hay tres motivos principales: 1) la imagen no es accesible por HTTPS o está bloqueada para los bots; 2) falta og:image o la URL no es válida; 3) la página está cerrada a los rastreadores (noindex, robots.txt, Cloudflare Bot Fight Mode). Comprueba que la imagen sea accesible con
curl -A 'TelegramBot' URL.¿Hacen falta Twitter Cards si ya tengo Open Graph configurado?
Muchas plataformas pueden recurrir a Open Graph, mientras que las etiquetas específicas de cada plataforma dan más control donde se admiten. Prueba con una URL real compartida: ningún conjunto de etiquetas garantiza cómo guarda en caché o muestra cada plataforma la vista previa.
¿Cómo genero imágenes de OG de forma dinámica?
Next.js admite la generación dinámica de imágenes de OG mediante
ImageResponse de next/og. La imagen se genera en el servidor, en formato PNG o WebP, a partir de una plantilla JSX. Así puedes tener una vista previa única para cada artículo sin preparar las imágenes a mano.Check it with SpiderHead
Free and local: run the audit on your own machine.
