Html 在WhatsApp中共享时显示网站图标

标题可能听起来很模糊，但我希望我的网站图标在我分享时显示在WhatsApp中（如下面的示例）

本以为这样就足够了，但显然不行：

编辑

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

<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

？

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

建议使用大小小于300KB且最小尺寸为300 x 200像素的图像（JPG或PNG）（）

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

<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" />

---

希望这有帮助

我进行了广泛的搜索，并尝试了提供的每个选项

假设您试图按照@user9643348或任何类似的回答进行更改，我将继续告诉您为什么这对我来说是不够的

打开的图形标签位于在社交媒体上共享链接时看到的丰富预览的后面。因此，首先，你需要找出你的案例中出现了什么问题，并且有一个工具可以帮助你解决这个问题。现在没有必要被这个名字吓倒了。它相当容易使用

步骤1

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

您将立即看到应修复的警告（如果有）。但更重要的是，根据原始标记向下滚动到，我们构建了以下开放图属性“部分，并检查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 );

或者我推荐此功能（如下所示）：

现在您可能需要保存此文件，因为functions.php不需要编辑，并且您所做的更改将随着更新而丢失。您可以将说明添加到书签中

完成此操作后，再次运行debug/scrape，您将发现为您生成了预览图像（富预览）

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

希望这有帮助

---

NS

这就解释了所有的问题。现在检查一下，还有一个很好的用户友好工具，可以帮助您了解其他应用程序如何查看您的站点-

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