如何用Next.js 13 Metadata设置谷歌搜索结果的站点名称与图标？

云上老周

2026-7-13

如何通过Next.js 13的Metadata设置谷歌搜索结果中的站点名称与图标

一、配置谷歌识别的站点名称

你当前配置的openGraph.siteName仅作用于社交分享的OG标签，谷歌搜索结果的站点名称需要单独配置：

直接在Metadata中添加siteName字段，Next.js 13+支持该字段用于搜索引擎识别：

export const metadata = {
  siteName: pageMetadata.siteName, // 填写你的站点名称（比如Stack Overflow）
  title: {
    default: pageMetadata.title,
    template: `%s | ${pageMetadata.siteName}` // 页面标题模板，谷歌会从中提取站点名称
  },
  // 保留你原有的description、openGraph等配置...
}

确保siteName的值稳定，不要频繁修改，谷歌会优先识别这个字段作为搜索结果中的站点名称。

二、配置谷歌搜索结果的站点图标

你的图标配置路径格式是对的，但需要满足谷歌的要求才能被识别：

图标规格要求：
- 必须是正方形，推荐尺寸为192x192像素或512x512像素
- 格式支持PNG、ICO，避免使用SVG（部分场景不兼容）
- 确保文件放在public目录下，路径/icon.png对应public/icon.png，检查文件是否存在且可访问
完善图标配置，补充掩码图标提升兼容性：

export const metadata = {
  // 其他配置...
  icons: {
    icon: '/icon.png', // 主图标
    shortcut: '/shortcut-icon.png', // 快捷方式图标
    apple: '/apple-icon.png', // Apple设备图标
    other: [
      {
        rel: 'mask-icon',
        url: '/mask-icon.svg',
        color: '#your-brand-color' // 可选，设置掩码图标颜色
      }
    ]
  }
}