Provide an image for WhatsApp link sharing

2019-01-03 07:24发布

站内问答 / 移动开发
1111 9 5

How can we include an image in our website to display in WhatsApp when we share a link like this?

enter image description here

9条回答
我欲成王，谁敢阻挡
2楼-- · 2019-01-03 08:20

I've been trying to do this myself as well and I've added all the right meta tags :

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

but yet could not see the image when sharing my link within WhatsApp.

I've discovered that WhatsApp also does some kind of caching of the image and the url info, dont know for how long.

To check that I've inserted the correct tags, I just tried different url, for example : http://domain.com instead of http://www.domain.com .

hopefully this helps to someone else.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
3楼-- · 2019-01-03 08:23

Had same issue, added og:image and it didn't work while the url end with slash sign (/). After removing the slash from the URL - the image get loaded.. Interesting bug...

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
4楼-- · 2019-01-03 08:23

After working in a bugg, found out that in IOS, elements in HEAD might stop the WhatsApp search of the og:image /og:description / name=description. So try first to put them on top of everything else.

This doesn't work

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

This work:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)