How to add open graph tags and twitter cards for all social media with proper OG image

code to add open graph tags and twitter cards

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="" />
  <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

Previous Post Next Post