How to master the Open Graph Protocol

Dimitri Pletschette
3 min readJan 5, 2023

--

OMG, what is OGP? This article will help you understand what is OGP (the Open Graph protocol) when you need it, what it is used for, and, more importantly, why it matters for your digital products such as WordPress, Drupal, SharePoint, Yammer, and Microsoft Teams.

What is OGP:

The “Open Graph protocol” is an internet protocol created by Facebook to standardize the use of metadata within a webpage to represent the content of a page, enabling it to become a rich object.

The markup generates, for example, the title, the description, and the image of a shared link on social networks. You can provide simple details such as the “title of a page” or as specific as the “duration of a video”. What would be your latest post on Yammer, shared on Microsoft Teams without a thumbnail image, right? OGP is used on LinkedIn, Twitter, Yammer, etc. While many technologies and schemas exist, the Open Graph protocol can mark up some web content to make them “social-sharing friendly,” like the example below (a great title, a nice image, etc.).

Some facts about OGP:

When do I need OGP:

For instance, when we create content, it is usually made with at least two goals to be viewed and shared. If you want it to be “shared” on any social network that utilizes rich previews (including Yammer or Teams internally), you will like that preview to be as fantastic as possible. So effectively, you will need to use “out of the box” or “custom coded” OGP for every web page you intend to share.

So, what can you do as an editor or a developer:​​​​​​​​​​​​​​

  1. Always make sure OGP is part of your project requirements.
  2. Validate image and content before User Acceptance Testing (UAT).
  3. Establish an OGP test case before Go-Live.
  4. Test the “Home Page” and the “Inner Pages.”
  5. Validate with the Business or Legal that the OGP content is a good match.
  6. Use the below resources.

Resources :

  1. The Open Graph protocol (ogp.me)
  2. Facebook OGP Webmasters Guide (facebook.com)
  3. Open Graph Debugger
  4. Card Validator | Twitter Developers
  5. Debugger — Facebook for Developers

As a developer, you might not always need to worry about OGP, but there will be cases where acknowledging some of the above might put your team on the road to success.

Please keep in mind that this article is only a starting point for the discussion thread; you might have other things to bring to the table that I am curious to discover. So please, feel free to comment and join the discussion below.

Feel free to subscribe to my profile to be updated on future articles if you still need to do it. You can find me on LinkedIn and X, too. Let me know your thoughts, and feel free to join the conversation below. Don’t forget to hit the 👏 Thank you!

Dimitri Pletschette 🚀 LinkedIn | Medium | X | Microsoft | Mastodon

--

--

Dimitri Pletschette

Dad, Husband, Blogger, Digital Product Manager and Technology Enthusiast. Follow 👉 https://dimitripletschette.com