前言

對于各位前端開發(fā)者，SEO是一個老生常談的話題，尤其對于運營著自己的博客、網(wǎng)店、個人網(wǎng)站的開發(fā)者來說，SEO是獲取自然流量始終繞不開的話題。各大搜索引擎每天都會接收用戶上億次的搜索，是不可忽略的大流量入口，如何從這龐大的搜索流量中分一杯羹，是每一個站長都需要思考的問題。

本文將會具體結(jié)合西瓜熱點詳情頁從0到1的SEO建設(shè)過程，為大家介紹作為FE業(yè)務(wù)方如何去學(xué)習(xí)了解、建設(shè)SEO；本文不會就SEO的一些基礎(chǔ)理論和搜索引擎算法進(jìn)行深入探討，而是希望從熱點推廣的視角介紹一些SEO方法。

基礎(chǔ)概念

SEO（Search Engine Optimization） 中文譯為「搜索引擎優(yōu)化」。

簡單地說，SEO是指網(wǎng)站從自然搜索結(jié)果獲得流量的技術(shù)和過程，復(fù)雜且較為嚴(yán)謹(jǐn)?shù)亩x如下：

SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)上，對網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索結(jié)果頁面上的關(guān)鍵詞自然排名，以獲得更多流量，從而達(dá)成網(wǎng)站銷售及品牌建設(shè)的目標(biāo)。

搜索引擎如何工作

搜索引擎的工作過程大體可以分成三個階段：

爬行和抓取

搜索引擎蜘蛛通過跟蹤鏈接發(fā)現(xiàn)和訪問網(wǎng)頁，讀取頁面HTML代碼，存入數(shù)據(jù)庫。

預(yù)處理

索引程序?qū)ψト淼捻撁鏀?shù)據(jù)進(jìn)行文字提取、中文分詞、索引、倒排索引等處理，以備排名程序調(diào)用。

排名

用戶輸入查詢詞后，排名程序調(diào)用索引庫數(shù)據(jù)，計算相關(guān)性，然后按一定格式生成搜索結(jié)果頁面。

如何優(yōu)化建設(shè)SEO

搜索引擎的工作流程主要涉及了2個角色——網(wǎng)站和搜索引擎，我們將第3個角色用戶也加入其中后，就可以形成包含3個主要角色和6個核心環(huán)節(jié)的搜索生態(tài)模型。

主要圍繞著這6個環(huán)節(jié)，我們將對網(wǎng)站逐步進(jìn)行SEO的優(yōu)化和建設(shè)：

抓取、收錄

這里我不會按照上圖的順序先講投放，因為投放在優(yōu)化過程中其實屬于后置位；在沒有對網(wǎng)站本身結(jié)構(gòu)進(jìn)行優(yōu)化，沒有進(jìn)行競爭分析（關(guān)鍵詞選擇）之前，你肯定不會輕易把網(wǎng)站大量投放出去吧？

網(wǎng)站的優(yōu)化大致可以分為兩部分：一是網(wǎng)站結(jié)構(gòu)調(diào)整，二是頁面優(yōu)化。

我們的網(wǎng)站如果要順利地被蜘蛛抓取和收錄，很大程度上依賴于良好的網(wǎng)站結(jié)構(gòu)。

網(wǎng)站結(jié)構(gòu)優(yōu)化

避免蜘蛛陷阱

• Flash
• 各種跳轉(zhuǎn)
• JS鏈接
• 要求登錄

設(shè)置robots文件

西瓜M站的robots文件

robots文件屬于網(wǎng)站禁止抓取、索引機(jī)制的一部分，搜索引擎蜘蛛訪問網(wǎng)站時，會先查看網(wǎng)站根目錄下是否有一個robots.txt文本文件，它用于指定蜘蛛禁止抓取網(wǎng)站某些內(nèi)容，或者允許抓取某些內(nèi)容。

一些網(wǎng)站不存在robots文件時會返回200狀態(tài)碼和一些錯誤信息，而不是404狀態(tài)碼，這可能使搜索引擎蜘蛛錯誤解讀robots文件信息，所以建議就算允許抓取所有內(nèi)容，也要建一個空的robots文件，放在根目錄下。

