- Print
- DarkLight
- 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:
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.