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

 懿古今   2018-03-05 11:19:20 更新  技术文档

这几天为懿古今和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错误 - 第1张 - 懿古今(www.yigujin.cn)

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

修复AMP页面无结构化数据元素logo和image错误 - 第2张 - 懿古今(www.yigujin.cn)

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

AMP 页面 logo 错误修复

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

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

修复AMP页面无结构化数据元素logo和image错误 - 第3张 - 懿古今(www.yigujin.cn)

未上传站点图标的效果图

修复AMP页面无结构化数据元素logo和image错误 - 第4张 - 懿古今(www.yigujin.cn)

已上传站点图标效果图

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 页面，不妨试试这两款插件。

本文地址：https://www.yigujin.cn/1477.html

你可能感兴趣的文章

文章标签： ,   ,   ,  
版权声明：本文为原创文章，版权归 懿古今 所有，欢迎分享本文，转载请保留出处！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请发邮件至[email protected]，确认后马上更正、删除，谢谢！
淘宝和京东热销产品和VIP会员的优惠券推荐

发表评论

  1. 明月清风
    明月清风 @回复
    发表于2018-03-02 12:27  沙发

    这个是不是用来加速页面的啦！

    • 懿古今
      懿古今2018-03-02 16:32  回复

      @明月清风是的，谷歌的是AMP，百度的是MIP，至于好不好就不懂了，反正是瞎折腾

      • 明月清风
        明月清风2018-03-02 16:33  回复

        @懿古今就是没怎么搞明白该如何把mip引入到zb

  2. 康乐民博客
    康乐民博客 @回复
    发表于2018-03-02 16:48  板凳

    AMP好像和百度的MIP有合作，两者现在应该是相互兼容的，不过新手真不建议折腾，毕竟还没有普及，我之前弄的百度MIP现在都很后悔，等以后功能方面完善了，等官方出插件或者有各位大佬弄好后，我们这些小白们跟着喝点汤就可以了。

    • 懿古今
      懿古今2018-03-02 22:56  回复

      @康乐民博客其实我也是跟着折腾而已，不知道是否有用，毕竟我们的网页打开速度还算不错，而且主题是响应式的，感觉不是很必要

  3. 西枫里博客
    西枫里博客 @回复
    发表于2018-03-02 20:57  地板

    网站这样改，清爽多了。

  4. 西枫里博客
    西枫里博客 @回复
    发表于2018-03-03 17:00  4楼

    插件实现AMP就牛逼了~

    • 懿古今
      懿古今2018-03-04 10:11  回复

      @西枫里博客现在AMP和MIP都是有插件的，不用另行折腾一个二级域名或者站点

  5. 闲鱼
    闲鱼 @回复
    发表于2018-03-04 00:20  5楼

    AMP还没接触过，以后真要用的话，可以吸取大佬的经验 [哈哈]

    • 懿古今
      懿古今2018-03-04 10:10  回复

      @闲鱼我已经安装了这个官方AMP插件，目前还没有看到效果

  6. 学习笔记Blog
    学习笔记Blog @回复
    发表于2018-03-05 09:00  6楼

    AMP我感觉就是个有没有的问题！主要还是为了让百度获取到！

    • 懿古今
      懿古今2018-03-05 11:22  回复

      @学习笔记Blog我通过robots.txt文件禁止除了谷歌移动外所有搜索引擎抓取AMP页面。

  7. maqingxi
    maqingxi @回复
    发表于2018-03-05 14:04  7楼

    我昨天也收到了谷歌的报错邮件，你这篇文章真及时。 [赞]

    • 懿古今
      懿古今2018-03-05 17:01  回复

      @maqingxi[呲牙] 因为我也是收到相类似的错误，所以就折腾折腾了

  8. 奶爸de笔记
    奶爸de笔记 @回复
    发表于2019-05-11 22:12  8楼

    我也碰到了这个问题，搜到了你的文章，留个名。