When sharing your website on social media, my website is not showing properly on social media. Or My website is not showing the preview. This is because you need some meta tags. These meta tags are known as open graph property. In last two article I have shown how to add Open Graph Tags and Twitter Card Tags to blogger. So, if you didn’t see them click the link above and view them. Without adding meta tags you will not be able to generate preview.
Or you can lead according to this tutorial and generate your own meta tags from provided link. But in this case a collision may arise. Because the open graph meta tags will be generated are for a specific webpages. You can use them in wordpress as well as other websites. But these tags are somehow different for blogger. So, if you are blogger user then view the linked posts.
What is Open Graph Meta Tags?
Open Graph is a protocol introduced by Facebook in 2010 to allows deeper integration between Facebook and any web page. It allows any web page to have the same functionality as any other object on Facebook. You could control how your website is being displayed on Facebook. Now, other social media sites such as Twitter, LinkedIn are recognizing Open Graph meta tags. So, if you want to show your site properly to these social media you should use these meta tags.
How to Add Open Graph Meta Tags?
First of all you need to collect meta tags. You can write these by hand. Or you can use a free meta tag generator. If you are on blogger you will find meta tags for your blog from the links above. An official open graph meta tag generator free tool is OpenGraph.xyz which is lead by facebook.
Copy and paste you webpage link to the link box in OpenGraph.xyz to generate meta tags for your website. Then copy the meta tags and paste them in <head> element.
Can I Add Meta Tags in Body Element?
Meta tags in body makes a syntax error. Some browsers may take it simply and show results for other content but some browsers may crash your whole webpage. So, never try to use meta tags in body tag. Meta tags are only allowed in the head element only.
What is Recommended Image Size for Open Graph?
To show a higher resolution preview you should use a high resolution image as your featured image so that you can have a clear sense in social media. The recommended image resolution is more than 1080 pixels. in width.But a larger image take much time to load. So, if your image is unnecessarily larger then your website may be slower. Which will have an impact on your site SEO. So, use images from 1080 pixels to 1440 pixels in wide.Facebook recommends to use all image in 1:1 ratio. That means the height and width of the image will be same. But other social media such as LinkedIn shows rectangular preview. So, they don’t need to be your image in square size.
My Website isn’t Showing Properly Yet, What to Do?
Sometimes your website preview may not work properly after adding those meta tags. That is not an issue. Maybe that happens because you have shared the link before. And some cache are hold by the website you are sharing on. Try to removing the cache and retry. If not working yet you have to wait. It can take more than 1 days too. You can check your website link preview in OpenGraph.xyz or in using the tools below.