URL設(shè)計

在設(shè)計網(wǎng)站頁面的URL時盡量遵循下面幾個原則：

• 越短越好
• 避免太多參數(shù)
• 目錄層次盡量少
• 包含關(guān)鍵詞（英文）
• 字母小寫
• 連詞符使用「-」分隔
• 使用https

西瓜熱點H5詳情頁之前的URL：
https://h5.ixigua.com/xigua_hot_spot/detail/?hotspotId=7095918215196318727

現(xiàn)在的URL：
https://m.ixigua.com/xigua_hot_spot/detail/7095918215196318727
更換域名 & URL靜態(tài)化

我們針對之前西瓜熱點H5詳情頁的URL進(jìn)行了域名更換和URL靜態(tài)化。

域名更換：M站的域名擁有較高的權(quán)重（較長的域名年齡、收錄頁面總數(shù)多、特征關(guān)鍵詞排名高等），將熱點的域名更換至M站域名有利于我們的頁面能夠被搜索引擎收錄，且在搜索排名上具有一定優(yōu)勢。

URL 靜態(tài)化 ：一般來說URL中有兩三個參數(shù)，對于收錄來說不會造成任何影響，但還是建議將URL靜態(tài)化，既能提高用戶體驗，又能降低收錄難度。

網(wǎng)址規(guī)范化

網(wǎng)址規(guī)范化指的是搜索引擎挑選最合適的URL作為真正網(wǎng)址的過程。

那什么是不規(guī)范的網(wǎng)址呢？

舉個例子，一般來說一個網(wǎng)站的首頁URL應(yīng)該是固定的，但在一些網(wǎng)站鏈接回首頁時所使用的URL并不是唯一的，有時連到https://www.xxx.com， 有時連到 http://www.xxx.com/index.html 。這樣不規(guī)范化的網(wǎng)址會給搜索引擎造成困擾，可能造成權(quán)重分散、浪費爬取份額等問題。

解決方案：

• 百度站長平臺中設(shè)置首選域名
• 使用301轉(zhuǎn)向，將不規(guī)范化URL全部轉(zhuǎn)向到規(guī)范化URL
• 使用canonical標(biāo)簽

在HTML文件的head中加上這樣一段代碼：
<link rel="canonical" href="https://m.ixigua.com/xigua_hot_spot/detail/7101281806032313356">
表示這個網(wǎng)頁的規(guī)范會網(wǎng)址應(yīng)該是:https://m.ixigua.com/xigua_hot_spot/detail/7101281806032313356

網(wǎng)站頁面優(yōu)化

良好的TDK

TDK標(biāo)簽包括標(biāo)題標(biāo)簽title（T）、網(wǎng)站的描述標(biāo)簽description（D），關(guān)鍵詞標(biāo)簽keywords（K），一般在搜索結(jié)果中，頁面的title和description是最有可能被展示出來的。

在設(shè)置網(wǎng)站的TDK之前，還有一個重要的事情便是競爭分析和關(guān)鍵詞研究，我們需要簡單了解下為什么需要有這個步驟。

• 確保目標(biāo)關(guān)鍵詞有人搜索
• 降低優(yōu)化難度
• 尋找有效流量
• 搜索多樣性
• 發(fā)現(xiàn)新機(jī)會

TDK 通用標(biāo)準(zhǔn)：

• Title 標(biāo)題

標(biāo)準(zhǔn)格式 : 關(guān)鍵詞 - 副關(guān)鍵詞 | 品牌名

長度建議 : 50 ~ 60 個字符

• Description 描述

長度建議: 網(wǎng)頁描述的長度任意，最佳實踐長度在 155 ~ 160 個字符間之間，描述文本盡量使用關(guān)鍵詞和吸引用戶的話術(shù)，提升點擊率（CTR）。

• Keyword 關(guān)鍵詞

這里的keyword不僅僅指的是meta keywords，而是站點/文章title/視頻描述中可以增加關(guān)鍵詞

長度建議

