Next.js作品集网站Meta标签页面源码缺失问题求助

问题根源 #

1. _app.jsx的固定Head覆盖页面自定义Meta：_app.jsx中无论页面是否加载完成，都固定输出了title和description标签，这些全局标签会在服务端渲染时优先输出，导致页面自定义的Meta标签无法在源码中正常显示，社交平台抓取时也只会读取全局内容。
2. Meta标签缺少唯一key属性：Next.js的Head组件需要通过key属性区分同类型标签，否则无法正确合并和覆盖全局标签。
3. 动态博客页面的标签格式错误：og:image标签同时设置了name和property属性，不符合规范；keywords的内容是数组而非字符串，无法被正确解析。

解决方案 #

步骤1：修改_app.jsx，移除固定的title和description #

只保留全局通用标签，将页面特定的title和description交给各页面自行处理：

// _app.jsx 修改后代码
function MyApp(props) {
  const { Component, pageProps } = props;

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 4000);
  }, []);

  if (loading) {
    return (
      <Fragment>
        <Head>
          <link rel='icon' href='/favicon.ico' />
        </Head>
        <Loader />
      </Fragment>
    );
  } else {
    return (
      <Fragment>
        <Head>
          <link rel='icon' href='/favicon.ico' />
          {/* 仅保留全局通用标签，页面特定内容由各页面自行定义 */}
        </Head>

        <Component {...pageProps} />

        <Toaster position='top-right' reverseOrder={false} />
      </Fragment>
    );
  }
}

步骤2：为页面Meta标签添加唯一key属性 #

blogs.jsx 修改后

<Head>
  <title key='title'>Blog :: Dhaval Vira Resume</title>
  <meta key='description' name='description' content='博客列表页描述内容' />
</Head>

pages/blog/[index].js 修改后

<Head>
  <title key='title'>{singleData[0].blogTitle} :: Dhaval Vira Resume</title>
  <meta key='description' name='description' content={singleData[0].seoDescription} />
  <meta key='keywords' name='keywords' content={singleData[0].tags.join(', ')} />

  {/* OG Meta Tags */}
  <meta key='og-title' property='og:title' content={singleData[0].seoTitle} />
  <meta key='og-description' property='og:description' content={singleData[0].seoDescription} />
  <meta key='og-type' property='og:type' content='article' />
  <meta key='og-url' property='og:url' content={`${process.env.SHARE_URL}${router.asPath}`} />
  <meta key='og-image' property='og:image' content={singleData[0].displayImageUrl} />

  {/* Twitter Meta Tags */}
  <meta key='twitter-title' property='twitter:title' content={singleData[0].seoTitle} />
  <meta key='twitter-description' property='twitter:description' content={singleData[0].seoDescription} />
  <meta key='twitter-image' property='twitter:image' content={singleData[0].displayImageUrl} />
  <link key='canonical' rel='canonical' href={`${process.env.SHARE_URL}${router.asPath}`} />
</Head>

步骤3：修正动态博客页面的格式问题 #

• 将tags.map()改为tags.join(', ')，把数组转为逗号分隔的字符串，符合meta标签content的格式要求。
• 移除og:image标签中多余的name='image'属性，避免属性冲突。

验证方法 #

1. 重启Next.js开发服务器，访问博客列表页和动态博客页，通过Ctrl+U查看页面源码，确认自定义的title和Meta标签已存在。
2. 使用社交平台的调试工具测试链接分享，确认显示的是页面自定义的Meta信息。

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