What Is The Open Graph Protocol?
Tags: webdev, seo, frontend
Published: 2023-03-01 22:25:20

![](https://cdn-images-1.medium.com/max/2000/1*0xMkC6xH-AbEi4fNqJr6jg.png)

The [Open Graph Protocol](https://ogp.me/) is a protocol created by Facebook for standardizing [SEO](https://en.wikipedia.org/wiki/Search_engine_optimization) metadata on Web pages that controls how URLs are displayed when shared on social media. Standardizing metadata has eliminated cross-site metadata mismatch. Today, the Open Graph protocol is also used by other social media sites such as LinkedIn and Twitter, apart from Facebook. Open Graph tags are located in the head section of a Web page.

![The title and image in the preview of this URL shared on LinkedIn comes from the Open Graph tags.](https://cdn-images-1.medium.com/max/2000/1*NfmsZGx-pEb5Y-W_ukobNg.png)

Social media is very important for your content to reach more people. Users are more likely to see and click on content shared with optimized Open Graph tags. This means more social media traffic for your website. Here are the benefits of previews created with Open Graph tags:

* They make the content more eye-catching on social media streams.

* A preview of what the content is about.

* They help Facebook understand what the content is about, which will help you increase your brand visibility through search.

![The image, title and description information in the preview of this URL shared on Twitter comes from the Open Graph tags.](https://cdn-images-1.medium.com/max/2000/1*kMUMFw0nTdI9sPhzjsuASQ.png)

When we look at the <head> section of the [site](https://github.blog/changelog/2022-02-23-the-new-github-issues-february-23rd-update/) shared on Twitter and LinkedIn, we can see the Open Graph meta tags.

![The site’s meta tags in the sample posts above](https://cdn-images-1.medium.com/max/2014/1*dGhNY7QA30_SLe-dWwVe-Q.png)

The four basic Open Graph tags required for each page are; og:title, og:type, og:image and og:url. Let’s take a quick look at some meta tags and their descriptions:

* **“og:title”**: It will represent the title of your page. It is often the same as the <title> tag of the web page.

* “**og:type”**: It represents the type of website. In the example above, this is indicated as “article”.

* “**og:image”**: The URL of the image representing your page.

* “**og:url”**: It refers to the current URL of your page.

* “**og:description”**: It refers to a brief description of your content. Usually the same as <meta type=”description”.

* “**og:audio”**: The URL of the audio file that represents your content.

* “**og:video”**: The video URL that represents your content.

![Anatomy of twitter card created with open graph tags](https://cdn-images-1.medium.com/max/2800/1*e27tjHDUwmelWYQkg6UpLw.png)

### Additional Meta Tags for Images

Some meta tags may have additional meta tags attached to them. For example, let’s go over the og:image tag. Usually it will be enough to proceed with the og:image tag, but in some cases the preview of your content may not look the way you want. You may need additional meta tags for this. For example, you may want to adjust the height and width of your image. Below you can see some meta tags and descriptions for og:image.

* **“og:image:url”**: Same as og:image. Indicates the URL of the image.

* **“og:image:secure_url”**: An alternate url to use if the webpage requires [HTTPS](https://en.wikipedia.org/wiki/HTTPS).

* **“og:image:type”**: Indicates the [media type](https://en.wikipedia.org/wiki/Media_type) information for the image.

* “**og:image:width”**: Expresses the width of the image in pixels.

* “**og:image:height”**: Expresses the height of the image in pixels.

* “**og: image:alt”**: A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.

![Use of og:image meta tags (Source link: [ogp](https://ogp.me/#structured))](https://cdn-images-1.medium.com/max/2000/1*-dGr_wIzgPbc_h3MFytaKg.png)

### Testing Open Graph Tags

After adding your Open Graph meta tags, you can test how your content appears on social media sites. This will make debugging your meta tags much easier.

![Twitter Card Validator](https://cdn-images-1.medium.com/max/2198/1*w9HK-lJCVcomhoh2uAwdEg.png)

Below are the test links for Facebook and Twitter:

* Facebook: [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)

* Twitter: [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)

### References:

* [https://ogp.me/](https://ogp.me/)

* [https://en.wikipedia.org/wiki/Social_graph](https://en.wikipedia.org/wiki/Social_graph)

* [https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol](https://en.wikipedia.org/wiki/Facebook_Platform#Open_Graph_protocol)

* [https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/#:~:text=Open%20Graph%20is%20an%20internet,the%20duration%20of%20a%20video](https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/#:~:text=Open%20Graph%20is%20an%20internet,the%20duration%20of%20a%20video).

* [https://en.wikipedia.org/wiki/Social_graph#/media/File:Sna_large.png](https://en.wikipedia.org/wiki/Social_graph#/media/File:Sna_large.png)

* [https://ogp.me/#structured](https://ogp.me/#structured)

* [https://developers.facebook.com/tools/debug/](https://developers.facebook.com/tools/debug/)

* [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator)

* [https://en.wikipedia.org/wiki/Media_type](https://en.wikipedia.org/wiki/Media_type)

* [https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup)