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

    Open Graph Protocol

    • Updated on 10 Jan 2023
    • 1 Minute to read
    • Contributors
    • Print
    • 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?
    What's Next