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

Posted 2023-02-18

【中文标题】在 WhatsApp 中分享时显示网站图标

【英文标题】：Show website icon when sharing in WhatsApp

【发布时间】：2018-04-30 02:03:08

【问题描述】：

标题听起来可能含糊不清，但我希望我的网站图标在分享时显示在 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 这样的其他东西？

【问题讨论】：

***.com/questions/19778620/…

这解释了所有medium.com/@richardoosterhof/…

现在检查iframely.com/debug

【参考方案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" />

希望这会有所帮助！

【参考方案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

【讨论】：

另外，还有这个用户友好的工具可以帮助您了解其他应用程序如何查看您的网站 - debug.iframely.com