SEO、鏈接、a 標(biāo)簽、HTTP 狀態(tài)碼、link 標(biāo)簽、alternate、canonical

唐朝有個(gè)小伙叫韋固喜歡在河邊玩，一天遇到一個(gè)老伯伯在月光下把兩塊石頭系在一起。小伙看到很好奇便問道“系石頭做什么呢？”老伯伯說“我在給當(dāng)婚人牽線，這對(duì)石頭是一對(duì)夫妻。”小伙問道：“那我的妻子是誰呢？”老伯伯說：“就是村頭看菜園子的女孩兒?！?/p>

小伙就好氣，本小伙玉樹臨風(fēng)、風(fēng)流倜儻怎么可以和菜園窮丑丫頭一起呢？第二天路過菜園，抄起石頭就往女孩兒頭上砸過去，女孩兒便倒地不起，小伙也嚇得畏罪潛逃。

后來小伙當(dāng)了大學(xué)士，看上了張員外的外甥女拖媒人提請(qǐng)。洞房花燭夜時(shí)發(fā)現(xiàn)妻子頭上有個(gè)疤痕，問道怎么回事。才發(fā)現(xiàn)原來這就是菜園的窮丑丫頭，把月下老伯的話告訴了妻子，才相信緣分是拆不散的。

這個(gè)便是 千里姻緣一線牽 故事來源，這要是換到現(xiàn)在怕是 想去醫(yī)院看看 wifi 快不快了。不過這句話常說，但是故事并不是所有人都知道，大家可以講給女朋友聽聽加點(diǎn)小內(nèi)容，肯定撩妹滿分。

程序員心中的女神是計(jì)算機(jī)，怎么會(huì)有女朋友呢？-- by 又背鍋的魯迅先生

本來只想講 a 標(biāo)簽，但是其他內(nèi)容關(guān)聯(lián)性也挺強(qiáng)的，所以本文篇幅會(huì)比較大。

為什么會(huì)取這個(gè)標(biāo)題呢？在使用網(wǎng)絡(luò)的時(shí)候，一個(gè)個(gè)網(wǎng)站通過 鏈接 被連接到一起，好似月老的紅線一圈圈的纏繞著。有時(shí)候不得不佩服中文的博大精深，互聯(lián)網(wǎng) 這個(gè)詞真的是非常恰當(dāng) 通過 鏈接 互相聯(lián)系 在一起的網(wǎng)狀結(jié)構(gòu)。

懷舊的同學(xué)可以看看《天庭外傳》小豬八戒牽紅線那段真的是笑死小二了。

當(dāng) 搜索引擎 派出 小蜘蛛 在爬取當(dāng)前鏈接頁面時(shí)，頁面上會(huì)有很多其他相關(guān)鏈接，小蜘蛛 會(huì)順著這個(gè)鏈接繼續(xù)爬取下去到一定的深度，并對(duì)這些相關(guān)鏈接和 當(dāng)前鏈接做出關(guān)聯(lián)，相關(guān)鏈接的好壞會(huì)影響到當(dāng)前鏈接的自然排名。

舉個(gè)最簡(jiǎn)單的例子，閩南風(fēng)俗里在結(jié)婚前有個(gè) 考察環(huán)節(jié)，男女方各自會(huì)組成相親考察團(tuán)到對(duì)方的村里面打聽 對(duì)方 人品、行為等在鄰居口中的評(píng)價(jià)來從側(cè)面了解對(duì)方的情況。

小二的朋友小四因?yàn)橥馄旁趲资昵?偷過一只鴨 被鄰居告知了 考察團(tuán)，導(dǎo)致 相親考察團(tuán) 對(duì)他的印象分有所降低。這里的 外婆 和 小四 便是 相關(guān)鏈接 和 當(dāng)前鏈接 的映照。

在頁面上出現(xiàn)的鏈接幾乎離不開 a 標(biāo)簽，我們通過一個(gè)個(gè)的 a 標(biāo)簽 去往不同的頁面。大家最經(jīng)常使用也是最經(jīng)常忽略的便是 a 標(biāo)簽 中的文本內(nèi)容，當(dāng) 搜索引擎 中的 小蜘蛛 爬取當(dāng)前頁面，發(fā)現(xiàn)頁面上有 a 標(biāo)簽 時(shí)會(huì)繼續(xù)爬取下去，而文本內(nèi)容會(huì)作為鏈接的描述參考。

一般的鏈接結(jié)構(gòu)是前端。其中前端就是文本內(nèi)容也叫做錨文本，通常情況下搜索引擎會(huì)通過錨文本來理解https://juejin.im/timeline/frontend這個(gè)頁面的內(nèi)容是什么。為了告訴 小蜘蛛 哪些可以爬取哪些不可以爬取，可以利用 rel 來指明：

例如在掘金中用戶評(píng)論中使用 noopener、noreferrer 和 nofollow 來防止評(píng)論里使用了一些危險(xiǎn)鏈接：

target="_ blank" 相關(guān)內(nèi)容可以查看 大家一起被捕吧。

相關(guān)鏈接 除了壞處也有好處，如果是一個(gè)知根知底且不錯(cuò)的網(wǎng)站，可以相互關(guān)聯(lián)來提升網(wǎng)站的權(quán)重，這個(gè)方式叫做友情鏈接 從名字上就非常好理解。像京東 就有專門的友情鏈接 http://club.jd.com/links.aspx：

友情鏈接的好處簡(jiǎn)單說來就是：一個(gè)網(wǎng)站被越多站點(diǎn)提及，越知名站點(diǎn)提及，它很大程度上是一個(gè)好網(wǎng)站。例如 BAT 要是掛上了小二的鏈接，大家是不是也會(huì)更相信小二這個(gè)人？

