Next.js 13自定义OG标记问题：社交分享未显示预期内容

我用Next.js 13搭建网站，想设置自定义标记，让用户在WhatsApp等社交平台分享时显示预期内容。已经在layout.js里加了OG元标签，但没达到预期效果。

当前layout.js里的OG标签代码：

<meta property="og:type" content="website" />
<meta property="og:title" content="Kandle | Making crypto fun again" />
<meta
  property="og:description"
  content="We are Kandle. Play fantasy crypto win daily rewards"
/>
<meta
  property="og:image"
  content="http://kandle.xyz/images/kandle_homepage_og.png"
/>
<meta property="og:url" content="https://kandle.xyz" />
<meta property="og:image:height" content="700" />
<meta property="og:image:width" content="467" />

当前分享效果：

期望分享效果：

1. 换成Next.js 13官方的Metadata API定义元数据
   在App Router模式下，直接在layout.js里通过export const metadata定义元数据，比手动写<meta>标签更稳妥，避免框架渲染顺序导致的兼容问题：

export const metadata = {
  title: "Kandle | Making crypto fun again",
  description: "We are Kandle. Play fantasy crypto win daily rewards",
  openGraph: {
    type: "website",
    url: "https://kandle.xyz",
    title: "Kandle | Making crypto fun again",
    description: "We are Kandle. Play fantasy crypto win daily rewards",
    images: [
      {
        url: "https://kandle.xyz/images/kandle_homepage_og.png",
        width: 1200,
        height: 630,
        alt: "Kandle | Making crypto fun again"
      }
    ]
  },
  twitter: {
    card: "summary_large_image",
    title: "Kandle | Making crypto fun again",
    description: "We are Kandle. Play fantasy crypto win daily rewards",
    images: ["https://kandle.xyz/images/kandle_homepage_og.png"]
  }
};

2. 修复OG图片的协议
   把图片链接的http换成https，WhatsApp会拦截非HTTPS的资源，导致图片加载失败。

3. 调整OG图片尺寸
   WhatsApp推荐OG图片用1.91:1的比例（比如1200×630像素），你当前的700×467比例不符合平台偏好，容易显示异常。修改图片尺寸为平台推荐规格，同步更新元数据里的宽高值。

4. 强制刷新平台缓存
   WhatsApp会缓存分享内容，就算改了标签，旧缓存可能还在生效。可以在分享链接末尾加随机参数，比如https://kandle.xyz?v=1，强制平台重新抓取内容。

5. 验证标签有效性
   直接在WhatsApp里发送修改后的链接给自己，查看预览效果；也可以用Meta的共享调试工具检查标签是否被正确抓取（注意网站要能被公网访问）。

内容的提问来源于stack exchange，提问作者Het Patel