Open Graph meta tags act as a bridge between your website and social media, allowing you to customize how your URLs appear when shared on these platforms. By using Open Graph meta tags, you can give your audience a striking preview of what they'll find when they click through!
In 2010, Facebook introduced Open Graph meta tags to facilitate sharing websites on its platform. Twitter and LinkedIn have since adopted Open Graph meta tags to improve the user experience.
When you paste a URL into a Facebook input field, you'll likely see a link preview. Before Open Graph meta tags, you had no control over how your link preview was displayed, and sometimes Facebook showed the wrong content.
Open Graphs meta tags help users optimize their link previews on social media, ensuring everyone always sees the essential information.
Social media channels are a constant source of web traffic and conversions. With the right mix of strategy and design, you can convince users to click through to your website to learn more about your brand, make a purchase, and much more.
Open Graph meta tags enhance the link preview on your website, attracting the attention of your audience.
Facebook lists 17 Open Graph tags in its official documentation, but only four are needed for Facebook to understand your website. You use the tags by placing them between the Insert -tags in the website's backend.
The four required tags are:
og:title – This is the title or heading of the page.
For example:
You can also use other OG tags, such as:
If you're not yet familiar with Twitter Cards, you can use them to attach media files and add extra information to your tweets. This can be useful for increasing the visibility of your tweets and providing additional context to users who click through.
Although not identical, Twitter maps use the same Open Graph protocol and look similar to OGP tags. Implementing these tags makes it much easier to create Twitter maps without duplication issues.
Like Facebook's Open Graph tags, Twitter Cards allow you to stand out from the crowd of tweets. In short, they enable you to generate additional content from your 140-character tweet.
These will not automatically appear in users' feeds, but a small "Show summary" button will be added below the tweet.
You can use Open Graph tags to define the title, description, and image of your content, and to determine the content type of your page and the audience you want to reach.
Facebook Debugger is a free online tool that allows you to control what other people see when your blog posts are shared on Facebook.
The debugger tool is essential for brands with Facebook pages, as blog posts or website previews sometimes don't display correctly when you share them.
For example, an older image might be displayed, or Facebook might use a random image from your article instead of the main image.
Facebook Debugger can inspect any website in seconds and generate a report detailing exactly why your previews are being published in a certain way. Using the information in this report, you can then make changes to your HTML code or tags to fix the problem.
Read on, and we will guide you step-by-step through the debugger tool so you can understand how to view, customize, and update your Facebook previews.
Although you can generally get by with the basic tags, there are a few more that are worth adding:
While adding an image as and: image While this should often suffice, sometimes it can be difficult to display the image correctly. If you are having problems, the Open Graph standard includes several image tags such as... og:image:url vs og:image:secure_url as well og:image:width and og:image:height.
Make sure you follow all the instructions and examples in the Open Graph documentation. Additionally, some social networks have image requirements. Twitter, for example, requires a 2:1 aspect ratio, a minimum size of 300×157 and a maximum size of 4096×4096, a file size under 5 MB, and an image in JPG, PNG, WEBP, or GIF format.
If you're still stuck, test your tags with the social network's tools to see if you can find the problem.
Fortunately, our preferred social networks also offer tools to help us troubleshoot our tags. Once you've confirmed that your tags are indeed appearing in your website's source code, you can preview how your website will look in the feed.
To add Open Graph tags to your WordPress website, we recommend using a plugin that adds these tags to each page for you, such as Yoast SEO or All in One SEO.
These and other SEO plugins allow you to set the essential Open Graph tags for each page, usually in the plugin's "Social" or "Sharing" options.
Once you've set your Open Graph tags, you can use Facebook's debugger to preview how your content will look when shared and to troubleshoot any issues. Simply enter your page's URL here and select "Get new scrape information."
© 2012-2025, MIK Group GmbH | General Terms and Conditions | Imprint | Privacy policy
