給前端工程師的五個(gè) SEO 建議

我經(jīng)常跟各個(gè)崗位的同事溝通，發(fā)現(xiàn)他們對 SEO 這個(gè)流量渠道了解很少。我甚至做了一個(gè)簡單的 PPT ，用于介紹 SEO 業(yè)務(wù)（之后會整理出來）。與此同時(shí)，這些同事的工作對 SEO 的幫助很大，比如前端工程師，直接影響頁面展現(xiàn)和抓取。

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

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

第一. URL 的三要素

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

• 不同的頁面內(nèi)容要有不同的 URL，而不是用 TAB 來呈現(xiàn)
• URL 要保證唯一性
• URL 要簡短，有可讀性

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

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

而 SEO 在投放的時(shí)候，其實(shí)是按照頁面緯度投放。如果這個(gè)專題頁只有一個(gè) URL，也就是只能投放一個(gè)網(wǎng)頁，而類目的那些頁面因?yàn)闆]有生成單獨(dú)的 URL 而無法投放（一般來說，投放的網(wǎng)頁越多，產(chǎn)生的 SEO 流量越多）。

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

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

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

參考文檔：《保持簡單的網(wǎng)址結(jié)構(gòu)》https://support.google.com/webmasters/answer/76329?hl=zh-Hans&ref_topic=9460495

第二. 移動端不能忽視

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

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

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

對于 移動端網(wǎng)頁，Google 有 3 種配置方式，分別是：自適應(yīng)設(shè)計(jì)、動態(tài)提供內(nèi)容、單獨(dú)的網(wǎng)址。另外，Google 也推出了 AMP 框架，可以對內(nèi)容和靜態(tài)文件做緩存，并有更快的性能（國內(nèi)的百度和搜狗也兼容）。

參考文檔：

• 《移動版網(wǎng)站搜索引擎優(yōu)化 (SEO) 概述》https://developers.google.com/search/mobile-sites/mobile-seo/
• 《AMP》 https://amp.dev/zh_cn/

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

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

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

（注：爬蟲技術(shù)也在發(fā)展，目前已經(jīng)可以對一部分 JS 內(nèi)容進(jìn)行識別，但因?yàn)樾瘦^低，這部分比例還比較小。）

網(wǎng)頁打開時(shí)間，會影響用戶的搜索體驗(yàn)，也是 Google 公開的排名因素之一。網(wǎng)頁打開速度越慢，用戶跳出率越高，會被認(rèn)定為 Bad Click，從而降低排名。以下是 Webmaster 官方博客關(guān)于速度影響排名的文章：

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

參考文檔：

• 《Lighthouse 介紹》 https://developers.google.com/web/tools/lighthouse/
• 《Using page speed in mobile search ranking》 https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

第四. 頁面元素有三檔

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

• 第一檔：TDK
• 第二檔：面包屑導(dǎo)航、結(jié)構(gòu)化數(shù)據(jù)
• 第三檔：H 標(biāo)簽、ALT 標(biāo)簽

TDK 是 Title, Description, Keywords 這 3 個(gè)標(biāo)簽的簡稱，其中 Title、Description 最關(guān)鍵，直接影響 SEO 的搜索詞和搜索結(jié)果展現(xiàn)（簡稱 SERP ）。面包屑導(dǎo)航和結(jié)構(gòu)化數(shù)據(jù)，也直接影響 SERP。

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

參考文檔：《在搜索結(jié)果中創(chuàng)建良好的標(biāo)題和摘要》https://support.google.com/webmasters/answer/35624?hl=zh-Hans

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

Google 官方文檔曾說過：

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

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

Google 也在今年推出了動態(tài)呈現(xiàn)技術(shù)，作為一種臨時(shí)解決方。下面是動態(tài)呈現(xiàn)技術(shù)的原型圖：

參考文檔：

• 《打造方便Google處理的網(wǎng)站的步驟》https://support.google.com/webmasters/answer/40349?hl=zh-Hans
• 《實(shí)現(xiàn)動態(tài)呈現(xiàn)》https://developers.google.com/search/docs/guides/dynamic-rendering?hl=zh-cn

推薦閱讀

• Google 的《搜索引擎優(yōu)化 (SEO) 新手指南 》https://support.google.com/webmasters/answer/7451184?hl=zh-Hans
• Google 的《Search Console 幫助》https://support.google.com/webmasters/#topic=9128571，其實(shí)就是 Google 的 SEO 官方文檔
• 百度 SEO 官方文檔 - 《百度搜索學(xué)院》 https://ziyuan.baidu.com/college#/
• 書籍推薦：《走進(jìn)搜索引擎》、《這就是搜索引擎》

后記

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

（來源：SEO技術(shù)流）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。

（來源：SEO技術(shù)流）