当前位置

Drupal网站生成AMP版本页面

James Qi 在 2017年3月21日 - 15:07 提交
内容摘要:上周四去北京Google公司参加AdSense方面的研讨会,Juliana也专门讲了AMP方面的发展,特别是面向国外用户的网站可以首先采用。我上上周五和Juliana通过电话后,上周末自己也进行了一些......

  上周四去北京Google公司参加AdSense方面的研讨会,Juliana也专门讲了AMP方面的发展,特别是面向国外用户的网站可以首先采用。我上上周五和Juliana通过电话后,上周末自己也进行了一些摸索,记录了两篇博客文章《准备尝试Google推荐的AMP》、《AMP (Accelerated Mobile Pages) “加速移动网页”中的广告》,做了一个测试例子:https://drupal7.adsensebook.cn/?amp ,也算有了一点经验。在去北京期间与Google的人以及其他做过百度MIP的发布商一起探讨了一些相关问题。

  回来后准备在面向国外用户的站点上实施,今天就在一个系列上来安装调试,把过程记录下来:

  • 下载模块、主题:drush dl amp、drush dl amptheme、drush dl composer_manager,(需要使用adsense功能也可以不下载专门的adsense插件)
  • 运行主题:drush en amptheme -y、drush en ampsubtheme_example -y
  • 安装模块:drush en composer_manager -y、drush en amp -y(amp模块在做了其它设置后再设)
  • 设置AMP:drush vset amp_google_analytics_id "UA-241337-59", drush vset amp_google_adsense_id "pub-9094871827609791"
  • 修改那些内容类型的定制显示的设置,让amp版本可以查看,设置:Page is disabled: Enable AMP in Custom Display Settings,批量设置办法:drush ev '$info = field_bundle_settings("node","story"); $info["view_modes"]["amp"]["custom_settings"] = true; field_bundle_settings("node","story",$info);'注意运行上面后需要清理缓存才生效:drush cc all
  • 遇到报错:RuntimeException: Error creating directory: public://composer in composer_manager_file_dir,是目录权限的问题,chown -R apache:apache sites/example.com/files/composer/ --from=root:root,然后报错就消失了;
  • 设置Block:在amp主题中关闭一些常规web网站主题里面开启的block,例如:drush sql-query "UPDATE block SET status='0' WHERE module='search' AND delta='form' AND theme='ampsubtheme_example';"
  • 设置AdSense广告:前面已经设置了amp_google_adsense_id,再设置4个AMP AdSense Block就可以:
    drush vset amp_google_adsense_1_width 320
    drush vset amp_google_adsense_1_height 100
    drush vset amp_google_adsense_1_data_ad_slot 9814520596
    drush vset amp_google_adsense_2_width 300
    drush vset amp_google_adsense_2_height 250
    drush vset amp_google_adsense_2_data_ad_slot 5244720195
    drush vset amp_google_adsense_3_width 320
    drush vset amp_google_adsense_3_height 50
    drush vset amp_google_adsense_3_data_ad_slot 6721453390
    drush vset amp_google_adsense_4_width 200
    drush vset amp_google_adsense_4_height 90
    drush vset amp_google_adsense_4_data_ad_slot 9674919791
    
    drush sql-query "UPDATE block SET status='0' WHERE module='lang_dropdown' AND delta='language' AND theme='ampsubtheme_example';"
    
    drush sql-query "UPDATE block SET status='1',region='content',weight='-20' WHERE module='amp' AND delta='amp_google_adsense_1' AND theme='ampsubtheme_example';"
    
    drush sql-query "UPDATE block SET status='1',region='content',weight='0' WHERE module='system' AND delta='main' AND theme='ampsubtheme_example';"
    
    drush sql-query "UPDATE block SET status='1',region='content',weight='20'  WHERE module='amp' AND delta='amp_google_adsense_2' AND theme='ampsubtheme_example';
    
  • 如果验证的时候报错:
    The tag 'amp-ad extension .js script' is missing or incorrect, but required by 'amp-ad'. This will soon be an error.
    可以在head中添加一句:
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
  • 添加一个切换block:修改web版和amp版对应的html.tpl.php ​
    <?php
    $server_name = $_SERVER['SERVER_NAME'];
    $request_uri = $_SERVER['REQUEST_URI'];
    $query_string = $_SERVER['QUERY_STRING'];
    global $theme;
    if ($theme == 'responsive_bartik') {
      $normal_url = "//$server_name$request_uri";
      $amp_url = "//$server_name$request_uri?amp";
    } else {
      $position = strpos($request_uri,'?amp');
      $request_uri_before_amp = substr($request_uri,0,$position);
      $normal_url = "//$server_name$request_uri_before_amp";
      $amp_url = "//$server_name$request_uri";
    }
    $normal = l('原始Web页',$normal_url);
    $amp = l('AMP页⚡',$amp_url);
    $output = "<p>$normal | $amp</p>\n";
    print $output;
    ?>
  • 修改模板:在amp的主题下修改node--xxx.tpl.php文件,参考常规web的主题下对应的node--xxx.tpl.php;
  • 修改链接:从手机搜索引擎中点击带有amp闪电标志的页面会进入缓存的amp版本,此后再点击其中网站内部链接有三种可能性:1、继续进入缓存的其它amp版本页面;2、跳到网站本身的amp版本页面;3、跳到网页本身的常规web版本页面,这三种都是可行的,可以根据实际情况采纳,有必要就修改page.tpl.php以及前面说到的html.tpl.php、node--xxx.tpl.php;
  • 修改模块:发现amp页面的<link rel="canonical" href="https://..." />在多语言情况下语言代码重复了,例如.../zh-cn/zh-cn/...,修改sites/all/modules/amp/amp.module中的canonical前后代码纠正;
  • node/xxx以外页面:目前amp模块暂不支持,可以通过修改amp.module和custom.module文件中与homepage有关的地方来实现首页加amp版本;
  • 测试:拿典型页面来测试,看是否有报错的地方,测试工具有几种(需要翻墙使用):
  • 修改xmlsitemap.page.inc,添加amp版本链接(尚未进行,听说不需要);
  • 一段时间后在Google Webmaster Tools中观察是否收录了AMP版本页面(已经观察到有了,对报错可以检查修改)。

  今天先改了一个系列的站点,后面再观察一段时间,如果没有问题了再推广到更多系列。


  补充:从2017年3月下旬到4月中旬花了不少时间去把针对国外浏览者的网站系列都添加了amp版本,今天把我的博客也添加了amp版本。

自由标签:

添加新评论

Plain text

  • 不允许使用HTML标签。
  • 自动将网址与电子邮件地址转变为链接。
  • 自动断行和分段。
验证码
本问题用于测试您是否为人类访问者,避免自动垃圾发贴。
图形验证
键入显示在图片中的字符