SEO - 添加 Schema Markup
什么是 Schema Markup？
各位有抱负的网页开发者大家好！今天，我们将深入探讨 Schema Markup 的精彩世界。我知道你们现在在想什么——"精彩？真的吗？" 但相信我，一旦你看到它是如何提升你的网站可见性，你就会像我第一次发现它时一样兴奋！
Schema Markup 就像在互联网这个拥挤的音乐厅中给你的网站一个扩音器。它是一种你添加到 HTML 中的微数据，帮助搜索引擎更好地理解你的内容。把它想象成给你的网页提供字幕——它帮助搜索引擎更准确地阅读和解释你的内容。
让我们来看一个简单的例子：
<div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Inception</h1>
<span itemprop="director">导演: Christopher Nolan</span>
<span itemprop="datePublished">发布日期: 2010</span>
</div>在这个片段中，我们告诉搜索引擎这个 div 包含关于一部电影的信息。itemscope 和 itemtype 属性定义了 schema 的范围和类型，而 itemprop 指定了单独的属性。
采用 Schema Markup 的优势
现在我们知道了 Schema Markup 是什么，让我们谈谈它为什么如此神奇：
- 增强的搜索结果：Schema Markup 可以导致搜索结果中的丰富片段，使你的网站脱颖而出。
- 提高点击率：那些花哨的丰富片段？它们往往会吸引更多的点击！
- 搜索引擎更好的理解：它帮助搜索引擎更准确地理解你的内容。
- 语音搜索优化：随着语音搜索的增长，结构化数据变得越来越重要。
Schema Code 语言的不同种类
Schema Markup 不是一刀切解决方案。有几种方法可以实现它：
| 格式 | 描述 | 示例 |
|---|---|---|
| Microdata | HTML 属性 | <div itemscope itemtype="http://schema.org/Person"> |
| RDFa | HTML5 的扩展 | <div vocab="http://schema.org/" typeof="Person"> |
| JSON-LD | 嵌入在 <script> 标签中的 JavaScript 表示法 |
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "Person" }</script> |
虽然所有这些格式都是有效的，但 Google 通常首选 JSON-LD，因为它易于实现和维护。
在网站上为 SEO 添加 Schema Markup 的步骤
现在，让我们卷起袖子开始工作！以下是如何将 Schema Markup 添加到你的网站的方法：
1. 确定内容类型
首先，确定你要标记的内容类型。是一篇文章吗？一个产品？一个本地企业？Schema.org 提供了可以使用的类型详尽列表。
2. 选择你的标记格式
在本教程中，我们将使用 JSON-LD，因为它是 Google 偏好的格式。
3. 创建你的标记
假设我们要标记一篇博客文章。以下是一个例子：
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "如何制作完美的巧克力曲奇",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2023-06-15",
"image": "http://example.com/cookie.jpg",
"articleBody": "首先，将黄油和糖混合在一起..."
}
</script>这个脚本告诉搜索引擎这个页面包含一篇博客文章，以及它的标题、作者、发布日期、主要图片和内容摘要。
4. 测试你的标记
在上线之前，始终使用 Google 的结构化数据测试工具测试你的标记。它就像是你 Schema Markup 的拼写检查！
5. 将标记添加到 HTML 中
测试完成后，将 <script> 标签添加到 HTML 的 <head> 部分中。
6. 监控性能
实施后，关注你的搜索性能。你可能会开始看到那些闪亮的丰富片段出现！
结论
就这样，各位！你已经迈出了进入 Schema Markup 世界的第一步。记住，互联网就像一个大图书馆，而 Schema Markup 就像给你的书添加一个详细的索引。它帮助搜索引擎更有效地找到和展示你的内容。
在你继续网页开发的旅程中，你会发现 Schema Markup 只是你的 SEO 工具箱中的许多工具之一。但它是一个重要的工具，掌握它可以为你的网站在搜索结果中带来显著的优势。
继续实验，继续学习，不要害怕深入代码。在你意识到之前，你将看到你的网站在搜索排名中上升！
快乐编码，愿 Schema 与你同在！
Credits: Image by storyset