Improve Social Sharing with Open Graph Protocol  Tags

Facebook Open Graph Protocol ExampleAllowing your users to share your content in the easiest, best way possible is important these days. With the help of Open Graph Protocol you can easily control the images, titles, descriptions and other metadata that is used by major social networks including Facebook, Twitter, Google Plus & LinkedIn.

RDFa Attributes

The first step to setting up Open Graph Protocol tags on your website is to add the proper RDFa attributes to the html tag at the top of your website.

The lang and xml:lang are not required attributes, but are good to have for various reasons. The xmlns, xmlns:og and xmlns:fb tags are required. The Open Graph Protocol tags will not work without them.

Open Graph Protocol Meta Tags

On to the good stuff, the OGP meta tags themselves. These can be added to the head section of your HTML document below your other tags. There are additional tags available, I’ve chosen to focus on a few of the most common ones.









What Do These Mean?

Each tag translates into the following:

  1. og:title — The title that will be used when this page is shared
  2. og:type — The type of resource that best describes your page
  3. og:url — The web address that will be shared, and will be used to calculate the share count
  4. og:image — An image to be shared (300×300 pixel square works well)
  5. og:description — A 115 character description that will appear when this page is shared.
  6. og:site_name — The name of your website.
  7. og:locale — The locale, or language location for your content.
  8. fb:admins — The Facebook ID’s of admins that manage a corresponding Facebook page. Each Facebook page has a Facebook “user” that can post updates to anyone that follows the page.
  9. fb:page_id — The Facebook Page ID for an associated Facebook page. Your page will appear in the “Likes and Interests” section of the user’s profile, and you have the ability to publish updates to the user.

Verifying The Results

Once you have your OGP meta tags in place you’ll want to verify that the data you have provided is being received properly by all sources. There are a few great tools our there that make this process simple:

Open Graph Protocol Tags in WordPress

There are many ways to add OGP tags to your WordPress website, I would recommend the following plugins:

  • WordPress SEO by Yoast Plugin — Yoast has included the Open Graph Protocol tags under the Social menu. The Facebook integration he added in the recent 1.1.2 update couldn’t be easier.
  • Open Graph Pro Plugin — This is a stand-alone OGP plugin that makes the setup process very easy.

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 17 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.