在WhatsApp中共享时显示网站图标 [英] Show website icon when sharing in WhatsApp
问题描述
标题听起来可能含糊不清，但是我希望我共享它时，我的网站图标显示在WhatsApp中(如下例所示).
The title may sound vague, but I want my website icon to show up in WhatsApp when I share it (like the example below).
这足以满足要求，但显然不适用于这种方式:
Thought this would suffice, but apparently it doesn't work that way:
<link rel="shortcut icon" href="css/img/favicon/favicon.ico" type="image/x-icon"/>
编辑
快速阅读OpenGraph文档(及其他评论)后.我在脑海中添加了以下内容:
After fast reading OpenGraph doc (& other comments). I added the following within my head:
<meta name="robots" content="noindex, nofollow" />
...
<meta property="og:title" content="Website - Home" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://mywebsite.com/" />
<meta property="og:image" content="https://mywebsite.com/img/favicon/android-icon-192x192.png" />
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon"/>
它仍然没有显示出来，但是我不知道它是否需要时间"显示出来，还是像noindex, nofollow这样的东西?
It's still not showing up, but I don't know if it "needs time" to show up or is it something else like maybe the noindex, nofollow?
推荐答案
I searched extensively and tried every option that was provided here.
假设您试图按照@ user9643348或以上类似的答案进行更改，我将继续告诉您为什么这对我来说还不够.
Assuming that you attempted to make changes as per the answer above by @user9643348 or anything similar, I will move on to tell you why it wasn't sufficient for me.
打开的图形标记位于共享社交媒体上的链接时看到的丰富预览的后面.因此，首先，您需要弄清楚问题所在，并且有一个工具可以帮助您-
The open graph tags are behind the rich previews that you see while sharing links on social media. So, first of all you need to figure what is going wrong in your case and there's a tool to help you out - Facebook Sharing Debugger. Now there's no need to be intimidated by the name. It is fairly easy to use.
第1步
您要做的就是在提供的空间中提供您的网站网址 Facebook共享调试器，然后点击调试.
All you got to do is provide your website URL in the space provided Facebook Sharing Debugger and hit debug.
立即会显示警告消息(如果有的话)，应予以修复.但更重要的是，向下滚动到 基于原始标签，我们构建了以下Open Graph属性" 部分，并检查了 og:image 标签.最有可能的是，您会看到它没有显示所需图像的URL，而是指向某些 blank.jpg .
Immediately you will be shown warnings (if any) that should be fixed. But more importantly, scroll down to the "Based on the raw tags, we constructed the following Open Graph properties" section and check the og:image tag. Most likely, you will see that it isn't showing the URL to the image that you want and instead is pointing to say, some blank.jpg.
所以，即使您提供了指向特定图像的 og:image 标记，为什么还有一个 og:image 标记指向另一张图像?想?这可能是由于您正在使用的某些插件添加的开放图形标签所致.对我来说，反派是Jetpack插件.
So, why is there an og:image tag that points to a different image even though you have provided an og:image tag pointing to the specific image that you want? It might be due to the open graph tags added by some of the plugins that you are using. For me the villain was the Jetpack plugin.
第2步
要进行查找，请进一步向下滚动至底部，然后单击显示准确查看我们的抓取工具为您的URL所见"的链接，然后搜索og:image标签.您会发现，除了提供的标签外，还有另一个覆盖您的说明.
To find out, scroll down further to the bottom and click on the link that says "See exactly what our scraper sees for your URL" and search for the og:image tag. You will find that in addition to the tag that you provided, there is another one overriding your instruction.
第3步
找到一种方法来删除第二组打开的图形标签，这些标签会干扰您自己的设置或添加覆盖它们的功能.
Find a way to remove the second set of open graph tags that are interfering with your own settings or add a function to override them.
例如，将以下函数添加到您的functions.php文件中:
For example, add the function below to your functions.php file:
function jeherve_custom_image( $media, $post_id, $args ) {
if ( $media ) {
return $media;
} else {
$permalink = get_permalink( $post_id );
$url = apply_filters( 'jetpack_photon_url', 'YOUR_LOGO_IMG_URL' );
return array( array(
'type' => 'image',
'from' => 'custom_fallback',
'src' => esc_url( $url ),
'href' => $permalink,
) );
}
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );
或者我推荐此功能(如下):
Or I recommend this function (below):
function custom_jetpack_default_image() {
return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );
现在，您可能要保存此内容，因为不打算对functions.php进行编辑，并且您的更改将因更新而丢失.您可以在此处添加书签.
Now you might want to save this since functions.php is not meant to be edited and your changes will be lost with an update. You can bookmark the instructions here.
完成此操作后，再次运行debug/scrap，您会发现为您生成了预览图像(丰富的预览).
Once this is done, run debug/ scrape again and you will find that preview image (rich preview) is generated for you.
现在，在社交媒体上分享内容时，请享受丰富的预览. 它应该显示为- 丰富的预览示例(很抱歉，图片链接-我尚无信誉将图像嵌入答案中.
Now, enjoy your rich preview as you share on social media. It should appear something like - Rich Preview Sample (Sorry for the image link - I do not have the reputation yet to embed an image in to the answer.
希望这会有所帮助.
NS
这篇关于在WhatsApp中共享时显示网站图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
