这个问题绝对是单页面内容分享到Facebook的典型坑——Facebook的爬虫默认会忽略URL里的锚点（#后面的部分），只认主页面的canonical URL对应的那一套元标签，所以直接用带锚点的URL分享，所有文章都会显示一模一样的OG信息。不过别担心，有两个靠谱的方案能解决这个需求：

方案一：前端用Facebook Share Dialog API手动指定分享参数 #

不需要折腾后端，直接在前端通过Facebook的Share Dialog触发分享，手动给每篇文章指定专属的OG属性：

• 当用户点击某篇文章的分享按钮时，调用FB.ui()方法，把对应文章的标题、描述、图片等参数传进去，哪怕href用带锚点的URL也没关系，Facebook会优先使用你传入的参数：

  // 先确保已引入Facebook JS SDK
  FB.ui({
    method: 'share',
    href: 'https://example.com/articles#article1',
    title: '文章1的专属标题',
    description: '文章1的详细描述内容',
    image: 'https://example.com/images/article1-og.jpg'
  }, function(response) {
    // 分享后的回调逻辑
  });
  

• 优势：快速落地，不需要后端配合；用户分享出去的链接还是带锚点的版本，别人点击后能直接滚动到对应文章。
• 注意：要先在Facebook开发者平台注册你的网站，引入官方JS SDK，参数要符合Facebook的分享规范（比如图片尺寸建议用1200x630像素）。

方案二：后端动态生成元标签（配合URL转换） #

因为Facebook爬虫不解析锚点，我们可以把锚点转换成查询参数，让后端根据参数输出对应文章的OG标签：

1. URL转换：把原来的https://example.com/articles#article1改成https://example.com/articles?article=article1，让后端能识别要加载哪篇文章的元标签。
2. 后端动态输出元标签：当请求带有article查询参数时，返回对应文章的OG属性：

   <!-- 针对article1的OG标签 -->
   <meta property="og:url" content="https://example.com/articles?article=article1" />
   <meta property="og:title" content="文章1的专属标题" />
   <meta property="og:description" content="文章1的详细描述内容" />
   <meta property="og:image" content="https://example.com/images/article1-og.jpg" />
   <!-- 同时设置canonical URL为带查询参数的版本，确保Facebook抓取正确 -->
   <link rel="canonical" href="https://example.com/articles?article=article1" />
   

3. 前端自动定位锚点：页面加载完成后，用JS读取查询参数，自动滚动到对应文章的位置：

   window.addEventListener('load', () => {
     const articleId = new URLSearchParams(window.location.search).get('article');
     if (articleId) {
       const targetElement = document.getElementById(articleId);
       if (targetElement) {
         targetElement.scrollIntoView({ behavior: 'smooth' });
       }
     }
   });
   

• 优势：完全符合Facebook的抓取规则，分享后的内容在Facebook上会正确显示对应文章的OG信息，用户点击链接后也能自动定位到目标文章。
• 注意：测试时一定要用Facebook的分享调试工具验证元标签是否被正确识别，避免爬虫抓取不到的情况。如果是静态站点，可以用静态生成工具（比如Next.js、Gatsby）在构建时生成每个文章对应的静态页面，同样能实现独立OG标签。

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