8.1 动态Schema生成（SSR/CSR中的JSON-LD注入）

在生成式搜索引擎（GEO）时代，结构化数据不再是可选项，而是让AI理解、信任并引用你内容的“通行证”。静态的、写死在HTML中的Schema已经无法满足现代搜索生态的需求。全栈工程师需要掌握如何在服务端渲染（SSR）和客户端渲染（CSR）中动态生成JSON-LD，确保每个页面、每个实体、每次交互都能向搜索引擎和AI机器人传递最精确的语义信息。

为什么需要动态Schema？

传统静态Schema（如直接在HTML中硬编码）存在三大致命缺陷：

无法反映动态内容：电商产品页的价格、库存、评论数在不断变化；问答页的答案实时更新。静态Schema无法同步这些变化。
无法实现个性化：同一页面在不同用户或不同爬虫眼中可能呈现不同状态（如登录/未登录、A/B测试版本）。动态Schema可以根据请求上下文生成最合适的标记。
无法适配多实体：一个页面可能包含多个实体（如一个产品页面同时包含品牌、卖家、评论、FAQ）。动态生成可以精确控制每个实体的层级关系。

SSR中的JSON-LD注入

在服务端渲染框架（如Next.js、Nuxt.js、Django、Spring Boot）中，JSON-LD应当在服务端生成并注入到HTML的<head>或<body>中。这是最推荐的方式，因为所有爬虫（包括Googlebot、GPTBot、DeepSeek-Bot）都能直接读取。

Next.js 示例（App Router）

// app/products/[id]/page.tsx
import { Metadata } from 'next';

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  currency: string;
  availability: 'InStock' | 'OutOfStock';
  brand: string;
  reviews: { rating: number; count: number };
}

async function getProduct(id: string): Promise<Product> {
  // 从数据库或API获取产品数据
  const res = await fetch(`https://api.example.com/products/${id}`);
  return res.json();
}

function generateProductSchema(product: Product) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Product',
    '@id': `https://example.com/products/${product.id}`,
    name: product.name,
    description: product.description,
    offers: {
      '@type': 'Offer',
      price: product.price,
      priceCurrency: product.currency,
      availability: `https://schema.org/${product.availability}`,
    },
    brand: {
      '@type': 'Brand',
      name: product.brand,
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: product.reviews.rating,
      reviewCount: product.reviews.count,
      bestRating: 5,
      worstRating: 1,
    },
  };
}

export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  const schema = generateProductSchema(product);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      <main>
        <h1>{product.name}</h1>
        {/* 页面其他内容 */}
      </main>
    </>
  );
}

Nuxt.js 示例（Vue 3）

<!-- pages/products/[id].vue -->
<script setup lang="ts">
const route = useRoute();
const { data: product } = await useFetch(`/api/products/${route.params.id}`);

const productSchema = computed(() => ({
  '@context': 'https://schema.org',
  '@type': 'Product',
  '@id': `https://example.com/products/${route.params.id}`,
  name: product.value.name,
  description: product.value.description,
  offers: {
    '@type': 'Offer',
    price: product.value.price,
    priceCurrency: 'CNY',
    availability: `https://schema.org/${product.value.availability}`,
  },
}));

useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify(productSchema.value),
    },
  ],
});
</script>

<template>
  <main>
    <h1>{{ product.name }}</h1>
  </main>
</template>

Django 中间件示例

# middleware/schema_middleware.py
import json
from django.utils.deprecation import MiddlewareMixin

class DynamicSchemaMiddleware(MiddlewareMixin):
    def process_template_response(self, request, response):
        # 仅在产品详情页注入
        if 'product' in response.context_data:
            product = response.context_data['product']
            schema = {
                '@context': 'https://schema.org',
                '@type': 'Product',
                'name': product.name,
                'description': product.description,
                'offers': {
                    '@type': 'Offer',
                    'price': product.price,
                    'priceCurrency': 'CNY',
                }
            }
            # 将Schema注入到模板变量中
            response.context_data['json_ld_schema'] = json.dumps(schema)
        return response

CSR中的JSON-LD注入

在纯客户端渲染（CSR）应用中（如Create React App、Vue CLI），JSON-LD需要在浏览器端动态注入。但需要注意：传统搜索引擎爬虫（如Googlebot）对CSR的渲染支持较好，但生成式AI爬虫（如GPTBot、DeepSeek-Bot）可能不会执行JavaScript。因此，CSR方案更适合混合应用（SSR+CSR）或作为SSR的补充。

React CSR 示例

// components/SchemaInjector.tsx
import { useEffect } from 'react';

