Contents x
    Open Graph Protocol
    • 20 Oct 2023
    • 2 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    • PDF
    Contents

    Open Graph Protocol

    • Updated on 20 Oct 2023
    • 2 Minutes 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 (OG) Tags in HTML

    Description:
    Open Graph (OG) tags are essential for social media sharing and improving the appearance of your web pages when shared on platforms like Facebook, Twitter, and LinkedIn. These tags provide information about the content, title, type, URL, and description, enhancing the visibility and presentation of your pages in social media posts.

    OG Tags SEO Scoring Criteria:

    Missing og:title Meta Tag (Min -2 or the number of missing tags): The og:title tag specifies the title of your content for social media sharing. If it's missing, a score deduction of a minimum of -2 points or the number of missing OG tags (whichever is greater) is applied.

    • Missing og:type Meta Tag (Min -2 or the number of missing tags): The og:type tag defines the type of content you're sharing. If it's absent, a score deduction of a minimum of -2 points or the number of missing OG tags (whichever is greater) is applied.

    • Missing og:url Meta Tag (Min -2 or the number of missing tags): The og:url tag specifies the URL of the page being shared. If it's not present, a score deduction of a minimum of -2 points or the number of missing OG tags (whichever is greater) is applied.

    • Missing og:description Meta Tag (Min -1 or the number of missing tags): The og:description tag provides a brief description of your content. If it's missing, a score deduction of a minimum of -1 point or the number of missing OG tags (whichever is greater) is applied.

    By including OG tags in your HTML, you can enhance the sharing experience of your content on social media platforms and potentially improve your SEO score.

    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>


### Open Graph Title
 `og:title`

Defines the title line.

```html
<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