前端通用 SEO 技術(shù)優(yōu)化指南

作者：張嘯 2021-10-09 09:28:56

為了更好的沉淀SEO相關(guān)內(nèi)容，為后續(xù)web產(chǎn)品提供優(yōu)化指南，本文就以前端工程師的角度，通過調(diào)研沉淀出了前端通用SEO技術(shù)優(yōu)化指南。

背景

近期團(tuán)隊(duì)開發(fā)的新產(chǎn)品的官網(wǎng)上線了，隨之而來的問題就是如何讓網(wǎng)站更快更好的傳播出去。當(dāng)然SEO就是最常見的手段之一，對(duì)官網(wǎng)的SEO工作有利于產(chǎn)品的網(wǎng)絡(luò)傳播和分享。

有的團(tuán)隊(duì)會(huì)有專人負(fù)責(zé)SEO的工作，那么作為離網(wǎng)站頁面“最近”的前端工程師，可以為SEO做哪些工作呢？

優(yōu)化方向

SEO常見的技術(shù)優(yōu)化手段通常是針對(duì)于搜索引擎爬蟲的，通過建立一系列約定的規(guī)則或手段來使得搜索引擎更好地抓取到網(wǎng)站的信息。

我們可以通過兩種方式來提供搜索引擎想要的信息，一種是提供必要的信息在自身的網(wǎng)站服務(wù)上被動(dòng)等待搜索引擎獲取，我們可以命名為：“被動(dòng)式SEO”。

還有一種是通過搜索引擎服務(wù)商提供的后臺(tái)管理功能，直接把信息提供給搜索引擎服務(wù)商，我們可以命名為：“主動(dòng)式SEO”。

被動(dòng)式SEO是常規(guī)地針對(duì)所有搜索引擎都開放的優(yōu)化方式，涉及范圍廣，使用標(biāo)準(zhǔn)規(guī)范。而主動(dòng)式SEO是針對(duì)特定的搜索引擎服務(wù)商的優(yōu)化，涉及范圍窄但更有針對(duì)性，使用標(biāo)準(zhǔn)規(guī)范和特制規(guī)范。

被動(dòng)式SEO

以下為常見的技術(shù)優(yōu)化SEO的方式：

網(wǎng)站優(yōu)化方向：

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

設(shè)計(jì)簡(jiǎn)單易用：增加用戶體驗(yàn)和爬蟲體驗(yàn)，有助于搜索排名
突出用戶引導(dǎo) ：突出用戶留存的關(guān)鍵步驟（例如注冊(cè)、下載、登錄、快速開始等）
移動(dòng)端優(yōu)先：適配移動(dòng)端更易獲取更多的流量和用戶留存
簡(jiǎn)單清晰的導(dǎo)航（內(nèi)鏈）：利于用戶尋址、利于爬蟲爬取
盡量減少使用js來渲染內(nèi)容：搜索引擎對(duì)JS生成內(nèi)容的爬取處理不佳，前端應(yīng)用一般使用服務(wù)端渲染（SSR）來解決這類問題，避免使用純客戶端渲染（CSR）
打印優(yōu)化：針對(duì)有打印需求的客戶，增加用戶體驗(yàn)

2、優(yōu)化網(wǎng)站內(nèi)容（內(nèi)容是SEO的重中之重）

meta-tags

* 以下標(biāo)簽，可能由于搜索引擎服務(wù)商不同而又不同處理

（1）Meta title：標(biāo)題

最佳實(shí)踐：
- 一個(gè)頁面使用一個(gè)不重復(fù)的標(biāo)題
- 簡(jiǎn)單精準(zhǔn)，避免通用模糊
- 使用短句或短語
- 突出搜索意圖
- 內(nèi)容不要過長，少于60個(gè)字符

編碼：

<head> 
    <title>這里填寫標(biāo)題</title> 
</head>

搜索引擎的關(guān)聯(lián)展示

（2）Meta description：描述

最佳實(shí)踐：
- 一個(gè)頁面使用一個(gè)獨(dú)立的描述
- 精準(zhǔn)地總結(jié)頁面內(nèi)容，避免通用模糊的描述
- 使用句子
- 突出搜索意圖
- 控制內(nèi)容長度，少于160個(gè)字符

編碼：

<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 如果不設(shè)置此標(biāo)簽，等同于content="index, follow"  
-->

（4）Meta charset：字符集

編碼：

<head> 
 <meta charset="UTF-8"> 
</head> 
<!-- 使用UTF-8 Unicode -->

（5）Meta keywords：關(guān)鍵詞

警告：搜索引擎可能不使用該字段進(jìn)行收錄了，有些甚至認(rè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
最佳實(shí)踐：
- 由于百度中文還是流量大戶，如果使用，盡量簡(jiǎn)短有效，過長可能被認(rèn)為是垃圾信息
- 如果不考慮百度，可以刪除此標(biāo)簽
關(guān)鍵詞可以讓產(chǎn)品同學(xué)確認(rèn)，常見關(guān)鍵詞分類：
- 核心關(guān)鍵詞
- 品牌關(guān)鍵詞
- 長尾關(guān)鍵詞

編碼：

<head> 
 <meta name=”keywords” content=”s, ss, sss” /> 
</head>

body內(nèi)容

標(biāo)題：分級(jí)恰當(dāng)，層級(jí)關(guān)系明確（標(biāo)簽：h1、h2、h3），標(biāo)題含義明確
內(nèi)容：豐富，準(zhǔn)確

圖片內(nèi)容

文件名稱語義化：img文件名稱最好是有語義的，能標(biāo)識(shí)該圖片內(nèi)容的
圖片說明 alt-tag：img標(biāo)簽的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)化手段進(jìn)行網(wǎng)站速度優(yōu)化，具體手段就不在本文展開。優(yōu)化目標(biāo)也是提升用戶體驗(yàn)，當(dāng)網(wǎng)站速度過慢（相關(guān)調(diào)查3s是極限），用戶就會(huì)引起流失。

