NextJS页面多类型JSON-LD标记的正确实现方式咨询

直接给结论：用@graph数组来组织这三个独立的Schema节点是最优方案——Organization（组织）、WebSite（网站）、WebPage（页面）是三个平行的顶级实体，不存在父子从属的类型关系，强行嵌套会破坏Schema.org的语义规范，反而不利于搜索引擎解析。

具体实现思路 #

用@graph字段包裹三个实体对象，每个对象保留完整的@type和属性，同时通过Schema.org定义的标准属性串联它们，让语义更完整：

• WebSite通过publisher关联到Organization
• WebPage通过publisher关联到Organization，同时通过isPartOf关联到WebSite

Next.js代码示例 #

在页面组件中构造并注入JSON-LD的方式如下：

import React from 'react';

const TargetPage = () => {
  const jsonLdContent = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Organization",
        "@id": "#org",
        "name": "你的组织名称",
        "legalName": "你的合法组织全称",
        "url": "https://example.com",
        "logo": "https://example.com/logo.png"
        // 可添加其他Organization属性，如contactPoint、address等
      },
      {
        "@type": "WebSite",
        "@id": "#site",
        "name": "你的网站名称",
        "url": "https://example.com",
        "publisher": {"@id": "#org"}
      },
      {
        "@type": "WebPage",
        "@id": "#page",
        "name": "当前页面标题",
        "url": "https://example.com/current-page-path",
        "publisher": {"@id": "#org"},
        "isPartOf": {"@id": "#site"},
        "datePublished": "2024-01-01",
        "dateModified": "2024-05-20"
      }
    ]
  };

  return (
    <>
      {/* 页面主体内容 */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdContent) }}
      />
    </>
  );
};

export default TargetPage;

为什么不推荐嵌套子类型？ #

Schema.org的类型体系里，Organization、WebSite、WebPage是完全独立的顶级类型，没有继承或从属关系。如果强行把WebSite/WebPage作为Organization的子属性（比如自定义hasWebsite字段），搜索引擎无法识别这种非标准关联，等于浪费了Schema标记的语义价值。

而@graph是Schema.org官方认可的多实体标记方案，既能清晰声明多个独立实体，又能通过@id和引用建立合规关联，完全符合规范，搜索引擎也能正确解析。

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