Next.js应用OGP配置正常但LINE/WhatsApp无法显示URL预览求助

我有一个使用OGP设置生成社交平台URL预览的Next.js应用，该设置在Facebook调试工具及其他平台可正常工作，但在LINE Messenger和WhatsApp中完全无法显示预览。我已按照LINE开发者文档检查OGP设置，代码示例如下：

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
        <meta property="og:title" content="My Next.js App" />
        <meta
          property="og:description"
          content="This is a sample app for OGP settings"
        />
        <meta property="og:image" content="https://example.com/my-image.jpg" />
        <meta property="og:url" content="https://example.com/" />
      </Head>
      <h1>My Next.js App</h1>
      <p>This is a sample app for OGP settings</p>
    </div>
  );
}

我已检查页面源码，确认meta标签已存在。应用部署在AWS Amplify上，经Facebook调试工具测试可正常显示预览，但在LINE Messenger和WhatsApp中分享同一URL时无任何预览。我已尝试清除两款应用的缓存后重新分享，问题仍未解决。请问该问题的原因是什么？如何修复？

1. OGP图片不符合平台要求 #

LINE和WhatsApp对OGP图片有严格的格式、尺寸和大小限制：

• 尺寸：建议至少1200x630像素（1.91:1比例），过小的图片会被忽略；
• 格式：仅支持JPG、PNG，不支持WebP等非通用格式；
• 大小：控制在5MB以内，超出上限的图片无法被加载。

修复：替换符合要求的图片，确保图片URL可直接访问（无防盗链、无登录验证）。

2. 缺少og:type标签 #

LINE和WhatsApp要求明确指定内容类型，缺失og:type标签会导致爬虫无法识别页面属性：

<meta property="og:type" content="website" />

3. 客户端渲染导致爬虫无法抓取元数据 #

Next.js纯客户端渲染（CSR）的页面，LINE/WhatsApp的爬虫不会等待JS加载完成就抓取页面，导致无法读取到OGP标签。

修复：

• 改用静态生成（SSG）或服务器端渲染（SSR），确保服务端直接输出包含OGP标签的完整HTML；
• 若使用Next.js 13+ App Router，通过metadata API定义OGP，确保元数据静态输出：

export const metadata = {
  title: "My Next.js App",
  openGraph: {
    title: "My Next.js App",
    description: "This is a sample app for OGP settings",
    url: "https://example.com/",
    images: [
      {
        url: "https://example.com/my-image.jpg",
        width: 1200,
        height: 630,
        alt: "My Next.js App Preview",
      },
    ],
    type: "website",
  },
};

4. AWS Amplify缓存/CDN配置问题 #

Amplify的CDN可能缓存了无OGP标签的旧页面，或爬虫请求未获取到最新内容。

修复：

• 在Amplify控制台手动清除CDN缓存；
• 配置Cache-Control响应头，比如max-age=3600, stale-while-revalidate=86400，平衡缓存时效性与爬虫获取最新内容的需求。

5. 域名/SSL问题 #

LINE和WhatsApp的爬虫仅抓取HTTPS协议的URL，且要求SSL证书有效（无过期、无信任问题）。

修复：

• 确认域名SSL证书状态正常；
• 确保所有OGP资源（包括图片）都使用HTTPS链接。

6. 平台服务器端缓存未更新 #

即使清除了本地APP缓存，LINE/WhatsApp的服务器可能仍保留旧的页面缓存。

修复：

• 给URL添加无意义的查询参数（如https://example.com/?v=1），测试新URL是否能正常显示预览；
• 使用平台官方的缓存刷新工具（若有）强制更新爬虫缓存。

内容的提问来源于stack exchange，提问作者Md. Zayed Hassan