How-To: Open Graph Protocol in Social Media

June 04, 2015 Tom Mahr

Sharing links to your website via Facebook, Twitter or LinkedIn are great ways to generate awareness and drive traffic. Whether you’re posting a URL on Facebook, sharing an article on your Twitter feed or linking a job posting from your site onto LinkedIn, crawlers from these social channels scrape the page and pick what they believe is important to display. Having complete control over the content displayed provides the user with relevant information to draw their attention to your website. The way to accomplish this is by using Open Graph meta tags on your website.

Open Graph meta tags follow the Open Graph protocol, which social media sites like Facebook, Twitter and LinkedIn use to standardize the data from other sites. Without the use of Open Graph tags, you have little to no control over what is going to display when your site is shared on another platform. An image could be missing or the summary that is pulled in may not give the reader any insight into what is actually on the page. Applying Open Graph tags to your site can easily be accomplished by adding them within the <head> tag in you HTML as shown below:

applying open graph tags

Here is an example of a site that is not using Open Graph tags:

Open Graph tags on CDGA

This example is from an interior page on the cdga.org site. We know they are not using Open Graph tags for several reasons: the image isn’t rendering, the title of the page is just the name of the site and the description of the page is entirely missing.

Here is an example of a site that is using Open Graph properly:

espn open graph

In this example, ESPN has a properly sized image with a title that is concise and page specific. Also the description gives a brief summary of what you will find on the page.

There are many fields that can be controlled with Open Graph tags. The main tags that are used are:

og:type
The type field is used to indicate the type of content that is on the page. The types used for webpages are “article”, “blog” or “website”. This is a required field for the Open Graph to be read in.

og:title
The title field should be concise, but unique to the page. This field is also required for the Open Graph to work.

og:description
The description should give the reader a summary of the content on the page. Even though there is no specific max. length limit for this field, it is suggested to be between 160-300 characters. Anything larger than this and sites will start to truncate the description provided.

og:image
The image tag is the URL location of the image you want shared. The minimum image size needs to be 200px x 200px. This is the minimum size that Facebook requires. Twitter requires at the minimum 120px x 120px and LinkedIn requires a minimum of 80px x 150px. So for an image to display on all of these sites it needs to be at least 200px x 200px. If the minimum requirement is not fulfilled, then the image will not display.

og:url
The URL should contain the current page's URL. You should try to avoid having any unnecessary URL parameters and using the shortest version of the current page's URL as possible.

og:site_name
The site name should contain the name of the site with which you would like followers to associate the post.

Whether you have added in the Open Graph tags and you want to test the output or you want to see what data is scraped on your site before you add them, Facebook has a page (here!) where you can paste in your URL, and it will display it for you as well as give feedback on anything missing or incorrectly implemented.

Although Open Graph tags work with all the major social media sites, some of them actually have their own types of tags. One example is Twitter. Twitter tags have many different types, but the two most popular are the Summary Card and the Summary Card with Large Image. The different possible properties for these tags are:

twitter:card
The Twitter card is a required property for these to work. This property indicates which type you are using. For the Summary Card with Large Image you use “summary_large_image” and for the regular Summary Card you put “summary” for the value.

twitter:site
For the site value you need to place the Twitter account @username that you want associated to your site. This is also a required field.

twitter:title
The title field has a max. limit of 70 characters and it should be unique to the page. This title field is required only when there is no og:title.

twitter:description
The description field is required as well only when there is no og:description. The description should summarize the content on the page, but it should not contain generic site information. The max. amount of characters allowed is 200 characters, otherwise the description will be truncated.

twitter:image
This field should contain the URL to an image not used on multiple pages. For the normal Summary Card, the image minimum size is 120px x 120px. For the Summary Card With Large Image, the minimum size is 280px x 150px. Images not following these guidelines will not show up in the card. Note: This is an optional field.

Similar to Facebook, Twitter has page where you can test out the Twitter Cards that you've implemented before you deploy (here!). This will show you the preview of the Card on your page and whether you meet the guidelines as well.

We hope that this is a sufficient guide to get you started in implementing these handy tools. Of course, feel free to reach out if you are having any specific challenges with the implementation of your Open Graph tags.

Want to read more about how to turn your people and your network into your best marketing assets? Explore this post on social media.

Subscribe

The One North Ideas Update delivers each month’s latest posts on digital for PSOs—including industry trends, news and our latest research—directly to your inbox. Although it’s our goal to always include thought-provoking and compelling content, you can unsubscribe at any time. 

See our Privacy Policy to learn more about how we protect and manage your submitted data.

Tom Mahr Technical Lead

As a Technical Lead at One North, Tom builds and maintains websites and applications for our clients. By collaborating with his team, he is able to provide best possible solutions with efficient and well-practiced implementation capabilities.

  • Favorite movie: Royal Tenenbaums
  • Favorite breakfast food: Eggs Benedict (with Homemade Hollandaise Sauce, not the powder mixed stuff)

One North Interactive 
222 North LaSalle St, #1500
Chicago, IL 60601

+1 312.469.1740