AI 资讯Hacker News·2 小时前

个人网站如何应用JSON-LD结构化数据

原标题：JSON-LD Explained for Personal Websites

速览

JSON-LD是一种用于在网页中嵌入结构化数据的JSON格式，被搜索引擎广泛支持。对于个人网站而言，正确使用JSON-LD可以帮助搜索引擎更准确地理解页面内容，从而提升搜索结果的展示效果和点击率。本文旨在为个人网站开发者提供清晰的JSON-LD应用指南。

AI 深度解读

JSON-LD 详解：为个人网站构建结构化数据

背景

JSON-LD（JSON Linked Data，JSON 链接数据）是一种用于向网页添加结构化数据的格式。它能够帮助网络爬虫理解网站的语义结构，从而让你的链接预览更加丰富，甚至有可能提升你的搜索引擎排名。

这篇文章源自 Hacker News 社区，作者 Ethan Hawksley 分享了他构建个人网站 hawksley.dev 的经验。在距离他第一篇介绍建站过程的文章发布已有 4 个月，且累计投入约 100 小时编码（不含研究和测试时间）后，他的网站经过了一系列打磨，其中包括为每个页面添加 JSON-LD 支持。本文将深入解析 JSON-LD 的基础知识，并针对个人网站常见的节点类型提供具体的实施指南。

核心内容

JSON-LD 基础结构

要在网页中添加 JSON-LD，需要在 <head> 部分的任意位置插入以下代码块：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://hawksley.dev/#website",
      "url": "https://hawksley.dev/",
      "name": "Ethan Hawksley"
    },
    // 在此处插入更多节点
  ]
}
</script>

各部分解析

<script type="application/ld+json"> 这声明了一个 MIME 类型为 application/ld+json 的新脚本。由于指定了该类型，浏览器的 JavaScript 引擎不会执行它。专门的爬虫（如 Googlebot）会查找这些元素并解析其内容。
@context 初始化一个 JSON 对象，并将 @context 属性设置为 https://schema.org。在 JSON-LD 中，通过分配适当的上下文来确定数据结构。网络爬虫标准化使用 Schema.org，它定义了 JSON 中所有有效的键值对。
@graph JSON-LD 文档可以被视为一个标记的有向图，存储在 @graph 下。该图包含多个节点，并通过有向弧相互连接。
- 节点属性：
  - @type：描述节点的类型，例如 WebSite 或 SoftwareApplication。
  - @id：节点的唯一标识符，通常是一个带有唯一哈希值的 URL。
  - 属性：描述节点属性的键值对。
在上面的示例中，类型是 WebSite，ID 是 https://hawksley.dev/#website，它有两个属性：url 和 name。

注意：网络爬虫可以合并共享同一 ID 的节点在多个页面上的属性。然而，只读取单个页面的爬虫（如 LLM）不会合并属性。当 JSON-LD 跨页面复用时，保持这种平衡非常重要。最佳实践是让 ID 成为 URL 后跟一个哈希（如 #website），以唯一标识该节点。

关键节点类型详解

虽然 Schema.org 定义了多种节点类型，但本指南仅涵盖对 SEO 有明显影响的节点。

1. WebSite（网站）

WebSite 解释了关于网站的元数据，它给爬虫提示如何显示你的网站。

完整版本示例：

{
  "@type": "WebSite",
  "@id": "https://hawksley.dev/#website",
  "url": "https://hawksley.dev/",
  "name": "Ethan Hawksley",
  "alternateName": ["hawksley.dev", "Hawksley"],
  "description": "Ethan Hawksley 的个人网站和技术博客，他是一名位于英国的计算机科学学生，专注于系统编程、低级计算和网络安全。",
  "inLanguage": "en-GB",
  "publisher": {
    "@id": "https://hawksley.dev/#person"
  },
  "image": {
    "@type": "ImageObject",
    "@id": "https://hawksley.dev/#website-image",
    "url": "https://hawksley.dev/logo-square.png",
    "caption": "Ethan Hawksley Logo"
  }
}

实施建议：虽然 WebSite 适用于每个页面，但不需要在每个页面上都包含完整版本。域名的根页面应详细列出，但其他页面使用精简版是完全可接受的：
```
{
  "@type": "WebSite",
  "@id": "https://hawksley.dev/#website",
  "url": "https://hawksley.dev/",
  "name": "Ethan Hawksley"
}
```
这为单页爬虫提供了足够的上下文以正确命名网站，而无需完整细节。

2. WebPage（网页）

WebPage 描述当前页面，但需注意将其与 BlogPosting（博客文章）等其他类型区分开来。WebPage 代表物理页面本身（即 HTML），包含页面的内容。

示例：

{
  "@type": "WebPage",
  "@id": "https://hawksley.dev/blog/hack-club-campfire/#webpage",
  "url": "https://hawksley.dev/blog/hack-club-campfire/",
  "isPartOf": {
    "@id": "https://hawksley.dev/#website"
  },
  "name": "Winning the Hack Club Campfire Hackathon",
  "inLanguage": "en-GB",
  "breadcrumb": {
    "@id": "https://hawksley.dev/blog/hack-club-campfire/#breadcrumb"
  }
}

子类型：WebPage 有更具体的子类型，如 ProfilePage（个人资料页）和 CollectionPage（集合页）。

3. Person（人物）

个人网站上的每个页面都应包含 Person 节点。它描述你是谁，Google 将其作为内容质量指标的一部分。越来越多的 LLM 爬虫也使用它来决定在回答中引用谁。

与 WebSite 不同，Person 提供的上下文足够重要，因此应包含在网站的所有页面上。

完整版本示例（包含大量属性）：

{
  "@type": "Person",
  "@id": "https://hawksley.dev/#person",
  "url": "https://hawksley.dev/",
  "name": "Ethan Hawksley",
  "alternateName": "ethanhawksley",
  "givenName": "Ethan",
  "familyName": "Hawksley",
  "description": "Long Description",
  "disambiguatingDescription": "Shorter Description",
  "jobTitle": "Computer Science Student",
  "knowsLanguage": "en-GB",
  "knowsAbout": [
    // 关键词
  ],
  "nationality": {
    "@type": "Country",
    "name": "United Kingdom"
  },
  "homeLocation": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "GB"
    }
  },
  "affiliation": {
    "@type": "HighSchool",
    "url": "https://www.alcestergs.co.uk",
    "name": "Alcester Grammar School",
    "sameAs": [
      "https://www.wikidata.org/wiki/Q4713005",
      "https://en.wikipedia.org/wiki/Alcester_Grammar_School"
    ]
  },
  "alumniOf": [
    {
      "@type": "HighSchool",
      "url": "https://www.brookeweston.org",
      "name": "Brooke Weston Academy",
      "sameAs": [
        "https://www.wikidata.org/wiki/Q4974495",
        "https://en.wikipedia.org/wiki/Brooke_Weston_Academy"

查看原文 →hawksley.dev