如何为网站各页面配置不同的Open Graph缩略图？

问题根源分析 #

从你提供的代码看，有两个核心问题导致所有页面分享缩略图一致：

1. 强制跳转脚本：页面头部的<script>window.location.href('https://www.org.com/')</script>会把所有请求强制跳转到首页，不管访问哪个子页面，Facebook爬虫拿到的都是首页的HTML内容，自然只会显示首页的缩略图。
2. 静态硬编码OG标签：所有页面的<meta property="og:image">都是固定值，且你的单页应用（<app-root>）依赖客户端路由，Facebook爬虫不会执行前端JS来更新标签，只会读取初始加载的HTML。

另外代码里还有语法错误：<meta name="description" content="content">前面少了左尖括号<，这会导致该标签失效。

分步解决方案 #

第一步：移除强制跳转脚本 #

直接删掉这段代码：

<script>
    window.location.href('https://www.org.com/')
</script>

这是导致所有页面跳转到首页的关键原因。

第二步：根据页面动态生成OG标签 #

因为你的站点是单页应用，需要根据不同路由动态修改OG标签，分两种场景处理：

场景1：使用SSR/SSG框架（如Angular Universal、Nuxt.js、Next.js）

如果你的项目支持服务器端渲染或静态站点生成，可以在服务器端根据当前路由注入对应的OG标签：

• Home页：<meta property="og:image" content="fb-photo1.png"/>
• About页：<meta property="og:image" content="fb-photo2.png"/>
• Contact页：<meta property="og:image" content="fb-photo3.png"/>
• Resources页：<meta property="og:image" content="fb-photo4.png"/>

同时要确保每个页面的og:url、og:title、og:description也对应更新为当前页面的内容，比如Home页的og:url应该是https://www.org.com/，About页是https://www.org.com/about。

场景2：纯客户端渲染（CSR）

如果无法做SSR/SSG，优先使用预渲染方案（前端动态更新仅作为补充，爬虫可能不识别）：

1. 预渲染工具：使用预渲染工具为每个路由生成静态HTML文件，包含对应页面的OG标签。
2. 前端动态更新：在路由切换时，通过JS修改<meta>标签内容，示例代码（以Angular为例）：

import { Meta } from '@angular/platform-browser';

constructor(private meta: Meta) {}

updateOgTags(page: string) {
  let imageUrl = '';
  switch(page) {
    case 'home':
      imageUrl = 'fb-photo1.png';
      break;
    case 'about':
      imageUrl = 'fb-photo2.png';
      break;
    case 'contact':
      imageUrl = 'fb-photo3.png';
      break;
    case 'resources':
      imageUrl = 'fb-photo4.png';
      break;
  }
  this.meta.updateTag({ property: 'og:image', content: imageUrl });
  // 同步更新其他OG标签：title、url、description
}

第三步：验证修改效果 #

修改完成后，使用Facebook分享调试工具测试每个页面：输入对应页面URL，刷新缓存后查看抓取到的OG标签是否正确。

修正后的基础代码示例（Home页） #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- Primary Meta Tags -->
    <title>Home Page</title>
    <meta name="title" content="Home Page Title">
    <meta name="description" content="Home page description">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.org.com/">
    <meta property="og:title" content="Home Page Title">
    <meta property="og:description" content="Home page description">
    <meta property="og:image" content="fb-photo1.png"/>

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://www.org.com/">
    <meta property="twitter:title" content="Home Page Title">
    <meta property="twitter:description" content="Home page description">
    <meta property="twitter:image" content="twitter-home.png"/>

    <base href="/">
    <meta name="google-site-verification" content="SFwVlHE2qbo3_JQG4bT1aoXNAhNkSqLereGQYYBXnFg" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

其他页面只需替换对应的og:image、title、description、og:url等值即可。

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