Allowing 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.
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.
xml:lang are not required attributes, but are good to have for various reasons. The
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:
og:title— The title that will be used when this page is shared
og:type— The type of resource that best describes your page
og:url— The web address that will be shared, and will be used to calculate the share count
og:image— An image to be shared (300×300 pixel square works well)
og:description— A 115 character description that will appear when this page is shared.
og:site_name— The name of your website.
og:locale— The locale, or language location for your content.
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.
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.
About the Author
Kevin Leary is a web developer in Boston, MA specializing in enterprise website design and development, online marketing, and conversion optimization.