Overview

Sharing your website content on Facebook is a great way to get new, potential customers to learn about your brand. Generally, sharing a link is very easy and will create a post presentable enough to share right away. But did you know you can customize how your posts will display by revising a few tags on your website? Known as the Open Graph protocol, Facebook has created a set of metadata tags for websites that tell Facebook what and how you want your content to be displayed. Carefully curating these tags can greatly improve the appearance of your brand and website on Facebook which in turn can increase clicks to your site! 

3 Easy Ways to Customize

Do It Yourself

Feeling cavalier? You can easily write your own Open Graph tags to use on your website. Reference the official Open Graph Documentation and start writing.

Social Tag Generator

Metatags.io is a very popular website to create the essential Open Graph tags for your website in a few easy steps:

  1. Paste your webpage’s URL into the bar at the top of the website and hit ENTER
  2. This will generate the content pulled from your website. From there, you can customize what each tag’s content contains. This includes Image, Title, and Description.
  3. Click the “Generate meta tags” button. This will open a popup where you can easily copy the Open Graph tags created for you.
  4. Paste the Open Graph tags in between the <head></head> tags of your website and you’re good to go!

YoastSEO for WordPress

If you’re using WordPress, there’s a slew of great SEO plugins at your disposal. At the time of writing this, YoastSEO is in the list of most popular plugins on the WordPress official site with over 5+ million active installations. As a free plugin, Yoast gives you the ability to easily edit each page’s Facebook Image, Title, and Description. While it lacks the more in-depth tags, it gives you control of the essentials and that is what’s important. The premium version even gives you a preview of what the post will look like when people share your page.

The Essentials/What Tags to Use

While there are many possible Open Graph tags you can use, there are only a few essential ones that we recommend using on every page:

  • og:title – The title of your post or page
  • og:type – The type of your post of page. There are many possible types including website, video, movie, article, and book.
  • og:url – This is simply the URL of your webpage.
  • og:image – The image that will display with your post
  • og:description – The description that will appear under the title. While not a required tag, we believe this is essential as it is a big focus of the shared post or page on Facebook.

 Other Open Graph Tags

As previously stated, there are many other tags you can use when setting up your webpage. Most are not essential but can add valuable data about your webpage for Facebook to analyze:

  • og:audio
  • og:determiner
  • og:locale
  • og:locale:alternate
  • og:site_name
  • og:video

There are even more tags you can use that greater define the above tags. For instance, you can elaborate on your og:image by adding a width (og:image:width), height (og:image:height), or alt tag (og:image:alt) to name a few. I won’t elaborate on this because there are many properties, but if you’d like to learn more, I recommend visiting the Open Graph Documentation website and reading the section on Structured Properties.

Testing and Debugging

A great tool for previewing how your page or post will appear when shared is by using the Facebook Sharing Debugger. Simply login, enter your URL in the input, and click the “Debug” button. From there, you can see all of the Open Graph properties of that URL. Try it out!

About the Author

David May

Dave is one of our Front End Web Developers. When he's not keeping up with web development trends and furthering his knowledge of all things code, he's probably playing a video game, reading a book or sitting on the beach.

Your website browser is no longer supported.