2015年 Google发布了有史以来的第一个与行动装置友善的演算法,这套演算法国外业界称呼为 Mobilegeddon ,演算法的内容简单来说:你的网站必须要有手机版网站,并且对手机使用者是友善的。

距离2015年好几个年头过去了,行动装置优化已经成为网站优化的基础配备,但在2020~2021年间,Google推动了一套全新的演算法更动 – Mobile First Indexing。这篇文章我们要来谈SEO上与『行动装置友善』有关的观念、以及你在SEO优化上该注意的注意事项。

谈行动装置友善的基础原则行动装置友善指的是你的网站必须要能够符合行动装置浏览与使用,更白话来说,只要使用者用手机打开你的网站时的使用体验是非常流畅的,就达到了符合行动装置友善的目的,为了达到这个目的,我们会架设所谓的手机版网站,以下为Google针对手机版网站提出的几个基础规范:避免使用对手机不友善的外挂程式:举例来说,Flash格式的网站内容以现在环境来说对使用者体验不友善,尤其以手机来说现在大部分的浏览器都不支援Flash了,建议架设网站时尽量避免使用Flash。

内容宽度不超出萤幕显示范围:以下图为例,确保手机的介面上没有任何物件会超出手机的浏览范围。

字体大小:行动装置的萤幕较小,故手机版网站的文字不宜太小点选元素距离:可点选的元素之间距离不宜太近,避免使用者用手指浏览时,一次点到二个以上的按钮。

以上是Google官方所建议的基本原则,但我个人会建议把下列项目做好:盖台广告优化:尽量不要在手机版网站上设置太扰人的盖台广告,如果真的不允许使用盖台广告,广告最好不要占据过多版位、或是关闭广告的"X"按钮设置的太难点击。同时,Google5月的演算法Page Experience也会针对盖台广告做出惩处,不只会影响使用者体验、还会影响SEO : 「图片压缩以及速度优化:网站速度对於使用者体验以及SEO会有程度影响,做手机版网站优化时,我们必须要预设使用者的网路环境可能没有电脑装置来的好,故在速度优化上最好多下一点功夫。是图片优化的部分特别重要,不建议在手机版网站上传太大张的图片。

以上所提到的应该大部分的读者、行销人都能够理解,是很基本的网站优化观念,你也可以透过以下的工具对你的网站做检测:行动装置相容性测试工具如果你要检测"网站是不是符合行动装置友善"最简单的方法便是透过Google的行动装置相容性测试工具来检测自己的网站,如果网站有不符合行动装置友善的话,工具上会直接显示出错误并要求网站主进行改善,这个应该是最简单的检测问题的方式。但要请你注意的是行动装置相容性测试工具是Page Level的检测工具,也就是说,每个网页丢进去测的结果可能不一样,请确保每个网页版型有测试过一次。

Search Console的行动装置可用性报表如果网站有行动装置友善的问题,Search Console内的报表会告诉你。

认识行动装置优先索引Google於2020年之後,实施了所谓的行动装置优先索引,所以现在的网站除了需要符合上面提到的行动装置友善之外,应该符合行动装置优先索引。

行动装置优先索引的概念很简单,就是Google的爬虫机器人会先来爬你的手机版网站,并用机器人在手机版网站上所爬到的内容来决定电脑版网站以及手机版网站的排名,其实只要把行动装置友善顾好,一般就不会有其他问题。但如果真的要谨慎检查的话,我会建议几个优化项目可以检查一下:1. 重新检查你的行动装置友善是不是有问题。

2. 电脑版和行动版网站的内容与页面尽可能一致,如果是独立网页架构,请手机与电脑网站请一定要页对页。

3. 我们提过很多次的速度优化,要特别对手机做优化,以往Google是爬电脑版网站,但现在Google以手机为主了。

4. 确保Google爬虫可以有效的爬你的手机版网站。

