2021最新Canonical终极指南,短短的语法让你的SEO功力倍增提升网站能见度

Canonical 是什麽

https://ithelp.ithome.com.tw/upload/images/20201216/20133569rTafvjzpkN.png
图片来源:https://www.samunderwood.co.uk/visualising-seo/

Canonical 的中文是标准网址,它是 Google 为了解决重复内容的问题所搭配使用的 html 语法。

什麽意思呢?

简单说,就是一稿多投时,搜寻引擎发现有很多网站的内容,长相长的一样,或是相似度很高,要怎麽判定出谁才是本尊,如上图所示,在各个重复的分身网页中,注记本尊网址为 Canonical 连结网址,便可以让搜寻引擎知道,要把排名的权重放到本尊网址上。

如何使用 Canonical

如果是使用 WordPress 的话,可以使用一个名为 Yoast SEO 的外挂,简单用滑鼠点一点就能加入 Canonical 网址。

而如果不是使用 WordPress 的话,要怎麽在网站上加入 Canonical 呢?

其实也没有很困难,就是在 HTML 语法中的 区域加入 <link rel=”canonical” href=”你要 canonical 的网址“> 即可。

举例如下:

 <!DOCTYPE html>
<html>
<head>
  <title>投稿赚钱独家实例2020年最新版</title>
  <link rel="canonical" href="https://asper.tw/money/" />
  ...
</head>
<body>
...
网站内文
...
</body>
</html> 

或许有些人不知道什麽是 HTML 语法,其实 HTML 的英文全名是 Hyper Text Markup Language,它属於一种标记语言,可以参考这篇 WordPress 建置超新手入门指南 – 虚拟主机 Web Hosting 篇中的简单说明。

什麽是 HTML

HTML 可以把他想成是一篇作文,作文要有起、承、转、合,而整篇作文的资讯与内容用。

作文的内容,用与包起来後告诉你的浏览器说,要怎读这篇文章。

文章内容有许多标记,每个标记会使用 作为开始与结束的规则,而依据标记的特性,有的标记使用 “/>” 就可以作为结束宣告,像是我们写文章要放句点一样,告诉大家这段写完了。

至於有多少种类的标记,可以参考 MDN 的文件,每个种类的标记,都有其用途,而 head 标记就是其中一个,那到底什麽是 head 标记呢?

Head 标记的作用

head 标记内存放的资讯属於 metadata 为主,可以想成这篇文章的写作文体、字数、写作时间…等,但他不会於直接於文章本身中显示给读者看,而是默默藏在 head 里面。

下图为 asper.tw 中的投稿赚钱独家实例范例,使用 Chrome 浏览器在网页中点选右键,选取”检视网页原始码”後,就会出现像这样的画面,仔细观察,可以发现使用 Yoast SEO 这个 WordPress 的外挂,会自动产生 canonical 连结於 head 标记中。
https://ithelp.ithome.com.tw/upload/images/20201216/20133569sJn6Eg1iv1.png
检视网页原始码:https://asper.tw/money/

当然 head 中也可以放置许多资讯,就上图所示,可以看到这个页面的 head 内,放置了机器人(robot)、文章内容、文章标题、文章连结、文章发布时间、文章修改时间、文章封面图片…等等资讯,当然也包含了 canonical 连结讯息,这些资讯尽管不会在网页中呈现给使用者看见,但是他却有利於 SEO 排名、解析,让爬虫更容易抓取到文章的讯息。

每个标记中的资讯,都是结构化资讯,一层一层的下来,并且都有明确定义说,这个标记是放什麽样的内容,不会因为定义了这个资讯为放日期用的,却放了一张图片在里面,定义放标题的,却放了一整篇内文在里面,搜寻引擎爬虫只要按图索骥,就能顺利将页面资讯归档於资料库内,做为未来排名的参考依据。

Canonical 的标记组成

首先要来谈谈为什麽要用 link 这个标记。

