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

2018年03月02日 12:05:53  阅读 280 次 评论 15 条

这几天为懿古今和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张

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

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

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

AMP 页面 logo 错误修复

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

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

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

未上传站点图标的效果图

修复AMP页面无结构化数据元素logo和image错误 技术文档 第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 页面,不妨试试这两款插件。

历史上的今天:

WordPress/zblogPHP免费响应式博客主题Blogs
文章标签: ,   ,   ,  
本文地址:https://www.yigujin.cn/1477.html
版权声明:本文为原创文章,版权归 懿古今 所有,欢迎分享本文,转载请保留出处!

相关文章 分类热门分类热评随机文章

发表评论

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

表情

  1. maqingxi
    maqingxi @回复

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

  2. 学习笔记Blog
    学习笔记Blog @回复

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

  3. 闲鱼
    闲鱼 @回复

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

  4. 西枫里博客
    西枫里博客 @回复

    插件实现AMP就牛逼了~

  5. 西枫里博客
    西枫里博客 @回复

    网站这样改,清爽多了。

  6. 康乐民博客
    康乐民博客 @回复

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

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

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

  7. 明月清风
    明月清风 @回复

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