首页 > 营销分享 > 制作AMP或MIP网站

如何制作一个AMP或MIP网站

AMP(Accelerated Mobile Pages)和MIP(Mobile Instant Pages)技术分别是Google和百度推出的一种针对移动设备的页面优化方案,其主要实现思路是不在页面中使用影响加载和渲染的HTML标签,通过一些极致化的要求降低网页的加载时间,提高加载速度,详细的介绍和要求可以去它们各自的网站上介绍。

目前市面上已经有很多AMP或MIP的网站建设的思路,比如Wordpress的一些AMP插件,国内的甚至有一些专门用于MIP网站建设的CMS。本人认为,目前有些企业对自己的营销型网站中的AMP或MIP实现有些误区,主要表现如下:

1,单独建设一个AMP或MIP的站点:

很显然这本身是和这项技术的精神相违背的,AMP或MIP技术是用来帮助移动网站提高加载速度的,在实现时,每个网页都会在头部加入一个标签,指向备用网页,这个备用网页就是AMP页面,AMP页面上也通过标签指向一个规范网页,这个规范网页就是原始网页。AMP或MIP技术本身,就让帮助网页进行更先进的移动页面改造的,企业不再原来网站进行AMP或MIP改造,又徒增一个全AMP网站,简直是给自己找麻烦,不断浪费人力物力,没有起到任何帮助,而且还会分散网站管理精力。

2,使用Wordpress插件建设AMP网站:

目前有一些企业网站用的是Wordpress搭建的,企业借助Wordpress强大插件的功能,安装Wordpress的AMP插件,快速实现了AMP功能,这样去实现可以说是成本最低的一种方式,对于一些个人网站来说,这样去做当然无可厚非,然而对于营销型网站,通过插件实现的功能过于粗燥,无法很好的兼顾宣传转化,还可能把移动端的搜索流量导入到AMP页面,造成转化降低。

AMP或MIP最佳实践

个人认为AMP或MIP网站也应该像普通网站一样,搭建好了之后,无需投入其他精力,对网站进行正常的更新管理即可,也就是说,内容上保持和普通网站的同步更新,尽量降低后期单独的管理成本。

如何搭建AMP或MIP页面

搭建AMP或者MIP页面其实没什么太困难的地方,我们知道网页中的内容一般就2种来源,一种为后台添加的,一种为调用的,例如当前这篇文章,你所看到的内容就是用户添加的,而其他页面的相关部分,如头部,侧边栏则是通过标签调用的。通过标签调用的内容,是很好符合AMP或MIP规范的,例如HTML的图片展示<img src="调用标签" alt="调用标签">,而AMP的图片展示为<amp-img src="调用标签" alt="调用标签" layout="responsive" width="XXX" height="XXX"></amp-img>,但是用户在内容框里输入的内容,我们永远是不知道的,尤其是网站后台添加文站使用编辑器的时候,各种内容,样式,图片可能都被添加了,所以必须对用户的输入内容进行适当处理,才会保证不违反相关实现规范。下面是一个典型的用户添加的内容改造成AMP内容的函数,供参考:

