Perfect Social Preview with Custom Open Graph Meta Tags
Make your content more eye-catching in social media feeds and drive more traffic to your site with our easy custom open graph meta tags generator tool.
What are Opengraph Meta Tags?
Open graph meta tags are the snippets of code that has the details such as title, description, and image. This is the same as adding the metadata for search engines.
The OG tags enable any webpage to share rich media content on social media platforms. They are a part of the Open Graph protocol, created by Facebook. There are 3 OG tags that you should have for every page: og:title, og:image, og:description
. You can add these to the <head>
section of your webpage.
Below you will see an example of how the URL of a webpage looks with and without OG tags.
Why do I need Open graph tags?
With the above image, you can find out how social platforms perceive your webpage. People are more likely to notice and click on the shared content with optimized OG tags. This means more social media traffic on your website and more chances of it getting shared.
Apart from making it attractive for people to click on it. They help people as well as crawlers to understand what your content is about. They can also help increase your brand visibility through searchs on Facebook.
Facebook shows the matching content shared in groups or pages you follow, or by friends. It crawls through the opengraph tags and shows them to the people, even if there are no articles founds on search. This maximizes your brand visibility and thus increases click through rates, traffic and engagement.
Why should I preview the Open graph tags before sharing?
Before sharing your webpage with your audience it's important to make sure that it has been optimized for the social media platforms. Our Opengraphify tool can help you to do that.
You can enter the URL to preview and check. Doing this can save you time and effort in long run. It also increases your chances of gettings more engagement and shares on social media.
There are chances when your webpage can look different from the preview here. This could be because it has been shared before.
You can fix this by re-scraping your webpage using any of the official Open Graph Debugger tool below:
Sometimes the tags are cached and may not reflect the latest changes even after crawling, You can clear the cache by using the Batch Invalidator.
How to generate Open graph meta tags?
The steps are similar to what we did in the preview section above. Once you are in the preview and generator page. You can fill in the necessary details in the Edit section and in realtime it will generate the opengraph meta tags for you.
It will also show you the preview of your webpage in each of the social media platforms such as, Facebook, Whatsapp, Linkedin, Quora, Twitter and Discord. You can let us know in the Feedback page if you want us to add any social platform previews or have any suggestions. Your inputs are valuable to us.
Once you have generated the meta code, you can copy and add it manually in the <head>
section of your webpage or follow the steps in the article How to set up Open graph meta tags to set up in your website platform.