Open Graph Protocol

Reference: https://ogp.me/

I don't know if you have noticed, but when a link is shared on social media platforms, the platform displays a preview image, title, subtitle, and other content (as shown in the figure below).

open-graph-protocol-1

So how do social media platforms obtain their preview content? This brings us to the Open Graph Protocol.

What is the Open Graph Protocol?

Abbreviated as OG protocol, it was announced by Facebook in 2010 and is used to specify metadata when sharing web content on social media platforms.

In simple terms, the OG protocol visually displays information about the website that the link points to in the form of images and text, in order to increase the exposure and click-through rate of the link. The images, titles, and other information are metadata.

open-graph-protocol-2

In other words, if you want to share your website on social media platforms and display metadata that complies with the OG protocol, you need to first add meta tags to your website and define metadata that complies with the OG protocol for major social media platforms to obtain.

How to add metadata that complies with the OG protocol to your website?

As mentioned earlier, the OG protocol is essentially a type of meta tag. Therefore, we only need to add meta tags with the property=og attribute to our website.

<meta property="og:title" content="yuanx" />
<meta property="og:description" content="yuanx's personal website" />
<meta property="og:image" content="https://yuanx.me/api/og" />

Variations of the OG protocol

Some social media platforms may support other custom protocols in addition to the OG protocol. For example, Twitter's Twitter Cards.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />

How to obtain metadata that complies with the OG protocol from other websites?

The flowchart above describes the process by which social media platforms obtain the OG metadata of other websites. Here, we will discuss how to implement this using code.

Overall approach

Get the HTML of the target website -> Parse the HTML -> Match meta tags -> Obtain the data

Code implementation

// node.js
import * as cheerio from 'cheerio';
import axios from 'axios';

const TARGET_URL = 'https://yuanx.me';

axios
  .get(TARGET_URL)
  .then((response) => {
    const html = response.data;
    const $ = cheerio.load(html);
    const ogTitle = $("meta[property='og:title']").attr('content');
    const ogDescription = $('meta[property="og:description"]').attr('content');
    const ogImage = $('meta[property="og:image"]').attr('content');
    console.log('OG Metadata: ', ogTitle, ogDescription, ogImage);
  })
  .catch((error) => {
    console.log('error', error);
  });

Conclusion

The Open Graph Protocol has a good effect on product marketing, SEO, and many other aspects. For independent developers or companies that need to carry out product operation and marketing, the Open Graph Protocol is definitely an important detail that cannot be ignored.

If you are interested in the Open Graph Protocol, you can check out the imyuanx/yuanx repository for more technical details.

Thank you for reading ❤️