Skip to content
  • There are no suggestions because the search field is empty.

Open Graph Protocol

Control how your content appears on social platforms — and avoid score deductions in Prerender's SEO scoring.

TL;DR

Open Graph (OG) tags in your HTML <head> tell platforms like Facebook and LinkedIn what title, image, and description to show when your pages are shared. Four OG tags — og:title, og:type, og:url, and og:description — directly affect your Prerender SEO score, with deductions for any that are missing. If your OG tags load dynamically with JavaScript, use the prerenderReady flag to ensure AI crawlers and search engines capture them before the page is cached.


When a page is shared on a social platform, the platform scrapes your HTML to generate a preview. Without OG tags, it picks up whatever it finds — which often means a missing image, a truncated title, or a bare URL where a description should be. OG tags give you direct control over that preview, so your content shares consistently across Facebook, LinkedIn, X (formerly Twitter), and other platforms.

Prerender also evaluates OG tag presence as part of your SEO score. Missing tags reduce your score and signal that your pages aren't fully optimized for social sharing.

Compare the difference OG tags make when a page is shared:

compare-open-graph


What each OG tag does

Five OG tags cover the core social sharing metadata. Four of them affect your Prerender SEO score:

Tag What it does Score impact if missing
og:title Title shown in social previews −2 points
og:type Content type: website, article, video −2 points
og:url Canonical URL used for sharing −2 points
og:description Short summary shown in social feeds −1 point
og:image Preview/banner image for the post No score deduction

ℹ️ og:description and og:image are optional but strongly recommended. Social previews without them often fall back to scraped content, which may appear incomplete or poorly formatted.


Step 1: Add Open Graph tags to your <head>

Place the following tags inside the <head> section of each page you want to optimize for social sharing:

<!DOCTYPE html>

<html>

<head>

<meta property="og:title" content="My Article about X">

<meta property="og:type" content="website">

<meta property="og:url" content="https://www.example.com/my-page">

<meta property="og:description" content="A short summary of what this page covers.">

<meta property="og:image" content="https://www.example.com/my-page-banner.jpg">

</head>

<body>

...

</body>

</html>

Replace the placeholder values with your actual page title, canonical URL, description, and image URL.

If your site uses a JavaScript framework — React, Vue, or Next.js — your OG tags may be injected into the DOM after the initial page load rather than being present in the static HTML. Step 2 covers how to handle this.

Step 2: Ensure OG tags are available on first render

AI crawlers and search engines — including social platform scrapers — read your page at the moment Prerender finishes rendering it. If your OG tags load asynchronously, they may not be in the DOM in time to be captured.

⚠️ OG tags injected by JavaScript after page load may be missed entirely by AI crawlers and search engines. Define OG tags server-side or in your static <head> output whenever possible.

If you can't define OG tags server-side, use the prerenderReady flag to tell Prerender to wait until all tags are present in the DOM before capturing the page:

<script>

window.prerenderReady = false;

// Set to true only once your OG tags are fully loaded

window.prerenderReady = true;

</script>

Set window.prerenderReady = false at the start of page load, then set it to true only once all OG tags are in the DOM. Your website visitors continue to see your page as normal — this flag only affects how Prerender captures the page. See prerenderReady best practices for full implementation details.


Step 3: Verify your OG tags with Facebook's OG Debugger

Before going live, confirm your OG tags are rendering correctly by entering your URL in Facebook's OG Debugger. The tool fetches your page and shows exactly which tags it found, their values, and any warnings.

✅ Your OG tags are correctly implemented when the debugger shows populated values for og:title, og:type, og:url, og:description, and og:image — with no warnings about missing or malformed tags.

If the debugger doesn't detect your tags, confirm they're present in the page's static HTML before any JavaScript runs — or check that window.prerenderReady is configured correctly per Step 2.


💬 Still need help?
If your OG tags aren't showing in social previews or are affecting your Prerender SEO score unexpectedly, our support team can help.
→ Contact us at support@prerender.io


Related articles

Was this article helpful?