WordPress AMP移动优化-打造适合移动搜索引擎和手机浏览访问WP

AMP全称为 Accelerated Mobile Pages,由Google和其他几家企业共同研发,旨在帮助开发人员创建能够在移动设备上良好运行的网站。AMP 的 HTML 代码是标准 HTML 的一个子集,大大简化了 html 的代码,大大简化 css,且只能写在 HTML 中,不能调用外部 CSS 文件。

AMP充分利用高速缓存,Google 将 AMP 页面缓存在自身的服务器上,以加快检索速度,因此AMP 很适合新闻、博客等信息资讯类的网站,尤其是在Google移动搜索结果中,已经创建了 AMP 网页的所有类型的网站都将在整个 Google 移动搜索结果页面中获得更高的曝光率。

如果你用的是Wordpress,那么启用AMP真的是太方便了,AMP官方已经开发一个AMP官方插件,直接安装即可启用。不过AMP官方插件功能比较简单,只是简单地生成AMP网页,而我们可以使用AMP for WP – Accelerated Mobile Pages这款插件。

AMP for WP 最大的优势就是兼容性比较高,可以与SEO插件整合兼容,同时支持自定义AMP主题、支持WP评论、添加自定义Html代码、移动设备自动跳转等,尤其是移动设置自动跳转功能,如果Wordpress自带的移动设备主题不好,完全可以利用AMP for WP 打造一个新的移动主题。

Wordpress AMP移动优化-打造适合移动搜索引擎和手机浏览访问的WP网站

本篇文章就来分享一下Wordpress AMP页面生成方法,主要是介绍AMP for WP – Accelerated Mobile Pages这款插件安装与配置,更多的关于WordPress建站的文章,这里有:

  1. WordPress文章目录侧边固定滚动-Easy Table 和LuckyWP Table插件
  2. WordPress子主题创建与使用方法-防止修改过的CSS,JS和代码失效
  3. 用Algolia给WordPress添加实时站内搜索功能-搜索质量更高内容更准

一、为什么要用AMP?

最重要的原因就是搜索引擎对AMP的重视,尤其是Google,现在已经优先收录和展示移动页面了,同时在搜索引擎排名中也给予了AMP页面更多的权重,国内的百度也是支持AMP页面收录,只不过自己又单独搞了个“没有一丁点浪花”的MIP。

Wordpress AMP为什么要使用

二、WP AMP插件介绍

  1. https://wordpress.org/plugins/amp/
  2. https://wordpress.org/plugins/accelerated-mobile-pages/

WordPress启用AMP最简单的方法就是使用AMP插件了,目前Wordpress AMP插件一个是由AMP官方开发的WP AMP插件,另一个是由WP开发者开的插件AMP for WP – Accelerated Mobile Pages。

Wordpress AMP插件

AMP for WP – Accelerated Mobile Pages这款插件比起官方版本的AMP插件,功能要强大不少,兼容性也比较高,我们完全可以利用AMP for WP 打造一个WP手机主题

Gutenberg 编辑器支持
Addthis Sharing 支持
AMP Infinity Scroll 支持
GDPR 支持
兼容SEO插件,例如 Yoast SEO, All in One Seo, Rank Math, Genesis, SEOPress, Bridge Qode SEO, The SEO Framework and Squrilly SEO Plugin.
支持 Page Builder 3.0 for AMP!
支持在网页显示一键拨号OneSignal Push Notifications
支持 WooCommerce
页面导航支持Page Break / NextPage (Pagination)
广告支持9 Advertisement sizes – 2 More AD slots added recently
WP原生评论支持Comments Forms in AMP.
Disqus 评论支持
自定义AMP支持Custom AMP Editor
移动设备重定向Mobile Redirection
Google Analytics Support.

三、AMP for WP基本设置

到Wordpress后台下载并启用AMP for WP插件,以下为AMP for WP界面,点击放大:

AMP for WP操作界面

3.1 AMP广告

AMP for WP可以很方便地在AMP页面中添加广告,已经预设了八个广告位,足以满足我们在AMP页面中插入广告了。

AMP for WP添加广告

3.2 SEO优化

如果你的Wordpress已经自带了各类SEO优化插件,AMP for WP可以很轻松地从这些SEO插件中导入数据。

AMP for WP SEO优化

3.3 网页加速

AMP for WP插件支持对CSS、JS等页面进行优化,有利于加快网页浏览速度。

AMP for WP

3.4 网站统计

AMP for WP已经自带了Google统计,直接点击开启即可,如果你想要启用百度统计,你可以直接在高级设置中加入Html代码即可。

AMP for WP网站统计

3.5 页面提示

AMP for WP可以让你在AMP页面中加入提示,用户打开页面后就可以看到。

AMP for WP页面提示

3.6 AMP评论

一般的AMP页面是不带WP评论的,AMP for WP插件支持在AMP页面中显示评论,同时也可以发表评论。

AMP for WP展示评论

3.7 自定义代码

AMP for WP的高级设置中就可以自定义Html了,你可以添加一些自定义的Html代码方便你自己修改。

AMP for WP自定义代码

四、AMP for WP高级技巧

4.1 AMP中文

AMP for WP提供的AMP主题可以自定义语言,部分语言我们可以自己手动翻译为中文。

AMP for WP中文语言

4.2 AMP主题

AMP for WP已经提供了四个免费的AMP主题,页面效果比一般的AMP要好看一些。

AMP for WP提供免费AMP主题

AMP for WP的免费AMP主题如下:(点击放大)

AMP for WP选择主题

效果如下图:

AMP for WP效果演示

4.3 禁用字体

AMP for WP自带了Google字体,在国内加载会变慢,我们可以在设置中禁用它。

AMP for WP禁用字体

4.4 头部链接

AMP for WP可以自动在AMP头部添加no-amp的链接,实际过程中并不怎么适合我们的使用习惯,我们可以禁用它。

AMP for WP链接设置

4.5 社会化分享

AMP for WP自带的社会化分享都是国外的,对于国内的用户来说基本上没有什么用,我们可以直接禁用它。

AMP for WP社会化分享

五、AMP for WP使用问题

5.1 标签分类404

如果出现标签和分类AMP为404,如下图:

AMP for WP标签404

首先检查一下AMP for WP是否开启了标签和分类AMP。

AMP for WP开启分类AMP

如果开启了,那么应该是伪静态规则导致无法访问,AMP for WP还提供了url为?amp这样的格式,我们直接开启它即可。

AMP for WP设置URL格式

5.2 标题大小不正常

AMP for WP提供了对标题H1-H6的大小设置,个别主题的标题大小显示不正常我们可以通过该功能重新定义。

AMP for WP重设标题大小

另外,AMP for WP还提供了对时间格式的修改。

AMP for WP时间格式

5.3 AMP自定义CSS

AMP for WP提供了自定义CSS的功能,利用它我们可以修改AMP主题,以达到适合自己的网站的目的。

AMP for WP自定义CSS

六、WP AMP移动访问优化

6.1 自动提交AMP

这里说的自动提交AMP网页,主要是给百度搜索引擎,谷歌搜索引擎会自动索引并展示你的AMP页面,而百度的话目前会收录你的AMP页面,但是不一定会展示你的AMP页面,代码如下:

if(!function_exists('Baidu_amp')){
    function Baidu_amp($post_ID) {
        //已成功推送的文章不再推送
        if(get_post_meta($post_ID,'Baiduamp',true) == 1) return;
        $url = get_permalink($post_ID);
		if(get_post_type($post_ID)=='page'){
		$url=$url.'?amp';
		}
		if(get_post_type($post_ID)=='post'){
		$url=$url.'/amp/';
		}
        $api = 'http://data.zz.baidu.com/urls?site=网站首页地址&token=密钥&type=amp';
        //登录百度搜索资源平台 >> 网站支持 >> 数据引入 >> MIP&AMP >> AMP 下方的数据提交就能看到 AMP 推送接口调用地址
        $request = new WP_Http;
        $result = $request->request( $api , array( 'method' => 'POST', 'body' => $url , 'headers' => 'Content-Type: text/plain') );
        $result = json_decode($result['body'],true);
        //如果推送成功则在文章新增自定义栏目 Baiduamp,值为 1
        if (array_key_exists('success_amp',$result)) {
            add_post_meta($post_ID, 'Baiduamp', 1, true);
        }
    }
    add_action('publish_post', 'Baidu_amp', 0);
}

6.2 自动跳转AMP

首先,在AMP for WP插件中开启Mobile Redirection功能。

AMP for WP自动跳转

如果你用的缓存插件,如WP Super Cache、W3 Total Cache等,你需要在缓存插件中开启移动设备模式,更多参考:https://ampforwp.com/tutorials/article/how-to-redirect-all-mobile-visitors-to-amp/

6.3 Nginx跳转AMP

如果你的Wordpress用了其它的缓存插件,出现了移动设置不自动跳转到AMP页面的情况,可以使用Nginx自动判定访问者是否来自移动设备,如果是的话就跳转到AMP页面。将以下代码加在网站的配置文件中server{}里就可以了。

set $amp 0;
   
if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT-)|(SonyEricsson)|(NEC-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC-)|(SED-)|(EMOL-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" )
    {		
        set $amp "${amp}1";
    }
    
	if ( $request_uri !~ "/amp")
    {		
        set $amp "${amp}1";
    }
    
 if ($amp = "011"){
 	rewrite ^/(.*) https://www.example.com/$1/amp redirect;
    }

如果你用的不是默认的/amp/的URL格式,而是用的是?amp,你可以使用以下代码:

# 启用amp自动跳转 开始
set $amp 0;
   
if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT-)|(SonyEricsson)|(NEC-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC-)|(SED-)|(EMOL-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" )
    {		
        set $amp "${amp}1";
    }
    
	if ( $request_uri !~ "\?amp")
    {		
        set $amp "${amp}1";
    }
    
    if ($amp = "011"){
 	rewrite ^/(.*) https://wzfou.com/$1\?amp redirect;
    }
# 启用amp 结束	

七、总结

通过对比可以发现WordPress AMP官方插件与AMP for WP 还是各有各的优势与不足,AMP插件生成的AMP页面非常标准,在谷歌站长平台里几乎不会有报错,而AMP for WP 插件生成的AMP页面则有个别的小错误。

AMP for WP插件总结

AMP for WP 可以自定义AMP主题、添加广告、自定义Html代码等,利用移动设备自动跳转的功能,我们可以将手机移动用户访问网站的页面跳转到AMP页面,从而有利于加快网页访问速度,提升用户体验。

文章出自:挖站否 https://wzfou.com/wordpress-amp/,版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。部分内容参考自:nginx重定向


分享到:
Avatar for Qi
关于站长(Qi),2008年开始混迹于免费资源圈中,有幸结识了不少的草根站长。之后自己摸爬滚打潜心学习Web服务器、VPS、域名等,兴趣广泛,杂而不精,但愿将自己经验与心得分享出来与大家共勉。
已有 3 条评论
  1. Avatar for chancat chancat

    6啊,你动作真快

    12月3日 17:01来自移动端 回复
  2. 刚才写了一篇教程,简单的,就写了一个小时,佩服你!

    12月3日 15:20 回复
    • Avatar for Qi Qi

      写自己折腾的过程比较耗费时间。

      12月3日 16:18 回复

Login

Welcome! Login in to your account

Remember me Lost your password?

Don't have account. Register

Lost Password

Register