实务上常看到的问题 – 内部连结跟动线的缩减我们实务上当前看到最常出现的问题就是"手机版网站上的内容比电脑版网站少"或是"手机版网站的动线不完整",因为手机版网站的版面小,很多企业主会在手机版网站上把动线做的更简化,举例来说,你在电脑版的介面上有设计二层的导览列,但手机版网站塞不下太大的导览列,所以有一部分网站乾脆把导览列从二层简化为1层,但搜寻引擎需要依赖网站内的内部连结来分析网站的架构 ,所以我会建议手机版上的动线以及内部连结尽可能不要减少、或是不要减少过多。

Harris对於Mobile First Indexing的看法行动装置优先索引是2020~2021逐渐全面实施的,其实如果你的网站有做好行动装置友善一般SEO上就没有问题,我们在SEO上的优化原则没有太大的变动,仅仅是以往我们把"基础SEO优化的原则"套用到电脑版网站上面,现在改为要套用到手机版网站上面。比方说速度检测以往都以电脑版网站为主,现在要改为优先检测手机版网站,网站的动线/内部连结优化要改为手机版为主、网页上的内容丰富度应该以手机版为主。

谈手机版网站的架构选择我们现在常见的手机版网站架构上可以分为三种,是『独立式网页』、『响应式网页』、『动态服务』三种,如果处理得宜的话,不论选择哪一种架构,你的SEO均为可以被优化的,而在SEO实务上最容易出现问题的是独立式网页的手机版网站架构,如果你的网站是属於这类型的架构,可能在SEO上要好好的检查一下文章後段提到的项目,那在往下之前,我们介绍这三种架构之间的差异。

独立式网页

独立式网页设计我们在业界俗称叫做大小网,白话来解释就是架设写两套程式码来解决手机版网站优化的问题,举例来说,我为电脑版网站以及手机版网站各自写了两套网页,网址是 www.yesharris.com 以及 m.yesharris.com  ,当使用者的浏览装置是手机时,系统会将使用者导向到手机版网站的m.yesharris.com ,反之,则会导向到 www.yesharris.com 这个电脑版网站的网址。这个架构的优缺点如下:优点:手机版网站跟电脑版可以完全分开设计,为不同装置的使用者设计专属的体验缺点:在SEO的优化上会比较麻烦一点点,且後续维护起来比较麻烦,因为要维护两套程式档案。

响应式网页

响应式网页我们简称叫做RWD,简单来说我们只开发一套网页,并透过RWD的技术让网页会随着不同的装置而自适应的改变网页的版面以及物件大小。RWD的网站跟上面提到的独立式网页不同,基本上网址是不变的,在SEO上也不容易出现问题,它的优缺点如下:优点:只要维护一套程式码就好,在SEO上也比较不容易出现问题。

缺点:考量到网页要随着不同的装置而缩放版面及物件,RWD一般版型无法设计得太复杂,手机版跟电脑版的体验会相当接近。

动态服务动态服务与上述提到的独立式网页设计一样是设计两套程式档案,但不同的是在前台是使用一样的网址。白话一点来说,我们在後端做了两套网页,并依赖伺服器对装置判断"要提供给前端手机版的程式档案还是电脑版网站的程式档案",Google旗下的网站有很多就是采用这个架构,这个架构的优缺点如下:优点:手机版网站跟电脑版可以完全分开设计,为不同装置的使用者设计专属的体验,相较独立式网页来说,动态服务的架构对SEO比较不容易出问题。

缺点:要维护两套程式档案、还要处理装置导向的设定,也有可能出现一些装置判断的错误。

三种架构各自都有优缺点以及各自的SEO状况,我整理如下详细说明:在不同装置时的网址HTMLSEO优化UI弹性响应式设计网址不变1套HTML符合Mobile Friendly可以,一般不需特别做其他优化因为两个装置共用一套HTML,UI设计的弹性较小独立式网页两种版本网址2套HTML稍微麻烦一点点,实际要做的事情参考本文章的下一个段落弹性较大动态服务网址不变2套HTML符合Mobile Friendly可以,一般不需做其他优化弹性较大实务上在选择手机版网站的架构时,要先考量到你的网站所需要的功能以及UI的复杂性,如果你的UI介面复杂、或希望针对手机使用者以及电脑使用者各自设计不一样的介面体验,那你可能没有办法使用RWD,如果网站的介面功能不复杂,那麽即可用RWD的架构。

