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:
In this information, you’ll study:
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:
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:
- They make content material extra eye-catching in social media feeds.
- They inform folks what the content material is about at a look.
- 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”:
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.
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.
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.
The title of your page.
<meta property="og:title" content material="Open Graph Meta Tags: Everything You Need to Know" />
- 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).
The URL of the content material.
<meta property="og:url" content material="https://ahrefs.com/blog/open-graph-meta-tags/" />
- Use the canonical URL. It helps consolidate all related information, equivalent to likes, throughout all of the duplicate URLs posted.
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.
<meta property="og:image" content material="https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg" />
- 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.
The sort of object you’re sharing. (e.g., article, web site, and so forth.)
<meta property="og:type" content material="article" />
- Use article for articles and website for the remainder of your pages.
- Describe object sorts further the place applicable (optionally available).
A short description of the content material.
<meta property="og:description" content material="Learn about 13 features that set Marketing Media Wizard apart from the competition." />
- 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.
Defines the content material language.
<meta property="og:locale" content material="en_GB" />
- 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.
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
There’s no must set
og:url manually. Yoast does this for you. It additionally provides different helpful OG tags like picture dimensions.
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.
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
The solely tag you’ll be able to customise by means of Shopify’s UI is a sitewide
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
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.
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.
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:
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
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.
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.
Click on a flagged warning to see the reason and recommendation on repair it.
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.
Remember, pages that get plenty of visitors are almost certainly to be shared.
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.