之前有同學在前端技術分享時提到了SEO，另一同學問我SEO是什么，我當時非常詫異，作為前端應該對SEO很了解才對，不過仔細想想，現在前后端分離的大趨勢下，SPA單頁WEB應用也隨之興起，現在的前端新生對SEO不了解也是有原因的，所以本次就帶著大家重識SEO！

什么是SEO

SEO（ ），中文翻譯成搜索引擎優化，是指通過采用易于搜索引擎索引的合理手段，使網站各項基本要素適合搜索引擎的檢索原則并且對用戶更友好，從而更容易被搜索引擎收錄及優先排序

發展史

SEO在國內起步比較晚，主要經歷了四個發展階段：

2003年初到2004年底，剛進入中國不久，SEO在國內剛剛起步

2004年底到2005年上半年, 全國涌現出上百家SEO公司

2005年下半年至2006年9月，SEO作弊泛濫成災，嚴重破壞了市場秩序，威脅到搜索引擎的利益，SEO一度成為作弊的代名詞，引起一些主流搜索引擎的大量清理

2006年9月至今，隨著SEO培訓的興起，SEO技術越來越普及化也更加正規合理化

優點

成本低

利用SEO來給網站做優化，不僅提升網站的排名，還能增加搜索引擎的友好度。企業除支付相關人員的費用外，一般不需要投入其它費用，所以成本很低。

通用性強

SEO人員通過對網站機構、布局、內容、關鍵詞等要素的合理設計，讓網站符合搜索引擎的規則。雖然有很多搜索引擎，但你只要做好百度所搜引擎優化，其它的搜索引擎排名也會跟著提高。

穩定性好

正常情況下，只要是正規方法優化的網站，排名都會比較穩定。只有搜索引擎算法更改或者競爭對手更有優勢，才會讓網站出現比較大的變化。

公平性

在搜索引擎中，所有網站展示機會都是均等的，需要企業公平的競爭排名。搜索引擎不是根據網站的規模、知名度來作為排名的依據，而是綜合多方面的因素，這樣就給網站提供了一個公平競爭的環境。

有效規避無效點擊

有些企業為了增加知名度而選擇付費推廣，這種點擊收費的推廣方式，會遭到同行業的惡意點擊，讓你的費用迅速用完。而利用SEO技術優化的網站就不會出現這種問題，同行業點擊的越多，對網站越有利，可以增加搜索引擎的友好度，進而提升網站的排名。

缺點

見效慢

SEO需要人工來做的，不會立刻收到效果的。一般來說，從開始優化到關鍵詞有排名需要1至3個月左右，如果是競爭激烈的關鍵詞，可能需要更長的時間。

被動性

網站和搜索引擎是一種被動排名關系。網站的優化需要符合搜索引擎規則，這樣才能讓網站的排名靠前。搜索引擎的規則不是一成不變的，它會不定期的修改算法，將更好的內容展示給用戶。因此，需要對網站的優化進行相對應的調整，以應對各種變化。

不確定性

SEO人員無法掌控搜索引擎運行規則的細節，只能通過經驗來對網站進行優化，無法保證重要性的關鍵詞需要多久能排在首頁。另外，網站在搜索引擎的排名受到多種因素的綜合影響，有可能出現優化后排名沒有提升的情況。

原理

通過總結搜索引擎的收錄和排名規律，對網站進行合理優化，使你的網站在百度及其他搜索引擎網站的搜索結果排名提高。

爬行抓取，網絡爬蟲通過特定規則跟蹤網頁的鏈接，從一個鏈接爬到另一個鏈接，把爬行的數據存入本地數據庫

使用索引器對數據庫中重要信息進行處理，如標題、關鍵字、摘要，或者進行全文索引，在索引數據庫中，網頁文字內容，關鍵詞出現的位置、字體、顏色、加粗、斜體等相關信息都有相應記錄。

索引器將用戶提交的搜索詞與數據中的信息進行匹配，從索引數據庫中找出所有包含搜索詞的網頁，并且根據排名算法計算出哪些網頁應該排在前面，然后按照一定格式返回給用戶

將檢索的結果返回給用戶，這就有一個先后順序，搜索引擎的排序主要由以下方面共同確定：

三劍客：TDK

何謂 TDK？做前端的同學也都應該對它們熟稔于心：標簽、 標簽和 標簽。顧名思義，它們分別代表當前頁面的標題、內容摘要和關鍵詞，對于 SEO 來說，title是其中最重要的一員。

標簽

從用戶的角度來看，它的值即用戶在搜索引擎搜索結果中以及瀏覽器標簽頁中看到的標題，如下圖：

title通常由當前頁面的標題加幾個關鍵詞組成，同時力求簡潔明了。總之，用最少的字讓別人知道你接下來要說啥，控制在 40 字以內。比如：

【轉轉】二手交易網,二手手機交易網,58閑置交易APP,轉轉客服

好的 title 不僅讓用戶知道該頁面要講什么東西，提前判斷有沒有我需要的內容，對于搜索引擎也同樣如此。所以，設置 title 時不但要注意以上幾點，更重要的是，不要重復！

它通常不參與搜索引擎的收錄及排名搜索引擎優化，但它會成為搜索引擎在搜索結果頁中展示網頁摘要的備選目標之一，當然也可能選取其他內容，比如網頁正文開頭部分的內容。以 title 部分的示例圖對應的頁面為例，它的 對應的內容是這樣的：

