谷歌浏览器外贸版_外贸网站移动端优化浅析

外贸网站移动端优化浅析

自2015年推出所谓的Mobilegeddon以来，移动设备的重要性一直在不断增长，网站移动端优化就成了不得不引起重视的问题，同学们从事谷歌SEO优化工作就必须考虑不断变化的环境，从而在对应的项目上进行相关的操作。在移动优先索引世界中，只有在移动设备上提供良好用户体验的网站才能够获得谷歌搜索引擎的青睐。这意味着页面必须确保移动友好性和更快的网页打开速度。我们可以通过几种不同的方式在网站上引入移动功能，比方说：subdomain，RWD,Dynamic Serving等等。

一、为什么要让网站适配移动设备？

前几天，Jack老师根据相关权威数据写了一篇文章叫做《谷歌浏览器使用情况年度报告》，在文章中我们可以看到2019年google浏览器移动端的使用概率达到了70%，而PC端的使用概率才堪堪达到30%。其他的不用说，光凭这一条数据就已经足够凸显移动端设备在浏览器使用市场份额上的重要性！所以我们要千方百计的去优化我们的网站内容以更好的适配程度去贴合移动端设备的内容可见性。

那么这里我们就需要考虑两个很重要的问题：

1.因为网站内容基本都在PC端进行设计和编辑，而pc端和移动端的设备显示宽度完全不同，那么在pc端的内容如果才能完美的呈现在移动端设备上？所谓的自适应主题真的那么ok吗！

2.PC端用的网络信号很多是百兆千兆，网络速度稳定网页打开速度较快，而移动端很多在使用3G和4G的网络，会受到外界环境影响，所以移动端速度该如何进行优化才能提升？

这两个问题我们先不急着回答，先来看看现在市场上主流的三种移动端优化方式：响应式设计(RWD)，动态服务(Dynamic Service)和移动端子域(subdomian)

二、移动端优化三种方法的利弊

1.移动端子域(subdomain)

优点：

什么叫移动端子域？就是以主域名www.domain.com为主体，单独的重新搭建一个子域名为m.domain.com，这个子域名所对应的网站急速移动端子域。这样你就可以为你的移动网站提供一套单独的代码，而且这样做有一个显著的优势：代码可以从头开始构建，同时还可以考虑到移动友好性。所以移动端子域的做法可以让你可以获得一个网站，既有良好的用户体验，还有高效率的移动设备响应表现。

缺点：
但是，使用单独的移动子域也会带来许多问题。由于网站的每个页面都有文字副本，因此你需要找到对应的解决方案以防止出现重复内容的问题。此外，你还需要找出将页面的适当版本交付给特定用户的方法，否则很容易造成用户的阅读困惑和内容识别的矛盾！

解决方案：
在谷歌官方文档中，明确的指出了如果遇到上面这种问题—-要标记移动页面，需要在页面代码中同时使用rel=canonical和rel=alternate属性。在PC端，你应该添加rel=alternate标记，它将指示给定页面的移动等价物。附加媒体标记描述rel=alternate链接中指示的设备的属性

在这里Jack老师给同学们补充一下知识点：

alternate标签的作用

1、可用于将网站的PC版页面指向移动版页面，告诉搜索引擎你的PC版网页有对应的移动版页面，这有利于移动搜索引擎向手机移动设备的用户提供相应移动版的网页；

2、可以用于告诉搜索引擎网站的RSS聚合内容和sitemap网站地图的位置，利于搜索引擎抓取网页内容；

3、可以用于选择不同CSS样式表文件之间的相互切换控制效果

alternate用法

标签的rel=”alternate”属性添加的位置是在网页的头部区域，也就是

和之间。

用法1：用于移动搜索适配网站的移动版

第一步：在PC端代码中的页面

与中间插入以下这句代码
代码：

第二步：在移动版页面添加 rel=”canonical”属性，将移动版页面规范到PC版页面
代码：

2.响应式网站页面设计(RWD)

响应式页面设计的技术引入彻底改变了内容提供方式，并真正改善了移动用户的用户体验。RWD意味着你的网站内容将在不同显示设备之间进行转换，从而针对不同的设备显示宽度调整其布局和分辨率。根据设备宽度的不同，相同的HTML代码将提供给手机和台式机，而CSS将确定呈现页面的适当方式。

响应式设计的优点：
在每个页面的头部文件中添加了如下代码之后 ,同学们就不用在为每个页面再去部署专门的移动端设备显示效果版本，为你省下大量的重复性机械化劳动。

响应式设计的缺点：
某些内容在PC端因为设计的需要，可能会对不同板块内容之间进行重叠，这也就意味着div的margin和padding会和初始值有很大的不同，这些设置因为是用代码参数做的，在PC端显示没有问题，但是在移动端展示的时候，因为margin和padding的参数并没有发生改变，所以在移动端显示的时候很可能会发生错位！

3.动态的网站服务(Dynamic Service)

不知道同学们有没有听说过Bootstrap框架，这是twitter推出的一款前端构建网页的框架，能够很好的适配前端内容在不同显示设备上的展示，特别是针对移动端的内容加载速度有着非常好的表现。Bootstrap框架采用的是12格栅格内容构建技术，通过代码来监听不同显示设备宽度来展现内容。

动态服务的优点：
快速的反应时间，不管是在移动端还是PC端都能够非常快的展现网站页面的内容，如果在优化比较好的情况下，基本上的网页都能够达到秒开的效果。而且展现的内容能够更好的贴合移动端设备的宽度，不会有上面两种方式的显示缺陷

动态服务的缺点：
需要具备一定的前端设计代码基础知识，这其他特别强调对CSS代码的运用。因为在Bootstrap框架中很多原本的css代码已经被重新编辑，同学们需要根据自己网站的实际情况进行有针对性的设计。否则，展现出来的前端内容也是会发生错位的情况。

最后，还有一种技术我需要在这里简单的提一下，那就是谷歌官方提出的AMP。AMP页面的非凡速度部分是由于Google缓存了Accelerated页面，以便由其自己的服务器超快地交付这些页面而形成的。

AMP技术确实能够大幅度的提高页面在移动端的加载速度，但是这种效果的背后是依靠牺牲一定的JAVASCRIPT效果来实现的。AMP页面是使用特殊的 HTML，JS库和CSS代码构建的，严格限制了这些页面以确保可靠的性能。但是，这些功能的限制对很多人来说是不能接受的，所以有一定代码基础的同学都会选择用Bootstrap等框架来重新构建页面的内容！

好了，以上就是本章关于外贸网站移动端优化浅析的全部内容，如果还有不理解的地方，没有关系，解决方案如下：

百度或者谷歌浏览器搜索 “JACK外贸建站”，排名首页首位的就是我的网站。网站上有更多免费的外贸建站、谷歌SEO优化、外贸客户开发等实操干货知识等着你哦！

(各位看官老爷，都看到这里了，就麻烦动动金手点击转发一下本文到自己的微信朋友圈吧，转发过程如下)