如何在网页代码中设置WhatsApp分享的静态标题与OG图片

嘿，我完全懂你的困扰：当你分享https://www.facebook.com这类第三方域名链接时，WhatsApp会直接抓取目标页面的OG元数据，完全忽略你自己页面设置的<meta property="og:*">标签，这确实让人头疼。

问题的核心在于：WhatsApp分享时，会根据你提供的分享URL去爬取对应页面的内容——如果你分享的是Facebook的链接，它就会去爬Facebook的页面，自然用的是那边的标题、描述和图片，和你当前页面的标签没关系。

下面是最靠谱的解决方案：

方法：创建自定义中转页面 #

你需要在自己的域名下创建一个中转页面，这个页面设置你想要的自定义OG标签，然后自动跳转到目标外部链接。分享的时候，你分享的是这个中转页面的URL，这样WhatsApp就会抓取中转页的元数据，用户点击后会自动跳转到原链接。

中转页面代码示例 #

<!DOCTYPE html>
<html>
<head>
    <!-- 设置你自定义的OG元数据 -->
    <meta property="og:title" content="Testing" />
    <meta property="og:description" content="How to change the WhatsApp share content" />
    <meta property="og:image" content="https://你的域名/自定义图片路径.jpg" />
    <!-- 必须设置og:url为中转页的完整URL，让WhatsApp明确抓取这个页面的元数据 -->
    <meta property="og:url" content="https://你的域名/redirect-to-facebook.html" />
    
    <!-- 可选：设置Twitter卡片元数据，兼容其他平台 -->
    <meta name="twitter:title" content="Testing" />
    <meta name="twitter:description" content="How to change the WhatsApp share content" />
    <meta name="twitter:image" content="https://你的域名/自定义图片路径.jpg" />
    
    <script>
        // 页面加载后立即跳转到目标链接
        window.addEventListener('load', function() {
            window.location.href = "https://www.facebook.com";
        });
    </script>
</head>
<body>
    <!-- 可选：给用户显示跳转提示 -->
    <p>正在跳转至目标页面... 如果没反应，请<a href="https://www.facebook.com">点击这里</a></p>
</body>
</html>

关键注意事项 #

• OG标签必须准确：og:url一定要设置为中转页面的完整URL，不能是目标链接，否则WhatsApp还是会去爬目标页面。
• 图片规格：WhatsApp推荐的OG图片尺寸是1200x630px（宽高比约1.91:1），格式用JPG或PNG，大小尽量控制在1MB以内，确保能被WhatsApp正确抓取和显示。
• 缓存问题：测试时如果还是显示旧的内容，可能是WhatsApp缓存了之前的元数据。你可以尝试用不同的WhatsApp账号测试，或者清除WhatsApp的缓存（在手机设置里找到应用管理，清除缓存）。

这个方法是目前最可行的，因为WhatsApp的分享机制就是依赖目标URL的页面元数据，通过中转页我们可以把控制权握在自己手里。

内容的提问来源于stack exchange，提问作者kumaran jayam