可以看到，正是搜索結果摘要顯示的內容。

有鑒于此， 的值要盡可能表述清楚頁面的內容，從而讓用戶更清楚的認識到即將前往的頁面是否對他有價值。同時字數最好控制在 80 - 100 字以內，各頁面間不要重復！

它主要為搜索引擎提供當前頁面的關鍵詞信息，關鍵詞之間用英文逗號間隔，通常建議三五個詞就足夠了，表達清楚該頁面的關鍵信息，建議控制在 50 字以內。切忌大量堆砌關鍵詞！

其他元信息標簽

SEO 三劍客 “TDK” 都屬于元信息標簽。元信息標簽即用來描述當前頁面 HTML 文檔信息的標簽們，與語義化標簽相對，它們通常不出現在用戶的視野中，所以，只是給機器看的信息，比如瀏覽器、搜索引擎等

meta: 標簽

撇開 “TDK”，其中與 SEO 相關的有一個 標簽（通常含有 name 屬性的 meta 標簽都會有一個 屬性相伴，這我們已經在 D 和 K “劍客”身上領略過了）。默認的，有這樣的標簽屬性設置：。它跟上文中提到的帶有 rel 屬性的 a 標簽略有相似。

含義

INDEX 允許抓取當前頁面

不許抓取當前頁面

允許從當前頁面的鏈接向下爬行

不許從當前頁面的鏈接向下爬行

允許生成快照

不許生成快照

通過以上三組值的相互組合，可以向搜索引擎表達很多有用的信息。比如，對于一個博客站來說，其文章列表頁其實對于搜索引擎收錄來說沒什么意義，但又不得不通過列表頁去爬取收錄具體的文章頁面，于是可以作如下嘗試：

和 標簽

還有一組標簽是含有 rel 屬性的 標簽，它們分別是：

先來看 標簽。當站內存在多個內容相同或相似的頁面時，可以使用該標簽來指向其中一個作為規范頁面。要知道，不只是主路由不同，即便是 http 協議不同（http/https）、查詢字符串的微小差異，搜索引擎都會視為完全不同的頁面/鏈接。假如有很多這種雷同頁面，其權重便被無情稀釋了。比如文章列表頁有很多個，比如同一個商品頁面的鏈接含有不同的業務參數等。以后者為例，假設有如下鏈接：

…

…

此時我們可以為后兩者在 head 中添加 link 標簽：

以此彰顯第一個鏈接的正統地位，告訴搜索引擎搜索引擎優化，其他那倆都是“庶出”，不必在意。假如搜索引擎遵守該標簽的約定，則會很大程度避免頁面權重的分散，不至影響搜索引擎的收錄及排名情況。它的含義與 http``301 永久重定向相似，不同之處在于，用戶訪問標記了 標簽的頁面并不會真的重定向到其他頁面。

再來看 標簽。假如你為移動端和 pc 端設備分別提供了單獨的站點，這個標簽或許能派上用場。有兩個鏈接如下：

它們分別是轉轉網站首頁的 pc 端和移動端，于是就可以在它們的 head 標簽中提供如下標簽，標志其互相對應的關系：

前者放在移動端的頁面中，表示 pc 端頁面大哥馬首是瞻；后者則放在 pc 端對應的頁面中，表示當屏幕尺寸小于 750px 的時候，就應該我移動端頁面小弟上場服務了！

.txt

.txt 文件由一條或多條規則組成。每條規則可禁止（或允許）特定抓取工具抓取相應網站中的指定文件路徑。通俗一點的說法就是：告訴爬蟲，我這個網站，你哪些能看，哪些不能看的一個協議。

為什么要使用 .txt

搜索引擎（爬蟲），訪問一個網站，首先要查看當前網站根目錄下的.txt，然后依據里面的規則，進行網站頁面的爬取。也就是說，.txt起到一個基調的作用，也可以說是爬蟲爬取當前網站的一個行為準則。那使用.txt的目的，就很明確了。

更好地做定向SEO優化，重點曝光有價值的鏈接給爬蟲

將敏感文件保護起來，避免爬蟲爬取收錄

.txt的示例

如下：

# first group

User-agent:

User-agent:

: //

# group

User-agent: *

: /

:

以上：

允許百度和谷歌的搜索引擎訪問站內除 目錄下的所有文件/頁面（eg: .html 可以，/index.html 不可以）；

不允許其他搜索引擎訪問網站；

指定網站地圖所在。

假如你允許整站都可以被訪問，則可以不在根目錄添加 文件

文件規范

文件格式和命名

文件格式為標準 ASCII 或 UTF-8

文件必須命名為 .txt

只能有 1 個 .txt 文件

文件位置 必須位于它所應用到的網站主機的根目錄下

常用的關鍵字

User-agent：網頁抓取工具的名稱

：不應抓取的目錄或網頁

Allow：應抓取的目錄或網頁

：網站的站點地圖的位置

React & Vue 服務器渲染對SEO友好的SSR框架

React（Next.js）：

Vue（Nuxt.js）：

結束語

正確認識SEO，不過分追求SEO，網站還是以內容為主。

提供一個常用的SEO綜合查詢的地址()，感興趣的可以去了解下。

參考文章

————————————————

版權聲明：本文為CSDN博主「大轉轉FE」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：