在Next.js与React中配置Schema.org遇@context语法错误的求助

这个错误的核心原因是你没有给script标签指定正确的MIME类型，浏览器会把JSON-LD内容当成普通JavaScript解析，而@context里的@符号在JS语法里会被识别为非法token（比如ES装饰器的前缀），从而抛出语法错误。

直接按下面的方法修改即可解决：

• 给script标签添加type="application/ld+json"属性，明确告诉浏览器这是JSON-LD格式的结构化数据，不是可执行的JS代码。
• 保持@context字段不变，这是Schema.org要求的必填项。

修改后的代码示例：

import Head from "next/head";

function ViewPost({ post, episodeCount, name }) {
    const episodeKeys = Object.keys(post.episodes);

    return <>
        <Head>
            {/* 关键：添加type="application/ld+json" */}
            <script 
                type="application/ld+json"
                dangerouslySetInnerHTML={{
                    __html: JSON.stringify({
                        "@context": "https://schema.org",
                        "@type": "Movie", // 注意：Schema.org规范里类型字段是@type而非type
                        abstract: post.synopsis,
                        contentRating: "Mature",
                        genre: "anime",
                        inLanguage: "en",
                        keywords: `${post.tags.join(",")}`,
                        producer: {
                            "@type": "Organization",
                            name: post.studio
                        },
                        name: post.title,
                        text: post.summary,
                        thumbnailUrl: post.thumbnailImage.filePath
                    })
                }} 
            />
        </Head>
        {/* 其他组件内容 */}
    </>
}

额外提醒：你原来代码里的type: "Movie"不符合Schema.org规范，规范要求类型字段为@type，修改后才能确保搜索引擎正确识别你的结构化数据。

内容的提问来源于stack exchange，提问作者Epic Gamer