网页的结构化数据

今天花了不少时间，在给自己的网站完善结构化数据，干脆总结下这块的知识点。

如下图便是谷歌搜索中心官方博客中，有关结构化数据的部分。仔细去阅读这份文档，你会发现这份技术指南写得非常非常详细，基本我们在工作中会碰到的问题，都能在这里找到相应的答案。

所以如果想系统性了解这块的知识点，最好的做法是先好好阅读这份文档，然后按照文档中的指导进行相应的实操。如果在实操过程中发现什么不太明白的点（例如数据格式、编写规范，等等），可以再回到这份文档好好领悟精神。

明确完学习资料在哪的问题，紧接着就需要明确怎么做的问题。而对于怎么做的问题，这里分三种情况，其一是针对像 WordPress 这样的 CMS 系统，其二是针对像 Shopify 这样的 SAAS 系统，其三则是针对完全使用编码这种方式。

对于 WordPress 这样的 CMS 系统，要想按照自己的想法在网页中添加结构化数据，一个最简单的方式便是直接使用相应的 SEO 插件。

比如 WordPress 平台上比较流行的 RankMath 或者 Yoast，都提供相应的结构化数据功能。但是这些插件的免费版本对结构化数据的支持有限，也就是说如果你想完全按照自己的想法添加结构化数据，那就得花钱买对应插件的高级版本。

说实话，如果一个站点买一个插件的话，当站点多起来后其成本还是蛮高的。所以一个免费的做法就是，在网站上按照 Google Tag Management，然后再通过 GTM 提供的功能，向网页置入相应的结构化数据。

我今天花时间实操了一下，这种 GTM 的方式与 SEO 插件方式，在添加结构化数据方面相差无几。所以一个「付费但方便」方案，与一个「免费但需要频繁操作」的方案，就看你自己的选择了。

总体上来说，在 WordPress 这样的平台上处理结构化数据还是挺方便的，至少要比 Shopify 这样的 SAAS 平台强。

由于 Shopify 封装得比较严格的缘故，很难找到什么比较好的方法去自定义结构化数据。所以 Shopify 玩家，基本就只能根据平台的默认规则来做了。

剩下的最后一种情况，便是完全使用代码来编写网站的情形了。

比如我前段时间使用 Next.js 写了一个网站，因为代码完全由自己控制的缘故，所以在这种类型网站上添加结构化数据就非常简单了。

我们需要做的无非就是先明确在具体页面上添加哪种类型的结构化数据，等有了初步的意向后，直接去谷歌搜索中心的官方文档上，找到对应的数据类型，将其示例代码拷贝下来便好了。

回到具体的项目中，再去对示例代码的数据信息做一些自定义的修改便好了。

且谷歌搜索官方还非常贴心的提供的相应的结构化数据测试功能，也就是提前验证你做的数据是不是符合规范，以及最终的显示样式是怎么样的，都能在那个工具中看到相应结果。

相应的工具地址，自己在官方文档里找一下。