如何用Next.js 13.4与next-intl实现多语言页面动态元数据？

问题核心 #

你当前用客户端useEffect修改元数据的方式，只有浏览器加载页面后才会生效，但社交平台、搜索引擎的爬虫只会读取服务端渲染的初始HTML内容，所以分享链接时仍显示Layout里的默认元数据。必须在服务端层面为每个页面生成专属元数据。

解决方案步骤 #

1. 保留页面的客户端交互能力（如果需要），但在页面顶层单独导出generateMetadata函数（该函数在服务端执行，不受"use client"指令影响）。
2. 在generateMetadata中结合next-intl加载对应语言的翻译文件，生成页面专属的元数据。
3. 移除客户端修改元数据的useEffect代码，服务端生成的元数据会直接嵌入HTML，爬虫可直接读取。

修改后的Page.tsx代码 #

"use client";
import { useTranslations } from "next-intl";
import type { Metadata } from "next";

interface PageProps {
  params: { locale: string };
}

// 该函数在服务端执行，不受"use client"影响
export async function generateMetadata({ params: { locale } }: PageProps): Promise<Metadata> {
  // 加载当前语言的翻译文件
  const messages = (await import(`../../messages/${locale}.json`)).default;
  const t = createTranslator({ locale, messages });

  return {
    // 覆盖Layout中的默认标题和描述
    title: t("Articulos.Curiosidades_Secretos.id_1.PaginaTitulo"),
    description: t("Articulos.Curiosidades_Secretos.id_1.PaginaHeader"),
    openGraph: {
      title: t("Articulos.Curiosidades_Secretos.id_1.PaginaTitulo"),
      description: t("Articulos.Curiosidades_Secretos.id_1.PaginaHeader"),
      images: [t("Articulos.Curiosidades_Secretos.id_1.PagineImage")]
    },
    twitter: {
      title: t("Articulos.Curiosidades_Secretos.id_1.PaginaTitulo"),
      description: t("Articulos.Curiosidades_Secretos.id_1.PaginaHeader"),
      images: [t("Articulos.Curiosidades_Secretos.id_1.PagineImage")]
    }
  };
}

export default function Page() {
  const t = useTranslations("Articulos.Curiosidades_Secretos.id_1");

  return (
    <>
      <main className='w-4/5 mx-auto flex flex-col'>
        {/* 页面内容示例 */}
        <h1>{t("PaginaTitulo")}</h1>
        <p>{t("PaginaHeader")}</p>
      </main>
    </>
  );
}

关键说明 #

• 服务端生成逻辑：generateMetadata在服务端执行，生成的元数据会直接写入页面HTML头部，社交爬虫请求时能直接读取到正确的OG/Twitter标签。
• 元数据优先级：页面的generateMetadata会继承Layout中定义的通用配置（如icons、robots规则），同时替换页面专属的标题、描述等字段。
• 多语言适配：通过params.locale加载对应语言的翻译文件，确保不同语言版本的页面有匹配的元数据。

验证方法 #

• 查看页面源代码（右键→查看页面源代码），确认<head>中的og:title、twitter:title等标签是否为当前页面的翻译内容。
• 使用社交平台的链接调试工具测试分享链接，确认元数据正常展示。

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