前言

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

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

基礎概念

SEO（Search Engine Optimization） 中文譯為「搜索引擎優化」。

簡單地說，SEO是指網站從自然搜索結果獲得流量的技術和過程，復雜且較為嚴謹的定義如下：

SEO是指在了解搜索引擎自然排名機制的基礎上，對網站進行內部及外部的調整優化，改進網站在搜索結果頁面上的關鍵詞自然排名，以獲得更多流量，從而達成網站銷售及品牌建設的目標。

搜索引擎如何工作

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

爬行和抓取

搜索引擎蜘蛛通過跟蹤鏈接發現和訪問網頁，讀取頁面HTML代碼，存入數據庫。

預處理

索引程序對抓取來的頁面數據進行文字提取、中文分詞、索引、倒排索引等處理，以備排名程序調用。

排名

用戶輸入查詢詞后，排名程序調用索引庫數據，計算相關性，然后按一定格式生成搜索結果頁面。

如何優化建設SEO

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

主要圍繞著這6個環節，我們將對網站逐步進行SEO的優化和建設：

抓取、收錄

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

網站的優化大致可以分為兩部分：一是網站結構調整，二是頁面優化。

我們的網站如果要順利地被蜘蛛抓取和收錄，很大程度上依賴于良好的網站結構。

網站結構優化

避免蜘蛛陷阱

• Flash
• 各種跳轉
• JS鏈接
• 要求登錄

設置robots文件

西瓜M站的robots文件

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

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

URL設計

在設計網站頁面的URL時盡量遵循下面幾個原則：

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

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

現在的URL：
https://m.ixigua.com/xigua_hot_spot/detail/7095918215196318727
更換域名 & URL靜態化

我們針對之前西瓜熱點H5詳情頁的URL進行了域名更換和URL靜態化。

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

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

網址規范化

網址規范化指的是搜索引擎挑選最合適的URL作為真正網址的過程。

那什么是不規范的網址呢？

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

解決方案：

• 百度站長平臺中設置首選域名
• 使用301轉向，將不規范化URL全部轉向到規范化URL
• 使用canonical標簽

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

網站頁面優化

良好的TDK

TDK標簽包括標題標簽title（T）、網站的描述標簽description（D），關鍵詞標簽keywords（K），一般在搜索結果中，頁面的title和description是最有可能被展示出來的。

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

• 確保目標關鍵詞有人搜索
• 降低優化難度
• 尋找有效流量
• 搜索多樣性
• 發現新機會

TDK 通用標準：

• Title 標題

標準格式 : 關鍵詞 - 副關鍵詞 | 品牌名

長度建議 : 50 ~ 60 個字符

• Description 描述

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

• Keyword 關鍵詞

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

長度建議

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

舉個??

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

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

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

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

正確使用 HTML 標簽

<a>標簽需要有 href 屬性，減少使用JS跳轉

• <img>?標簽需要補全 alt 屬性值

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

性能優化

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

• 優化頁面耗時

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

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

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

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

網頁投放

網站地圖

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

HTML網站地圖

• XML網站地圖

API推送

概述

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

特點：速度快、權重高

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

定時推送

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

主動推送機器人

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

因此我開發了西瓜熱點 SEO 機器人，利用飛書提供的企業機器人功能進行定制化開發，通過與機器人對話的形式，能夠方便運營同學將新產生的熱點快捷地進行推送。

內鏈/友鏈投放

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

外鏈，就是別的網站導入自己網站的鏈接，即可以通過其他地方進我們網站，外鏈的作用有很多，不單單只是提高網站的權重，也可以提高某個關鍵詞的排名，一個高質量的外鏈可以為我們的網站帶來更多流量。

排名/點擊

結構化數據

結構化數據，是一種提供網頁相關信息并對網頁內容進行分類的標準化格式，換句話說，就是搜索引擎使用的語義詞匯代碼語言。

這種代碼可以幫助谷歌理解頁面內容。同時，Google 搜索也會利用這種代碼語言（結構化數據）啟用特殊的搜索結果功能和增強功能，豐富搜索結果展示。

<script type="application/ld+json" id="scriptTag" nnotallow="-_vD_w5o44pwi2zXVWL8EA" class="style-scope ytd-player-microformat-renderer">
{ "@context": "https://schema.org",
"@type": "VideoObject",
"description": "《三體》完整合集濃縮版，真.完結撒花！增加了一些內容，修正了一些內容，刪除了一些內容。片尾有彩蛋嘿嘿~\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>

除了谷歌的結構化數據外，我們在百度也會看到一些圖文展現格式，在說明文字的左側放上一張圖片。

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

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

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

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

關聯百度熱搜詞

我們在使用百度搜索引擎的時候，經常會在首頁或者搜索結果也的左側看到一個「百度熱搜」。

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

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

數據監控

爬蟲行為監控

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

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

索引量監控

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

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

• SEMrush

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

排名監控?

搜素引擎自帶的監控

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

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

結語

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

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

要做好SEO最根本的還是需要網站內容是豐富的、有價值的，沒有好的內容作為基礎，SEO的價值也會被減損。

希望我的經驗和積累能夠給大家帶來一些啟發。