How to Set Up Open Graph Meta Tags

Are you wondering how other sites look great when shared through social sites? Do you want your site to look the same way?

In this article I will show you how to setup Open Graph tags on your site and the advantages. Sharing content on social media is an essential part of what people do these days. When your site is shared through social media with, people tend to click on links that have images.

What is Open Graph?

The Open Graph protocol controls what content displays when sharing links on social media. When using Open Graph tags become a rich object in the social graph. The Open Graph protocol allows you to control what image, title, and description display when sharing links on social media.

Here's how this post renders when shared on Facebook with Open Graph tags:

Why Open Graph is Important

Without Open Graph tags setup, social media platforms can choose a random image, title, and description. As you saw above when your site is shared through social media sites optimizes your shared content and provides a better user experience. It improves the visibility of your content, makes it more engaging, and helps attract clicks. Here are some other valid reasons

• Drive traffic to your website
• Improve page rankings in search results
• Builds brand reputation and trust
• Earn quality backlinks
• Grow your social media follower
• Help social media platforms understand your content

How to Add Open Graph Tags to Your Website

Social media platforms like Facebook, Twitter, Pinterest and LinkedIn recognize Open Graph tags. However, Twitter also uses meta tags called Twitter Cards. But will use Open Graph when there are no Twitter Card tags. Here are 2 examples below:

  <!-- Facebook, Linkedin, Pinterest Meta Tags -->
  <meta property="og:url" content="[Actual url of site or blog]">
  <meta property="og:type" content="website">
  <meta property="og:title" content="[Title]">
  <meta property="og:description" content="[Small description]">
  <meta property="og:image" content="[An image full path url]">

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:domain" content="jgsolutions.ca">
  <meta property="twitter:url" content="[Url]">
  <meta name="twitter:title" content="[Title of site or blog]">
  <meta name="twitter:description" content="[Small description]">
  <meta name="twitter:image" content="[An image full path url]">

Both of these snippet examples can be copied at the beginning of your website between the 'head' tags. You will probably have other tags like title and description but the ordering does not matter.

If your site is based on a content management system like WordPress, you will probably have to add these tags in the settings admin section. I am not a wordpress expert, so you use Google as your friend on this topic.

How to Test Open Graph tags

First, right away you should inspect element in the dev tools in Chrome or any other browser. Expand the header tags and you should see the meta tag elements rendered.

To actually view the visibility of your content of these updates, one way which I don't recommend is actually pasting your url in Facebook or Twitter but without sending the post. A chance it might not work as social media sites don't recognize the URL right away which could be fustrating.

Another solution is an online tool that is available to test your site Opengraph. This will allow you to paste your URL and will give you a quick preview for all the different social media sites.

How to audit Open Graph tags

If your site contains lots of pages and want to verify if open graph meta tags are setup properly, you can use a tool called Ahrefs’ Site Audit. This will check your pages in bulk and provide you any issues that needs to be fixed.

Final Thoughts

Hopefully, this article helped clarify how to add Open Graph meta tags to your site. If your not technical and confident in peforming this task, don't be afraid to contact me. I can provide you with more guidance and get your Open Graph tags setup.