• 主頁關(guān)鍵詞布局一般是核心詞，以5~10個為宜。關(guān)鍵詞之間用英文狀態(tài)下的逗號或者下劃線隔開，搜索量大的在前，搜索量小的在后，同個關(guān)鍵詞不可以反復(fù)出現(xiàn)，以免堆積。
• 不同欄目設(shè)置不同的關(guān)鍵詞。欄目頁屬于內(nèi)頁，所以關(guān)鍵詞最好選擇長尾關(guān)鍵詞，并結(jié)合網(wǎng)站當(dāng)前欄目名稱選詞，一般布局3~5個長尾關(guān)鍵詞。
• 視頻頁主要布局的關(guān)鍵詞是長尾關(guān)鍵詞，1~2個為宜，一定要和視頻主題高度吻合。

舉個??

西瓜熱點詳情頁是一個靜態(tài)的CSR站點，這樣的頁面渲染方式是無法對頁面的TDK進(jìn)行定制化處理的。

因此我選擇采用模板引擎進(jìn)行TDK定制化處理。

• 注入表達(dá)式： 由于在編譯運行時代碼時會利用到html模板，并將編譯得到的js、css文件從html模板中引入，所以我們可以預(yù)先在html模板中注入模板語言表達(dá)式來占位TDK，`title`，`description`，`keywords`。

• 更改后綴： 在運行時代碼編譯完成得到最終產(chǎn)物后，其中html文件中便會包含之前注入的模板表達(dá)式，此時將html文件后綴更改為模板語言后綴(index.handlebars)。
• Node服務(wù)： 在router攔截到對應(yīng)路由請求時(/xigua_hot_spot/detail/:hotspotId)，在controller中請求對應(yīng)熱點id的具體內(nèi)容（標(biāo)題、介紹）,利用ctx.render將對應(yīng)的變量傳遞給模板文件(index.handlebars)并返回文件。

正確使用 HTML 標(biāo)簽

<a>標(biāo)簽需要有 href 屬性，減少使用JS跳轉(zhuǎn)

• <img>?標(biāo)簽需要補(bǔ)全 alt 屬性值

• <h1>?全局只能存在一個不要濫用，合理使用 <h2><h3><h4>此類標(biāo)簽

性能優(yōu)化

頁面速度是重要的排名因素，也影響到爬蟲的爬取效率。無論百度還是Google都已經(jīng)有數(shù)次以頁面打開速度為目標(biāo)的算法更新

• 優(yōu)化頁面耗時

網(wǎng)站在搜索結(jié)果中的排名會受到頁面打開速度的影響，例如百度在2017年10月推出閃電算法，針對頁面的打開速度給予政策支持，頁面的首屏加載速度越快往往會獲得更高的排名以及更多的流量傾斜。谷歌也在2021年6月發(fā)布公告稱，網(wǎng)頁核心性能指標(biāo)(CLS、FID、LCP)將被視為排名因素之一。

良好的首屏加載耗時不僅會受到搜索引擎的青睞，同時也能為瀏覽網(wǎng)站的用戶提供更好的體驗和服務(wù)。

• 優(yōu)化頁面體積(< 125 kb )

搜索引擎受限于自身的技術(shù)能力和計算資源，對于頁面源碼尺寸有限制（百度限制128kb，Bing限制125kb），超過的部分會進(jìn)行截斷處理。

網(wǎng)頁投放

網(wǎng)站地圖

通過網(wǎng)站地圖，不僅用戶可以對網(wǎng)站的結(jié)構(gòu)和所有內(nèi)容一目了然，搜索引擎也可以跟蹤網(wǎng)站地圖鏈接爬行到網(wǎng)站的所有主要部分；網(wǎng)站地圖有兩種形式，第一種被稱為HTML版本網(wǎng)站地圖，英文是sitemap，另一種是XML版本網(wǎng)站地圖，英文Sitemap。

HTML網(wǎng)站地圖

• XML網(wǎng)站地圖

API推送

概述

通過開放API接口將網(wǎng)頁鏈接直接推送給搜索引擎，目前只有百度、Google、Bing三個搜索引擎支持該能力。

特點：速度快、權(quán)重高

相比于網(wǎng)站地圖，API推送網(wǎng)頁鏈接可以使得搜索引擎更加快速地爬取和收錄網(wǎng)頁，并且搜索引擎會認(rèn)為站長主動推送的鏈接可能會有更高的質(zhì)量，適合于更新速率快、時效性高的網(wǎng)頁。

