技术指南

标签： Google AMP

  • WordPress安装Google AMP插件加入谷歌Adsense广告和Analytics代码

    使用Google AMP移动网页加入谷歌Adsense广告及谷歌分析Analytics

     

    Google推出的Accelerated Mobile Pages（简称：AMP）是一项加速移动网站的网页技术，官方声称可以在智能手机或平板计算机的数码装置，开启AMP网页比传统的Mobile移动网页快4倍速度，大大降低页面加载的时间，提供给访客一个快速的浏览体验。

     

    其实说白了『Google AMP HTML Pages』 与『Facebook Instant Articles』技术上是非常相似的，只是一个在Google网站，另一个是Facebook所使用的移动网页技术，但是AMP除了可以加速文章页面外，还可以加入Google 谷歌Adsense广告及谷歌分析Analytics分析统计代码，使博客也可以收取广告费用和查看网站的AMP页面带来的人流及浏览量。

     

    WordPress 如要使用AMP及想在AMP页面加入谷歌Adsense广告与谷歌分析Analytics统计代码，需要安装两个插件，方可以完美整合程序，你可以按照以下的方法做。

    OK!…Action ^.^

     

    使用 AMP

    1. 在控制台（后台）安装AMP外挂(插件)，使用搜寻功能找「AMP」外挂，然后安装并启用。

     

     

    1. 前往Google 网站管理工具（Google Search Console）请按此处去，来到AMP「加速移动版网页」管理移动网页，这里可以修正 Accelerated Mobile Pages (AMP) 中的适当问题，才能明确为移动装置用户提供 AMP 网页。

     

     

     

    注意： 当安装AMP外挂后，可能需要等待「1-3」天的时间，才能够在Google 网站管理工具看到相关数据。

     

     

    AMP 建立谷歌Adsense广告

    1. 在控制台（后台）安装「Facebook Instant Articles & Google AMP Pages by PageFrog」外挂(插件)，加入广告及统计代码。

     

     

    1. 安装并开启外挂成功，在左侧栏的「Mobile Formats」–>「setup」位置检查Google AMP HTML是否已经「Ready」准备好了。

     

     

     

     

    1. 新增谷歌Adsense广告代码，在侧栏「Ads」的页面，拉到下方的「Google AMP HTML」位置，单击「Sign in with Google」登入Google的谷歌Adsense账号，并弹出「Choose 谷歌Adsense Ad Unit」页面加入不同尺寸的广告。

     

     

     

     

    1. 当创建广告代码成功后，请记得必须勾选「Enable Google 谷歌Adsense for AMP HTML Pages」广告显示在AMP页面，以及「Ad Placement」可以调整广告显示在文章的第N个字节，然后按「Save All Settings」储存变更。

     

    特别说明：Show an ad every — words字段，建议输入「0-10」数字，因为经本人测试，外挂是以英文字母作计算，如果中文就不是那么友好了，所以字节愈少显示广告的数量，也可以控制在「3」个以内。

     

     

    AMP 放上谷歌分析Analytics统计

    1. 单击左边栏的「Mobile Formats」–>「谷歌分析Analytics」统计页，选择「GOOGLE 谷歌分析ANALYTICS」弹出页面，并点击「Sign in with Google」按钮，登入Google的谷歌分析Analytics账号。 请看图片▼

     

     

    1. 登入Google 谷歌分析Analytics账号成功，在页面筛选统计的网站，然后按「Choose Site」按钮，并点击上方绿色的「Enable Integrabion」按钮，整合分析统计。 请看图片▼

     

     

    检查AMP页面

    经过以上的步骤后，已经开启AMP页面和加入广告及谷歌分析Analytics统计代码了，接下来我们检查一下是否成功。

     

    如何打开AMP页面，只要在网址(连结)后加上「/amp」尾巴即可。

    例如： https://www.moonlol.com/google-amp-谷歌Adsense-谷歌分析Analytics-6003.html/amp

     

     

     

    成功打开AMP页面，文章的Ads广告已经出现了，并利用浏览器的「检视网页原始码」功能，查看网站源码，可以看到谷歌分析Analytics统计代码也有了。 请看图片▼

    <amp-谷歌分析Analytics type=”google谷歌分析Analytics”>

    <script type=”application/json”>

    ….

    </script>

    </amp-谷歌分析Analytics>

     

     

     

     

     

    特别介绍

    1. 外挂有一个相当体贴的功能，在「Styling」的PageFrog页面，可以在控制面板设置AMP主题，例如：加入Logo、调整文字及背景色等，以及可以实时预览AMP的变化，只要复制下方的「Mobile Preview Link 」短连结，在浏览器打开，能够实时看到AMP预览页。

     

    1. 这个外挂还有一个功能，可以管理「Facebook Instant Articles」脸书的实时文章，不过，笔者对FB这个移动技术没有多大的兴趣，你可以自行研究一下。

     

    功能更强大的AMP管理外挂(插件)

    AMP「AMP for WP – Accelerated Mobile Pages」外挂，如果想在AMP页面，加入分享按钮、自定义广告、谷歌Adsense广告或相关文章等，或者在控制面板查看实时流量报表，可以安装此插件。

    附注：这个外挂的功能上虽然很强大，但是，比较占用数据库资源，增加服务器负载。你可以按此处了解。

     

     

    Q&A

    可以自行安装广告代码!?

    答：可以的，请按此处手动建立AMP广告，及查看相关说明。

     

    可以自行安装统计代码!?

    答：可以的，请按此处手动创建AMP页面，独有的谷歌分析Analytics分析代码。

     

    艾薇有话儿：

     

    广告及统计代码，暂时不建议手动自行加上，因为AMP外挂(插件)日后升级新版本，原文件会被覆盖，那以前修改的就白费了，所以笔者选择安装外挂来解决。

     

    Google已经针对导入AMP技术的网页，提高其被检索优先排序，同时也曾预告未来将会朝向针对移动装置优化内容提供优先排序的作法，那些有选择困难症或是无法接受牠的页面样式及简易风格的网主，你还在犹疑嘛﹗

  • 谷歌AMP插件如何添加广告和统计代码adsense/Analytics

    Google AMP 计划（Google’s Accelerated Mobile Pages Project， Google移动网页加速计划，一种用于提升移动网页加载速度的技术，谷歌声称AMP网页载入的平均速度是正常网页的4倍，有时候甚至会达到10倍，译者注）于2016上线。从此以后，Google AMP计划不断发展，并对搜索引擎和媒体网站如何与移动web发生交互产生重要影响。尽管AMP技术已经被许多媒体重点采用，但仍然存在许多亟待解答的问题。首先我们来看看如何wordpress如何启用Google AMP移动网页加速显示技术

    第一步，启用Google AMP移动网页加速显示技术

    网站速度优化-Google-AMP

    早前关注过AMP移动加速显示优化技术（加速移动页面Accelerated Mobile Page）（百度有类似MIP，Facebook有Instant Article），尤其是在Google移动搜索里搜索新闻时候，经常见到排在前面的结果会有AMP闪电符号，打开这种结果网页也是异常地快速与简洁。

    2016年8月，Google宣布AMP移动搜索结果将适用于所有网站（Google取消了移动友好页面的Mobile Friendly标志就是为了给AMP标志让路）。百度、搜狗、雅虎日本最近也宣布支持收录AMP网页，表明此技术应用越来越广泛。大势所趋，艾薇资讯现在也开始使用AMP技术来加速移动端加载速度。

    只需在WordPress后台安装官方AMP插件（不建议安装第三方的插件， 插件的中文翻译支持参考该文章），开启插件即可——不需要任何设置。对于非移动端，直接在每篇文章页面链接的最后加上AMP就可以看到AMP显示效果。也可以使用Chrome的AMP插件来检查页面上可能的HTML语法错误。

    配置好AMP后，之后等待Google爬虫来索引就可以了——也可以手工去Google Webmaster后台提交。我的网站在开启AMP后24小时不到，就可以看到Google已经开始在移动端提供部分搜索结果的AMP（需要在Google手机移动端点击，平板和PC桌面Google都不行）网页了。

    AMP加速移动显示

    AMP本质技术原理其实就是一个简洁版并内置CSS的HTML静态网页（AMP HTML），禁止掉第三方JavaScript而只用少量特定版本的AMP JavaScript，再加上从Google移动搜索结果里面出来的AMP网页全部都由Google全球CDN网络提供Cache高速缓存（AMP Cache），因此在手机上的网页加载速度，即使在移动网络下，也确实达到了异常之快，闪电秒加载，有效提高访客用户体验。

    采用AMP技术的网站加载速度比全站CDN还要快，Google在搜索结果里就开始预加载AMP页面，而且AMP页面本身的元素也已经极度精简。通过Google手机端搜索进入本文后页面的域名都直接变成Google, 比如本文的链接变成：

    https://www.google.com/amp/s/www.nssdd.com/archives/26578.html/amp

    使用Google AMP技术的网页本身支持Google Analytics统计，也支持显示AdSense广告。但这种简洁页面的并不是没有代价和缺点：去除了除内容之外的所有其它功能，包括各种JavaScript代码，它甚至可能会有小问题——这项开源技术还在发展中，它的设计目的也不是为了适合所有类型的网站（但非常适合新闻类和博客类等含有静态内容的网站）。这也是有些互动内容较多的网站不愿意使用的原因。

    其实我的网站本身足够简洁，对手机的响应式显示也很友好，并且我也用了CloudFlare的CDN加速服务，因此，Google AMP带来移动端的加载速度提升本身并不会太明显。我使用AMP更主要的原因是因为这项技术是Google推出，为了获取AMP下更好的Google搜索排名优点（SEO），启用它应该利大于弊。

    由于是Google主推的开源服务，所以国内无法看到Google提供的AMP网页，因为在中国大陆无法使用Google搜索。而我的网站主要的访客都是从Google搜索过来，移动搜索所占比重也越来越多，为了更好的服务这些访客——节省他们的时间，开启Google AMP服务支持也无可厚非。而且，增加AMP支持原来不影响网站原来的任何东西，纯粹加分项。

    长期来看，AMP可能只是一个历史过渡期的产物，将来的移动网速只会越来越快，硬件性能也越来越好，网页加载速度也自然跟着提升。不过在目前，我觉得启用AMP还算是拥抱新技术。一万年太久，只争朝夕。

    第二步AMP移动加速页面添加Google Analytics统计代码的设置方法

    网站支持AMP移动网页加速加载技术后，从Google搜索移动端进入相应页面，加载速度确实如闪电般快捷，页面如出水芙蓉般清爽。

    对于WordPress博客而言，如果是通过官方AMP插件实现AMP加速，该插件并不自带Google Analytics统计服务，因为官方AMP插件就相当于另一套主题。因此需要用户自己添加Analyitics代码，才能实现统计服务。

    根据Google的官方总体说明，对于WordPress的官方AMP插件，Analytics代码添加方法如下（其它插件或者网站程序和此原理一样）：

    1、 在WordPress控制后台的AMP插件的amp/templates/single.php文件里，将以下代码添加到/head标签之前。

    <script async custom-element=”amp-analytics”
    src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>Google AMP
    添加通用JavaScript文件

    2 、然后再将以下代码（注意，此段统计代码不同于Analytics以前的代码，同时请将UA-XXXXX-Y替换成你自己的ID），放到amp/templates/single.php文件里的/body标签之前：

    <amp-analytics type=”googleanalytics”>
    <script type=”application/json”>
    {
    “vars”: {
    “account”: “UA-XXXXX-Y”
    },
    “triggers”: {
    “trackPageview”: {
    “on”: “visible”,
    “request”: “pageview”
    }
    }
    }
    </script>
    </amp-analytics>
    Google AMP
    添加统计代码

    至此，大功靠成。

    从此AMP页面也会将访问统计发到你的Google Analyitcs里面，支持实时统计。需要分析AMP页面访问时候，可以通过AMP字段过滤出相关统计页面。

    第三部：AMP移动加速页面添加Google AdSense广告代码的设置方法

    网站速度优化-Google-AMP

    艾薇资讯以前不愿意使用Google AMP加速网站，说因为不方便添加AdSense广告。其实通过WordPress官方AMP插件实现的AMP网页很容易就添加AdSense广告。方法和添加AMP Google Analytics是一样的，只需要添加相应的JS库AMP格式的AdSense广告单元即可。

    具体方法如下：

    1 在WordPress控制后台的AMP插件的amp/templates/single.php文件里/head之前添加以下JavaScript代码：

    <script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>
    AMP AdSense

    2 接下来在amp/templates/single.php文件里，对应文章中需要出现广告位置的地方添加AdSense单元，注意AdSense广告单元需要是AMP格式：

    以下代码是自适应尺寸广告，建议放在文章标题下（非首屏Below the fold），如下图所示（注意data-ad-client和data-ad-slot的值换成你自己的ID）：

    <amp-ad

    layout=”responsive”

    width=300

    height=250

    type=”adsense”

    data-ad-client=”ca-pub-1234567891234567″

    data-ad-slot=”1234567890″>

    </amp-ad>

    下面的代码是首屏（Above the fold）自适应尺寸广告，建议放在文章标题之上：

    <amp-ad

    layout=”fixed-height”

    height=100

    type=”adsense”

    data-ad-client=”ca-pub-1234567891234567″

    data-ad-slot=”1234567890″>

    </amp-ad>

    OK，WordPress官方插件AMP下的AdSense广告设置就是如此简单。

    我感觉AMP页面下的AdSense广告又干净、整洁、快速，和内容也浑然一体，估计点击率应该会高一些。