利用 robots.txt 來告訴 小蜘蛛 哪些頁面是可以爬取的那些是不可以爬取的:

User-agent: *

# agency和user禁止訪問
Disallow: /timeline
Disallow: /submit-entry
Disallow: /new-entry
Disallow: /edit-entry
Disallow: /notification
Disallow: /subscribe/subscribed

# agency中允許訪問的目錄
Allow: /agency/join
Allow: /agency/personal

如果想當(dāng)前鏈接 和 相關(guān)鏈接 完全不出現(xiàn)在搜索結(jié)果中，例如可以利用 meta 標(biāo)簽：

name 和 content 值部分參考如下：

https://juejin.im/
https://www.juejin.im/

對(duì)于用戶來說這兩個(gè)鏈接都是掘金的首頁，可是對(duì)于 搜索引擎 來說這兩個(gè)鏈接分別對(duì)應(yīng)的是兩個(gè)不同的網(wǎng)站。

在搜索引擎里，包括參數(shù)的不同，只有鏈接完全一樣，才會(huì)認(rèn)為是同一個(gè)鏈接。內(nèi)容相似很有可能被搜索引擎判讀為作弊，并且會(huì)導(dǎo)致權(quán)重被分散掉。就好比一條街上開兩家 萬達(dá)廣場(chǎng) 直接會(huì)把客源稀釋成兩部分。

更多 URL 相關(guān)可以閱讀 URL 大爆炸。

喜歡動(dòng)手的同學(xué)可能會(huì)去試試訪問 https://www.juejin.im/，就會(huì)發(fā)現(xiàn)鏈接會(huì)被重定向到 https://juejin.im/，確實(shí)這個(gè)方法便能幫助掘金主頁從兩個(gè)入口變?yōu)橐粋€(gè)。但是細(xì)心的同學(xué)還會(huì)打開 控制臺(tái) 發(fā)現(xiàn)跳轉(zhuǎn)的 HTTP Status Code 為 301 而不是 302，這是為什么呢？

ps: 小二沒收一分錢廣告費(fèi)哦，只是單純的舉例子。

301 (Permanently Moved)顧名思義指的是永久性轉(zhuǎn)移，搜索引擎讀取到 301 狀態(tài)碼時(shí)候會(huì)把跳轉(zhuǎn)后的網(wǎng)站當(dāng)做真正的鏈接，這樣多個(gè)鏈接都會(huì)被當(dāng)做同一個(gè)鏈接權(quán)重也得到了保持。使用的場(chǎng)景：

域名改變，告訴搜索引擎新域名和對(duì)新的域名進(jìn)行收錄。

短鏈接，利用短鏈接來方便分享不利于記憶和過長(zhǎng)的原鏈接。

網(wǎng)頁擴(kuò)展名改變，有的站點(diǎn)在鏈接會(huì)帶上 .php、.html、.aspx，當(dāng)用戶保存鏈接為書簽和搜索引擎收錄后，重新更改網(wǎng)頁擴(kuò)展名會(huì)導(dǎo)致原鏈接失效顯示為 404 Not Found，訪問流量白白流逝。

確認(rèn)主頁，就如開頭給出的兩個(gè)掘金主頁鏈接，告訴搜索引擎哪個(gè)才是需要收錄。

302 Found（Moved Temporarily ）表示的是暫時(shí)性的轉(zhuǎn)移，由于是暫時(shí)性的轉(zhuǎn)移搜索引擎和人不一樣不能做到精確的分辨出哪個(gè)才是該收錄的。使用的場(chǎng)景：

頁面刷新跳轉(zhuǎn)，例如創(chuàng)建發(fā)布文章后，跳轉(zhuǎn)到文章的發(fā)布頁面。

回到原先頁面，例如未登錄前先使用302重定向到登錄頁面，登錄成功后再跳回到原來請(qǐng)求的頁面。

移動(dòng)端和PC端，例如在手機(jī)訪問 https://juejin.im/ 跳轉(zhuǎn)到 https://m.juejin.im/，不過有的公司用的是 301，最好還是做成響應(yīng)式的網(wǎng)站。

注意：搜索引擎 有可能就會(huì)把跳轉(zhuǎn)后的網(wǎng)站歸結(jié)為是原網(wǎng)址的內(nèi)容，比如 baidu.com 跳轉(zhuǎn)到 juejin.im 可能會(huì)把掘金的內(nèi)容歸結(jié)為百度的，這也叫做 網(wǎng)址劫持。最簡(jiǎn)單的例子就是超市里的 康師傅 和 康帥傅：

ps: 小二真真真的沒收一分錢廣告費(fèi)哦，只是單純的舉例子。

https://pushme.top/index.html?from=juejin
https://pushme.top/index.html?from=baidu
https://pushme.top/index.html?from=taobao

在為什么里提到了 參數(shù) 的不一樣也會(huì)被當(dāng)做不同鏈接，這里的三個(gè)鏈接其實(shí)都是主頁，只不過是利用了 from 來判斷用戶的來源，可以利用 rel="cononical" 來告訴搜索引擎這幾個(gè)鏈接都是表示哪個(gè)鏈接。

當(dāng)然上面 302 狀態(tài)碼中提到的 移動(dòng)端和PC端 也可以用 rel="cononical" 和 rel="alternate" 來幫助搜索引擎理解兩個(gè)網(wǎng)站的關(guān)系：

rel="alternate" 還可以用來實(shí)現(xiàn)網(wǎng)站的 換膚功能，本文主要是講 SEO 相關(guān)就不擴(kuò)展更多了。

H1 の 小秘密

SEO 初體驗(yàn)

img の 小九九

千里姻緣一線牽

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop