"JSON-LD 进阶：BreadcrumbList、FAQPage 与 VideoObject 富媒体 SEO 实践"

JSON-LD 进阶：BreadcrumbList、FAQPage 与 VideoObject 实践BreadcrumbListimport Script from 'next/script' export function BreadcrumbJSONLD({ items }: { items: Array<{ name: string; url: string }> }) { const json = { '@context': 'https://schema.org', '@type': 'BreadcrumbList', itemListElement: items.map((it, i) => ({ '@type': 'ListItem', position: i + 1, name: it.name, item: it.url })) } return <Script id="jsonld-breadcrumb" type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }} /> } FAQPageexport function FAQJSONLD({ qa }: { qa: Array<{ q: string; a: string }> }) { const json = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: qa.map(({ q, a }) => ({ '@type': 'Question', name: q, acceptedAnswer: { '@type': 'Answer', text: a } })) } return <Script id="jsonld-faq" type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }} /> } VideoObjectexport function VideoJSONLD({ name, thumbnailUrl, uploadDate, contentUrl, embedUrl }: any) { const json = { '@context': 'https://schema.org', '@type': 'VideoObject', name, thumbnailUrl, uploadDate, contentUrl, embedUrl } return <Script id="jsonld-video" type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(json) }} /> } Metadata 协同与验证保持 `canonical/hreflang` 与 JSON-LD URL 一致；使用 Rich Results Test 验证。技术参数与验证浏览器/爬虫：Googlebot；富媒体触发率提升；导航面包屑清晰度提高。应用场景博客/文档/视频内容站点；FAQ 与视频页的富结果展示。注意事项数据一致性与可访问性；避免混用不相关类型。参考资料Schema.org/JSON-LD；Next.js Metadata 文档；Rich Results Test。---发布信息：已发布 · 技术验证 · 阅读 34 分钟 · CC BY-SA 4.0