We’ve all done it – posted a link to our status, Facebook page or a friend’s timeline only to see an irrelevant image or description text populate the page. This is not only frustrating, but also not helpful when trying to reach your audience with accurate links and info.
The image below demonstrates how stray code can muddle a link posted on Facebook. Back Cove Yachts wanted to post a link to their business page but an old meta-tag populated outdated information which led to a confusing message to their fans.
I updated the meta-description on the PHP page and still no dice. Our web developer, Andy, told me to add Open Graph tags to the page.
What is Open Graph and How do I Use It?
Unfamiliar with Open Graph, I quickly Googled it, and voila, I hit a Facebook developer page.
When you arrive at the Facebook Open Graph Protocol page, you’re clearly told why you should use these tags, “the more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future.” It’s basically helping your Facebook search results internally and externally.
By adding open graph tags to your page header code, you’re telling Facebook how to display a link to your page.
These tags can also help promote your site in your users’ newsfeeds, collect user names and data, auto-fill forms, remember Facebook login info for apps, as well as give you a larger social graph to analyze by tapping into a user’s friend groups.
Keeping your clients’ or your own audience’s links accurate is quite valuable and a big time saver. Open graph tags will auto-populate your link posts in the future without any tinkering and keep your brand messaging tighter. It also gives you the flexibility to create custom landing pages with specific link content on Facebook.
Add these basic “meta og” tags (image below) inside the head tags of your page to begin tweaking your link appearances. Change the fields in blue (below) to customize your link. Many more options and explanations exist on the Facebook Open Graph Protocol page, so take a few minutes to see what it can do for you.
Once you’ve updated your open graph meta fields, then save the page and upload again to your server to see the results. You don’t need to add all these tags, but I’d recommend the title, URL, image and description fields to start.
Another handy tool is one of the Open Graph plugins for WordPress. There are quite a few to sift through, but the better ones handle the laborious task of updating all your pages’ meta tags by handling it quickly through a plugin.
Some of the top results when searching for Open Graph plugins are “WP Open Graph,” “WP Facebook Open Graph protocol,” “WP Open Graph Meta,” and “Open Graph WP Implementation.”
For current open graph discussions, updates and more, check out the Open Graph Protocol Facebook group. If you need to figure out why your open graph code isn’t working, you can use the official Facebook Debugger.
You can also see what Google will make of your link in a search query with the excitingly named Google Structured Data Testing Tool.
Alternatively, if you’d rather not go messing around in the code, contact your nearest web developer!
Are you currently using a WordPress Open Graph Plugin? If so, which one and is it working well for you? Let us know in the comments section.