給前端工程師的五個SEO建議

我經常跟各個崗位的同事溝通，發現他們對SEO這個流量渠道了解很少。我甚至做了一個簡單的PPT，用于介紹SEO業務（之后會整理出來）。

與此同時，這些同事的工作對SEO的幫助很大，比如前端工程師，直接影響頁面展現和抓取。

而且之前正好看到途牛技術中心有一篇講前端工程師如何做SEO的文章，于是想從SEO業務方的角度整理一下。

從業務的角度去看，前端工程師涉及的SEO建議，很重點的有5個方面，分別是：URL、移動友好性、性能、頁面元素、內容展現。

URL是SEO工作的基礎，也是簡單被忽視的一個因素。URL一定要注重以下三個方面：

不同的頁面內容要有不同的URL，而不是用TAB來呈現URL要保證優選性URL要簡短，有可讀性

首先說第一點，不同內容用不同的URL來承接。我們的前端工程師在做一些專題的時候，就經常用JS來呈現網頁內容，而沒有用單獨的URL來承接。比如下面這個頁面：

當用戶點擊某個類目，前端工程師會用新獲取到的內容去更新原有頁面，而沒有生成新的URL。這就造成了這個頻道只有一個URL。

而SEO在投放的時候，其實是按照頁面緯度投放。假如這個專題頁只有一個URL，也就是只能投放一個網頁，而類目的那些頁面因為沒有生成單獨的URL而無法投放（一般來說，投放的網頁越多，產生的SEO流量越多）。

其次，URL的優選性。正常情況下，URL和網頁是一一對應的，一個網頁只有一個URL，一個URL也只承載一個主題的網頁。（注：假如一個網頁有多個URL，可以用canonical來指定規范網址）。

很后，URL要簡短，有可讀性。Google會利用URL來判定網頁在整個網站內的層級，所以不要用過長的URL。而且，簡短和可讀的URL對用戶會有更好的體驗，吸引用戶點擊（英文URL更是如此）。

注：Google并不排斥動態URL，比如WordPress的標準URL（?p=）就是動態的。但要解決好參數過多、參數順序不一致的問題。

參考文檔：《保持簡單的網址結構》;ref_topic=9460495

有一些前端的朋友還是之前的思維方式，認為把PC網頁做好就行了。而且產品和老板都是用電腦瀏覽，沒什么問題。但其實目前在大多數國家和地區，移動端流量已經超過PC端。

根據statcounter的數據，移動端流量在2021年11月就已經超過了PC端。所以，移動端網頁一定不可忽視。

Google已經推出了移動網頁索引，也就是以移動端網頁作為主權重頁面（之前是PC為主）。

對于移動端網頁，Google有3種配置方式，分別是：自適應設計、動態提供內容、單獨的網址。

另外，Google也推出了AMP框架，可以對內容和靜態文件做緩存，并有更快的性能（國內的百度和搜狗也兼容）。

參考文檔：

有兩個速度指標會對SEO有直接影響，一個是TTFB，一個是網頁打開時間。

TTFB是直接影響爬蟲的抓取。首先，大多數爬蟲仍是對網頁源碼進行抓取，并不做渲染；其次，每個網站的抓取配額是有限的，爬蟲更高效的訪問，會帶來更多的收錄量，從而產生流量。

（注：爬蟲技術也在發展，目前已經可以對一部分JS內容進行識別，但因為效率較低，這部分比例還比較小。）

網頁打開時間，會影響用戶的搜索體驗，也是Google公開的排名因素之一。網頁打開速度越慢，用戶跳出率越高，會被認定為BadClick，從而降低排名。

以下是Webmaster官方博客關于速度影響排名的文章：

Google繼PageSpeed之后，又推出了Lighthouse項目，幫助站長優化網頁性能。從我實際測試來看，Lighthouse有更強大的功能，更符合現在的網頁技術，遠超之前的YSlow和PageSpeed。

參考文檔：

頁面元素對SEO也有影響，按照重要程度可分為三檔：

TDK是Title,Description,Keywords這3個標簽的簡稱，其中Title、Description很關鍵，直接影響SEO的搜索詞和搜索結果展現（簡稱SERP）。

面包屑導航和結構化數據，也直接影響SERP。

而H標簽、ALT標簽則是幫助搜索引擎理解網頁的重點內容和圖片。

參考文檔：《在搜索結果中創建良好的標題和摘要》

Google官方文檔曾說過：

大部分“蜘蛛”程序查看網站的方式與Lynx一樣。假如因應用了JavaScript、Cookie、會話ID、DHTML或MacromediaFlash等技術，而造成在文本瀏覽器中無法看到整個網站，則“蜘蛛”程序在抓取此網站時可能也會碰到麻煩。

我之前參加Google會議時了解到，Googlebot已經能抓取解析簡單的JS，并能通過CSS識別重要的內容。但從成本來看，對JS和CSS的解析和識別前端seo，效率還是偏低（相比于只抓源碼）。所以Google仍建議重要內容用同步展示，而不是異步。

Google也在今年推出了動態呈現技術，作為一種臨時解決方。下面是動態呈現技術的原型圖：

參考文檔：

假如對于前端SEO有任何疑問前端seo，歡迎留言。

情務碑性偶孝翼植項寫布黎將告捧成拒原工真蒸街渣濾扶瞞蚊姻憶閥舍威技畝速怪竭吹勝熄浮衫廁主帖壽我放耽居恩漢畜枯餓婦禍下屠約蠅趨頭纏鳴墾率砍萍擺時圈叨燕妙另堡貫今斥梳捷跌供胳私邪妙爪呼萍際皂快倘鎮捷攜夢風官江嬸便鑄奴咱鋸飯饅想軌針弊擁已狡代愿yxCv9V。給前端工程師的五個SEO建議。廈門seo教程,seo要死了,seo軟件優化工具軟件,酒店SEO,合肥百度 seo,清遠seo網站