The largest consumer of Open Graph data. Uses og:title, og:description and og:image. Recommended image is 1200×630 px with a 1.91:1 aspect ratio so it is shown uncropped in the News Feed. Cache is aggressive — use the Sharing Debugger to refresh after a change.
Optimiza tu sitio web con etiquetas Open Graph
Descubre cómo el Protocolo Open Graph mejora el compartir en redes sociales
¿Qué es Open Graph (OG)?
- El Protocolo Open Graph, comúnmente conocido como OGP, es crucial para definir cómo aparece el contenido de tu sitio web en las redes sociales. Implementar etiquetas Open Graph asegura que se muestren imágenes, títulos y descripciones específicas cuando tu contenido se comparte en línea.
Tamaño óptimo de imagen para Open Graph
- Para maximizar el impacto en dispositivos de alta resolución, usa imágenes de Open Graph que tengan al menos 1200 píxeles de ancho. Facebook, un líder en redes sociales, recomienda imágenes con una proporción de 1.91:1 para mostrar la imagen completa en el Feed sin recortes.
Integración fácil de etiquetas Open Graph
- Integra etiquetas Open Graph sin esfuerzo utilizando herramientas como OpenGraph.dev. Genera e inserta las metaetiquetas en la sección 'head' de tu sitio web para mejorar la visibilidad de tu sitio en redes sociales.
La importancia de Open Graph en SEO
- Las etiquetas Open Graph optimizadas aumentan significativamente la probabilidad de que tu contenido sea notado y clickeado en redes sociales, lo que conduce a más tráfico hacia tu sitio. Son esenciales para hacer que tu contenido se destaque en los saturados feeds de redes sociales.
What are Open Graph tags?
Open Graph tags are HTML
<meta> elements placed inside the <head> of a web page that describe how the page should appear when its URL is shared somewhere else — a Facebook feed, an X post, a LinkedIn update, a WhatsApp chat, a Discord server, an iMessage thread or a Slack channel. The Open Graph protocol was originally introduced by Facebook in 2010 and has since become the de-facto standard for link previews on virtually every major platform. A complete set of Open Graph meta tags gives you full control over the title, description, image, type and canonical URL that appear inside the rich preview card — turning a plain hyperlink into an attention-grabbing snippet that consistently outperforms a bare link in click-through rate.A minimum-viable set of Open Graph meta tags
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />Open Graph across social platforms
Almost every major social network and messenger reads Open Graph metadata, but each one applies its own rules around image size, caching and fallbacks. Match the strictest requirement and the same image set will work everywhere.
X (Twitter)
Falls back to Open Graph tags when Twitter Card meta is missing, but to get a large preview card you should also declare twitter:card set to summary_large_image and twitter:image. Image must be under 5 MB and at least 300×157 px; 1200×630 is the safe default.
Reads og:title, og:description, og:image and og:type. Image must be under 5 MB, at least 1200×627 px (ratio 1.91:1). LinkedIn caches the first crawl for around seven days — use the Post Inspector to force a re-fetch after publishing changes.
WhatsApp & iMessage
Both messengers fetch Open Graph tags over HTTPS and have a hard image-size budget. WhatsApp truncates anything above ~300 KB, so optimise the image and declare og:image:width and og:image:height to speed up rendering. iMessage prefers a 1:1 square image when one is available, so consider supplying both ratios via multiple og:image tags.
Discord, Slack & Telegram
All three render previews from the standard og:title, og:description and og:image trio. Discord additionally honours theme-color for the side bar accent. Telegram strips iframes and JS — make sure your tags are present in the initial server-rendered HTML, not injected at runtime.
Pinterest & Reddit
Pinterest extends Open Graph with article:author and Rich Pin types. Reddit pulls og:title and og:image when a link is submitted, and uses the image as the post thumbnail. Both reward portrait or square imagery (2:3 to 1:1) over wide 1.91:1 banners.
Add Open Graph meta tags to your framework
Drop these snippets into your project to wire up Open Graph tags in the most common stacks. Each example renders the same minimum-viable set on the server so crawlers see them on first paint.
Next.js (App Router)
ts// app/page.tsx
export const metadata = {
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
openGraph: {
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
url: 'https://example.com/article',
siteName: 'Example',
images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
locale: 'en_US',
type: 'website'
}
}Nuxt 3
ts<script setup lang="ts">
useSeoMeta({
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
ogTitle: 'Your Page Title',
ogDescription: 'A short, compelling summary of the page.',
ogImage: 'https://example.com/preview.png',
ogUrl: 'https://example.com/article',
ogType: 'website',
ogLocale: 'en_US'
})
</script>Astro
astro---
const { title, description, image, url } = Astro.props
---
<head>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
<meta property="og:type" content="website" />
</head>WordPress
php// functions.php — works without an SEO plugin
add_action('wp_head', function () {
if (!is_singular()) return;
global $post;
$img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
printf('<meta property="og:image" content="%s" />', esc_url($img));
printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
echo '<meta property="og:type" content="article" />';
});Frequently asked questions about Open Graph
Quick answers to the questions developers and content teams ask us most often when implementing Open Graph meta tags.
- Do Open Graph tags help with SEO?
- Open Graph tags are not a direct ranking signal in Google search, but they meaningfully improve indirect SEO outcomes. Better-looking previews drive higher click-through rates, more shares and more inbound links — all of which feed back into ranking. They also clarify a page's title, image and language to crawlers, reducing the chance that Google picks an unrelated thumbnail or generates its own snippet.
- What is the difference between Open Graph and Twitter Cards?
- Open Graph is the cross-platform standard. Twitter Cards are X's parallel format with its own
twitter:*namespace. X falls back to Open Graph when Twitter-specific tags are missing, so for most sites it is enough to publish Open Graph plus a singletwitter:carddeclaration to opt into the large image preview. - What is the recommended Open Graph image size?
- 1200×630 pixels (a 1.91:1 ratio) is the safe default — it satisfies Facebook, LinkedIn, X large cards, Slack and Discord without cropping. Keep the file under 1 MB so WhatsApp and iMessage will fetch it. If your audience is heavily Pinterest-driven, supply an additional portrait 1000×1500 image.
- Why is my preview showing the old image after I changed it?
- Every major platform caches Open Graph data. Facebook, LinkedIn and X each refresh on a different schedule (anywhere from minutes to a week). Use Facebook's Sharing Debugger, LinkedIn's Post Inspector and X's Card Validator to force a re-scrape, and add a cache-busting query string to
og:imagewhen you replace an image at the same URL. - Do single-page apps (SPAs) need server-side rendering for Open Graph?
- Yes for almost every social platform. WhatsApp, LinkedIn, Slack, Discord and Telegram do not execute JavaScript when crawling a URL, so meta tags rendered only on the client are invisible to them. Use SSR (Next.js, Nuxt, Astro), static generation, or a dedicated pre-rendering service to make sure the tags are present in the initial HTML response.
- What happens if a page has no Open Graph tags at all?
- The platform falls back to whatever it can scrape: the
<title>, themeta descriptionand the first sizeable image it finds in the document. Results are unpredictable — often the wrong image, a truncated title or no preview at all. Adding even three tags (og:title,og:description,og:image) eliminates the guesswork. - Are Open Graph tag names case-sensitive?
- Yes. Use lowercase exactly as defined by the protocol —
og:title, notOG:Title. Mixed-case property names are silently ignored by most crawlers, which is one of the most common reasons a preview suddenly stops working after a refactor. - Which tools can I use to debug Open Graph tags?
- Beyond OpenGraph.dev's preview, each platform offers its own validator: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), X Cards documentation under developer.x.com, Pinterest Rich Pins Validator and Telegram's @WebpageBot for clearing its cache.