What square measure Open Graph meta tags?
Open Graph meta tags square measure snippets of code that management however URLs square measure displayed once shared on social media.
They’re a part of Facebook’s Open Graph protocol and also are employed by alternative social media sites, as well as LinkedIn and Twitter (if Twitter Cards square measure absent).
You can notice them within the section of a webpage. Any tags with og: before a property name square measure Open Graph tags.
This is how tags look on Facebook :
Why square measure Open Graph tags important?
People square measure arguably a lot of probably to check and click on shared content with optimized OG tags, which implies a lot of social media traffic to your web site.
There square measure 3 reasons for this:
They make content a lot of conspicuous in social media feeds.
They tell folks what the content is concerning at a look.
They help Facebook perceive what the content is concerning, which might facilitate increase your complete visibility through search.
Let’s bit a lot of thereon last purpose, because it tends to induce unnoted.
It brings up well-liked articles that individuals have already shared on Facebook. every title and image comes from Open Graph tags.
Even if there are not any articles came for the search, Facebook still shows matching content shared in teams or pages you follow, or by friends.
SIDENOTE. Open Graph tags conjointly facilitate produce a snip once somebody sends you a link through direct messages exploitation apps that support the Open Graph protocol—naturally Facebook’s courier and WhatsApp, however conjointly i-Message and Slack.
Which Open Graph tags do you have to use?
Facebook lists seventeen OG tags in their official documentation, and dozens of object sorts. We’re not about to discuss all of those. solely four area unit needed for Facebook to know the fundamentals of your page, and there area unit some of others that typically facilitate.
Let’s bear these.
The title of your page.
<meta property=”og:title” content=”Open Graph Meta Tags: Everything You Need to Know” />
- Add it to all or any “shareable” pages.
- Focus on accuracy, value, and click-ability.
- Keep it short to forestall overflow. There’s no official steering on this, however forty characters for mobile and sixty for desktop is roughly the sweet spot.
- Use the raw title. Don’t embrace disapproval (e.g., your website name).
The URL of the content.
<meta property=”og:url” content=”https://ahrefs.com/blog/open-graph-meta-tags/” />
- Use the canonical URL. It helps consolidate all connected information, like likes, across all the duplicate URLs announce.
The URL of an image for the social snippet.
Please note that this is perhaps the most essential Open Graph tag because it aquires the most essential social feed real estate.
<meta property=”og:image” content=”https://ahrefs.com/blog/wp-content/uploads/2020/01/fb-open-graph-1.jpg” />
- Use custom pictures for “shareable” pages (e.g., homepage, articles, etc.)
- Use your brand or the other branded image for the remainder of your pages.
- Use pictures with a one.91:1 magnitude relation and minimum suggested dimensions of 1200×630 for optimum clarity across all devices.
The type of object you’re sharing. (e.g., article, website, etc.)
<meta property=”og:type” content=”article” />
- Use article for articles and web site for the remainder of your pages.
- Describe object varieties additional wherever acceptable (optional).
A brief description of the content.
<meta property=”og:description” content=”Learn about 13 features that set Ahrefs apart from the c
- Complement the title to create the snip as appealing and click-worthy as doable.
- Copy your meta description here if it is smart.
- Keep it short and sweet. Facebook recommends 2–4 sentences, however that usually truncates.
Defines the content language.
<meta property=”og:locale” content=”en_GB” />
- Use just for content not written in American language . Facebook assumes content while not this tag is written during this language.
How to started Open Graph tags
Choose your web site platform from the list below, or follow these manual directions.
Setting Open Graph tags manually
If you’re snug excavation into web site code, adding OG tags is as simple as pasting them into the section of your online page.
Consider using a mark-up generator tool like Mega Tags or internet Code Tools to assist scale back syntax errors.