Getting Started Guide On Open Graph Meta Tags for Social Media Marketers

Open graph meta tags underline content visibility and ranking on social media and other online platforms. Here's what you need to know...

Working as an advertiser on social media platforms and curious about making your content more clickable, noticeable, and shareable?

While other websites may implore you to consider content marketing strategies, here’s what we’ve got for you… This strategy is called: Open Graph Meta Tags or OG Tags. It’s an optimized ‘behind the curtains’ experience to not only rank your content better but also help algorithms to crawl through everything.

The best part? Open graph meta tags’ optimizations don’t interfere with the on-site user experience – i.e., if you have done things the right way.

While it may seem like an arduous task to accomplish but with the proper knowledge and skills, you, too, can grab the attention you have been craving.

This post will shed insight on different aspects of open graph meta tags. Moreover, we’ll talk about how to effectively take advantage of the OG tags strategy while simultaneously managing quality content on the side.

What is an Open Graph?

Think of Open Graph as a contract — an internet protocol launched, initially, by none other than Facebook. In 2010, the social media mogul institutionalized metadata within a webpage. The agenda was to serve metadata as part of the on-page content.

As a developer, advertiser, or SEO optimizer, you can instill details as simple as the title of a page or as exact as the duration of a video. These fragments fit together to form a depiction of different elements associated with a webpage.

What Are Open Graph Meta Tags?

If you’re somewhat familiar with Html language, you already know what open graph meta tags, or OG tags are. For those who don’t, these are crumbs – pieces, or chunks of code that govern the display of URLs when shared on social media websites.

They go hand-in-hand with not only just Facebook’s Open Graph Protocol, but are utilized on other social media platforms, such as LinkedIn and Twitter (if Twitter cards are absent).

Open graph meta tags can be in the section of any page. Moreover, any tag with an inherent ‘Open Graph Meta Tags’ label: is simply dubbed Open Graph tags.

For instance, this is how they look like on Facebook:

Why Do You Need Open Graph Meta Tags On Social Media Platforms?

Everyone sharing content on the internet, be it social media, has one goal in mind — i.e., to share it with as many users as possible. This might not be the scenario if you’re only sending it to one person.

Still, someone working as a business promoter, a marketer, or an SEO expert prefers sharing it on a social media platform rich in user previews. You’ll hanker for the content to be as effective as possible.

What If You Don't Have Open Graph Meta Tags?

By default, it’s taken care of –most social networks will their level best in generating a preview of your content. This doesn’t always go as well as planned.

For example, take a look at the following content snippet:

While it does a great job capturing the title and description of the page, ask yourself this; Is it worth checking it out?

Contrary to the above, take a glimpse of the image below:

This surely does stand out. From a viewer’s perspective, a “click-through” is guaranteed.

By now, you might have gotten a hint of why you require them. Nothing terrible happens if you don’t have them, BUT! You will be missing out on some of the characteristics that help your content gleam on the internet.

And if you’re still not satisfied, then here are a few more reasons:

1. In social media feed, your content becomes more visually appealing.

2. People can eye-ball your content by just going through the description.

3. Brand visibility becomes more prominent by helping Facebook understand the content.

4 Things To Know About Og/ Open Graph Meta Tags

You’ve come this far because you are interested in getting started with open graph meta tags, OG. And why not, since seeking more people’s attention is what we all strive for.

The basic open graph meta tags that are must for each page are

  • Og: Title
  • Og: Type
  • Og: Image
  • Og: URL

Although Facebook highlights 17 OG tags in their official documentation, we won’t be doing an in-depth analysis in this post. Since only four of the Og’s are required by Facebook to perceive the basics of your page.

Most importantly, the mentioned ones must be unique for each page you serve, meaning your homepage tags should be different from your blog post article’s page.

1. Og: Title

This is the title of your page and is usually the same as your web page’s <title> tag except for if you’d like to present it distinctly.

Syntax: <meta property= “Og: title” content= “Open Graph Meta Tags: Guide to getting started”/>

Best Practices:

  • Include it in all shareable pages
  • Target value, accuracy, and clickability
  • Keep it short to counter overflow. Because there is no official guide on it, the sweet spot is; 40 characters for mobile and 60 characters for desktop
  • Stick to the organic title. Do not include branding (e.g., your site name)

2. Og: Type

It represents the type of your content you’re sharing. e.g., article, blog, or website

Syntax: <meta property= “Og: type” content= “article” />

Best Practices:

• Use ‘article’ for articles and website for the rest of your pages.

• This is optional but always better to explain object types more where applicable.

3. Og: Image

This should be brought into practice whenever you wish to exemplify your content. Using an image should be of high quality to be easily used in social networks.

Syntax: = <meta property= “Og: image” content=https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg />

Best Practices:

  • Consider using custom images for shareable pages like homepage, articles, etc.
  • Stick to a branded image or logo for the rest of the pages
  • For optimal clarity across all devices, use images with a 1.91:1 ratio and dimensions of 1200X630 for gilt-edge clarity

4. Og: URL

This is simply the URL of your current webpage.

Syntax: <meta property=”Og: url” content=”https://ahrefs.com/blog/open-graph-meta-tags/” />

Best Practices:

  • Use an authoritative URL. It helps centralize all corresponding data, such as likes, across all duplicated URLs posted

If you were to construct a set of four basic open graph meta tags, OG tags for a website, it will look like this:

  • <meta property=”Og: title” content=”Colby Fayock – A UX Designer &amp; Front-end Developer Blog” />
  • <meta property=”Og: type” content=”website” />
  • <meta property=”Og: image” content=”/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg” />
  • <meta property=”Og: url” content=”https://www.colbyfayock.com” />

Website Open Graph Type

