前言

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

站在用戶的角度思考問題，與客戶深入溝通，找到南潯網(wǎng)站設(shè)計(jì)與南潯網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋南潯地區(qū)。

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

基礎(chǔ)概念

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

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

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

搜索引擎如何工作

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

爬行和抓取

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

預(yù)處理

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

排名

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

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

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

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

抓取、收錄

這里我不會(huì)按照上圖的順序先講投放，因?yàn)橥斗旁趦?yōu)化過程中其實(shí)屬于后置位；在沒有對(duì)網(wǎng)站本身結(jié)構(gòu)進(jìn)行優(yōu)化，沒有進(jìn)行競爭分析（關(guān)鍵詞選擇）之前，你肯定不會(huì)輕易把網(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)站時(shí)，會(huì)先查看網(wǎng)站根目錄下是否有一個(gè)robots.txt文本文件，它用于指定蜘蛛禁止抓取網(wǎng)站某些內(nèi)容，或者允許抓取某些內(nèi)容。

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

URL設(shè)計(jì)

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

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

西瓜熱點(diǎn)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)化

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

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

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

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

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

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

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

解決方案：

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

在HTML文件的head中加上這樣一段代碼：

表示這個(gè)網(wǎng)頁的規(guī)范會(huì)網(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之前，還有一個(gè)重要的事情便是競爭分析和關(guān)鍵詞研究，我們需要簡單了解下為什么需要有這個(gè)步驟。

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

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

• Title 標(biāo)題

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

長度建議 : 50 ~ 60 個(gè)字符

• Description 描述

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

• Keyword 關(guān)鍵詞

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

長度建議

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

舉個(gè)

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

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

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

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

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

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

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

• ?全局只能存在一個(gè)不要濫用，合理使用 

  此類標(biāo)簽

性能優(yōu)化

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

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

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

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

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

搜索引擎受限于自身的技術(shù)能力和計(jì)算資源，對(duì)于頁面源碼尺寸有限制（百度限制128kb，Bing限制125kb），超過的部分會(huì)進(jìn)行截?cái)嗵幚怼?/p>

網(wǎng)頁投放

網(wǎng)站地圖

通過網(wǎng)站地圖，不僅用戶可以對(duì)網(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三個(gè)搜索引擎支持該能力。

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

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

定時(shí)推送

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

主動(dòng)推送機(jī)器人

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

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

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

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

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

排名/點(diǎn)擊

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

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

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

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

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

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

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

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

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

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

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

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

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

爬蟲行為監(jiān)控

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

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

索引量監(jiān)控

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

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

• SEMrush

一個(gè)SEO工具，可以在谷歌插件市場中下載安裝，功能是展示當(dāng)前站點(diǎn)的SEO相關(guān)數(shù)據(jù)，同時(shí)包含了索引量、外鏈量、內(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真的是一個(gè)非常神奇的東西，它既有跡可循，又異常復(fù)雜（玄學(xué)），更多情況下需要的是一種經(jīng)驗(yàn)的積累（AB實(shí)驗(yàn)一定程度上可以緩解）。

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

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

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

新聞標(biāo)題：西瓜業(yè)務(wù)是如何從0-1建設(shè)SEO的
瀏覽路徑：http://uogjgqi.cn/article/dpcjgoo.html