定時推送

熱點事件的發(fā)生時機(jī)較為隨機(jī)，且具有較強(qiáng)的時效性，為了能夠讓搜索引擎更加快速地爬取和收錄西瓜熱點頁面，利用Timer觸發(fā)器，定時將熱點頁面通過API推送給搜索引擎。

主動推送機(jī)器人

西瓜熱點具有重運營的屬性特點，熱點的產(chǎn)生和推廣與運營密切相關(guān)；從這點出發(fā)我思考能不能開發(fā)一個西瓜熱點SEO相關(guān)的運營工具，當(dāng)熱點新鮮產(chǎn)生的時候，運營可以借助我的工具將該熱點及時推送給搜索引擎，加快該熱點被搜索引擎爬取收錄的速度，獲取更多的自然流量。

因此我開發(fā)了西瓜熱點 SEO 機(jī)器人，利用飛書提供的企業(yè)機(jī)器人功能進(jìn)行定制化開發(fā)，通過與機(jī)器人對話的形式，能夠方便運營同學(xué)將新產(chǎn)生的熱點快捷地進(jìn)行推送。

內(nèi)鏈/友鏈投放

內(nèi)鏈，就是在同一個網(wǎng)站中，內(nèi)容頁面之間相互鏈接，也就是網(wǎng)站內(nèi)部的鏈接。好的內(nèi)鏈布局合理，結(jié)構(gòu)清晰，能提高搜索引擎對我們網(wǎng)站的收錄和權(quán)重，是很重要的。內(nèi)鏈還可以控制成本，提高索引效率，提升網(wǎng)站的排名，傳遞權(quán)重，最終提升流量。

外鏈，就是別的網(wǎng)站導(dǎo)入自己網(wǎng)站的鏈接，即可以通過其他地方進(jìn)我們網(wǎng)站，外鏈的作用有很多，不單單只是提高網(wǎng)站的權(quán)重，也可以提高某個關(guān)鍵詞的排名，一個高質(zhì)量的外鏈可以為我們的網(wǎng)站帶來更多流量。

排名/點擊

結(jié)構(gòu)化數(shù)據(jù)

結(jié)構(gòu)化數(shù)據(jù)，是一種提供網(wǎng)頁相關(guān)信息并對網(wǎng)頁內(nèi)容進(jìn)行分類的標(biāo)準(zhǔn)化格式，換句話說，就是搜索引擎使用的語義詞匯代碼語言。

這種代碼可以幫助谷歌理解頁面內(nèi)容。同時，Google 搜索也會利用這種代碼語言（結(jié)構(gòu)化數(shù)據(jù)）啟用特殊的搜索結(jié)果功能和增強(qiáng)功能，豐富搜索結(jié)果展示。

<script type="application/ld+json" id="scriptTag" nnotallow="-_vD_w5o44pwi2zXVWL8EA" class="style-scope ytd-player-microformat-renderer">
{ "@context": "https://schema.org",
"@type": "VideoObject",
"description": "《三體》完整合集濃縮版，真.完結(jié)撒花！增加了一些內(nèi)容，修正了一些內(nèi)容，刪除了一些內(nèi)容。片尾有彩蛋嘿嘿~\n希望你們喜歡。\n\n#三體 #名偵探拳頭 #科幻",
"duration": "PT4560S",
"embedUrl": "https://www.youtube.com/embed/QO25QnboJG0",
"interactionCount": "7714441",
"name": "【三體解說】76分鐘看完《三體》全集。宇宙很大，生活更大。【名偵探拳頭】",
"thumbnailUrl": [ "https://i.ytimg.com/vi/QO25QnboJG0/maxresdefault.jpg"
] ,
"uploadDate": "2019-06-02",
"genre": "People & Blogs",
"author": "名偵探拳頭"
}
</script>

除了谷歌的結(jié)構(gòu)化數(shù)據(jù)外，我們在百度也會看到一些圖文展現(xiàn)格式，在說明文字的左側(cè)放上一張圖片。

