修复AMP页面无结构化数据元素logo和image错误

这几天为懿古今和 boke112 导航站点安装了WordPress 官方的 AMP 插件,今天收到 Google Search Console Team 发来的邮件说我两个站点的 AMP 页面存在问题,希望能够自查并修正,具体邮件内容如下:

Search Console 发现,您的网站受到了 1 个与 Accelerated Mobile Pages 相关的 新问题的影响。这意味着,您的网站在 Google 搜索结果中的 Accelerated Mobile Pages 可能会受到负面影响。我们建议您检查并考虑修正这个问题。

发现了新问题:

Error in required structured data element

既然 AMP 页面出现了错误肯定要及时修复的,所以第一时间就使用了谷歌结构化数据测试工具对本站 AMP 页面进行测试。这个结构化数据测试工具有两种测试方法,一个是直接输入 AMP 页面的 RUL 地址,另一个是直接粘贴 AMP 页面的源代码,懿古今推荐大家使用粘贴源代码的方法,这个速度比较给力。

修复AMP页面无结构化数据元素logo和image错误 WordPress 第1张

粘贴好源代码或者 URL 地址之后点击『运行测试』按钮即可开始测试,等上一小会就能看到我们的 AMP 页面存在什么问题了。分别测试了懿古今和 boke112 导航两个站点的 AMP 页面源代码,发现都存在结构化数据中没有 logo 和 image 两个字段的值,具体见下图:

修复AMP页面无结构化数据元素logo和image错误 WordPress 第2张

WordPress 官方的 AMP 插件肯定是没有问题,毕竟有二十多万人在使用了,而且这个 AMP 插件没有 logo 和 image 字段的选项设置,那么这两个字段应该是直接获取站点的相关内容,所以问题应该是出在懿古今和 boke112 导航的站点设置或者主题上。毕竟这两个站点使用的Nana 主题Three 主题都是自己 DIY 的主题,可能不是很规范。

AMP 页面 logo 错误修复

针对这个 logo 错误,经过一番搜索之后才知道 AMP 页面其实就是我们站点的图标,只需要我们在站点后台设置上传好站点图标即可解决这个 AMP 页面的 logo 错误。具体设置站点图标步骤如下:

登录 WordPress 后台 >>『外观』>>『自定义』>>『站点身份』>> 站点图标 >> 选择图像,上传一个正方形的 logo 图片即可。

修复AMP页面无结构化数据元素logo和image错误 WordPress 第3张

未上传站点图标的效果图

修复AMP页面无结构化数据元素logo和image错误 WordPress 第4张

已上传站点图标效果图

AMP 页面 image 错误修复

经过比对,这个 AMP 页面的 image 属性值其实就是我们平时所说的文章特色图片。所以解决的办法有两个,要么在编辑文章的时候添加特色图片,要么就通过函数直接为 AMP 页面的 image 指定一个图片地址。本站采用的是第二种方法,直接将以下代码添加到当前主题的 functions.php 文件中:

  1. //修正 AMP image 錯誤
  2. function bbm_amp_modify_json_metadata( $metadata$post ) {
  3. if (!array_key_exists(‘image’, $metadata)) {
  4. $metadata[‘image’] = array(
  5. ‘@type’ => ‘ImageObject’,
  6. ‘url’ => get_template_directory_uri() . ‘/image/default.png’,
  7. ‘height’ => 512,
  8. ‘width’ => 1024,
  9. );
  10. }
  11. return $metadata;
  12. }
  13. add_filter( ‘amp_post_template_metadata’, ‘bbm_amp_modify_json_metadata’, 10, 2 );
其中 url 的值/image/default.png 请自行修改为具体的图片。

以上的代码是为所有的 AMP 页面都指定默认的一张图片,这个有点不太好,所有我们可以增加一个函数,优先获取特色图片,其次获取文章第一张图片,最后没有图片的情况下才获取随机图片。这里以 Nana 主题为例,只需要在 Nana\inc\functions\thumbnail.php 文件中添加以下代码:

  1. function ygj_thumbnailamp() {
  2.     global $post;
  3.     if ( get_post_meta($post->ID, ‘wzshow’, true) ) {
  4.         $image = get_post_meta($post->ID, ‘wzshow’, true);
  5.         return $image;
  6.     } else {
  7.             $content = $post->post_content;
  8.             preg_match_all(‘/<img.*?(?: |\\t|\\r|\\n)?src=[\’“]?(.+?)[\'”]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim’, $content$strResult, PREG_PATTERN_ORDER);
  9.             $n = count($strResult[1]);
  10.             if($n > 0){
  11.                 return $strResult[1][0];
  12.             } else {
  13.                 $random = mt_rand(1, 10);
  14.                 return .get_template_directory_uri().’/images/random/’. $random .’.jpg’;
  15.             }
  16.     }
  17. }

然后把 function bbm_amp_modify_json_metadata( $metadata, $post )函数的代码修改为:

  1. //修正 AMP image 錯誤
  2. function bbm_amp_modify_json_metadata( $metadata$post ) {
  3. if (!array_key_exists(‘image’, $metadata)) {
  4. $metadata[‘image’] = array(
  5. ‘@type’ => ‘ImageObject’,
  6. ‘url’ => ygj_thumbnailamp(),
  7. ‘height’ => 512,
  8. ‘width’ => 1024,
  9. );
  10. }
  11. return $metadata;
  12. }
  13. add_filter( ‘amp_post_template_metadata’, ‘bbm_amp_modify_json_metadata’, 10, 2 );

即可实现 AMP 页面优先显示指定图片,没有的情况下自动获取文章第一张图片,还没有的情况下就显示随机图片。

小结

对于 AMP 插件,目前有两款,一款就是本站所使用的 WordPress 官方 AMP 插件,只支持文章页(含自定义类型的文章页)和页面。另一个款就是 AMP for WP 插件,功能非常强大,支持整站 AMP 化。这两个站点在后台搜索“AMP”都能看到,而且都不会破坏站点现有的结构,只是在当前站点 URL 后面添加/amp/或?amp 用来区分原版 URL 地址和 AMP 页面地址。如果想要为站点折腾 AMP 页面,不妨试试这两款插件。