修复AMP插件结构数据报错

分类: 技术分享   |  标签: AMP, wordpress, 技术分享   |  共有: 1,258 次浏览 , 暂无评论

这个事情首先要从AMP说起，AMP的全称是“Accelerated Mobile Pages”，它由AMP HTML, AMP Runtime 和AMP Components三部分组成，具体细节我们在这里就不展开讨论了，主要的意思就是它可以通过对HTML的精简，实现在移动设备上的高速加载，而另一方面，Google作为全球最大的搜索引擎，会对AMP网页进行优化抓取，并将AMP的页面结果缓存从而是实现对用户的更高效的推送和展现。

这些咱们都先放到一边，太高级的事情不用做过细的研究，我们可以在Wordpress的后台找到一款AMP插件，使得整个网站实现对AMP的支持，而激活这个插件以后，你可以从帮助中找到你的AMP站点链接。如果你是伪静态模式的话：

• 如果默认的页面链接是：http://server/page.html
• 那么该页面的AMP的地址就是：http://server/page.html/amp

你打开后面这个链接之后，就会看到一个干净无比的页面，也就是前面所说的实现在移动设备和网络环境中的加速功能。amp的站点链接同样可以被google所捕获到并收录，而我也就是在这个时候发现的问题。

前两天，在研究Google Webmaster Search Console的时候，看到在AMP的统计信息项中出现了“结构化数据元素无效”的非严重问题，作为强迫症患者，一定要去一探究竟没错，于是点开某个单独的告警页面，可以直接调用Google的结构化数据检测工具来进行检测，然后出现了下面错误：

关于结构化数据的讨论，在这里也就不展开了，简单的来说，结构化数据不是给人看的，而是给机器，给搜索引擎看的，优秀的结构化数据可以帮助搜索引擎更快的识别页面所包含的内容信息。

还是让我们回到这个报错本身：

• A value for the logo field is required.
• A value for the image field is required.

这是一个最终的访问页面，结构化数据报错告诉我们，缺少了两个结构化数据信息，一个是logo，一个是image。其实解释一下就是，缺少了一个网站的标志信息，以及当前文章页面的图片介绍。

后来，我在网上搜索解决方法，发现那个logo的报错，可以通过Wordpress 管理后台中的“Appearance-Customizing-Site Identity”，找到那个关于Site Icon定义的地方，上载图片之后就可以解决。不过那个image的缺失却没有解决。

再后来，只能到这个插件的开发者网站中，寻找相关说明。终于找到了结局的办法，其实就是需要修改当前主题中的functions.php，加上下面代码：

这些代码在前面提到的开发者网站中也有提到，为了考虑页面布局，我就直接用图片的方式插入了，大家直接去那边拷贝代码吧。

但是有一个地方要说明，就是按理说，这个image的结构化信息，最好是取当前页面的题图会比较好，但是，这个结构化验证工具对于这个image的宽度有最低要求，就是宽度必须大于700px，我看看我自己的文章题图，只有500px多，于是就干脆直接指定了一个静态的image链接地址作罢。

其实，wordpress上面也有类似的插件来实现相关的功能，你可以在后台的插件管理中搜索一个名叫“Schema”以及“Schema Default Image”的插件来解决这个问题，不过我觉得这个插件插入了太多的结构化数据，想想还是自己手工来写好了。

好吧，今天的帖子就写到这里，大家下次再见~

---