link 这个标记,顾名思义,就是用来放连结的,所以用 “< link” 标记开头,空一格後并使用 rel=”canonical” 来说明,而 rel 则是 relationship 的缩写,代表这个连结是与 canonical 有关的连结,最後使用 href 放置网址资讯,而 href 则是 Hypertext Reference 的缩写,接着填入他的连结网址为 https://asper.tw/money/ 後,加入结束标记 “/>” 就大功告成了。

<link rel="canonical" href="https://asper.tw/money/" />

当然 link 也可以有很多种的 relationship 可供使用,这边就不多做赘述,有兴趣的朋友可以自行取用。

至於为什麽要这样使用,这就像每个语言都有它的文法一样,可以理解为,这就是属於 HTML 本身表示方法与惯用表示方式的概念。

为什麽要使用 Canonical?

SEO 排名问题 — 重复商品

Google很不喜欢排多个一样、或者非常类似的文章,因为这样的重复结果会让读者搜寻完点进去之後,发现内容都长一样,体验会很差,所以遇到搜寻结果出现多篇同样内容的时候,Google倾向只挑一个来排名。

如果是建置电商网站,就得多加留意,在开发阶段得订出一个 canonical 网址:

假设,你的商店有两篇不一样的网页,但是内容大同小异
URL1 – 牛仔裤/黑
URL2 – 牛仔裤/蓝

https://ithelp.ithome.com.tw/upload/images/20201216/20133569WkKsFBxf2p.png
图片来源:https://www.samunderwood.co.uk/visualising-seo/

这样好像没啥感觉,我们看一下全球数一数二的电商平台好了,下图为 Amazon 的某一商品贩售页面的网页原始码一隅。
https://ithelp.ithome.com.tw/upload/images/20201216/20133569OXZhAuExM3.png

Amazon 商品贩售页面也有放置 canonical 资讯
不论 Amazon 的 UTM (Urchin Tracking Module) 网址长怎样,最後搜寻引擎认的都是 canonical 连结。

SEO 排名问题 — 网站转址

由於现在手机装置上网当道,有的网站都会特别针对手机页面独立出一个网址,做为行动版页面显示,开发时通常会以 m.example.com 作为行动版网域,网址除了这点不同,通常後面的网址为了开发程序方便,多半会一致。

如某知名电商购物平台的手机板网址为

https://m.momoshop.com.tw/goods.momo?i_code=7994796

电脑版网址为

https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=7994796

我们可以发现其中商品代码是相同的,网址差别只有使用 www 或 m 的子网域,再打开手机板网址,检视网页原始码仔细看,可以发现其中 canonical 连结网址为网页版的网址。

https://ithelp.ithome.com.tw/upload/images/20201216/20133569orycs6oklX.png

知名店商平台手机板网页原始码:https://m.momoshop.com.tw/goods.momo?i_code=7994796
不过也有一种做法,就是使用 RWD (Responsive web design) 开发,如 Amazon 网站使用同一个网址直接支援手机板或电脑版。

当然在架构上,单一网域与分开手机板专用网域各有优缺,实际还是依自身的系统架构与开发情境而定。

那 www 或 non-www 做单一入口怎做?

有的网站会有将 www 子网域,转为无 www 子网域的需求,如 www.example.com 转址到 example.com 的用法,或反过来的情境。

这边还是会比较推荐使用 301 转址的作法,除非有特殊用途,如旧网站过去没规划好,同时使用 www 与 non-www 的网域对外,现在想要改成单一用 www 或无 www 的网域,做为网站的单一入口。

只是连结都在外流通许久了,要改可能造成使用者遇到连结失效的不便,这时可考虑透过 web server 或开发框架的的 rewrite 功能来处理,不然就是辛苦一点,在页面中放入 canonical 连结。

SEO排名问题 — 外站投稿

如果想要自己写的文章可以得到快速曝光机会,可以选择站在巨人肩膀上获得 SEO 排名,具体上要怎麽做呢?

前面最一开头所提到的,如果要避免自己原本的网站排名,被同样发表的部落格竞争,最好的做法,就是於外面的部落格中,放 canonical 连结。

