OpenGraph Meta Tags: Why Do They Matter?

OpenGraph Meta Tags: Why Do They Matter?

Have you ever wondered how to make your links on social media more clickable, shareable and noticeable?

Open Graph meta tags are exactly what you are looking for.

Here's an example of a great usage of Open Graph meta tags on our own website:

Great Open Graph Usage

And here you can see what it would look like without the right tags:

Bad Open Graph Usage

So, what are these 'Open Graph' tags?

They are very similar to other meta tags like the title and description, take a look:

// Meta tags
<meta name="title" content="OpenGraph Meta Tags: Why Do They Matter?" />
<meta name="description" content="If you've ever wondered how to make your links on social media stand out these are exactly what you're looking for." />

// Open Graph tags
<meta property="og:title" content="OpenGraph Meta Tags: Why Do They Matter?" />
<meta property="og:description" content="If you've ever wondered how to make your links on social media stand out these are exactly what you're looking for." />
<meta property="og:image" content="https://makkie.media/resources/images/blog/open-graph-and-why-it-matters.png" />

They are part of the Open Graph Protocol by Facebook and are seen on other social media: LinkedIn & Twitter (if Twitter Cards aren't there).

You can spot them by looking for the og: prefix before the meta's property attribute.

Why are they so important?

In the introduction of this article we briefly touched upon the desire of making links on social media more clickable, shareable and noticeable. And that is exactly what the tags are all about. Allow us to explain...

When we start adding Open Graph tags to a website we do it because:

  1. They make content far more eye-catching than a plain link in social feeds.
  2. They can tell the viewer what the content is about at a glance.
  3. They help Facebook and other networks understand what the content is about.

The OGP also helps create a small snippet when someone sends you a link through messaging apps that support it like Facebook's own Messenger and WhatsApp, but also iMessage and Slack.

Which Open Graph tags should I use?

While it never hurts to take a look at the official OGP documentation and briefly view what tags there are for you to use we won't be discussing all of them. There's about four for the OGP to understand the basics of your page and some others to help understand it further we find useful.

og:title

The title of the content.

Syntax
<meta property="og:title" content="OpenGraph Meta Tags: Why Do They Matter?" />
Usage
  • Add it to all pages.
  • Maintain accuracy, value and clickability.
  • Keep it short! Somewhere between 40 and 60 characters is perfect for both mobile and desktop.
  • Use the title as is. Do not include branding such as your site name.

og:url

The URL of the content.

Syntax
<meta property="og:url" content="https://makkie.media/blog/open-graph-and-why-it-matters" />
Usage
  • Always use the canonical URL.

og:image

The URL of an image for the content's social snippet.

Syntax
<meta property="og:image" content="https://makkie.media/resources/images/blog/open-graph-and-why-it-matters.png" />
Usage
  • Be creative. Use visuals that stand out.
  • Use images with a 1.91:1 ratio and the recommended dimensions of 1200x630 px.
  • Mind that these can not be relative, thus this should always be a full URL.

og:type

The type of content that's being shared.

Syntax
<meta property="og:type" content="article" />
Usage
  • Use article for articles and website for static pages.
  • Where appropriate, use other types as described in the docs.

og:description

A brief description of the content.

Syntax
<meta property="og:description" content="If you've ever wondered how to make your links on social media stand out these are exactly what you're looking for." />
Usage
  • Try to say something meaningful that relates to the title to increase the click-worthiness.
  • Sometimes the value of your meta description fits perfectly.
  • Again, keep it short! Facebook recommends 2-4 sentences, but in reality that will often truncate.

og:locale

Tells OGP what language your content is.

Syntax
<meta property="og:locale" content="nl_NL" />

Usage

  • Use this for pages where content is not written in American English (en_US). Without this meta tag Facebook will assume that your content is written in American English.

Conclusion

Open Graph tags are important in a market where social media is still growing. While it may not necessarily be worth it to go all in with these meta tags it is certainly worth spending time on implementing the tags we discussed in this article.

TIP: use OpenGraph.xyz to test and debug your OGP tags.

Miss anything or found a mistake? Make sure to contact us.

Our Recent Blog Posts

View All Blogs

Designing For The Notch

Designing For The Notch

Read More
OpenGraph Meta Tags: Why Do They Matter?

OpenGraph Meta Tags: Why Do They Matter?

Read More
A brand new Makkie.

A brand new Makkie.

Read More