It indicates the URL of the image that represents the page within Open Graph. It is one of the main properties platforms use to build the visual preview of a link.
Open Graph and social meta tags: how to control your link previews
Updated 6 days ago
The preview that Facebook, LinkedIn, WhatsApp, X, and other applications display when sharing a URL is controlled by Open Graph tags, which are placed inside the page's <head>. In this guide, you'll find out which tags matter, how to use them, and how to troubleshoot a preview that doesn't look right.
What Open Graph meta tags are
Open Graph Protocol defines metadata that describes a web page as an object that other platforms can interpret. The official specification (https://ogp.me/) considers four basic properties:
og:title: the title associated with the page.
og:type: the type of content, such as
websiteorarticle.og:image: the absolute URL of the representative image.
og:url: the canonical URL that identifies the 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 alternative text.
Basic Open Graph example
An article page might 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, without relying on the SEO meta description |
og:image | Main image when sharing | Public URL, HTTPS, and sufficiently large |
og:url | URL that identifies the object | Normally matches the canonical URL |
og:type | Content type |
|
og:site_name | Site name | Reinforces the source's identity |
og:image:width / og:image:height | Image dimensions | They allow the crawler to know the size without downloading the image first |
og:image:alt | Image description | Describe the visual content rather than repeating keywords |
og:type: article or website
For a homepage, an institutional landing page, or a general page, use website. For a blog post or editorial content, use article:
<meta property="og:type" content="article" />When we use article, we 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 last modification date separate.
og:image: the tag that causes the most problems
When a preview appears without an image, with an old image, or with an unusual crop, start by checking og:image. The image must:
have a publicly accessible URL that does not require signing in;
load over HTTPS;
actually return an image file with an HTTP 200 status code;
not be blocked from crawlers;
have sufficient dimensions for a large card;
keep important text and logos away from the edges, because each platform crops images differently.
As a practical cross-platform format, 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 presented.
Facebook and Open Graph
Open Graph originated at Facebook and remains the foundation for describing how a shared URL is presented. If Facebook displays old information, a previous image, or unexpected data, check the HTML its crawler receives and then use Meta's Sharing Debugger (https://developers.facebook.com/tools/debug/) to request the URL again.
A common mistake is changing the image in WordPress and assuming 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 it uses to find the right title, description, and image. There is no special tag such as whatsapp:image; it's best to focus on ensuring that og:title, og:description, and especially og:image are correct and publicly accessible.
If WhatsApp continues to show an old image, the issue may be the service's or the client's cache. Before modifying WordPress again, verify 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 the large presentation.
If you modified the image or metadata of a URL that has already been shared, you can use LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/). The refresh 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 a good idea to use the same title, description, and image in both layers, unless there is 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. For articles and products, it supports Open Graph as well as Schema.org structured data: an Article Pin can use og:title, og:description, og:site_name, and og:image. In a WooCommerce store, structured product data also matters because price, currency, and availability are part of what Pinterest can interpret.
There are 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 does not work like Facebook, LinkedIn, or WhatsApp with arbitrary links in regular posts. Something like instagram:image is not part of the standard and does not create a special preview on its own. Open Graph remains 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 |
Common format | Meta tags in the | JSON-LD, Microdata, or RDFa |
Example |
|
|
How to configure Open Graph in WordPress
In WordPress, you normally 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 responsible for Open Graph. If the theme, an SEO plugin, and another social plugin all generate og:image or og:title at the same time, 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 alone does not guarantee that a correct og:image exists.
How to add Open Graph manually
If you develop an application or a custom 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, it's not a good idea to paste this example literally onto every page, because each URL needs its own values: if the data is dynamic, the tags should be dynamic as well.
How to troubleshoot an incorrect preview
If a social network displays your link incorrectly, investigate the problem in this order:
Open the actual page source and search for
og:title,og:image, andog:url.Check for duplicates: if two
og:imageor twoog:titletags 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 chains or protected images.
Check the dimensions: an image that is too small may be displayed as a thumbnail or not selected at all.
Clear your own caches: WordPress, the CDN, and the page cache must serve the new HTML.
Request a new social crawl with Meta's Sharing Debugger or LinkedIn's Post Inspector, as appropriate.
Remember external caching: even if your site is already correct, the application that shared the link may retain an older version for some time.
Free tools for validating 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 correcting something. To view the same URL on several platforms at once, these free tools complement the process:
Tool | What it's for |
|---|---|
Previews a URL as Google, Facebook, X, LinkedIn, Pinterest, and Slack would display it, and lets you edit and generate the meta tag code. It recommends images of 1200 × 628 px. | |
Scans any URL and shows exactly how its preview looks on social networks; it also offers to generate OG images from templates. | |
Checks which meta tags the page has, shows the sharing preview on social networks and search engines, and lets you edit and export tags ready to paste into the site. | |
Validates the Schema.org structured data of 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 Post Inspector for LinkedIn) best reflect what that particular platform sees on your page.
Common errors
Using a relative path in
og:image.Configuring an image that requires cookies, a session, or permissions.
Duplicating tags from two different plugins.
Confusing
namewithproperty.Using
websitefor editorial content whenarticleis appropriate.Leaving
og:urlpointing to a URL different from the desired canonical version.Changing an image without considering that Facebook, LinkedIn, or messaging applications may have cached it.
Frequently asked questions
What does meta property="og:image" mean?
What is og:site_name?
It is the site's general name. For example, in a Duplika article, og:title may be the specific title of the post, while og:site_name is simply Duplika.
Should og:url be the same as the canonical URL?
In most cases, it's best for them to represent the same primary URL for the content. Open Graph uses og:url as the object identifier, while the canonical tag tells search engines which version is the preferred canonical one.
Does Open Graph improve SEO rankings?
It is not a direct Google ranking factor. Its primary function is to control how a URL is described when other services interpret and share it. A better presentation may encourage clicks, but that is different from claiming that og:image directly improves a position in Google.
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 card type is desired. You can reuse the same title, description, and image so you don't have to maintain two versions unnecessarily.
A good preview starts with simple, consistent metadata
You don't need dozens of tags: on 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 for those values to truly match the page, for the image to be accessible, and for there to be a single source responsible for generating them.
Continue reading
If you still don't have a Facebook page for your business, see Facebook Page or personal profile: which is better for your business.
Was this helpful?
Was this helpful?