How to add open graph tags and twitter cards for all social media with proper OG image
What is open graph tags?
Open graph tags was developed by Facebook to share rich media across social
media platforms. We can use image, title, description of the page to
describe more details about the page in the form of meta data. All
these meta data are used to show rich preview to the users.
What is twitter cards?
Twitter cards also use the open graph technology but they made some changes
for their platform called twitter social media (X).
Why OG image is not working in WhatsApp?
OG image is not working in WhatsApp is due to the size of the image.
You need to use the correct aspect ratio for all social media platform
including WhatsApp. The code given below will work properly in all
social media platforms and will show the OG image correctly in all
platforms.
Read the changes need to do section which has the details about the aspect
ratio of the og image.
Working code for og tags and twitter cards for your website
<!-- open graph tags -->
<meta property="og:type" content="website" />
<meta property="og:site_name" content="your website name" />
<meta property="og:url"
content="https://www.yoururl.com" />
<meta property="og:title" content="your website title"
/>
<meta property="og:image" content="image url"
/>
<meta property="og:description" content="your description" />
<!-- twitter cards -->
<meta content="summary" name="twitter:card" />
<meta content="your website title"
name="twitter:title" />
<meta content="your description"
name="twitter:description" />
<meta content="image url" name="twitter:image"
/>
<!-- meta description -->
<meta content="your description" name="description"
/>
Changes need to do for your code
The above code contains both open graph tags and twitter cards.
Copy the above code and paste in your head. You need to change the highlighted areas with your own things like your
website name, your own image URL like that.
For the og:image or twitter:image you need to use the image with the
aspect ratio of
16:9 i.e 1920x1080 pixels or 1280x720 pixels.
This is the key point for og image to show in all social media platforms
including WhatsApp, LinkedIn, Facebook, Twitter (X). Most people
will not know this key point. So make sure you have the 16:9 aspect
ratio for your og:image and twitter:image.
Now close your WhatsApp and remove cache and try your website URL,
it will show your image perfectly in WhatsApp and also your image
will be shown in high quality in all social media platforms.
You can also try online tools for image preview of og tags and twitter
cards. If you are already using the meta description means you can remove the last line meta description from the above code.
If you are retrying this again means then you need to use new image URL. Because Facebook crawler will update the image only when the image URL is changed. So if you are retrying means use new image URL then everything works fine.
Happy coding!!!
Post a Comment