前端通用 SEO 技術(shù)優(yōu)化指南
背景
近期團隊開發(fā)的新產(chǎn)品的官網(wǎng)上線了，隨之而來的問題就是如何讓網(wǎng)站更快更好的傳播出去。當然SEO就是最常見的手段之一，對官網(wǎng)的SEO工作有利于產(chǎn)品的網(wǎng)絡傳播和分享。
有的團隊會有專人負責SEO的工作，那么作為離網(wǎng)站頁面“最近”的前端工程師，可以為SEO做哪些工作呢？
為了更好的沉淀SEO相關(guān)內(nèi)容，為后續(xù)web產(chǎn)品提供優(yōu)化指南，本文就以前端工程師的角度，通過調(diào)研沉淀出了前端通用SEO技術(shù)優(yōu)化指南。
優(yōu)化方向
SEO常見的技術(shù)優(yōu)化手段通常是針對于搜索引擎爬蟲的，通過建立一系列約定的規(guī)則或手段來使得搜索引擎更好地抓取到網(wǎng)站的信息。
我們可以通過兩種方式來提供搜索引擎想要的信息，一種是提供必要的信息在自身的網(wǎng)站服務上被動等待搜索引擎獲取，我們可以命名為：“被動式SEO”。
還有一種是通過搜索引擎服務商提供的后臺管理功能，直接把信息提供給搜索引擎服務商，我們可以命名為：“主動式SEO”。
被動式SEO是常規(guī)地針對所有搜索引擎都開放的優(yōu)化方式，涉及范圍廣，使用標準規(guī)范。而主動式SEO是針對特定的搜索引擎服務商的優(yōu)化，涉及范圍窄但更有針對性，使用標準規(guī)范和特制規(guī)范。
被動式SEO
以下為常見的技術(shù)優(yōu)化SEO的方式：
網(wǎng)站優(yōu)化方向：
1、優(yōu)化網(wǎng)站結(jié)構(gòu)
-
設計簡單易用：增加用戶體驗和爬蟲體驗，有助于搜索排名
-
突出用戶引導 ：突出用戶留存的關(guān)鍵步驟（例如注冊、下載、登錄、快速開始等）
-
移動端優(yōu)先：適配移動端更易獲取更多的流量和用戶留存
-
簡單清晰的導航（內(nèi)鏈）：利于用戶尋址、利于爬蟲爬取
-
盡量減少使用js來渲染內(nèi)容：搜索引擎對JS生成內(nèi)容的爬取處理不佳，前端應用一般使用服務端渲染（SSR）來解決這類問題，避免使用純客戶端渲染（CSR）
-
打印優(yōu)化：針對有打印需求的客戶，增加用戶體驗
2、優(yōu)化網(wǎng)站內(nèi)容（內(nèi)容是SEO的重中之重）
meta-tags
* 以下標簽，可能由于搜索引擎服務商不同而又不同處理
（1）Meta title：標題
-
最佳實踐：
-
一個頁面使用一個不重復的標題
-
簡單精準，避免通用模糊
-
使用短句或短語
-
突出搜索意圖
-
內(nèi)容不要過長，少于60個字符
-
-
編碼：
- <head>
- <title>這里填寫標題</title>
- </head>
-
搜索引擎的關(guān)聯(lián)展示
（2）Meta description：描述
-
最佳實踐：
-
一個頁面使用一個獨立的描述
-
精準地總結(jié)頁面內(nèi)容，避免通用模糊的描述
-
使用句子
-
突出搜索意圖
-
控制內(nèi)容長度，少于160個字符
-
-
編碼：
- <head>
- <meta name="description" content="這里填寫描述">
- </head>
-
搜索引擎的關(guān)聯(lián)展示：如上圖
（3）Meta robots：搜索引擎告知
-
編碼：
- <head>
- <meta name=”robots” content="${content}">
- </head>
- <!--
- content可選：index | noindex | follow | nofollow index: 告訴搜索引擎收錄我
- noindex：告訴搜索引擎不要收錄我
- follow：告訴搜索引擎爬取頁面的links
- nofollow：告訴搜索引擎不要爬取頁面的links 如果不設置此標簽，等同于content="index, follow"
- -->
（4）Meta charset：字符集
-
編碼：
- <head>
- <meta charset="UTF-8">
- </head>
- <!-- 使用UTF-8 Unicode -->
（5）Meta keywords：關(guān)鍵詞
-
警告：搜索引擎可能不使用該字段進行收錄了，有些甚至認為是垃圾信息
-
google不用：https://webmasters.googleblog.com/2009/09/google-does-not-use-keywords-meta-tag.html
-
bing不用：https://searchengineland.com/the-meta-keywords-tag-lives-at-bing-why-only-spammers-should-use-it-96874
-
百度可能還在用：https://ziyuan.baidu.com/college/articleinfo?id=2961
-
-
最佳實踐：
-
由于百度中文還是流量大戶，如果使用，盡量簡短有效，過長可能被認為是垃圾信息
-
如果不考慮百度，可以刪除此標簽
-
-
關(guān)鍵詞可以讓產(chǎn)品同學確認，常見關(guān)鍵詞分類：
-
核心關(guān)鍵詞
-
品牌關(guān)鍵詞
-
長尾關(guān)鍵詞
-
-
編碼：
- <head>
- <meta name=”keywords” content=”s, ss, sss” />
- </head>
body內(nèi)容
-
標題：分級恰當，層級關(guān)系明確（標簽：h1、h2、h3），標題含義明確
-
內(nèi)容：豐富，準確
圖片內(nèi)容
-
文件名稱語義化：img文件名稱最好是有語義的，能標識該圖片內(nèi)容的
-
圖片說明 alt-tag：img標簽的alt屬性值不能空，要填寫該圖片的描述
-
編碼：
- <img src="huyou.jpg" alt="xxxx">
-
3、語義化鏈接
網(wǎng)頁中所有的內(nèi)鏈語義化：
-
bad case：www.example.com/?p=123456
-
good case：www.example.com/topic-name
4、提升網(wǎng)站速度
前端常規(guī)優(yōu)化手段進行網(wǎng)站速度優(yōu)化，具體手段就不在本文展開。優(yōu)化目標也是提升用戶體驗，當網(wǎng)站速度過慢（相關(guān)調(diào)查3s是極限），用戶就會引起流失。
* 測速工具：
https://developers.google.com/speed/pagespeed/insights/
5、外部引流
通過各種手段為本站進行引流，提升本站的流量，提升搜索引擎權(quán)重
-
友情鏈接，站群等（跟搜索引擎機制有關(guān)，有些引擎會對外鏈增加搜索權(quán)重）
-
結(jié)合社交賬號推廣
-
在網(wǎng)站首屏顯眼位置擺放社交賬號
-
提供內(nèi)容分享到社交平臺功能
-
信息提供方向：
1、sitemaps 網(wǎng)站地圖
提供給搜索引擎網(wǎng)站地圖信息的協(xié)議，通過它可以告知搜索引擎關(guān)鍵path信息，類似網(wǎng)站的目錄，可以手動配置，也可以使用生成器自動生成：https://www.xml-sitemaps.com/。
（1）格式
可以是XML、txt等格式，XML格式如下：
- <!-- 詳細配置見：https://www.sitemaps.org/protocol.html -->
- <?xml version="1.0" encoding="UTF-8"?>
- <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
- <url>
- <loc>http://www.example.com/</loc>
- <lastmod>2005-01-01</lastmod>
- <changefreq>monthly</changefreq>
- <priority>0.8</priority>
- </url>
- </urlset>
(2) 配置位置
-
網(wǎng)站根目錄，有些搜索引擎可能會主動爬取。
-
可以在robots.txt中引用，見下個小結(jié)內(nèi)容。
-
可以通過主動SEO方式，在搜索引擎服務商后臺進行提交。
2、robots.txt 網(wǎng)絡爬蟲通信
該文件并不是一個標準規(guī)范，是一種約定俗成的協(xié)議。
（1）格式
- User-agent: * Disallow: Sitemap: https://xxx.sohu.com/sitemap.xml
（2）配置位置
-
網(wǎng)站根目錄
（3）其它相關(guān)
獨立頁面也可以使用meta robots標簽，和robots.txt可以一起使用，見上方內(nèi)容。
主動式SEO
依賴各家搜索引擎服務商提供的后臺服務功能來直接優(yōu)化網(wǎng)站搜索，有些功能是免費的，有些功能是付費的，當然付費效果更好：）。常見的如競價排名、直接購買搜索排名等方式。我們這里更關(guān)注技術(shù)優(yōu)化的內(nèi)容。
搜索引擎服務商
-
百度
-
搜狗
-
360
-
必應
-
谷歌
-
...
我們可以以360提供的站長功能來說明如何優(yōu)化SEO：可以主動提供給360搜索引擎什么樣的信息以及可以從引擎方得到哪些效果和功能。
360的站長平臺的功能（實施方法參考指南：http://www.so.com/help/help_3_16.html）：
-
數(shù)據(jù)提交：網(wǎng)站更快、更多的被360搜索引擎收錄（重點要去實施的）
-
數(shù)據(jù)分析：及時了解網(wǎng)站在360搜索的數(shù)據(jù)情況
-
搜索展現(xiàn)：優(yōu)化網(wǎng)站頁面在360搜索的展現(xiàn)
-
優(yōu)化與維護：避免網(wǎng)站因改版或臨時性關(guān)停而帶來的收錄、流量、排序等的損失
實施計劃
通過以上的SEO調(diào)研，我們可以發(fā)現(xiàn)技術(shù)優(yōu)化手段是有跡可循的，所以可以形成一種通用的模式來幫助網(wǎng)站進行SEO優(yōu)化的自檢和實施方案。
我們總結(jié)了如下的 SEO checklist 列表，作為通用SEO優(yōu)化方案的實施手段應用在我們的網(wǎng)站上，也為之后其它產(chǎn)品進行SEO優(yōu)化提供了切實可行的實施指南。
通用SEO優(yōu)化方案 checklist
-
[ ] 1.優(yōu)化網(wǎng)站結(jié)構(gòu)
-
[ ] 設計簡單易用
-
[ ] 突出用戶引導 Call-to-Action (CTA)
-
[ ] 移動端優(yōu)先
-
[ ] 打印優(yōu)化
-
[ ] 簡單清晰的導航（內(nèi)鏈）
-
[ ] 盡量減少使用js來渲染內(nèi)容
-
-
[ ] 2.優(yōu)化網(wǎng)站內(nèi)容
-
[ ] title
-
[ ] description
-
[ ] robots
-
[ ] charset
-
[ ] keywords
-
[ ] meta-tags
-
[ ] body內(nèi)容
-
[ ] 圖片內(nèi)容
-
-
[ ] 3.語義化鏈接
-
[ ] 4.提升網(wǎng)站速度
-
[ ] 5.外部引流
-
[ ] 6.sitemaps 網(wǎng)站地圖
-
[ ] 7.robots.txt 網(wǎng)絡爬蟲通信
-
[ ] 8.搜索引擎服務商后臺SEO優(yōu)化
-
[ ] 百度
-
[ ] 搜狗
-
[ ] 必應
-
[ ] 360
-
效果評估
當然，實施SEO優(yōu)化方案之后要及時收集和統(tǒng)計數(shù)據(jù)，復盤優(yōu)化效果，為后續(xù)提升SEO優(yōu)化效果不斷積累經(jīng)驗，形成方案不斷自我進化的良性循環(huán)。但技術(shù)優(yōu)化手段畢竟是有限的，SEO的優(yōu)化同樣離不開產(chǎn)品的規(guī)劃、運營的引流、搜索引擎服務商洽談合作等有效手段。作為前端工程師，我們不僅僅可以提供SEO優(yōu)化的一條技術(shù)線，同樣可以把上游和下游連接起來，綜合推動SEO優(yōu)化的進行，不僅能“制造”網(wǎng)站，也能為網(wǎng)站的推廣和傳播貢獻自己的力量。
附錄
名詞解釋
SEO：Search Engine Optimisation 搜索引擎優(yōu)化
SERP：Search Engine Results Page 搜索引擎搜索結(jié)果頁
反鏈數(shù)（外鏈）：指從別的網(wǎng)站導入到某網(wǎng)站的鏈接數(shù)量