interface SchemaInjectorProps {
  schema: Record<string, unknown>;
}

export function SchemaInjector({ schema }: SchemaInjectorProps) {
  useEffect(() => {
    // 移除旧的Schema
    const oldScript = document.querySelector('script[type="application/ld+json"][data-dynamic]');
    if (oldScript) {
      oldScript.remove();
    }

    // 创建新的Script标签
    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.dataset.dynamic = 'true';
    script.textContent = JSON.stringify(schema);
    document.head.appendChild(script);

    // 清理函数
    return () => {
      script.remove();
    };
  }, [schema]);

  return null; // 不渲染任何UI
}

// 使用示例
function ProductPage() {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetchProduct().then(setProduct);
  }, []);

  if (!product) return <Loading />;

  const schema = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    // ... 其他字段
  };

  return (
    <>
      <SchemaInjector schema={schema} />
      <main>
        <h1>{product.name}</h1>
      </main>
    </>
  );
}

Vue 3 CSR 示例

<!-- components/SchemaInjector.vue -->
<script setup lang="ts">
import { watch, onUnmounted } from 'vue';

const props = defineProps<{
  schema: Record<string, unknown>;
}>();

let scriptElement: HTMLScriptElement | null = null;

watch(() => props.schema, (newSchema) => {
  // 移除旧的
  if (scriptElement) {
    scriptElement.remove();
  }
  // 创建新的
  scriptElement = document.createElement('script');
  scriptElement.type = 'application/ld+json';
  scriptElement.dataset.dynamic = 'true';
  scriptElement.textContent = JSON.stringify(newSchema);
  document.head.appendChild(scriptElement);
}, { immediate: true });

onUnmounted(() => {
  if (scriptElement) {
    scriptElement.remove();
  }
});
</script>

<template>
  <!-- 不渲染任何UI -->
</template>

动态Schema的高级模式

1. 基于爬虫类型的差异化输出

利用CDN Edge或中间件，根据User-Agent返回不同的Schema：

// Cloudflare Worker 示例
export default {
  async fetch(request) {
    const ua = request.headers.get('User-Agent') || '';
    const url = new URL(request.url);
    
    // 获取原始页面内容
    const response = await fetch(request);
    let html = await response.text();
    
    // 判断是否为AI爬虫
    const isAIBot = /GPTBot|DeepSeek-Bot|CCBot|ClaudeBot/i.test(ua);
    
    if (isAIBot) {
      // 注入增强版Schema，包含更多细节
      const enhancedSchema = generateEnhancedSchema(url.pathname);
      html = html.replace(
        '</head>',
        `<script type="application/ld+json">${JSON.stringify(enhancedSchema)}</script></head>`
      );
    }
    
    return new Response(html, response);
  }
};

2. 多实体嵌套Schema

一个页面包含多个实体时，使用@graph数组：

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Product",
      "@id": "https://example.com/product/123",
      "name": "智能手表",
      "offers": {
        "@type": "Offer",
        "price": "2999"
      }
    },
    {
      "@type": "FAQPage",
      "@id": "https://example.com/product/123#faq",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "电池续航多久？",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "最长14天"
          }
        }
      ]
    }
  ]
}

3. 实时数据绑定

对于价格、库存等高频变化数据，使用SSR+WebSocket或SSE实现实时同步：

// Next.js API Route 示例
export async function GET(request: Request) {
  // 从WebSocket服务获取最新价格
  const price = await getRealtimePrice();
  
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'Offer',
    price: price,
    priceValidUntil: new Date(Date.now() + 3600000).toISOString(), // 1小时后过期
  };
  
  return new Response(JSON.stringify(schema), {
    headers: { 'Content-Type': 'application/ld+json' },
  });
}

最佳实践与避坑指南

优先使用SSR：确保所有主要爬虫（包括AI机器人）都能直接读取JSON-LD。
保持ID唯一性：使用@id为每个实体分配全局唯一标识（如页面URL+实体类型）。
避免重复标记：同一实体不要在同一页面中出现两次，使用@id引用。
验证Schema：使用Google Rich Results Test或Schema.org验证器检查输出。
性能考量：在SSR中生成Schema会增加响应时间，建议使用缓存（如Redis）存储生成的Schema。
版本管理：将Schema生成逻辑单独封装为函数或服务，便于测试和版本控制。

动态Schema生成是全栈工程师在GEO时代最核心的技能之一。它不仅是技术实现，更是让内容在生成式搜索中“被理解”的关键桥梁。掌握SSR和CSR两种模式，并根据实际场景灵活选择，才能确保你的内容在传统搜索和AI搜索中都能获得最佳可见性。