Jerry Gagliano logo
My Resume
← Go Back

Setting Up Open Graph Meta Tags on Your Site

Web

Sharing content on social media is an essential part of what a lot people do these days. This article is important to learn and take into account as you want to optimize your content on social media using Open Graph meta tags. It's fairly easy and I will give you a quick overview and straight to the point on how to implement Open Graph meta tags.

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 looks when shared on Facebook with Open Graph tags:

Facebook Open Graph Example

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

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.

Final Thoughts

Hopefully, this article helped clarify how to add Open Graph meta tags to your site. If your not technical person and confident in peforming this task, you can always contact me and provide you with more guidance.

Thank you for taking the time in reading this blog. If you find any invalid information or want to add more this blog you may contact me at:

jerrygag@gmail.com