在 WhatsApp 中分享时显示网站图标

Question

标题听起来可能含糊不清，但我希望我的网站图标在分享时显示在 WhatsApp 中（如下例所示）。

以为这样就够了，但显然不是这样：

<link rel="shortcut icon" href="css/img/favicon/favicon.ico" type="image/x-icon"/>

编辑

在快速阅读 OpenGraph 文档（和其他 cmets）之后。我在脑海中添加了以下内容：

<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 这样的其他东西？

Answer 1

您应该在重新启动 WhatsApp 后看到该图像。如果这不起作用，您应该检查图像属性：它们应该是：

建议尺寸小于 300KB 且最小尺寸为 300 x 200 像素的图像（JPG 或 PNG）(from here)

如果它不起作用，您应该检查您的元标记是否正确，如下所示：

<meta property="og:site_name" content="Site">
<meta property="og:title" content="Site" />
<meta property="og:description" content="Site" />
<meta property="og:image" itemprop="image" content="/images/icon.png">
<meta property="og:type" content="website" />

希望这会有所帮助！

Answer 2

我广泛搜索并尝试了here 提供的每个选项。

假设您尝试按照上述@user9643348 或类似的答案进行更改，我将继续告诉您为什么这对我来说还不够。

打开的图形标签位于您在社交媒体上分享链接时看到的丰富的预览。所以，首先你需要弄清楚你的情况出了什么问题，并且有一个工具可以帮助你 - Facebook Sharing Debugger。现在没有必要被这个名字吓倒了。它相当容易使用。

第 1 步

您所要做的就是在Facebook Sharing Debugger 提供的空间中提供您的网站 URL，然后点击调试。

您将立即看到应修复的警告（如果有）。但更重要的是，向下滚动到 “基于原始标签，我们构建了以下 Open Graph 属性” 部分并检查 og:image 标签。很可能，您会看到它没有显示您想要的图像的 URL，而是指向说一些 blank.jpg。

那么，为什么有一个 og:image 标记指向不同的图像，即使您提供了一个 og:image 标记指向您的特定图像想？这可能是由于您使用的某些插件添加了开放图形标签。对我来说，反派是 Jetpack 插件。

第 2 步

要找到答案，请进一步向下滚动到底部，然后点击显示“查看我们的抓取工具对您的 URL 所看到的确切内容”的链接，然后搜索 og:image 标记。您会发现，除了您提供的标签之外，还有另一个标签覆盖了您的指令。

第 3 步

找到一种方法来删除第二组干扰您自己的设置的开放图形标签，或者添加一个函数来覆盖它们。

例如，将以下函数添加到您的 functions.php 文件中：

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 );

或者我推荐这个功能（下）：

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

现在您可能想要保存它，因为 functions.php 不应该被编辑，并且您的更改将随着更新而丢失。您可以收藏说明here。

完成后，再次运行debug/scrape，你会发现为你生成了预览图（丰富的预览）。

现在，在您在社交媒体上分享时享受丰富的预览。它应该看起来像 - Rich Preview Sample（对不起，图片链接 - 我还没有将图片嵌入到答案中的声誉。

希望这会有所帮助。

NS