Use Open Graph Tags To Customize Your Site’s Appearance in Facebook

Thumbs Up Banner

When viewing a page’s source code, it can be tempting to glance at terms like ‘og:title’ and ‘og:description’ and surmise that they refer to your on-page SEO being implemented properly.

These og meta tags are not, however, having to do with standard SEO and how search engine crawlers will interpret the content. Instead, these are ‘Open Graph’ tags, and they are used to control how a web page appears when its URL is posted to social media, particularly Facebook.og-tags

From Facebook’s best practices:

Most content is shared to Facebook as a URL, so it’s important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. Without these tags, the Facebook Crawler will use internal heuristics to make a best guess about the title, description, and preview image for your content. Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook.

These Open Graph meta tags are an opportunity to tailor a page’s content specifically for consumption on social media and control how it will appear when shared around the web.

facebook-og

There are many more Open Graph tags than just the title and description, however. Facebook outlines the basic meta tags that should be used for all content types in their Guide to Sharing for Webmasters and a list can be found here.

facebook-og-yoast-editor

Editing a page’s basic Open Graph title, description, and image for Facebook is easy when you have a WordPress site with the Yoast SEO plugin installed. They can be updated in the Social tab of the Yoast widget within a page’s editor.

Lastly, Facebook provides a handy ‘Debugger‘ tool for testing how your URL will appear when it’s posted to Facebook.

facebook-og-debugger