How Open Graph Tags Work and Why It’s Important for Your Website

If you’ve ever shared a link on Facebook or Twitter and the preview information wasn’t showing up properly - the thumbnail was missing or the title was completely wrong - knowing about Open Graph tags can help.

Thanks to the Open Graph protocol, any web page shared on social media can become a rich graph object in a social graph. It promotes integration between social media platforms, like Facebook and Twitter, but with a certain level of control over how the information travels when it’s shared.

Why Use Open Graph Tags

Even though there are several technologies that could be combined to address this, there really isn’t a single technology that can provide enough information to properly represent web pages within a social graph.

And since social media sites are some of the biggest website traffic drivers, leveraging the power of open graph tags is vital for web developers when building websites that are social media ready.

By simply adding basic meta tags, you can influence the performance of your links on social media.

Facebook Open Graph Tags

Here are the most important tags for Facebook, and how you can optimize them for all content types:

og:title

This is how you define your content’s title, similar to the traditional meta title tag in your code. If Facebook can’t find the og:title tag on your page, it actually uses the meta title tag instead.

Everyone knows how important the post title is, and this is especially true in your open graph tags. Remember that when a headline is shown in your Facebook feed, it’s bolded - so make sure your title tag is as compelling as your actual post title.

Best character range is between 60 and 90 - Facebook will truncate anything longer than 100 characters.

Example:

<meta property=”og:title” content=”The Importance of Open Graph Tags for Your Website”/>

og:url

This is how you set the canonical URL for the page you are sharing. You’re setting your preferred URL to search engines - the one you want to be treated as authoritative. All of your shares and likes will go to this page. What this means is that you define one page that all your shares will go to.

Example:

<meta property=”og:url” content=”http://www.yourawesomewebsite.com” />

og:type

Here’s where you describe the kind of object you are sharing, for example a blog post, article or photo. There are many other content types - the full list is here. It’s important to specify what type of media your content is because it impacts how it’s shown in News Feed.

If no media type is specified, Facebook automatically defaults to the “website” value.

Example:

<meta property=”og:type” content=”website” />

og:description

You can provide a brief description of the content here, usually between two and four sentences. This will be displayed below the title of the post on Facebook.

It doesn’t necessarily impact your SEO but you’ll want to spend a few mins on it because you want to entice people to click on it. Character limit is around 200 characters.

Example:

<meta property=”og:description” content=”Your descriptive and compelling copy here, use your meta description here if its good.” />

og:image

It’s no secret that content with great visuals gets more engagement. This OG tag is how you make sure that a specific thumbnail is shown when you share your page.

For the best high-quality preview images, use images that are at least 1080 pixels in width. At minimum, you should use images that are 600 pixels in width to display image link ads.

Optimize Tweets with Twitter Cards

Twitter cards allow webmasters to display an image, title and description when their content is shared - with a similar look and feel to that of a Facebook post (since they’re based on the same Open Graph conventions).

Here’s a breakdown of Twitter Meta tags:

twitter:card

This tag is required and works like the og:type open graph tag - it describes the content you are sharing (“summary”, “summary_large_image”, “app”, or “player”.). The type of content you choose changes the link at the bottom of your tweet. This is where you see the “View Summary” or “View Photo”. If this tag isn’t set, Twitter automatically defaults to “Summary”.

Example:

<meta name=”twitter:card” content=”summary” />

twitter:title

You specify the title for your article that will show up in bold. Avoid repeating the same text in your tweet - make the most out of it and let the additional copy help reinforce your message. Character limit here is 70.

Example:

<meta name=”twitter:title” content=”Your awesome title here” />

twitter:description

Just like its open graph counterpart, you’re able to write a short descriptive lead about what you’re sharing. This doesn’t impact your SEO either, but it’s still a good opportunity to write something compelling to get readers to click. Up to 200 characters here.

Example:

<meta name=”twitter:description” content=”Your compelling and creative copy here” />

twitter:url

This sets the canonical URL for the content you are sharing. Again, all shares and likes will go to this page, and this is the URL you’re telling search engines is authoritative.

Example:

<meta name=”twitter:url” content=”http://www.yourawesomewebsite.com” />

twitter:image

Twitter allows two options, a card with a smaller or a larger picture. Larger pictures should have a resolution of at least 280x150px and file size not more than 1MB. You can consider using the same trick as with the Facebook thumbnail: add some text to the image to boost the message.

Example:

<meta name=”twitter:image” content=”http://www.yourdomain.com /image-name.jpg” />

How to Implement Open Graph Tags on Your Website

Implementing Open Graph tags and Twitter Cards can be fairly simple - they belong to the <head> part of your page template for your article or blog pages. If you’re using Wordpress, you can also install one of the plugins that neatly does the page markup for you, like Yoast SEO.

Before you can fully benefit from Open Graph tags though, you’ll need to run everything through Facebook’s debugger, which gives you a preview and feedback if there are any issues. Twitter’s version is called the ‘Card Validator’. You’ll also need to ensure that Twitter’s bot is allowed to crawl your image directory, otherwise your Twitter image may not be displayed.

Just Getting Started

The functionalities described in this post don’t cover all the capabilities of open graph - there’s so much more that can be done. But getting a handle of these basics is worth doing because it helps get the most out of your content distribution and making your content stand out from all the noise.