不同手机版网站架构,对於SEO有影响吗?

上述三种架构在SEO上都能优化出成效,但独立式网页设计在SEO上比较需要花心思照顾,更简单来说,如果你的手机网站是采用RWD跟动态服务,把手机体验顾好一般就不会有SEO的问题出现,但独立式网页就不同了,独立式网页在SEO维护上要注意四个很重要的注意事项:Search Console要申请两组我在Search Console的教学内有提到过,不同版本的网址需要申请不同的Search Console,如果你是独立式网页的架构,你可以申请一个网域资源或申请2个网址资源,例:我有www.yesharris.com 以及 m.yesharris.com ,请两个都申请好Search Console,用网址资源申请的好处是 Search Console内的手机版网站以及电脑版网站的资料可以分开来看。

独立网址注解独立式网页会把手机版跟电脑版分为两种版本网址,例: m.yesharris.com 以及 www.yesharris.com ,实务上Google有时会分辨不出来这两种版本网页之间的关联,最惨的状况来说 Google有可能认不出 m.yesharris.com 以及 www.yesharris.com 其实是同一个网站,并且也认不出来它们之间的关联性是手机版与电脑版网站,如果Google无法辨认出来的话就有可能发生以下问题:1. 使用者会用手机搜寻时,找到你的电脑版网站。

2. 你的手机版网站与电脑版网站的内容肯定是接近或是一样,所以会产生重复内容问题。

避免这样的状况出现,Google释出了下列的语法,如果你的网站是采用独立式网页设计,请你以下语法放到你网站上的每一个网页:以首页为例:你的电脑版网站必须要在<head>里面置入下列语法:<link rel=”alternate” media=”only screen and 「max-width: 640px」” href=”https://m.example.com/“>你的手机版网站必须要在<head>里面置入下列语法:<link rel=”canonical” href=”https://www.example.com/“>以产品页为例:你的电脑版网站要在<head>里面置入下列语法:<link rel=”alternate” media=”only screen and 「max-width: 640px」” href=”https://m.example.com/product99“>你的手机版网站必须要在<head>里面置入下列语法:<link rel=”canonical” href=”https://www.example.com/product99“>避免网页没有页对页的对应你的每一个网页都要对应有手机版网页与电脑版网页,独立式网页比较怕的就是没有页对页,举例来说,我在电脑版网站上每一支产品有"产品介绍"、"产品购买流程"、"产品保固说明"三个网页,但到手机版本网站上我将三个网页浓缩为一个网页叫做"产品总揽",页数不一样且没有页对页的情况,Google可能会对不起来这些网页之间的关联性。请避免这样的情况发生。

装置做转址设定

『行动装置优先索引』上线後,只要你是独立式网页的设计,现在可能会出现"在电脑版Google搜寻时,看到手机版网站"的状况,所以,Google官方提醒网站主需要做适当的转址,当电脑装置进到手机版网站时,伺服器应该要进行判断,并且把使用者转址到电脑版网站。

综合上述所说,我会建议客户先考量自己对於UI介面以及功能的规划,如果UI介面跟功能不复杂则尽量用RWD,真的不允许需要复杂的介面或版型时,来考量使用独立式网页或动态服务。因为RWD在SEO上简单很多、顾好行动装置友善就不太会出现严重的SEO问题,维护成本相对较低。

总结:3个大重点一定要注意这篇文章讲了很多基本的手机版网站的优化观念,总结来说我会建议你检查几个项目:1. 网站是不是符合行动装置友善,你可以用检测工具来检测 。

2. 网站需要符合行动装置优先索引,但这个没有检查工具,请尽可能以文章前面提到的方式来顾及到,并且把所有SEO的基础原则套用到你的手机版网站上。

3. 如果你的网站是RWD或动态服务,那请顾好行动装置友善,但如果是用独立式网页,则需要另一方面检查四件事情,是『Search Console额外安装』、『独立网址注解』、『页对页的对应』、『装置判断的转址处理』。

上述三个都符合就不用太担心 : 」