Open Graph Protocol
  • 10 Jan 2023
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

Open Graph Protocol

  • Dark
    Light
  • PDF

Article Summary

What is Open Graph, and why does it matter?

Open Graph is a syntax definition in HTML meta tags that describes how your webpage is displayed in social media sharing.
Our SEO Scoring will verify your required tags' presence and content definitions. But we do not verify if it looks nice or the text's linguistic content.

Visual example:

open-graph.png

You can read about the technical protocol definition here.

Open Graph Title

og:title

Defines the title line.

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

Open Graph Type

og:type

Defines the content type such as video, website, etc.

<head>
...
    <meta property="og:type" content="website" />
...
</head>

Open Graph Description (optional)

og:description

Defines the short summary.

<head>
...
    <meta property="og:description" content="Short summary about this page..." />
...
</head>

Open Graph URL

og:url

A canonical URL for your share could be important when your requested URL contains no necessary tracing or internal logic parameters.

<head>
...
    <meta property="og:url" content="https://example.com/blog/article-x" />
...
</head>

Open Graph Image

og:image

Defines the banner image.

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

Debug Open Graph

To test your website's visual appearence, visit Facebook's debugging tool here.

Troubleshooting Advice

We never change any of the meta tags on your page. If your pages are not showing the expected data, it is most likely because you are defining the meta tag values with Javascript. In this case, please use the prerenderReady flag to tell us when your page is fully loaded and the meta tags are set.


Was this article helpful?