以国外热门的 Medium 为例子,因为 Medium 的 SEO 很强,於搜寻引擎中排名速度、效果相对好,也有支援使用者客制化自己的 canonical 连结,只要把自己写的文章放上去,为了避免自己的排名被对方给吃掉,白白损失 SEO,Medium 可以在每篇文章中,使用 canonical 放自己部落格文章的网址。

例如今天在自己的部落格与 Medium 中发表一篇内容同样的文章,可以在 Medium 设定个别文章的 canonical 网址,对应到自己部落格中的文章网址,这样就能站在巨人肩版上取得 SEO 排名权重了。

SEO权重问题 — 连结稀释

当然会有人问,如果我不做 canonical 连结会怎样吗?

其实有个潜在的缺点,也就是今天要是内容写得很好,被许多网站引用,作为反向连结,我们都知道,反向连结就像一篇论文被许多人引用的概念,引用越多,表示内容越好,同理,只要取得越多反向连结,你的网站 SEO 就越好。

假设有一篇 post-101 的文章,当你的标准网址不统一,没有在页面中加入 canonical 连结,而大家连到的网址虽然都是同一篇内容,但网址如下:

因此标准网址要统一,才能相对确保 SEO 排名权重不会被分散掉。

SEO问题 — 爬虫资源

我们都知道,搜寻引擎是靠着蜘蛛 (spider) 来爬取 (crawling) 每个网站的内容,所以相对也会耗费宝贵的资源。

如果蜘蛛到你家发现一堆页面都没有统整的话,Google 要多花资源在你家网域中,爬取和辨认重复的 URL,这样可能会排挤到爬取其他网页的资源。

当然,还有一层意义是,以身为搜寻引擎的角度,告诉使用者们,希望大家高抬贵手一下,替他们节省资源,这样就不用花太多力气,但事实如此吗

其实不尽然,使用 canonical 连结,主要目的是协助搜寻引擎辨识谁才是真身,谁才是分身,达到去重复化的效果,问题来了,没人规定说不能再爬一次其他分身的内容,毕竟如果今天你是卖橘子的内容,但有其他卖苹果的内容放了一条 canonical 到你卖橘子的页面…,是不是容易造成混淆?

所以搜寻引擎多少会善尽一些责任,用演算法确认一下,网页的相似度到底多少,当相似度低於一个临界值,就不太适用 canonical 了。

Canonical 在 SEO 上的威力

Canonical 除了主宰排名之外,也因为拥有 canonical 的页面会被优先列为排名的网页,而所有的「连结权重」也都会无痛传递到被 canonical 的页面。

也就是说,今天如果我写一篇文章刊登到外站,它也得到很多高品质的连结,这些连结就会全部移转到标准页面,除了可以借助外站的文章提升自己页面权重之外,也能提升自己网域权重。

相对的,不是「被标准网址」的那一篇文章就几乎失去所有 SEO 的优势。

例如我们接受别人的投稿,但是 canonical 指向的是他的网页:那我们既得不到排名、就算拿到连结也不能累积 SEO 权重,得到的连结都会全盘流失到外面。

为什麽还是有人会接受发表的内容没有 canonical 呢?

可能原因包含:为了站内的读者

假如今天我写了一篇超级好的文章投稿到苹果日报,而苹果里面本来就很多内建的观众,他们并不是透过 Google 搜寻来的,而是属於天天看苹果日报的读者,这样的话,这篇文章能吸纳苹果日报既有的观众。

对苹果来说差别不大,而对作者来说,既能同时在苹果曝光,也不用因为这样放弃部落格文章中的 SEO 优势。

当然还是会有许多不在乎 SEO 排名的大站,例如前面提到的 Medium,Medium 已经超大了,他不会介意写稿的人贴文之後 canonical 到外面去,毕竟作者所写内容,可能会透过他站内的轮播、推荐系统出现在读者眼前。

Canonical 的使用限制

