Facebook与LinkedIn分享时元数据显示异常问题求助

1. 排查Resolve守卫与元数据渲染的时机冲突 #

Resolve是在路由激活前预加载数据，但如果元数据设置逻辑晚于SSR渲染触发时机，就会导致爬虫抓取不到正确标签。

• 把元数据设置逻辑整合到Resolve服务中，确保数据加载完成后立即在服务器端注入元标签，不要放在组件ngOnInit里执行：

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Meta } from '@angular/platform-browser';
import { ApiService } from './api.service';

@Injectable()
export class PageDataResolver implements Resolve<any> {
  constructor(private api: ApiService, private meta: Meta) {}

  async resolve() {
    const pageData = await this.api.getPageDetail().toPromise();
    // 直接在Resolve中设置OG元数据
    this.meta.updateTag({ property: 'og:title', content: pageData.title });
    this.meta.updateTag({ property: 'og:description', content: pageData.desc });
    this.meta.updateTag({ property: 'og:image', content: pageData.fullImageUrl });
    return pageData;
  }
}

2. 验证服务器返回的原始HTML #

爬虫只会读取服务器返回的静态HTML，不会执行JS，必须确认原始输出包含正确元数据：

• 用命令行抓取页面内容：curl -s https://你的页面地址 | grep -i "og:"
• 如果返回结果里没有OG标签，说明SSR渲染时元数据未被正确注入，重点检查Resolve服务是否在SSR环境下正常执行。

3. 处理动态路由的缓存问题 #

如果是动态路由（如/post/:id），服务器可能缓存了初始渲染的HTML，导致不同路由返回相同元数据：

• 禁用服务器端的全局页面缓存，或者为每个动态路由生成唯一缓存键，确保不同ID的页面返回对应元数据。
• 检查server.ts配置，避免存在统一缓存响应的逻辑。

4. 修正OG标签格式错误 #

即使浏览器显示正常，格式问题也会导致爬虫不识别：

• 所有OG标签必须使用property属性，而非name属性，比如<meta property="og:title" content="xxx">。
• og:image必须是完整绝对URL（包含https://），且图片尺寸符合平台要求（Facebook要求至少1200x630像素）。
• 禁止用JS动态插入元标签，必须在服务器端渲染时直接写入HTML。

5. 强制平台重新抓取缓存 #

平台爬虫会缓存旧数据，修复后需要强制更新：

• 在Facebook调试工具点击「Scrape Again」，LinkedIn调试工具点击「Fetch new content and update preview」，触发重新抓取。

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