目录

先谈行动装置友善(Mobile Friendly)的基础原则

行动装置友善(Mobile Friendly)指的是你的网站必须要能够符合行动装置浏览与使用,更白话来说,只要使用者用手机打开你的网站时的使用体验是非常流畅的,就达到了符合行动装置友善(Mobile Friendly)的目的,为了达到这个目的,我们会架设所谓的手机版网站(或有些人称为行动版网站),以下为Google针对手机版网站提出的几个基础规范:

 

  • 避免使用对手机不友善的外挂程式:

  • 内容宽度不超出萤幕显示范围:

image.png

  • 字体大小:

  • 点选元素距离:

 

以上是Google官方所建议的基本原则,但我个人也会建议把下列项目做好(可以算是加分项目):

 

  • 盖台广告优化:同时,Google5月的演算法

  • 图片压缩以及速度优化:尤其是图片优化的部分特别重要,不建议在手机版网站上传太大张的图片。

 

以上所提到的应该大部分的读者、行销人都能够理解,是很基本的网站优化观念,你也可以透过以下的工具对你的网站做检测:

 

  • 行动装置相容性测试工具

如果你要检测"网站是否符合行动装置友善(Mobile Friendly)"最简单的方法便是透过Google的 但要请你注意的是

 

image.png

 

  • Search Console的行动装置可用性报表

如果网站有行动装置友善的问题,Search Console内的报表会告诉你(如果没有Search Console的话,还请参考

image.png

 

 

认识行动装置优先索引

Google于2020年之后,逐渐实施了所谓的行动装置优先索引(Mobile First Indexing),因此现在的网站除了需要符合上面提到的行动装置友善(Mobile Friendly)之外,也应该符合行动装置优先索引(Mobile First Indexing)。

 

image.png

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

 

1. 重新检查你的行动装置友善(Mobile Friendly)是否有问题。

2. 电脑版和行动版网站的内容与页面尽可能一致,如果是独立网页架构,请手机与电脑网站请一定要页对页(本文后面会有更多独立网页架构的说明)。

3. 我们提过很多次的

4. 确保Google爬虫可以有效地爬你的手机版网站(这部分最常出问题的就是下面一个段落提到的"内部连结跟动线")。

 

实务上常看到的问题– 内部连结跟动线的缩减

我们实务上目前看到最常出现的问题就是"手机版网站上的内容比电脑版网站少"或是"手机版网站的动线不完整",因为手机版网站的版面比较小,很多企业主会在手机版网站上把动线做的更简化,举例来说,你在电脑版的介面上有设计2层的导览列,但手机版网站塞不下太大的导览列,因此有些网站干脆把导览列从2层简化为1层,但搜寻引擎需要依赖网站内的内部连结来分析网站的架构(网站动线/内部连结重要性我在

Harris对于Mobile First Indexing的看法

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

 

谈手机版网站的架构选择

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

 

三种架构各自其实都有优缺点以及各自的SEO状况,我直接整理如下再来详细说明:


在不同装置时
HTMLSEO优化UI弹
响应式设计
网址不变1套HTML符合Mobile Friendly即可,通常不需特别做其他优化因为两个装置共用一套HTML,UI设计的弹性较小
独立式网页
两种版本网址2套HTML稍微麻烦一点点,实际要做的事情参考本文章的下一个段落弹性较大
动态服务
网址不变2套HTML符合Mobile Friendly即可,通常不需特别做其他优化弹性较大

实务上在选择手机版网站的架构时,要先考量到你的网站所需要的功能以及UI的复杂性,如果你的UI介面很复杂、或希望针对手机使用者以及电脑使用者各自设计不一样的介面体验,那你可能没有办法使用RWD(RWD是用同一套HTML去做版面的适应性缩放/调整,太复杂的介面比较难做到适应性的缩放),如果网站的介面功能不复杂,那么就可以用RWD的架构。

 

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

上述三种架构在SEO上都能优化出成效

 

  • 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=”

你的手机版网站必须要在<head>里面置入下列语法:

<link rel=”canonical” href=”

 

以产品页为例:

你的电脑版网站必须要在<head>里面置入下列语法:

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”

你的手机版网站必须要在<head>里面置入下列语法:

<link rel=”canonical” href=”

  • 避免网页没有页对页的对应

你的每一个网页都要对应有手机版网页与电脑版网页,独立式网页比较怕的就是没有页对页,举例来说,我在电脑版网站上每一支产品都有"产品介绍"、"产品购买流程"、"产品保固说明"三个网页,但到手机版本网站上我将三个网页浓缩为一个网页叫做"产品总揽",页数不一样且没有页对页的情况,Google可能会对不起来这些网页之间的关联性。请避免这样的情况发生。

  • 根据装置做转址设定

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

 

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

 

总结:3个大重点一定要注意

这篇文章讲了很多基本的手机版网站的优化观念,总结来说我会建议你检查几个项目:

 

1. 网站是否符合行动装置友善(Mobile Friendly),你可以用检测工具来检测。

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

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

 

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

 


最后编辑:2021年11月17日 ©著作权归作者所有

猜你喜欢

发表评论