在 Next.js 中直接将 JSON-LD Schema 插入 会导致引号被转义（如 "），无法通过 Google 结构化数据测试工具验证；需使用 dangerouslySetInnerHTML 绕过 React 的默认转义机制。
在 next.js 中直接将 json-ld schema 插入 `
` 会导致引号被转义（如 `"`），无法通过 google 结构化数据测试工具验证；需使用 `dangerouslysetinnerhtml` 绕过 react 的默认转义机制。Next.js（尤其是基于 React Server Components 或旧版 next/head）会对子元素内容进行 HTML 转义，以防止 XSS 攻击。这导致 <script></script> 标签内直接嵌入 JSON.stringify(...) 时，双引号、斜杠等字符被编码为 HTML 实体（例如 " → "），最终生成的 JSON-LD 不符合 schema.org 规范，搜索引擎无法解析。
✅ 正确做法是：避免将 JSON 字符串作为 React 子节点渲染，改用 dangerouslySetInnerHTML 属性注入原始 JSON 文本。虽然名称含 “dangerously”，但在你完全控制 schema 内容（无用户输入、无动态不可信字段）的前提下，这是安全且官方推荐的方案。
以下是修复后的完整 Schema 组件示例（兼容 Next.js 13/14 App Router 和 Pages Router）：
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
// components/Schema.tsx
import { type Metadata } from 'next';
interface SchemaProps {
url: string;
image: string;
datePublished?: string;
dateModified?: string;
}
export default function Schema({
url,
image,
datePublished = new Date().toISOString(),
dateModified = new Date().toISOString()
}: SchemaProps) {
const schema = {
'@context': 'https://schema.org',
'@type': 'NewsArticle',
mainEntityOfPage: {
'@type': 'WebPage',
'@id': url,
},
headline: 'Article headline',
image,
datePublished,
dateModified,
author: {
'@type': 'Person',
name: '****',
},
publisher: {
'@type': 'Organization',
name: 'macandental',
logo: {
'@type': 'ImageObject',
url: '/logo.png', // ✅ 使用绝对路径或公共静态资源 URL
},
},
};
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema, null, 2) }}
/>
);
}? 关键注意事项：
-
JSON.stringify(schema, null, 2)推荐保留缩进（可读性强），不影响解析；生产环境也可用JSON.stringify(schema)减少体积。 - 确保
url、image、datePublished等字段已做必要校验与转义（如 URL encode），避免非法字符破坏 JSON 结构。 - 若使用 App Router，应在
layout.tsx或page.tsx中引入该组件，并置于相关逻辑中（如配合generateMetadata）；Pages Router 则继续在内使用。 - ❌ 禁止将用户提交内容（如评论、标题）未经清洗直接写入 schema —— 否则存在 XSS 风险。
✅ 验证方式：
部署后访问页面 → 右键「查看页面源代码」→ 搜索 <script type="application/ld+json"></script> → 确认内容为合法、未转义的 JSON（含原生 " 和 {}）。再通过 Google Rich Results Test 或 Schema Markup Validator 提交 URL 进行结构化数据校验。
正确实现后，你的页面将具备可被搜索引擎识别的 NewsArticle Schema，显著提升 SEO 丰富摘要（Rich Snippet）的展现概率。
