Since Facebook originally rolled out its Open Graph protocol in 2010, it’s developed into an integral part of many brand websites. With social media becoming more important for content distribution, it helps to know how you can make the most of this powerful tool to improve the appearance of your website in social sharing situations.
What is Open Graph?
If you’ve ever connected to Facebook through another website, you’ve seen Open Graph in action. This protocol allows brands to engage visitors and customers via Facebook without leaving the business website. Brands can then use information from these interactions to track consumer behavior and better target future campaigns.
Open Graph is also important for social sharing. Whether you have a business site with a large selection of products or a blog with a wealth of useful information, you can make Open Graph work for you by adding a few simple meta tags to each page.
Benefits of Open Graph Tags
Adding specific Open Graph meta tags to your website or blog turns every page into a “graph object” that can be read by Facebook and other social networks. The more information that Facebook can get from a page, the more visible your content will be when it gets shared.
How Open Graph Data Appears
When users click a social sharing button on your website or paste a link into their status updates, the optimal result is a rich snippet with a page title, URL, description and thumbnail image. Content that’s missing one or more of these elements is likely to generate fewer interactions. This can spell disaster if you’re trying to run a social campaign for your business or drive traffic to your blog.
Basic Open Graph Tags
Tags for Open Graph are placed with other meta tags on your website. Different properties are used for different page elements to tell social networks how to display information when a page is shared. Below are a few important basic Open Graph tags that you should include on your site:
- og:title – A descriptive title of your page. You can incorporate keywords, but Facebook discourages using this tag for branding purposes.
- og:site_name – The name of your website, not a specific page name.
- og:url – The actual URL of your content, excluding any identifying variables or parameters.
- og:image – Use this for the image or thumbnail that you want to display with your content when shared.
- og:type – This tag allows you to define what type of media or content is being shared. Facebook provides a full list of pre-defined types with the default for this tag being “website.”
Here are the Facebook Open Graph tags for this article:
<meta property=’og:title’ content=’Optimizing Facebook Open Graph Tags for Social Sharing’/>
<meta property=’og:description’ content=’Learn about the social impact of including optimized Facebook Open Graph tags within your website.’/>
<meta property=’og:url’ content=’https://thriveagency.com/?p=2003’/>
<meta property=’og:site_name’ content=’Thrive Internet Marketing – Arlington, TX Web Design & SEO’/>
<meta property=’og:image’ content=’https://thriveagency.com/files/thrive-logo-stacked-square-300×300.jpg’/>
Debugging
After adding tags, it’s important to check that everything is in working order. Fortunately, Facebook provides a debugging tool that you can use to ensure that your pages are free from errors. Don’t skip this step; if there’s something wrong with your Open Graph tags, your content may not display correctly when shared, causing you to miss out on opportunities to engage your audience.