标准网址是提供让 Google「强力参考」的依据,但仅限内容完全相同、极度重复才有用,如果内容有所差异,那麽 canonical 是会失效的,强力参考也并非强制,Google 可能照做,也可能不照做,如前面所述,基本上 canonical 对 Google 而言,是在去重复化,只要突破演算法临界值,还是换判定为不同内容。

当然 canonical 可能故障,近期出包纪录,受到冲击的部分:就是本来应该要显是标准网址的页面,因为 Google 出包所以错乱。

至於比较新的网域,如刚架好没多久的全新网站,往往需要花比较久的时间,才能让 Google 意识到。

有没有解呢?有的。

秘技:canonical 搭配 Medium 的强力功效

站在巨人的肩膀上,善加利用利用是非常重要的事情。

Medium 具有高权重、收录超级快、排名非常好的 SEO 优势,且又有很棒的 “import” 功能可以无痛使用 canonical

那你或许会问,这麽做还有什麽优势?

以下为 Medium 官方的说明节录,简单来说,Medium 是一个具权威性的创作平台,就 SEO 而言,有一定的优势,且将内容放到 Medium 中除了增加内容曝光度外,还能将 SEO 的排名权重与信任度转导到自己的部落格上。

How good is Medium’s SEO? Will it perform better than my own blog?

Medium is a vast publishing platform with many high authority authors publishing content on a frequent basis. It is linked to throughout the internet. This size and authority means that, for any given topic, its SEO is stronger than the vast majority of independent blogs. However, bloggers can use this strong SEO to their benefit. By using Medium’s official import tools, you can reap the benefits of high discoverability on Medium while still crediting all authority towards your own blog using Medium’s canonical URLs.

而知名 SEO 公司,Moz 也在Use Medium as a content distribution network without the drawback of duplicate content.这篇教学中提及,如何运用其优势来发展自身网站的 SEO ,这麽方便的平台不用吗?

Self Canonical 验明网站正身

Canonical 除了跨平台上的使用外,还有一个用法,也是满推荐的用法。

就是把用 canonical 连结指向「自己的页面」,例如首页、重要主页面,以避免预期外的错误发生,如下图本站首页也有 canonical 连结。
https://ithelp.ithome.com.tw/upload/images/20201216/20133569nRT1pePDyq.png
asper.tw 首页的 canonical 连结

还记得前面提到 canonical 的主要功用是什麽吗?

Canonical 主要目的,其实是为了协助搜寻引擎达到去重复化的效果。

更精确地说

帮搜寻引擎贴”标签“告诉它这个网站的”内容“才是正港的本尊,但搜寻引擎也会善尽责任,就算是重复的内容,也会认真的去爬完,再用演算法分析,看到底跟本尊差多少,差太多,搜寻引擎就会把它视为另一个本尊之类的。

这篇文章有说得很清楚,文章的:

  • 文字、图片内容
  • 文章标题
  • 内文中的超连结
  • 是搜寻引擎作为判断是否重复的依据。

所以搜寻引擎鼓励我们,最好每一个页面,特别是重要的首页,都放上 canonical 连结。

私自推测了一下。

在诈骗、钓鱼网站猖獗的现代,这麽做有个好处,万一有个钓鱼网站出现,钓鱼网站如果使用本尊的 canonical 会降低自己的被搜寻机率,而若使用自己的钓鱼网址作为 canonical 连结,搜寻引擎会透过演算法抓包,钓鱼网站的页面内容,怎跟本尊一模一样?

藉此判断或提出警告,让使用者觉察到,也为何钓鱼网站,多半都要用信件的方式来引人上钩,因为搜寻引擎很容易就把它给剔除於排名外了。

Moz 在 Canonicalization 一文中也有指出,如果自行开发动态的电商网站、CMS 平台,要特别留意 canonical 的连结不可任意异动,这样就失去了 canonical 的意义了。

Canonical 标记与 301 转址的差别

同样都可以将 SEO 转往给另一页面,那到底 canonical 与 301 转址有什麽差别呢?

