Are you questioning make your content material extra clickable, shareable, and noticeable on social media?

Open Graph meta tags are the answer.

Here’s how one in every of our posts seems when shared on Facebook with Open Graph meta tags:

And right here’s the way it seems with out:

Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

In this information, you’ll study:

What are Open Graph meta tags?

Open Graph meta tags are snippets of code that management how URLs are displayed when shared on social media. 

They’re a part of Facebook’s Open Graph protocol and are additionally utilized by different social media websites, together with LinkedIn and Twitter (if Twitter Cards are absent).

You can discover them within the <head> part of a webpage. Any tags with og: earlier than a property identify are Open Graph tags.

Here are some examples from our information to turning into an search engine marketing knowledgeable:

<meta property="og:title" content material="How to Become an SEO Expert (8 Steps)" />
<meta property="og:description" content material="Get from SEO newbie to SEO pro in 8 simple steps." />
<meta property="og:image" content material="https://ahrefs.com/blog/wp-content/uploads/2019/12/fb-how-to-become-an-seo-expert.png" />

This is how these tags look on Facebook:

1579069151 493 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

Why are Open Graph tags vital?

People are arguably extra prone to see and click on shared content material with optimized OG tags, which implies extra social media visitors to your web site.

There are three causes for this:

  1. They make content material extra eye-catching in social media feeds.
  2. They inform folks what the content material is about at a look.
  3. They assist Facebook perceive what the content material is about, which may help enhance your model visibility by means of search.

Let’s contact extra on that final level, because it tends to get missed.

Here are the outcomes of a Facebook search for “alternative search engines”:

1579069152 815 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

It brings up in style articles that individuals have already shared on Facebook. Each title and picture comes from Open Graph tags.

Even if there aren’t any articles returned for the search, Facebook nonetheless exhibits matching content material shared in teams or pages you observe, or by buddies.

Sidenote.

 Open Graph tags additionally assist create a snippet when somebody sends you a hyperlink by means of direct messages utilizing apps that assist the Open Graph protocol—naturally Facebook’s Messenger and WhatsApp, but in addition iMessage and Slack.

Which Open Graph tags do you have to use?

Facebook lists 17 OG tags of their official documentation, plus dozens of object sorts. We’re not going to debate all of those. Only 4 are required for Facebook to grasp the fundamentals of your page, and there are a few others that typically assist.

Let’s undergo these.

og:title

The title of your page.

Syntax

<meta property="og:title" content material="Open Graph Meta Tags: Everything You Need to Know" />

Best practices

  • Add it to all “shareable” pages.
  • Focus on accuracy, worth, and clickability.
  • Keep it quick to stop overflow. There’s no official steering on this, however 40 characters for cellular and 60 for desktop is roughly the candy spot.
  • Use the uncooked title. Don’t embody branding (e.g., your web site identify).

og:url

The URL of the content material.

Syntax

<meta property="og:url" content material="https://ahrefs.com/blog/open-graph-meta-tags/" />

Best practices

  • Use the canonical URL. It helps consolidate all related information, equivalent to likes, throughout all of the duplicate URLs posted.

og:picture

The URL of a picture for the social snippet.

Note that that is maybe probably the most important Open Graph tag as a result of it occupies probably the most social feed actual property.

Syntax

<meta property="og:image" content material="https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />

Best practices

  • Use customized photos for “shareable” pages (e.g., homepage, articles, and so forth.)
  • Use your brand or another branded picture for the remainder of your pages.
  • Use photos with a 1.91:1 ratio and minimum recommended dimensions of 1200×630 for optimum readability throughout all gadgets.

og:sort

The sort of object you’re sharing. (e.g., article, web site, and so forth.)

Syntax

<meta property="og:type" content material="article" />

Best practices

  • Use article for articles and website for the remainder of your pages.
  • Describe object sorts further the place applicable (optionally available).

og:description

A short description of the content material.

Syntax

<meta property="og:description" content material="Learn about 13 features that set Marketing Media Wizard apart from the competition." />

Best practices

  • Complement the title to make the snippet as interesting and click-worthy as potential.
  • Copy your meta description right here if it is sensible.
  • Keep it quick and candy. Facebook recommends 2–four sentences, however that usually truncates.

og:locale

Defines the content material language.

Syntax

<meta property="og:locale" content material="en_GB" />

Best practices

  • Use just for content material not written in American English (en_US). Facebook assumes content material with out this tag is written on this language.

How to arrange Open Graph tags

Choose your web site platform from the record under, or observe these guide directions.

Setting Open Graph tags in WordPress

Install Yoast’s SEO plugin. Go to the editor for a submit or page, then scroll down. You ought to see a Yoast search engine marketing field. Hit the “Social” tab, then “Facebook.”

