What are Open Graph tags and how can I use them on my web page

Open Graph tags were introduced by Facebook for web masters to place on their web pages so that visitors to these web pages can share them on social media with their friends and contacts.

Now most content is shared on Facebook as a URL so you may ask what’s the big deal here?

The big deal is that Open Graph tags help the web masters control the format of the content that is to be shared on social media. They can add the right title, image and description to these tags so that social media users can get an idea of the content in one look.

If you don’t use these tags on your web page then Facebook and other social media companies can pick and choose the content from your web page to show on their platforms and that is not always what you would like to show others.

How to use these Open Graph tags on your web page is pretty simple and straightforward. These tags go into your head section. This is the place where the title and meta description and meta keyword of your page resides. We will go through each tag below.

og:title – This tag displays the title you wish to show on Facebook and other social media. Note this can be different to the title of the web page. Remember to be concise and to the point.

<meta property="og:title" content="What are Open Graph tags and how to use them on my web page" />

og:url – This tag displays the URL of the web page. If any one clicks on your shared content on social media then this is the URL where the user would be taken to. Remember this URL should be easily accessible to anyone on the internet.

<meta property="og:url" content="https://www.apnacode.com/social-media/what-are-open-graph-tags-and-how-can-i-use-them-on-my-web-page/" />

og:image – This tag displays the image to be shown on the shared content. This is the most tricky part as Facebook requires that images be of high resolution and at least 1080 pixels in width. Remember you can also use any other image for social media sharing rather use the one on your web page as long as it follows the guidelines.

<meta property="og:image" content="https://www.apnacode.com/wp-content/uploads/2020/03/facebook-graph-tags-700×400-1-678×381.png" />

og:description – This tag gives a brief description about the shared content to the user. This can be 1-2 lines of content.

<meta property="og:description" content="This article explains what are open graph tags and how you can use them on your web page" />

Take the following example of a shared content on Facebook most probably using Open Graph tags

If you would like to learn more about Open Graph tags then there is a nice intro about it on Facebook.

You can also test how your Open Graph tags would look like when its shared. Facebook has an online Sharing Debugger tool. You will need to login in order to use it.

Please let me know if you have any questions/comments on this post or if you need my help in implementing this on your web page.