Next.js 14 App Router如何添加<meta name="google" content="notranslate">标签

问题背景 #

在Next.js Page Router中，可通过Head组件直接添加<meta name="google" content="notranslate">标签，阻止谷歌自动翻译页面内容。但切换到App Router后，原方法不再适用，且官方文档未给出相关说明。

有开发者提出，该标签需将content替换为value才能生效，但这一方案尚未验证。同时，尝试通过generateMetadata函数直接返回google: "notranslate"的写法并未生效，示例代码如下：

export async function generateMetadata({ params: { lng } }) {
  
  const metadata = siteMetadata[lng] || siteMetadata.en;

  return {
    google: "notranslate",
    // 其他元数据配置...
  }

正确实现方式 #

在App Router的generateMetadata函数中，需通过meta数组定义自定义meta标签，具体有两种写法：

方式一：使用标准content属性 #

这是符合HTML规范的常规写法，适配绝大多数场景：

export async function generateMetadata({ params: { lng } }) {
  const metadata = siteMetadata[lng] || siteMetadata.en;

  return {
    // 保留原有元数据配置
    title: metadata.title,
    description: metadata.description,
    // 添加谷歌翻译禁用标签
    meta: [
      {
        name: "google",
        content: "notranslate",
      },
      // 其他自定义meta标签...
    ],
  };
}

方式二：尝试value属性（针对特殊场景） #

如果上述方式未生效，可尝试将content替换为value：

export async function generateMetadata({ params: { lng } }) {
  const metadata = siteMetadata[lng] || siteMetadata.en;

  return {
    // 保留原有元数据配置
    title: metadata.title,
    description: metadata.description,
    // 添加谷歌翻译禁用标签
    meta: [
      {
        name: "google",
        value: "notranslate",
      },
      // 其他自定义meta标签...
    ],
  };
}

验证方法 #

本地运行或部署项目后，查看页面HTML源代码，确认目标meta标签已生成；同时测试谷歌翻译功能，验证页面是否不再被自动翻译。

内容的提问来源于stack exchange，提问作者Antonio Colella