Open Graph Protocol
  • 13 Jul 2022
  • 1 Minute to read
  • Contributors
  • Dark
    Light
  • PDF

Open Graph Protocol

  • Dark
    Light
  • PDF

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 type="og:title" content="My Article about X" />
...
</head>

Open Graph Type

og:type

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

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

Open Graph Description (optional)

og:description

Defines the short summary.

<head>
...
    <meta type="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 type="og:url" content="https://example.com/blog/article-x" />
...
</head>

Open Graph Image

og:image

Defines the banner image.

<head>
...
    <meta type="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?