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