Skip to content

Glossary Open Graph

What Is Open Graph?

  • SEO Técnico
Definition

Open Graph is a meta-tag protocol with the og: prefix, introduced by Facebook in 2010, that controls the title, description and preview image shown when a URL is shared on social media.

On this page 6
  1. What is Open Graph?
  2. The core og: properties
  3. How it works
  4. Why it matters
  5. Best practices
  6. Common mistakes
In brief

Which og: properties are essential, why they control the social preview instead of the Google result, and what happens when the preview image is missing or doesn't match the actual content.

What is Open Graph?

Facebook introduced Open Graph in 2010 at its f8 developer conference, alongside the "Like" button and the concept of the "social graph." The protocol defines a set of meta tags with the og: prefix, placed in a page's <head>, that describe how that URL should be represented when someone shares it. Its technical foundation is RDFa, an HTML extension for embedding structured metadata directly in the markup.

The original idea was simple: turn any web page into an "object" within Facebook's social graph, with a recognizable title, type and image, instead of leaving the platform to guess those details from visible content. Fifteen years later, the protocol is still in use, and Meta keeps its repository open on GitHub, though without major changes since version 1.0.

Built for Facebook originally, it's now the de facto standard most platforms read before generating a link preview, from LinkedIn to WhatsApp's link preview. Get the og: tags right once, and that covers nearly every channel at once, without building a separate solution for each platform.

The core og: properties

PropertyWhat it controlsRequired
og:titleThe title shown in the preview, without the brand nameYes
og:descriptionThe short text under the title, 2 to 4 sentencesNo, but recommended
og:imageThe preview image; without it, most platforms show no thumbnail at allNo, but recommended
og:urlThe canonical URL of the content, without session or tracking parametersYes
og:typeThe object type (website, article, video.movie...), which determines extra fieldsYes

The first three are what stand out when a link gets shared; the last two tell each platform's crawler how to classify the content.

<head>
  <meta property="og:title" content="What Is a Title Tag?">
  <meta property="og:description" content="A title tag is the head's title element: it sets the search result headline, though Google can rewrite it if it misrepresents the page.">
  <!-- recommended size: 1200x630px -->
  <meta property="og:image" content="https://www.zds.es/en/img/og/what-is-a-title-tag.jpg">
  <meta property="og:url" content="https://www.zds.es/en/what-is-a-title-tag/">
  <meta property="og:type" content="article">
</head>

How it works

The og: tags sit in the HTML <head>, right alongside the Title Tag or the Meta Description, but they serve a different purpose: those two tags shape how a page appears in Google's result, while og: tags only decide the preview when the URL gets shared on social media. They're independent Meta Tags, and a page can carry all three at once without any of them stepping on the others.

When someone pastes a link into Facebook, LinkedIn or WhatsApp, each platform sends its own crawler against that URL, reads the og: tags in the <head>, and builds the preview from there. That result usually gets cached: change the image or title later, and the old preview can keep showing until a tool like Meta's Sharing Debugger forces a fresh crawl. Depending on the platform, that cache can hold for hours or even days, which turns an urgent fix, say a wrong image on a campaign link, into a real problem fast.

X, formerly Twitter, runs its own system with the twitter: prefix, originally meant to set it apart from Facebook. In practice both systems coexist on the same page: when the twitter: tags are missing, X falls back to the values in og:title, og:description and og:image, so barely any site needs to maintain the content twice.

Why it matters

Open Graph isn't a Google ranking factor: the search engine ignores og: tags when deciding where a page lands in results. Confusing it with the Title Tag or the Meta Description, which do shape the search result, is the most common misunderstanding around this protocol.

Its value sits elsewhere: a preview with a clear title, a recognizable image and a coherent description gets more people to click when a link circulates on social media or messaging apps, much like a good meta description lifts CTR in a Google result. The gain is indirect, but measurable in actual clicks, not rankings.

For any Social Media Marketing strategy, poorly maintained og: tags mean links shared without an image, with a generic title, or with the wrong text, right at the moment a first impression matters most. On a paid campaign or a launch where many people share the same link at once, that small mistake adds up fast into noticeably fewer clicks across every channel.

Best practices

  • Always set og:title, og:description, og:image, og:url and og:type; those are the five properties nearly every platform reads.
  • Use an image of at least 1200 x 630 pixels, with an aspect ratio close to 1.91:1, so it doesn't get cropped or look pixelated in the preview.
  • Write og:description with 2 to 4 sentences that summarize the page's actual content, not a generic tagline reused across the whole site.
  • Check the preview with the Sharing Debugger before publishing, especially after changing the featured image.
  • Force a fresh crawl after updating content on a URL that's already been shared; otherwise the old preview can sit cached for weeks.
  • Add the basic twitter: tags too if X is a relevant channel, even though they can fall back to the og: values as a backup.

Common mistakes

  • Skipping og:image, so the platform picks a random image from the page or shows none at all.
  • Using an image whose content doesn't match the page actually being shared, which some platforms flag as misleading.
  • Leaving og:title and og:description empty and expecting the crawler to pull text from the visible content on its own.
  • Mixing up og:url with the URL where the crawler finds the page, instead of the canonical URL meant to be the source.
  • Forgetting to re-check the preview after a domain migration or a change to the URL structure.
Manuel Riveiro Rodriguez CEO & Digital Strategist

A technical audit covers this and everything else in one pass.

Request an audit

Frequently asked

Does Open Graph affect Google rankings?

No. Google doesn't use og: tags to decide a page's position in search results; that comes down to the Title Tag, the Meta Description and the actual content. Open Graph only controls how the link looks when shared on social media or messaging apps, with an indirect effect on CTR outside of Google.

What happens if my page is missing og:image?

Most platforms then try to pick an image from the page automatically, with unreliable results: sometimes a small logo, sometimes a decorative icon, sometimes no image at all. The shared link looks weaker next to others with a full preview, which lowers the odds anyone opens it.

Are Open Graph and Twitter Cards the same thing?

No, they're two technically separate systems: Open Graph uses the og: prefix and comes from Facebook, while X uses tags with the twitter: prefix. In practice they overlap, because X falls back to the values in og:title, og:description and og:image whenever the specific twitter: tags aren't present on the page.

Where do I check how my page looks when shared?

The go-to tool is Meta's Sharing Debugger: paste the URL and see exactly which og: tags the crawler picks up, plus the resulting preview. It also lets you force a fresh crawl when the image or title has changed and the platform is still showing an old, cached version.

Does the title need to match exactly in og:title and the Title Tag?

Not word for word, but both should tell the same story. The Title Tag usually carries the brand name and keywords aimed at the search engine; og:title works better shorter and more direct, focused on what makes the click appealing inside a social feed, without repeating the brand if it's already in the image.