Tutorial: Learn How To Use Open Graph Tags On A Website Now!
In this social media design tutorial, we’ll cover how to add Open Graph Tags (OGP tags / OG tags) to a webpage on a website that uses basic HTML — this requires using ogp.me namespace and adding several required and optional meta tags.
See the article entitled “What are OGP Tags?” if you’re unfamiliar with Open Graph meta tags and how they influence Search Engine Optimization (SEO) or if you need to see an example (or just post the URL to this webpage, which includes Open Graph Meta Tags into WhatsApp).
Open Graph HTML TOC
I would much prefer either automating this step entirely or using a plugin to help me manage this process with more finesse than if I were to do this manually however in some cases adding social media meta tags to a website by hand may be necessary and we’ll take a look at how to use Open Graph tags in HTML in detail here.
Open Graph Protocol tags are supported by many social media sites and applications.
When someone shares a link to a web page that contains OGP tags, the URL will be unfurled (opened), displaying an eye catching preview that includes information about what that link points to.
This article was last updated on April 9, 2025 — see the Open Graph Tutorial category for other articles that can help supercharge your website’s social media presence.
How to use Open Graph tags in HTML
In this section we’ll cover how to use open graph tags on your website in seven steps.
Step One: Using OGP.me, add the OGP Tags namespace to the HTML element.
Using your editor of choice open the file that you need to add OGP metadata tags to, locate the HTML element, and add the Open Graph Protocol namespace as follows:
An example of the HTML element appears below.
<html class="html" dir="ltr" lang="en-US" prefix="og: https://ogp.me/ns#">
Free SEO Consultation
More information about the Open Graph tag namespace (https://ogp.me/ns#) can be found on the Open Graph Protocol website.
Step Two: Locate the head section.
The OGP tags need to be placed between the head tags, as shown in the image below.
The head section of a page on your website is located at the beginning of your HTML document, between the <html> tag and the <body> tag.
The head section is enclosed within <head> opening and </head> closing tags.
The head section is important for your webpage since it contains meta tags, links to stylesheets (CSS files), scripts, and other important information that is not directly visible on the webpage itself but is essential for the browser to properly render and understand the content.
Step Three: Set the values of all required Open Graph Meta Tags.
There are four required Open Graph metadata tags that must be set :
- og:title
- og:image
- og:url
- og:type
— the other tags, such as the og:description, are optional.
Step Four: Set the values of all optional Open Graph Meta Tags.
There are many optional Open Graph metadata tags that may be used — in this step, you’ll need to determine which tags you need to set and add them to the webpage.
Step Five: Save your changes.
We need to save the changes we’ve made to the webpage.
Step Six: Test the Open Graph tags using an OG testing tool.
This validation step requires that we test the OG tags using the Facebook Sharing Debugger or another Open Graph testing tool — this step is covered in the article regarding how to test open graph tags.
It is important to understand how to use Open Graph Tags in HTML in order to ensure that they are set up correctly.
If the target webpage is not available to the Internet then we may need to test Open Graph Tags locally — I have some ideas regarding how an engineer may accomplish this task however better options may be available.
Finally, I have listed four steps regarding what you can do when the WhatsApp link preview image is not showing which should help solve this annoying issue.
Step Seven: Fix Any Errors and Retest
The image below shows the result of the test and indicates the page has zero errors and one warning.
We need to fix errors however we can usually get away with ignoring the warnings.
There’s a warning and no errors so we’re in a good place — if we can fix this warning then great, otherwise we’re going to ignore it and move on to the article conclusion.
Tutorial Conclusion
Hopefully, this guide has helped demonstrate how to use Facebook Open Graph Tags on an HTML page.
Using OGP.me and Open Graph Tags empower content engineers to create captivating, informative, and visually appealing shared links, ultimately driving more traffic to your site and increasing engagement with your content.
This article is part of a series on OG tags — see the Open Graph Protocol Tutorials hub for other articles on this subject.
See Also
- What are Open Graph tags?
- Using ogp.me in the HTML element prefix is required.
- Learn how the SiteLinks Schema can help improve SEO on your website.
- Learn how to find question based keywords in your existing articles in this short instructional.
Frequently Asked Questions
OGP.me is the official website for the Open Graph Protocol, which provides guidelines for how to use Open Graph Tags on a website.
OGP tags are used to control how your content appears when shared on social media platforms such as Facebook, Twitter, and LinkedIn.
Using OGP.me as a reference, you can ensure that your tags are correctly formatted thereby improving the way your links display and enhancing content visibility and engagement across various networks.
By following the instructions on OGP.me, you’ll be able to optimize your website for better social sharing, thus ensuring your content stands out.
An Open Graph image is a specific image that appears when your webpage is shared on social media platforms.
An Open Graph image helps to control how your content looks in social posts, making your links more visually appealing and engaging.
By using OGP.me as a guide, you can learn how to properly set an Open Graph image to ensure the correct image is displayed when a link to your page is shared, thus enhancing visibility and improving click-through rates.