Canonical

  • 多篇一样的文章都同时并存、都能被阅读到
  • 排名:搜寻引擎排名时Google会「强力参考」并且倾向只排名标准网址
  • SEO连结权重:无痛转移到标准网址

301 转址

  • 所有被转址的文章都会重新导向,已导出的页面无法被阅读
  • 排名:除了搬家时短暂交接期之外,搜寻引擎几乎不可能排名不存在的已重新导向页面(强制排名主页,而不再是参考)
  • SEO连结权重:无痛转移到被导向的主页面

Canonical 的现实应用与使用时机

利用 Canonical 的机制重复投稿到不同的平台

假设写了一篇长文章,但贴到其他地方,能够导流的次数也只有一次,且文章会随着时间推移而折旧,加上现代人阅读耐性,因逐渐移往手持装置而变少,所以拆成小短文,除了可以便於观众阅读,也能透过不断在平台上更新,不断出现在观众眼前,进而达成导流的效果。

如果不用 Canonical 连结,搜寻引擎的爬虫会认为你的网站为何有许多与其他网站重复的文章,进而造成 SEO 不利影响。

因此可借助 Medium 的 SEO 优势来加速小站排名。

使用 Medium 建立 canonical 注意事项

不过世界总是没有这麽美好。

用 Medium 来进行搜寻引擎的关键字排名,不一定都会如此顺利。

首先,除非搜寻意图 (search intend) 不同,不然同一个网域 (domain) 中 Google 几乎只愿意排名一个关键字。

再来如果 Medium 已经有别人写一样关键字的内容,而且其内容 Google 比较喜欢,那使用 canonical 这招很可能就会没效果,毕竟较弱的 Medium 文章,就不容易出现在搜寻结果页中,对於帮助被 canonical 的网页效果就有限,甚至没有效果。

我们可以理解成,要「在Medium里面网内互打,很可能只有胜出的那一个页面才会有搜寻引擎能见度」。

此外 canonical 虽然可以无痛传递连结权重,但使用 Medium 来做 canonical 并不能代表你得到来自 Medium 反向连结。

因为 canonical 页面,视为本尊网站的触角延伸,我们可透过 Medium 平台触及更多受众,赚取连结与曝光的机会,但 Medium 的那一个 canonical 页面,并不会为算本尊网站的反向连结 (backlink)。

如何查询canonical是否成功?

非常简单,任何一个浏览器,只要点选右键,点选检视网页原始码即可。
https://ithelp.ithome.com.tw/upload/images/20201216/201335695ybMCPUlDp.png
Chrome 显示网页原始码

接着再 ctrl + f 搜寻 canonical 的关键字,看有没有出现类似如下的内容出现於 head 标记区块内

<link rel="canonical" href="https://asper.tw/money/" />

这样就大功告成了!


<<:  【如何设计软件 ? 】领域驱动设计 | 4 层架构 + 3 类物件

>>:  Day 17 - 卷积神经网络 CNN (2)- 战国时代之版图扩张

Day 0x1E UVa11321 Sort! Sort!! and Sort!!!

Virtual Judge ZeroJudge 题意 真.排序题 输入数字,按照要求输出排序後的结...

Flask API-取得request资料(以ticks API为例)

上次我们测试Flask API已经成功了, 但里面的参数例如时间等都是直接写死在程序码里, 但正常来...

ITHOME IRONMAN体验 Day 30-完赛心得

完赛心得 第13届的铁人赛30天的挑战终於结束了,从参赛至完赛的准备期大约用了二个月。 初期花了大於...

【前端效能优化】图片懒加载 Lazy Load

图片缓载入是为了避免第一次进到网页载入大量图片,造成网页载入速度太慢,因此非第一个画面看到的图片,可...

Day 15 - LocalStorage and Event Delegation

题外话 不知不觉铁人赛也到一半了呢! 开学後,能写文章的时间就渐渐变少(期初各种专题、报告就纷纷露头...