html - How to insert site preview image for Facebook AND WhatsApp simultaneously?

Question

I know how to use Open Graph meta tags in head of HTML. Example:

<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image:secure_url" content="https://sitename.com/img/tutorial.png"/>

But if a type of preview image is good for WhatsApp, it's not good for Facebook! So how should you set meta tags for different platforms at the same time? Thanks

Answer 1

You can specify two (or more) Open Graph images, the first, a rectangular image for FB and the second, a square image for WhatsApp.

<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image" content="https://sitename.com/img/tutorial_1200-600.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image" content="https://sitename.com/img/tutorial_400-400.png"/>
<meta property="og:image:width" content="400"/>
<meta property="og:image:height" content="400"/>

WhatsApp uses the last image.