function amp_filter($content){
    if(!is_mobile())
        return $content;
    $mipcontent = preg_replace('/<style.*?<\/style>/iS', '', $content);
    $mipcontent = preg_replace('/<script.*?<\/script>/iS', '', $mipcontent);
    $mipcontent = preg_replace('/<img([^>]*?)\/?>/iS', '<amp-img$1></amp-img>', $mipcontent);
    $mipcontent = str_replace('<iframe', '<amp-iframe layout="fixed-height"', $mipcontent);
    $mipcontent = str_replace('</iframe>', '</amp-iframe>', $mipcontent);
    $mipcontent = str_replace('<video', '<amp-video', $mipcontent);
    $mipcontent = str_replace('</video>', '</amp-video>', $mipcontent);
    $mipcontent = preg_replace('/\s+style="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+href="javascript[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+href=\'javascript[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+style=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+textvalue=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+textvalue="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+border=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+border="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+vspace=\'[^\']*\'/i', '', $mipcontent);
    $mipcontent = preg_replace('/\s+vspace="[^"]*"/i', '', $mipcontent);
    $mipcontent = preg_replace_callback('/<amp-img\s+([^>]*)><\/amp-img>/iS', function($m){
       preg_match_all('/([^=\s]*)=(["\'])(.*?)\2/i', $m[1], $ms);
       $attrs = array_combine($ms[1], $ms[3]);
       if((empty($attrs['width']) || empty($attrs['height'])) && function_exists('getimagesize')){
           $imgsrc = urldecode($attrs['src']);
           if(substr($imgsrc, '0', 4) != 'http')
               $imgsrc = ABSPATH.$imgsrc;
           elseif(strpos($imgsrc, 'https://www.example.com/') === 0){
                $imgsrc = ABSPATH.substr($imgsrc, 24);
           }else
               $imgsrc = esc_url($imgsrc);
           $imgsize = getimagesize($imgsrc);
           $attrs['width'] = $imgsize[0];
           $attrs['height'] = $imgsize[1];
       }
       if(empty($attrs['layout'])){
            $attrs['layout'] = 'responsive';
       }
       $returned = '';
       foreach($attrs as $k=>$v){
           $returned .= " $k=\"$v\"";
       }
        return "<amp-img$returned></amp-img>";
    }, $mipcontent);
    $mipcontent = preg_replace_callback('/<amp-video\s+([^>]*)>.*?<\/amp-video>/iS', function($m){
       preg_match_all('/([^=\s]*)=(["\'])(.*?)\2/i', $m[1], $ms);
       $attrs = array_combine($ms[1], $ms[3]);
       if(empty($attrs['width']) || empty($attrs['height'])){
           $attrs['width'] = 600;
           $attrs['height'] = 400;
    }
       if(empty($attrs['layout']))
            $attrs['layout'] = 'responsive';
       $returned = '';
       foreach($attrs as $k=>$v){
           $returned .= " $k=\"$v\"";
       }
        return "<amp-video$returned></amp-video>";
    }, $mipcontent);
    $mipcontent = preg_replace_callback('/<amp-iframe\s+([^>]*)>.*?<\/amp-iframe>/iS', function($m){
       preg_match_all('/([^=\s]*)=(["\'])(.*?)\2/i', $m[1], $ms);
       $attrs = array_combine($ms[1], $ms[3]);
       if(empty($attrs['width']) || empty($attrs['height']) || !is_numeric($attrs['width']) || !is_numeric($attrs['height'])){
           $attrs['width'] = 'auto';
           $attrs['height'] = 500;
            $attrs['layout'] = 'fixed-height';
       }
       if(empty($attrs['sandbox']))
            $attrs['sandbox'] = 'allow-scripts allow-same-origin';
       if(empty($attrs['layout']))
            $attrs['layout'] = 'responsive';
       $returned = '';
       foreach($attrs as $k=>$v){
           $returned .= " $k=\"$v\"";
       }
        return "<amp-iframe$returned></amp-iframe>";
    }, $mipcontent);
    return $mipcontent;
}

上面这个函数就是用某个用Domai CMS实现的网站内容过滤的一部分,通过系统的过滤器,在移动端对内容进行修改(此网站移动端就是AMP网站)。

哆麦CMS如何帮助企业制作AMP或MIP网站

双主题支持可以说是最好实现AMP和MIP功能的,你可以一个主题用通用模版,另一个主题使用AMP或MIP模板,Domai CMS的两套主题是强关联的,这意味着你可以在一个页面获取到另外一个对应页面的链接,可以根据情况,选择让用户点击链接后去哪里。

此外,还有一种实现方法,有些企业网站希望包含了PC版和移动版的基础上,再制作一个AMP版本,通过Domai CMS的网站差异化复用功能,也可以实现这个功能,而且网站内容是完全保持同步的。

其他

由于百度在移动端一再的摇摆,从熊掌号,MIP到小程序等等技术不断变更,且目前百度已经取消了MIP网页在搜索结果页面的标示,加上本人对MIP网站将尽一年的观察,很多原来的接口都已经无效,本人认为MIP不是百度移动端技术推广的重点,可以说,百度上基本上放弃了MIP技术*。

上一篇: 营销型网站建设中该不该用那么多框架? 下一篇: 制造业营销为什么需要更好的CMS系统
51人阅读过这篇文章,6人喜欢。

发表评论

评论列表