Open Graph and social meta tags: how to control your link previews

Updated 2 weeks ago

The preview that Facebook, LinkedIn, WhatsApp, X, and other apps display when a URL is shared is controlled by Open Graph tags, which are placed inside the page’s <head>. In this guide, you’ll learn which tags matter, how to use them, and how to diagnose a preview that isn’t displaying correctly.

What are Open Graph meta tags?

The Open Graph Protocol defines metadata that describes a web page as an object that other platforms can interpret. The official specification (https://ogp.me/) lists four basic properties:

og:title: the title associated with the page.
og:type: the type of content, for example website or article.
og:image: the absolute URL of the representative image.
og:url: the canonical URL that identifies that content.

For a good preview, it’s also a good idea to include og:description and og:site_name, as well as information about the image’s dimensions and alt text.

Basic Open Graph example

An article page could include something like this inside its <head>:

<meta property="og:type" content="article" />
<meta property="og:title" content="Guía de Open Graph para redes sociales" />
<meta property="og:description" content="Cómo configurar títulos, descripciones e imágenes al compartir una página." />
<meta property="og:url" content="https://ejemplo.com/guia-open-graph/" />
<meta property="og:site_name" content="Mi sitio" />
<meta property="og:image" content="https://ejemplo.com/social/guia-open-graph.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Guía de Open Graph para redes sociales" />

The og:url and og:image URLs must be absolute: https://ejemplo.com/imagen.jpg, not simply /imagen.jpg.

What each property is for

Property	Function	Recommendation
og:title	Preview title	Clear and specific to that URL
og:description	Content summary	Brief and descriptive; don’t rely on the SEO meta description
og:image	Main image shown when sharing	Public URL, HTTPS, and large enough
og:url	URL that identifies the object	Usually matches the canonical URL
og:type	Content type	`article` for articles; `website` for general pages
og:site_name	Site name	Reinforces the source’s identity
og:image:width / og:image:height	Image dimensions	Let the crawler know the size without downloading the image first
og:image:alt	Image description	Describe the visual content; don’t repeat keywords

og:type: article or website

Use website for a homepage, a corporate landing page, or a general page. Use article for a blog post or editorial content:

<meta property="og:type" content="article" />

When using article, you can also add specific properties such as:

<meta property="article:published_time" content="2026-09-24T10:00:00-03:00" />
<meta property="article:modified_time" content="2026-09-24T12:00:00-03:00" />

This keeps the original publication date and the date of the last update separate.

og:image: the tag that causes the most problems

If a preview appears without an image, shows an old image, or has an odd crop, start by checking og:image. The image should:

have a public URL that can be accessed without signing in;
load over HTTPS;
actually return an image file with an HTTP 200 status code;
not be blocked from crawlers;
have dimensions large enough for a large card;
keep important text and logos away from the edges, since each platform crops images differently.

As a practical format that works across platforms, an image close to 1200 × 630 px with an approximate 1.91:1 aspect ratio works very well for most large previews. LinkedIn, for example, recommends 1200 × 627 px. The platform receiving the link always has final control over how it is displayed.

Facebook and Open Graph

Open Graph originated on Facebook and remains the foundation for describing how a shared URL is presented. If Facebook shows outdated information, an old image, or unexpected details, check the HTML received by its crawler, then use Meta’s Sharing Debugger (https://developers.facebook.com/tools/debug/) to request the URL again.

A common mistake is to change the image in WordPress and assume Facebook will update it immediately. Platforms cache previews, so the content may take time to refresh even after the HTML has been corrected.

WhatsApp: why an image appears when you paste a link

WhatsApp automatically generates previews for many URLs, and a correct set of Open Graph tags is the foundation for finding the right title, description, and image. There is no special tag such as whatsapp:image; focus on making sure that og:title, og:description, and especially og:image are correct and publicly accessible.

If WhatsApp still shows an old image, the cause may be the service’s cache or the client’s cache. Before making further changes to WordPress, check that the source code already contains the correct image.

LinkedIn: Open Graph and Post Inspector

LinkedIn documents the use of og:title, og:image, og:description, and og:url to generate previews of shared pages. For images, it recommends a 1.91:1 aspect ratio and minimum dimensions of 1200 × 627 px for a large preview.

If you’ve changed the image or metadata for a URL that has already been shared, you can use the LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/). Refreshing affects new posts: previews that have already been published are not rewritten retroactively.

X: why the tags are still called twitter:

Although Twitter was renamed X, its card tags still use the twitter: prefix. For an article or landing page with a large image, the usual configuration is:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Guía de Open Graph para redes sociales" />
<meta name="twitter:description" content="Cómo controlar la vista previa de tus enlaces." />
<meta name="twitter:image" content="https://ejemplo.com/social/open-graph.jpg" />

If Open Graph is already configured correctly, it’s best to use the same title, description, and image in both layers, unless there’s an editorial reason to differentiate them. Don’t confuse the syntax: Open Graph uses property="og:...", while Twitter Cards use name="twitter:...".

Pinterest and Rich Pins

Pinterest uses metadata for its Rich Pins and documents three main types: articles, products, and recipes. It supports Open Graph and Schema.org structured data for articles and products: an Article Pin can use og:title, og:description, og:site_name, and og:image. In a WooCommerce store, product structured data also matters because Pinterest can interpret details such as price, currency, and availability.

Are there special meta tags for Instagram?

No. You don’t need to add a set of "Instagram meta tags" to get a link card in the Instagram feed, which doesn’t work like Facebook, LinkedIn, or WhatsApp with arbitrary links in regular posts. Something like instagram:image isn’t part of the standard and won’t create a special preview by itself. Open Graph is still useful for your site and the Meta ecosystem.

Open Graph is not the same as Schema.org

Both describe information about a page, but they serve different purposes and can coexist:

	Open Graph	Schema.org
Primary use	Previews when sharing content	Structured data for search engines and other consumers
Typical format	Meta tags in the `<head>`	JSON-LD, Microdata, or RDFa
Example	`og:image`	`image` within Article/Product

How to configure Open Graph in WordPress

In WordPress, you usually don’t need to write these tags by hand: an SEO or social metadata plugin can generate them dynamically from each page’s title, description, URL, and featured image.

Use a single system to manage Open Graph. If the theme, an SEO plugin, and another social plugin all generate og:image or og:title, the result is duplicate tags and unpredictable previews.

After saving your changes, open the source code of the published page and search for og:. This lets you check exactly what a crawler receives, regardless of what the WordPress editor displays. A WordPress featured image does not, by itself, guarantee that a correct og:image exists.

How to add Open Graph manually

If you’re developing an application or your own theme, generate the tags in the <head>. A reasonable set for a general page would be:

<meta property="og:type" content="website" />
<meta property="og:title" content="Título de la página" />
<meta property="og:description" content="Descripción de la página." />
<meta property="og:url" content="https://ejemplo.com/pagina/" />
<meta property="og:site_name" content="Ejemplo" />
<meta property="og:image" content="https://ejemplo.com/social/pagina.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Descripción de la imagen" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Título de la página" />
<meta name="twitter:description" content="Descripción de la página." />
<meta name="twitter:image" content="https://ejemplo.com/social/pagina.jpg" />

In WordPress, you shouldn’t paste this example literally onto every page, because each URL needs its own values: if the data is dynamic, the tags should be dynamic too.

How to diagnose an incorrect preview

If a social network displays your link incorrectly, check for the problem in this order:

Open the actual page source and search for og:title, og:image, and og:url.
Check for duplicates: if two og:image or two og:title tags generated by different plugins appear, fix that first.
Open the image directly: it must be public, load quickly, and return HTTP 200.
Check HTTPS and redirects: avoid unnecessary redirect chains or protected images.
Check the dimensions: an image that’s too small may appear as a thumbnail or not be selected at all.
Clear your own caches: WordPress, CDN, and page caches must serve the new HTML.
Request a new social crawl with Meta’s Sharing Debugger or LinkedIn’s Post Inspector, as appropriate.
Remember external caches: even if your site is now correct, the app that shared the link may keep an older version for a while.

Free tools to validate your links

Meta’s Sharing Debugger (https://developers.facebook.com/tools/debug/) remains the starting point for Open Graph: it shows exactly what Facebook’s crawler retrieved from your page and lets you force a new crawl after making a correction. To preview the same URL on several platforms at once, these free tools can help:

Tool	What it’s for
metatags.io	Previews a URL as it would appear on Google, Facebook, X, LinkedIn, Pinterest, and Slack, and lets you edit and generate the meta tag code. It recommends images of 1200 × 628 px.
opengraph.xyz	Scans any URL and shows exactly how its social media preview looks; it also offers to generate OG images from templates.
Hey Meta	Checks which meta tags a page has, shows its preview when shared on social networks and search engines, and lets you edit and export tags ready to paste into the site.
Schema.org Validator	Validates the Schema.org structured data for a URL or code snippet—the other layer of metadata interpreted by Pinterest and search engines.

The official tools for each network (the Debugger for Facebook and the Post Inspector for LinkedIn) best reflect what that particular platform sees on your page.

Common mistakes

Using a relative path in og:image.
Setting an image that requires cookies, a session, or permissions.
Duplicating tags from two different plugins.
Confusing name with property.
Using website for editorial content when article is appropriate.
Leaving og:url pointing to a URL other than the desired canonical version.
Changing an image without considering that Facebook, LinkedIn, or messaging apps may have cached it.

Frequently asked questions

What does meta property="og:image" mean?

It specifies the URL of the image that represents the page in Open Graph. It’s one of the main properties platforms use to build a link’s visual preview.

What is og:site_name?

It’s the general name of the site. For example, in a Duplika article, og:title might be the specific post title, while og:site_name would simply be Duplika.

Should og:url be the same as the canonical URL?

In most cases, it’s best for both to represent the same primary URL for the content. Open Graph uses og:url to identify the object, while the canonical tag tells search engines which version is preferred as canonical.

Does Open Graph improve SEO rankings?

It is not a direct Google ranking factor. Its main purpose is to control how a URL is described when other services interpret and share it. A better presentation can encourage clicks, but that’s different from claiming that og:image directly improves a Google ranking.

Do I need Open Graph and Twitter Cards at the same time?

This is a common setup. Open Graph covers a very broad range of consumers, and twitter:card explicitly tells X which type of card is desired. You can reuse the same title, description, and image to avoid maintaining two versions unnecessarily.

A good preview starts with simple, consistent metadata

You don’t need dozens of tags: for most sites, a consistent implementation of og:title, og:description, og:image, og:url, og:type, and og:site_name, together with twitter:card, covers the most important cases. The key is to make sure those values accurately reflect the page, the image is accessible, and there’s a single source responsible for generating them.