* 測(cè)速工具：

https://developers.google.com/speed/pagespeed/insights/

5、外部引流

通過各種手段為本站進(jìn)行引流，提升本站的流量，提升搜索引擎權(quán)重

友情鏈接，站群等（跟搜索引擎機(jī)制有關(guān)，有些引擎會(huì)對(duì)外鏈增加搜索權(quán)重）
結(jié)合社交賬號(hào)推廣
- 在網(wǎng)站首屏顯眼位置擺放社交賬號(hào)
- 提供內(nèi)容分享到社交平臺(tái)功能

信息提供方向：

1、sitemaps 網(wǎng)站地圖

提供給搜索引擎網(wǎng)站地圖信息的協(xié)議，通過它可以告知搜索引擎關(guān)鍵path信息，類似網(wǎng)站的目錄，可以手動(dòng)配置，也可以使用生成器自動(dòng)生成：https://www.xml-sitemaps.com/。

（1）格式

可以是XML、txt等格式，XML格式如下：

<!-- 詳細(xì)配置見：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)站根目錄，有些搜索引擎可能會(huì)主動(dòng)爬取。
可以在robots.txt中引用，見下個(gè)小結(jié)內(nèi)容。
可以通過主動(dòng)SEO方式，在搜索引擎服務(wù)商后臺(tái)進(jìn)行提交。

2、robots.txt 網(wǎng)絡(luò)爬蟲通信

該文件并不是一個(gè)標(biāo)準(zhǔn)規(guī)范，是一種約定俗成的協(xié)議。

（1）格式

User-agent: * Disallow:  Sitemap: https://xxx.sohu.com/sitemap.xml

（2）配置位置

（3）其它相關(guān)

獨(dú)立頁面也可以使用meta robots標(biāo)簽，和robots.txt可以一起使用，見上方內(nèi)容。

主動(dòng)式SEO

依賴各家搜索引擎服務(wù)商提供的后臺(tái)服務(wù)功能來直接優(yōu)化網(wǎng)站搜索，有些功能是免費(fèi)的，有些功能是付費(fèi)的，當(dāng)然付費(fèi)效果更好：）。常見的如競(jìng)價(jià)排名、直接購買搜索排名等方式。我們這里更關(guān)注技術(shù)優(yōu)化的內(nèi)容。

搜索引擎服務(wù)商

百度
搜狗
360
必應(yīng)
谷歌
...

我們可以以360提供的站長功能來說明如何優(yōu)化SEO：可以主動(dòng)提供給360搜索引擎什么樣的信息以及可以從引擎方得到哪些效果和功能。

360的站長平臺(tái)的功能（實(shí)施方法參考指南：http://www.so.com/help/help_3_16.html）：

數(shù)據(jù)提交：網(wǎng)站更快、更多的被360搜索引擎收錄（重點(diǎn)要去實(shí)施的）
數(shù)據(jù)分析：及時(shí)了解網(wǎng)站在360搜索的數(shù)據(jù)情況
搜索展現(xiàn)：優(yōu)化網(wǎng)站頁面在360搜索的展現(xiàn)
優(yōu)化與維護(hù)：避免網(wǎng)站因改版或臨時(shí)性關(guān)停而帶來的收錄、流量、排序等的損失

實(shí)施計(jì)劃

通過以上的SEO調(diào)研，我們可以發(fā)現(xiàn)技術(shù)優(yōu)化手段是有跡可循的，所以可以形成一種通用的模式來幫助網(wǎng)站進(jìn)行SEO優(yōu)化的自檢和實(shí)施方案。

我們總結(jié)了如下的 SEO checklist 列表，作為通用SEO優(yōu)化方案的實(shí)施手段應(yīng)用在我們的網(wǎng)站上，也為之后其它產(chǎn)品進(jìn)行SEO優(yōu)化提供了切實(shí)可行的實(shí)施指南。

通用SEO優(yōu)化方案 checklist

[ ] 1.優(yōu)化網(wǎng)站結(jié)構(gòu)
- [ ] 設(shè)計(jì)簡(jiǎn)單易用
- [ ] 突出用戶引導(dǎo) Call-to-Action (CTA)
- [ ] 移動(dòng)端優(yōu)先
- [ ] 打印優(yōu)化
- [ ] 簡(jiǎn)單清晰的導(dǎo)航（內(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)絡(luò)爬蟲通信
[ ] 8.搜索引擎服務(wù)商后臺(tái)SEO優(yōu)化
- [ ] 百度
- [ ] 搜狗
- [ ] 必應(yīng)
- [ ] 360

效果評(píng)估

當(dāng)然，實(shí)施SEO優(yōu)化方案之后要及時(shí)收集和統(tǒng)計(jì)數(shù)據(jù)，復(fù)盤優(yōu)化效果，為后續(xù)提升SEO優(yōu)化效果不斷積累經(jīng)驗(yàn)，形成方案不斷自我進(jìn)化的良性循環(huán)。但技術(shù)優(yōu)化手段畢竟是有限的，SEO的優(yōu)化同樣離不開產(chǎn)品的規(guī)劃、運(yùn)營的引流、搜索引擎服務(wù)商洽談合作等有效手段。作為前端工程師，我們不僅僅可以提供SEO優(yōu)化的一條技術(shù)線，同樣可以把上游和下游連接起來，綜合推動(dòng)SEO優(yōu)化的進(jìn)行，不僅能“制造”網(wǎng)站，也能為網(wǎng)站的推廣和傳播貢獻(xiàn)自己的力量。