列表左側(cè)的圖片來源有兩個，大部分情況下是從頁面本身選取的，從百度官方介紹和經(jīng)驗來看，被選取的圖片需要滿足這些條件：

• 圖片與頁面內(nèi)容相關(guān)
• 足夠清晰
• 足夠尺寸，像素121 x 75以上
• 橫跨比例適當(dāng)，大致為121:75左右
• 正常IMG標(biāo)簽圖片，不是背景層

需要注意的是，就算滿足了以上這些條件，頁面在搜索結(jié)果中可能還是展現(xiàn)不出圖片(百度辣雞)，這跟百度自身的策略和算法相關(guān)，它也會更傾向于把資源分配給自家的產(chǎn)品(好看視頻、百家號等)。

圖文展現(xiàn)這種形式非常直觀，可以提高用戶體驗，使用戶更容易快速判斷頁面內(nèi)容，對頁面吸引視線、提高點擊率有明顯作用。

關(guān)聯(lián)百度熱搜詞

我們在使用百度搜索引擎的時候，經(jīng)常會在首頁或者搜索結(jié)果也的左側(cè)看到一個「百度熱搜」。

我們點擊其中一個熱點后，會進(jìn)入該熱點的搜索結(jié)果頁，并且在搜索結(jié)果的最上方聚合展示有關(guān)該熱點的相關(guān)資訊網(wǎng)頁，可以發(fā)現(xiàn)網(wǎng)頁標(biāo)題中包含熱搜詞的頁面的搜索結(jié)果往往會獲得較高的排名，例如下圖「韓國主帥賽后怒斥裁判被紅牌驅(qū)逐」這個熱搜詞，我們能看到排名較前的幾個搜索結(jié)果中都包含了該熱搜詞。

基于這樣的推斷，我思考能否通過將西瓜熱點中與百度熱搜詞中相關(guān)聯(lián)的內(nèi)容進(jìn)行聯(lián)動，當(dāng)百度爬蟲爬取西瓜熱點頁面時，判斷百度熱搜詞中是否有與該西瓜熱點相近的內(nèi)容，通過替換西瓜熱點的標(biāo)題來達(dá)到在百度搜索中提升排名的目的。

數(shù)據(jù)監(jiān)控

爬蟲行為監(jiān)控

收集爬蟲日志，了解爬蟲的行為變化可以在流量變化前更加靈敏得反應(yīng)頁面SEO的狀態(tài)

新上SEO功能后，可以通過爬蟲日志來靈敏得判斷功能的影響

索引量監(jiān)控

• 通過各個平臺自帶的站長平臺，可以看到索引量的變化（有些平臺更新可能不是很及時）
• 通過site: ??m.ixigua.com?? 語句，可以查詢索引的數(shù)據(jù)

• 分頁面的索引，使用inurl:/xigua_hot_spot site:m.ixigua.com語句

• SEMrush

一個SEO工具，可以在谷歌插件市場中下載安裝，功能是展示當(dāng)前站點的SEO相關(guān)數(shù)據(jù)，同時包含了索引量、外鏈量、內(nèi)鏈量等相關(guān)數(shù)據(jù)。

排名監(jiān)控?

搜素引擎自帶的監(jiān)控

• 百度站長：https://ziyuan.baidu.com/keywords/index
• 谷歌：https://search.google.com/search-console

通過腳本收集相關(guān)頁面在指定搜索關(guān)鍵詞下的排名情況

結(jié)語

SEO真的是一個非常神奇的東西，它既有跡可循，又異常復(fù)雜（玄學(xué)），更多情況下需要的是一種經(jīng)驗的積累（AB實驗一定程度上可以緩解）。

本文主要涵蓋了我這段時間以來的SEO優(yōu)化經(jīng)驗，但依然只是SEO的冰山一角，再加上SEO不再局限于Web端，在APP端內(nèi)也在不斷興起，要徹底探明掌握它的奧秘還是任重道遠(yuǎn)。

要做好SEO最根本的還是需要網(wǎng)站內(nèi)容是豐富的、有價值的，沒有好的內(nèi)容作為基礎(chǔ)，SEO的價值也會被減損。

希望我的經(jīng)驗和積累能夠給大家?guī)硪恍﹩l(fā)。