Next.js站点Meta标签无法被抓取的技术求助

• 得用Next.js官方的next/head组件
  不管是页面组件还是_app.js里，必须用官方的Head组件包裹所有meta标签，别用原生的HTML head标签。举个index.js里的例子：

  import Head from 'next/head'
  
  export default function Home() {
    return (
      <>
        <Head>
          <title>你的站点标题</title>
          <meta property="og:title" content="自定义分享标题" />
          <meta property="og:description" content="自定义分享描述" />
          <meta property="og:image" content="https://你的域名/完整图片路径.jpg" />
          <meta property="og:url" content="https://你的域名/" />
          <meta property="og:type" content="website" />
        </Head>
        {/* 页面其他内容 */}
      </>
    )
  }
  

• 检查og:image的合规性
  LinkedIn和Facebook对图片要求很严：

  • 尺寸至少1200x630像素，比例1.91:1
  • 图片得是公开可访问的，不能带权限验证，也不能用本地路径（比如/images/xxx.jpg要换成带完整域名的URL）
  • 格式用JPG或PNG，大小别超过5MB
    直接在浏览器里输图片URL，确认能正常打开，没404也没跳转。

• 确保页面是预渲染的（SSG/SSR）
  如果你的页面是纯客户端渲染（CSR），爬虫根本抓不到动态生成的meta标签。Next.js里默认的静态导出（next export）、SSG（getStaticProps）或者SSR（getServerSideProps）都会在服务器端生成完整的HTML，爬虫能直接读。要是纯CSR，建议改成SSG，或者在_app.js里加基础OG标签，页面专属的标签用getStaticProps传数据后渲染。

• 清理平台缓存
  LinkedIn和Facebook会缓存抓取结果，哪怕你改对了标签，旧缓存还会显示错误。用它们的官方调试工具强制刷新：

  • LinkedIn：在帖子检测工具里重新输URL，点「刷新」按钮
  • Facebook：用分享调试工具重新抓取页面
    注意：缓存更新可能要几分钟，多试几次就行。

• 别重复设置相同的meta标签
  要是_app.js和页面组件里都设了og:title、og:image这类标签，容易冲突。建议_app.js里设全局通用的（比如og:type、站点域名），页面组件里设专属的（比如og:title、og:image），保证每个属性只出现一次。

• 检查HTML源代码
  打开页面的「查看源代码」（别用开发者工具的Elements标签，那是客户端渲染后的结果），搜og:开头的标签，确认它们存在且内容正确。要是源代码里没有这些标签，说明渲染方式有问题，爬虫肯定抓不到。

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