腾讯云服务器优惠活动华纳云香港服务器
boke112百科 » WordPress » 正文

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

懿古今更新于 2018-04-16 17:18:34首发于 2018-03-06 07:33:59429
WordPress主题推荐

这几天为懿古今和 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张-boke112百科(boke112.com)

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

修复AMP页面无结构化数据元素logo和image错误-第2张-boke112百科(boke112.com)

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

AMP 页面 logo 错误修复

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

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

修复AMP页面无结构化数据元素logo和image错误-第3张-boke112百科(boke112.com)

未上传站点图标的效果图

修复AMP页面无结构化数据元素logo和image错误-第4张-boke112百科(boke112.com)

已上传站点图标效果图

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://boke112.com/post/4688.html

赞 (0) 打赏
版权声明：本文为投稿文章，感谢 懿古今 的投稿，版权归原作者所有！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请联系我们，确认后马上更正或删除，谢谢！
标签

相关文章

最新文章

免备案外贸虚拟主机SiteGround

热门标签

Copyright © boke112百科基于 WordPress + YIA 构建桂ICP备14004711号-3anbei桂公网安备 45010502000016号
wu