StructuredData 组件

StructuredData 组件

概述

StructuredData 是一个服务端组件，用于生成 Schema.org 结构化数据（JSON-LD），帮助搜索引擎更好地理解页面内容，提升 SEO 效果。

文件路径

src/components/seo/structured-data.tsx

功能特性

  • 多种 Schema 类型: 支持网站、组织、面包屑、Prompt、软件应用等
  • 服务端渲染: 作为 Async Server Component 运行
  • 动态数据: 从配置和 props 生成结构化数据
  • SEO 优化: 提升搜索引擎理解和展示效果

接口定义

interface StructuredDataProps {
  type: "website" | "organization" | "breadcrumb" | "prompt" | "softwareApp" | "itemList";
  data?: {
    breadcrumbs?: Array<{ name: string; url: string }>;  // 面包屑项
    prompt?: {
      id: string;
      name: string;
      description: string;
      content: string;
      author?: string;
      authorUrl?: string;
      datePublished?: string;
      dateModified?: string;
      category?: string;
      tags?: string[];
      voteCount?: number;
    };
    items?: Array<{
      name: string;
      url: string;
      description?: string;
      image?: string;
    }>;
  };
}

// 便捷导出函数
async function WebsiteStructuredData(): Promise<JSX.Element>

Schema 类型

1. Organization（组织）

<StructuredData type="organization" />

包含：名称、URL、Logo、描述、社交媒体链接

2. Website（网站）

<StructuredData type="website" />

包含：站点名称、搜索功能、发布者信息

3. BreadcrumbList（面包屑）

<StructuredData 
  type="breadcrumb" 
  data={{
    breadcrumbs: [
      { name: "首页", url: "/" },
      { name: "分类", url: "/categories" },
      { name: "当前页面", url: "/current" }
    ]
  }}
/>

4. HowTo（Prompt 页面）

<StructuredData 
  type="prompt" 
  data={{
    prompt: {
      id: "123",
      name: "示例 Prompt",
      description: "这是一个示例",
      content: "Prompt 内容...",
      author: "作者名",
      voteCount: 42
    }
  }}
/>

5. WebApplication（软件应用）

<StructuredData type="softwareApp" />

6. ItemList（列表页）

<StructuredData 
  type="itemList" 
  data={{
    items: [
      { name: "Item 1", url: "/item1", description: "..." },
      { name: "Item 2", url: "/item2", description: "..." }
    ]
  }}
/>

使用示例

基础用法

import { StructuredData } from "@/components/seo/structured-data";

export default async function PromptPage({ params }: { params: { id: string } }) {
  const prompt = await getPrompt(params.id);
  
  return (
    <>
      <StructuredData 
        type="prompt" 
        data={{ prompt }}
      />
      {/* 页面内容 */}
    </>
  );
}

完整 SEO 设置

import { 
  StructuredData, 
  WebsiteStructuredData 
} from "@/components/seo/structured-data";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <WebsiteStructuredData />
      </head>
      <body>{children}</body>
    </html>
  );
}

生成的 JSON-LD 示例

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Prompts.chat",
  "url": "https://prompts.chat",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://prompts.chat/prompts?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}
</script>

依赖

  • @/lib/config - 获取应用配置

注意事项

  1. 这是一个服务端组件（Server Component）
  2. 可以安全地使用 async/await
  3. 返回 <script type="application/ld+json"> 标签
  4. 数据来自 getConfig() 和传入的 props
  5. baseUrl 从 NEXTAUTH_URL 环境变量获取
  6. 对 Prompt 内容有 500 字符截断

SEO 效果

结构化数据可以带来：

  • 富媒体搜索结果（Rich Snippets）
  • 面包屑导航显示
  • 搜索框站点链接
  • 评分星级显示
  • 更好的内容理解
← 返回目录