Fill this in to set the og:title, og:description, and og:picture tags.

1579069152 644 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

There’s no must set og:url manually. Yoast does this for you. It additionally provides different helpful OG tags like picture dimensions.

Sidenote.

 If you don’t arrange an OG picture and the submit has a featured picture, Yoast will use that by default. It will even add different Open Graph and Twitter Card tags that will be only a waste of time organising manually—web site identify, picture dimensions, and so forth. 

It’s additionally greatest follow to set a sitewide og:picture tag. This is proven when no customized tag is ready for a shared URL.

You’ll discover the choice to do that in Yoast’s settings.

Yoast > Social > Facebook

Make certain the toggle is ready to “Enabled,” then add an applicable picture. Brand photos work greatest right here.

1579069153 559 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

Setting Open Graph tags in Shopify

Most Shopify themes pull OG tags from variables equivalent to your title tag for og:title and featured picture for og:picture.

The solely tag you’ll be able to customise by means of Shopify’s UI is a sitewide og:picture.

Go to Online Store > Themes > Customize > Theme settings > Customize > Social media > choose an applicable picture.

If you need to see the way it’s arrange, go to Online Store > Themes > Actions > Edit code > Snippets > social-meta-tags.liquid within the scrollbar. You can edit the code if it is advisable to.

Setting Open Graph tags in Wix

Wix pulls widespread OG tags from different variables, just like the page’s meta title and outline.

You can customise the OG title, description, and picture for every page within the “Social share” settings.

You may set a customized sitewide OG picture. Go to Settings > Social Share on the primary menu.

Overall, Wix makes including OG tags simple, as there’s no must hardcode something.

Setting Open Graph tags in Squarespace

Squarespace makes use of the page title and meta description for og:title and og:description.

You can set a customized og:picture on a page by page foundation.

Just go to Page Settings > Social Image > Upload.

If it is advisable to add different OG tags and customise the default settings, go to Page Settings > Advanced > Page Header Code Injection. Read the next part on including the tags manually and copy-paste the code there.

Setting Open Graph tags manually

If you’re comfy digging into web site code, including OG tags is as simple as pasting them into the <head> part of your net page.

Consider utilizing a markup generator software like Mega Tags or Web Code Tools to assist scale back syntax errors.

How to check and debug Open Graph tags

Now that you just’ve deployed all of the tags, it is advisable to be sure they’re working as anticipated and are prepared for sharing.

For that, use these instruments:

They all work the identical. They pull tags from the page and present the way it seems when shared.

Testing additionally helps forestall issues the place OG tags aren’t displayed or pulled appropriately.

TIP

Use og:picture:width and og:picture:peak tags to make sure an ideal snippet the primary time somebody shares it. In WordPress, Yoast provides them mechanically. This is their syntax:

<meta property="og:image:width" content material="1200" />
<meta property="og:image:height" content material="630" />

Here’s what the FB Sharing Debugger seems like in motion:

1579069153 62 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

The most vital factor is how the snippet seems. If you miss or incorrectly arrange much less vital tags, it’s not an enormous deal. You can ignore warnings about unimportant tags like fb:app_id

If one thing seems amiss and also you replace the tags, use the “Scrape Again” button to tug recent information. If you don’t see the change after the crawl, use the Batch Invalidator to clear the cache and repeat.

Repeat this course of with the Twitter Card Validator and LinkedIn Post Inspector to make sure that your content material seems as supposed throughout all networks.

Sidenote.

 I’ve discovered that solely Twitterbot follows robots.txt directives. Both Facebook and LinkedIn crawlers can scrape and present the content material even should you disallow crawling. This was shocking, however even only for the sake of Twitter, make it possible for all of the URLs you share may be crawled.

If you have already got a web site with a whole bunch of pages and aren’t certain which have already got Open Graph tags, you should utilize a software like Marketing Media Wizard’ Site Audit to verify your pages in bulk.

Just run a crawl, then go to the Social tags report back to see all points associated to Open Graph and Twitter Card tags.

1579069153 53 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

Click on a flagged warning to see the reason and recommendation on repair it.

1579069154 53 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

Click “View affected URLs,” and also you’ll see the problem(s) affecting every URL together with related metrics. One of these metrics is natural visitors, which you should utilize to kind the desk and prioritize URLs to repair. 

1579069154 12 Open Graph Meta Tags Everything You Need to Know - Open Graph Meta Tags: Everything You Need to Know

Remember, pages that get plenty of visitors are almost certainly to be shared.

Final ideas

OG tags are vital in your social media presence, however there’s no want to spend so much of time on them.

Focus on getting the fundamentals down. Add tags, verify social media previews, and debug.

Did we miss something? Leave a remark or ping me on Twitter.