"Next.js 15 JSON-LD 结构化数据与富媒体 SEO 实践"

Next.js 15 JSON-LD 结构化数据与富媒体 SEO 实践概述通过 JSON-LD 向搜索引擎声明内容语义，提升富媒体展示（如文章、产品卡片）。与 canonical/hreflang 结合，避免重复内容。Article 示例import Script from 'next/script' export function ArticleJSONLD({ title, datePublished, author, url }: any) { const json = { '@context': 'https://schema.org', '@type': 'Article', headline: title, datePublished, author: { '@type': 'Person', name: author }, mainEntityOfPage: url } return <Script id="jsonld-article" type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }} /> } Product 示例export function ProductJSONLD({ name, sku, price, url }: any) { const json = { '@context': 'https://schema.org', '@type': 'Product', name, sku, offers: { '@type': 'Offer', price, priceCurrency: 'USD', url } } return <Script id="jsonld-product" type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }} /> } Metadata 协同import type { Metadata } from 'next' export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> { const canonical = `https://example.com/blog/${params.slug}` return { title: '示例文章', description: '结构化数据与 SEO 协同示例', alternates: { canonical, languages: { 'en-US': canonical, 'zh-CN': canonical } } } } 验证与提交使用 Rich Results Test/Schema.org 验证器校验输出；在 Search Console 提交并观察收录。技术参数与验证浏览器/爬虫：Googlebot；JSON-LD 正常解析；富媒体展示触发稳定。应用场景内容型站点与电商；提升卡片展示与 CTR。注意事项保证数据一致性与可访问性；避免过度声明与不相关结构化类型。常见问题Q: JSON-LD 放在何处？A: 可在布局或具体页面组件内，以 Script 注入，确保与 canonical/hreflang 一致。参考资料Next.js Metadata 文档；Schema.org/JSON-LD 规范；Rich Results Test。---发布信息：已发布 · 技术验证 · 阅读 34 分钟 · CC BY-SA 4.0