The open graph protocol has a few alterations for the “type” of website it backs up. This encompasses types like website, video, or article.

Whenever you’re setting up open graph tags, you should have a pretty clear picture of which type will make more sense for your website. If the page you’re working on concentrates on a video, it’s dollars-to-doughnuts to use type: “website.”

Do remember that “type” is unique for each page. If you used to type down “website” for your homepage, you could always have another page of the type “video.”

For example, if you want to create an open graph type for a website, it should look like this for the homepage:

<! — colbyfayock.com –>

<meta property= “Og: type” content= “profile” />

And for a blog post, it should look like this:

<! — https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ –>

<meta property= “Og: type” content=“article” />

What Else Is There To Know About Open Graph Meta Tags?

Few More For The Better!

Although the basics will get you on your feet in a lickety-split, a few more don’t hurt. As it’s always good to be mindful of a few more:

  • Og: Description

Describe your page. As the type suggests, this is what it does. Just like Og: title, this may be similar to your website’s <meta type= “description”> tag, if not wanting to present it differently.

  • Og: Locale

Thinking of localizing your tags, this is your best option to avail. The format is language_TERRITORY, where the default is en_US.

  • Og: Site_name

This type exhibits the name of the website content is on. So, for instance, you’re on a blog post’s page, you may have a title using the blog post’s title, where site_name is the name of your blog.

  • Og: Video

This tag allows you to include a video that supports your content. You can add a link to your video by using this tag.

Images in Open Graph

Adding an image as og: image should serve the purpose, but sometimes it can be daunting to have an image show up correctly. If you seem to be getting stuck or getting nowhere, then you can rely on standard open graph image tags, such as:

  • Og: image: URL VS Og: secure_url
  • Og: image: width and Og: image: height

One thing to be knowledgeable of is the notes and examples in the open graph documentation. Now, some social media platforms have a specific image requirement.

Let’s take Twitter as an example. The platform requires an image of a ratio of 2:1 with at least a size of 300X157. However, the dimensions can also go up to 4096X4096.

4 Creative Ways To Set Up Open Graph Tags

You might wonder how to set open graph meta tags and OG tags across different website platforms. Well, you’ve come to the right place. The platforms we’ll be looking into are:

  • WordPress
  • Shopify
  • Wix
  • Squarespace

1. WordPress

To set up open graph tags in WordPress, you’ll need to install Yoast’s SEO plugin. Navigate to the editor for a post or page, then move down. Smack the “Social” tab, then “Facebook.” You should be looking at the Yoast SEO box.

If you’ve got an image for the post but don’t set up the og: image for it, then Yoast will set it up for you. Since time is of the essence, it will automatically add other Open Graph and Twitter card tags –site name, image dimensions, etc.

It’s also considered a best practice to set a sitewide og: image tag. This option can be located in Yoast’s settings.

Yoast> Social> Facebook

Make sure to set it to “Enabled,” as shown below, and then upload a relevant image.

2. Shopify

When setting up Shopify, mostly themes will pull open graph meta tags from variables like title tag for Og: title and featured image for Og: image.

The only tag that can be customized via Shopify’s UI is sitewide Og: image.

Head over to Online Store> Themes> Customize> Theme settings> Customize> social media> Choose an applicable image.

And if you’re figuring how it’s set up, go to Online store> Themes> Actions> Edit Code> Snippets> social-meta-tags. liquid in the scroll bar. The code can be edited, too, if you prefer.

3. Wix

Wix has its way of doing it. It pulls common OG tags from other variables, such as the page’s meta title and description.

The OG title, description, and image for each can be customized according to your liking.

To set up a custom sitewide OG image, navigate Settings> social> share from the main menu. Nonetheless, Wix makes adding OG tags a breeze.

4. Squarespace

Lastly, let’s see how you can set up open graph tags in Squarespace. Here, it uses the page title and meta description for Og: title and Og: description.

A custom image Og: image can be set up on a page-by-page basis.

Simply head over to Page settings> Social Image> Upload

And if you’re thinking about customizing the default settings, go to Page settings> Advanced> Page header code injection.

Testing and Debugging Open Graph Meta Tags (OG Tags) Like a Pro

Setting up and deploying tags is an audacious effort; you need to be sure they are working as expected and ready for sharing.

For this reason, use these tools:

  • Twitter Card Validator
  • Facebook Sharing Debugger
  • LinkedIn Post Inspector

The functionality is the same across each platform. Pull tags from the page and show how they look when shared.

If you have never come across these tools before, then take a glance at the attached image below, portraying what a Facebook sharing debugger looks like in action.

Auditing Open Graph Tags

So, you are past the setting up phase of tags, and now the site is up and running with hundreds of pages. Suddenly, you have stumbled across the question; Which of the website’s pages have Open Graph Tags?

If the situation calls for it, you can always use Ahrefs’ Site Audit tool to check pages in bulk.

Just execute a crawl, and scoot over to the social tags report to see all related issues to Open Graph and Twitter Card Tags.

The orange icons here represent warnings. Click on any one to see an explanation and advice on how to fix it.

Hit the “View affected URLs” button, and you’ll be able to see the issues affecting each URL along with relevant metrics.

Just a sidenote, pages that get an acreage of traffic are most likely to be shared.

Looking To Do Further Digging On Social Media Open Graph Meta Tags?

While most of what the stuff that you’ve been exposed to should cover the basics of a simple website, don’t keep yourself limited to the tips mentioned above.

A couple more tags will help you to flourish your business through social networks. If you’re seriously interested in taking it to the next level, the documentation does a great job at furnishing a list of all the available tags for you to use.

Our blog

Related blogs

Tools and strategies modern teams need to help their companies grow.