HOW TO OPTIMIZE YOUR WEBSITE USING OPEN GRAPH

This post first appeared on the CMD blog.

You just found a beautiful new recipe on your favorite food blog and simply can’t wait to share it with the world. But when you try posting it on Facebook, the preview link has no image and displays unsightly URL code. This prompts you to abandon sharing it altogether. Sound familiar?

As marketers, it’s important to remove barriers for users who want to share our content. Barriers lead to decreased click-through rates, conversions, social shares, audience growth and the list goes on. That’s where Open Graph protocol comes in.

First introduced by Facebook in 2010, Open Graph (OG) is a special form of metadata tag that allows you to control how your website’s information is presented on social media. How, you ask? Add Open Graph tags in the <head> section of your webpage, and social platforms will automatically recognize and populate link sharing templates with the custom information you’ve provided. There are four required tags: title, type, image and URL. In addition, there are a myriad of advanced tags at your disposal.

Let’s take a look at an example blog post utilizing basic Open Graph markup.

Blog Webpage

Open Graph Tags

Appearance When Shared on Social Media

Intrigued? Here are some of the cool ways Open Graph allows you to optimize your online presence:

  • Customize the information you want associated with your website, including images, titles, descriptions and more.
  • Optimize content to reach the right audience on each social media platform. For example, you can craft tags that are conversational when shared on Facebook, while presenting a more professional voice on LinkedIn.
  • Facebook Debugger and Twitter Card Validator tools allow you to preview what your website will look like when shared and return any errors in your OG markup. It will also clear Facebook’s cache, updating previously shared links accordingly.
  • Translate OG tags into Twitter Cards capable of holding 270 more characters when shared. The only caveat is that your site will need approval from Twitter first.

Twitter Card Example

OpenGraph5-e1465343907702.png

If you want to increase traffic to your website, Open Graph protocol is certainly worth your time. It’s incredible how a few lines of code can impact conversions and click-through rate. For more information on Open Graph capabilities and techniques, visit the OGP library.

Want to take your website’s online presence to the next level? Use Open Graph in tandem with structured data to boost search results.

Tweet @adamjacobspdx or @CMDCreates to continue the conversation!

Adam Jacobsopen graph, OG, social media, social media strategy, digital marketing, agency insights, CMD, Facebook, linkedin, twitter, html, meta tag, online marketingComment