給前端工程師的五個SEO建議!我經(jīng)常跟各個崗位的同事溝通，發(fā)現(xiàn)他們對SEO這個流量渠道了解很少。我甚至做了一個簡單的 PPT ，用于介紹 SEO 業(yè)務(之后會整理出來)。網(wǎng)站建設★網(wǎng)站設計★網(wǎng)站制作★網(wǎng)頁設計-599元全包;企業(yè)網(wǎng)絡推廣☆網(wǎng)站優(yōu)化☆seo☆關鍵詞排名☆百度快照-2200元全年展示;做網(wǎng)站優(yōu)化排名-網(wǎng)站建設公司

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

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

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

　　第一. URL 的三要素

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

　　不同的頁面內(nèi)容要有不同的 URL，而不是用 TAB 來呈現(xiàn)

　　URL 要保證唯一性

　　URL 要簡短，有可讀性

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

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

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

　　其次，URL 的唯一性。正常情況下， URL 和網(wǎng)頁是一一對應的，一個網(wǎng)頁只有一個 URL，一個 URL 也只承載一個主題的網(wǎng)頁。(注：如果一個網(wǎng)頁有多個 URL，可以用 canonical 來指定規(guī)范網(wǎng)址)。

　　最后，URL 要簡短，有可讀性。Google 會利用 URL 來判斷網(wǎng)頁在整個網(wǎng)站內(nèi)的層級，所以不要用過長的 URL。而且，簡短和可讀的 URL 對用戶會有更好的體驗，吸引用戶點擊(英文 URL 更是如此)。

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

　　第二. 移動端不能忽視

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

　　根據(jù) statcounter 的數(shù)據(jù)，移動端流量在 2016 年 11 月就已經(jīng)超過了 PC 端。所以，移動端網(wǎng)頁一定不可忽視。

　　Google 已經(jīng)推出了移動網(wǎng)頁索引，也就是以移動端網(wǎng)頁作為主權重頁面(之前是 PC 為主)。

　　對于 移動端網(wǎng)頁，Google 有 3 種配置方式，分別是：自適應設計、動態(tài)提供內(nèi)容、單獨的網(wǎng)址。

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

　　第三. 速度 / 性能直接影響 SEO

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

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

　　(注：爬蟲技術也在發(fā)展，目前已經(jīng)可以對一部分 JS 內(nèi)容進行識別，但因為效率較低，這部分比例還比較小。)

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

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

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

　　第四. 頁面元素有三檔

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

　　第一檔：TDK

　　第二檔：面包屑導航、結構化數(shù)據(jù)

　　第三檔：H 標簽、ALT 標簽

　　TDK 是 Title, Description, Keywords 這 3 個標簽的簡稱，其中 Title、Description 最關鍵，直接影響 SEO 的搜索詞和搜索結果展現(xiàn)(簡稱 SERP )。

　　面包屑導航和結構化數(shù)據(jù)，也直接影響 SERP。

　　而 H 標簽、ALT標簽則是幫助搜索引擎理解網(wǎng)頁的重點內(nèi)容和圖片。

　　第五. 重要內(nèi)容最好同步展示

　　Google 官方文檔曾說過：

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

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