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

Open Graph Protocol

Enhance how your content is displayed when shared on social media using Open Graph meta tags.

Summary/Overview

The Open Graph (OG) Protocol is a set of meta tags used in your HTML that allows you to control how your content appears when shared on platforms like Facebook, LinkedIn, and Twitter. These tags influence how your page's title, image, description, and URL display in social previews, which can impact click-through rate (CTR), visibility, and branding.

While Prerender.io helps crawlers discover and render your page content, it doesn’t control how it appears on social media. Adding Open Graph tags ensures your content shares consistently and professionally across all channels.

Detailed Explanation / How It Works

Why OG Tags Matter

  • They tell social networks what title, image, and description to display when your URL is shared.
  • They improve click-through rates by showing high-quality previews.
  • They reduce reliance on automatic content scraping which may result in bad formatting or fallback previews.

Compare the difference:

open-graph

OG Tags SEO Scoring Impact

Missing OG tags can lower your SEO tool score when evaluating social readiness:

  • Missing og:title: -2 points or more depending on how many are missing.
  • Missing og:type: -2 points if absent.
  • Missing og:url: -2 points if undefined.
  • Missing og:description: -1 point (optional but highly recommended).

Step-by-Step Usage

Implement Required OG Tags

Place these tags in the <head> section of your HTML page:

Note: This is only an example implementation.

<!DOCTYPE html>
<html>
<head>
    <meta property="og:title" content="My Awesome Page">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.example.com/my-awesome-page">
    <meta property="og:description" content="Check out this awesome content!">
    ...
</head>
<body>
...
</body>
</html>

Tag Reference Guide

Open Graph Title – og:title

Defines the title shown in rich previews.

<meta property="og:title" content="My Article about X" />
Open Graph Type – og:type

Indicates content type (e.g., website, article, video).

<meta property="og:type" content="website" />
Open Graph Description – og:description (optional)

Provides a short summary for social feeds.

<meta property="og:description" content="Short summary about this page" />
Open Graph URL – og:url

The canonical URL used for social sharing. Helps prevent duplicate share metrics and errors.

<meta property="og:url" content="https://example.com/article-xyz" />
Open Graph Image – og:image

The preview/banner image used for the post.

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

Common Pitfalls / Tips

  • Ensure the OG tags are rendered on first load—if they’re set with JavaScript, search bots and scrapers may miss them.
  • Use Prerender.io’s prerenderReady flag if content is loaded dynamically after page load.
  • Use Facebook’s OG Debugger to test how your page appears when shared.

Troubleshooting

Why don’t OG tags show up?

If tags are injected after load using JavaScript, or appear after API calls or animations, the bot may not see them in time. To fix this, you can use the prerenderReady flag.

  • Define OG tags server-side or in static <head> output when possible.
  • Set window.prerenderReady = false early, and true only when all tags are in the DOM.
<script>
  window.prerenderReady = false;
  // After content loads asynchronously
  window.prerenderReady = true;
</script>

Related Articles