Make Your Website Ready for the Social Web with Open Graph Protocol | Social Joey

This may be one of the most important blogs you read this year.

I know what you are thinking, but it’s true. With all the changes happening in the Facebook ecosystem in September, Open Graph Protocol (OGP) needs to be installed on your website before the end of the year.

While OGP has been around for a few years, it’s not something that has been installed on every website. Even websites that are built in 2017 aren’t guaranteed to use OGP.

What is OGP?


OGP, at its core, is a way for your website to communicate with Facebook as the website is shared on social media. OGP presents the pertinent information from your site in an easy to read manner. When Facebook’s link crawler reads your site, it has all of the information up front and doesn’t have to go searching.

How does OGP work?

When you paste a link into the post box on Facebook, the first thing that happens is Facebook follows the link immediately to pull resources from the website. This happens behind the scenes, and almost instantly. You will notice a slight delay between when you paste the link in the post box and when the link preview generates. Now you know what is happening in that time!

On a website without OGP installed, Facebook pulls the first headline, paragraph of text, and image that it finds. Facebook then saves those resources and attaches them to the link shared (inside Facebook’s own cache). Every time that link is shared, those same resources will be used again (which speeds up the process to share a link the next time).

This means that if your preferred image is not the first image in your website code, that is not the image that will be used. Even if the image shows up first on the site, the bot reads the code, not the graphical representation of the site shown to users.

OGP places the information that Facebook needs at the top of your site in special tags. This makes Facebook’s job easier as it first looks for the OGP tags on a site to pull resources. With these tags installed, Facebook now uses the information you provide to generate the link preview.

Why is OGP important?

It used to be that each link could be customized to alter the information pulled in from the website before sharing it on the social web. You could write a custom headline, alter the image associated with the link, and write a custom link description to make your link look its best as it is shared. This didn’t alter other users sharing out the link, but it did allow you to present the best image of your website on your Facebook page.

Due to the recent fake news trend, Facebook made promises to help curb the spread of misleading links and outright fake news. By September 12, link customization will end for all websites. That means Facebook will now rely on the information you provide to them through OGP to generate your link previews. (Certain content creators like large newspapers will have the ability to edit their own links after proving to Facebook that they own the associated domain. This feature will not be available to every website.)

That means every link you share from your website will now be static with whatever image and title that Facebook finds first. Ads posts will still be customizable through Ads Manager, and those posts can be sent to the page following the ad review process.

How can I install OGP?

Any web developer can install OGP on your website, but it will take some customization and time to gather the resources. Approach this with the same strategic planning as when you first built your company website.

There are five important pieces of OGP that need to be installed on every page of your site. Specific pages may require more elements, but these basic elements will cover most pages on your site:

  • og:url tells Facebook the clean URL to use with the article, removing any session id or extraneous parameters
  • og:type tells Facebook about the content on the page (i.e. article, video, music, etc.) - the default is website
  • og:title tells Facebook the headline to use with your page
  • og:description tells Facebook what description to use for the page - this should be two sentences long
  • og:image tells Facebook what image represents the page

Here’s how these tags would look on a recent Social Joey blog:

<meta property="og:title" content="Facebook Offers ...The Next Big Tool for Retail and Restaurant Franchises | Social Joey" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://blog.socialjoey.com/post/facebook-offers-the-next-big-tool-for-retail-and-restaurant-franchises-social-joey/" />
<meta property="og:image" content="http://blog.socialjoey.com/images/QmxvZy00MTE1.jpg" />
<meta name=“og:description" content="Social media marketing advice and tips for Businesses and Franchises provided by Social Joey.">

See the post as it was shared on our Facebook page without any modification.

Other tags you may want to use:

  • og:image:height & og:image:width ensures Facebook knows what size image you are sharing to pull in the correct dimensions
  • og:video allows a video to be shown instead of an image, and opens the possibility for auto play in the news feed
  • og:video:height & og:video:width ensures Facebook knows what size video you are sharing to pull in the correct dimensions
  • more tags can be found on the Open Graph site or Facebook’s Developer Platform

Once OGP is installed on every page of your site, you should take the extra step of sharing those URLs with Facebook so it can create or update its cache of information, and so you can see if there are any missing or broken tags. You can do this with the Batch Invalidator inside Facebook’s Sharing Debugger.

Make sure you add the code on each new page you add to your website - this means each page created on your blog as well. If you have a WordPress site, there’s a handy plugin you can use. Or, the Yoast SEO plugin can also add OGP tags to your site.

OGP Best Practices

  1. Install OGP on every page of your website.
  2. Use a different image for each page of the site.
  3. Size your images correctly for Facebook - 1,200 x 630 pixels works best.
  4. Use the og:image:height and og:image:width tags to make sure your photos are shared properly the first time.
  5. Assign a unique og:title tag to each page.
  6. Write custom og:description for each page, explaining what is on the page itself.
  7. Input your URLs in Facebook’s sharing debugger and correct any mistakes.
  8. Take pride that your website will always look good when shared on the social graph.

Is OGP installed on my site?

The easiest way to check if you have OGP is to ask your web developer. They should know if the code has been installed on your website, and can tell you how it was configured.

If you don’t have a full time web developer or want to check for yourself, you can use the Facebook Open Graph Object Debugger. Start with your homepage - if OGP isn’t installed there, chances are good it’s not installed on your website at all.

While your developer is installing OGP, have them also install the Facebook Pixel and LinkedIn Insight Tag as well. More on tracking ROI from your social spend in a future blog - stay tuned!

Are you looking for a strategic partner to provide hyperlocal social media to your franchise or multi-location business? Give Social Joey a call today! We can take your brand’s social media strategy and provide it to your franchisees at a great price.