个人网站的 JSON-LD 解析

JSON-LD，也称为 JSON 连接数据，是一种将结构化数据添加到网页的格式。它可以帮助网络爬虫理解您网站的语义结构，增加您获得丰富链接预览的资格，甚至可能改善您的搜索排名。距我第一次发帖介绍构建此网站已经过去了 4 个月，Wakatime 估计我已经花费了大约 100 小时进行编码，这还不包括研究和测试的时间。从那时起，这个网站得到了很多的完善，包括在每个页面上添加 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。由于它指定了此类型，浏览器的 JS 引擎不会执行它。谷歌爬虫等专业爬虫会寻找这些元素并解析其内容。{ "@context" : "https://schema.org" } 在这里，初始化了一个 JSON 对象，并将属性 @context 设置为 https://schema.org。在 JSON-LD 中，数据的结构通过分配适当的上下文来确定。网络爬虫标准化在 Schema.org 上，它定义了 JSON 的所有有效键值对。现在我们已经定义了我们 JSON-LD 所遵循的模式，我们可以描述我们的网页！{ "@graph" : [ { "@type" : "WebSite", "@id" : "https://hawksley.dev/#website", "url" : "https://hawksley.dev/", "name" : "Ethan Hawksley" } // 在此处插入更多节点。 ] } 一个 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 产生显著影响的节点。如果您感兴趣，请查看语义 web - 这是个有趣的领域。接下来让我们讨论每个页面应包含哪些节点。对于每种类型，我已在此网站上包含了 JSON-LD，以便您可以直接复制粘贴并根据自己的需要进行调整。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 标志" } } WebSite 解释了关于网站的元数据。它给爬虫提供了关于如何展示您网站的提示。在这里，您可以看到 Google 将名称字段解释为代表域并相应地标记结果。尽管 WebSite 适用于每个页面，您不需要在每个页面上都包含它的完整版本。域的根页面应详细说明，但其他页面包含简化版本是完全可以接受的：{ "@type" : "WebSite", "@id" : "https://hawksley.dev/#website", "url" : "https://hawksley.dev/", "name" : "Ethan Hawksley" } 这为单页面爬虫提供了足够的上下文，以便它们正确命名网站，但它们不需要完整的详细信息。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" : "Win