Social media is a huge field of opportunities for online stores to present their brand to a wider audience. However, have you noticed that Facebook and other platforms don't always pull out relevant content from the links you share?
Social media posts might look inconsistent and even weird, which not only discourages people from clicking but doesn't even catch their attention at all.
So, sharing your products and other website pages on social media benefits you only in one case — you make your posts stand out. And for that purpose, you must explore open graph meta tags.
In this guide, you'll learn everything you need to make your social media posts more clickable and shared with open graph tags.
Post Contents [hide]
What are Open Graph Meta Tags and What Do They Do?
Open Graph Meta Tags also known as social media tags are small snippets of code that are part of Facebook's Open Graph protocol also recognized by Twitter and LinkedIn. They define how your website URLs are displayed on social media and other messengers.
OG tags are usually indicated by the og: meta property found in the <head> section of a webpage.
First question — can you do without them?
Sure.
Facebook will pull your website content from the data available on the page. However, most likely it won't be what you expect it to be.
Open graph meta tags make things much better. Just have a look at this example.
|
|
| Facebook post without open graph tags | Facebook post with open graph tags |
Which post would you rather click when it pops up in your feed?
OG tags make your social media posts more attractive, clickable, and shared. This leads to more website traffic and correspondingly improves brand visibility.
Besides, default descriptions and titles are not as good for social media as they are for search engines. So you have to be creative.
Now, let's cover the most essential open graph tags you need.
Critical Open Graph Tags: Definition
Facebook defines up to 17 open graph tags, but, in fact, you need just a few to create attention-grabbing posts.
There are the following:
og:title — it is a basic tag that defines the title of the page.
og:url — defines the permanent canonical URL of the shared page without parameters.
og:description — states the description of the shared page that is different from og:title.
og:image — the URL of the image associated with the shared page.
This one's especially important since it is the main attention-grabbing element in your posts. So, make sure to follow the Facebook requirements for images to set up og:image height and og:image width additionally.
Ready to apply them?
How to Add Open Graph Meta Tags to Magento Website?
As we've already specified, open graph tags are placed within a <head> tag at the top of the page. So, you have to add them to your website pages manually.
This does include some technical experience. Otherwise, you can just ask your developer to add open graph tags.
Anyway, it is a tedious and time-consuming process since you'll have to call out for developer every time you need to update open graph tags for any of the pages.
As an alternative, you can integrate the Magento 2 Facebook Open Graph Tags extension and manage OG tags easily from the admin.
You can add OG Title, OG Description, and OG Image for the most shared pages like products and blog posts.
For the rest of the pages, you can just set up default OG values.
Yes, it is as simple as that.
But still, the open graph meta tags management doesn't end here.
Validating Open Graph Tags
Once you add open graph tags to your website pages, you have to make sure they are pulled out correctly.
In other words, you have to validate OG tags to see how they are displayed when shared on social media.
Since open graph tags are Facebook's native feature, you can start with Facebook Sharing Debugger. However, Twitter and LinkedIn have their validators too.
Facebook Sharing Debugger will scrape the data from your website to tell you what the post will look like on social media.
In case the data is not correct, clean the Facebook cache and see if the results are updated.
Sometimes, it can even be that the title and description are correct, but the image doesn't change. It could be because of the redirect chain, missing meta property, or cache. You need to explore the reasons why sharing links doesn't show images on Facebook to eliminate the issues.
Open Graph Tags Best Practices
If you validate open graph tags and the data is scraped correctly, you might still not be satisfied with the result: it is either a distorted image or cut-off title and description.
Can you relate?
It might be because you don't keep up with the OG tags best practices to ensure the content is both accurate and attractive.
So, here's a quick overview of the things to look out for when you add open graph meta tags to your website:
- Use only canonical URLs for og:url property.
- Keep OG title short (without a brand name) with 60 characters for desktop and 40 for mobile.
- Keep the description within 2-4 sentences and use meta description if it makes sense.
- Create custom OG images for shareable pages and use logo or brand image for the other pages.
- Use images of 1200x630 to retain quality through all devices.
And the final advice you should always keep in mind — put yourself in your customers' shoes. You can use the best practices but still miss out on traffic and social media coverage.
Think about what drives your attention when you're scrolling through the feed. Once you find what works best, you'll be able to create outstanding posts with the help of OG tags.
