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

我經(jīng)常跟各個(gè)崗位的同事溝通，發(fā)現(xiàn)他們對(duì)SEO這個(gè)流量渠道了解很少。我甚至做了一個(gè)簡(jiǎn)單的PPT，用于介紹SEO業(yè)務(wù)（之后會(huì)整理出來(lái)）。

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

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

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

URL是SEO工作的基礎(chǔ)，也是簡(jiǎn)單被忽視的一個(gè)因素。URL一定要注重以下三個(gè)方面：

不同的頁(yè)面內(nèi)容要有不同的URL，而不是用TAB來(lái)呈現(xiàn)URL要保證優(yōu)選性URL要簡(jiǎn)短，有可讀性

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

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

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

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

很后，URL要簡(jiǎn)短，有可讀性。Google會(huì)利用URL來(lái)判定網(wǎng)頁(yè)在整個(gè)網(wǎng)站內(nèi)的層級(jí)，所以不要用過(guò)長(zhǎng)的URL。而且，簡(jiǎn)短和可讀的URL對(duì)用戶(hù)會(huì)有更好的體驗(yàn)，吸引用戶(hù)點(diǎn)擊（英文URL更是如此）。

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

參考文檔：《保持簡(jiǎn)單的網(wǎng)址結(jié)構(gòu)》;ref_topic=9460495

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

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

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

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

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

參考文檔：

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

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

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

網(wǎng)頁(yè)打開(kāi)時(shí)間，會(huì)影響用戶(hù)的搜索體驗(yàn)，也是Google公開(kāi)的排名因素之一。網(wǎng)頁(yè)打開(kāi)速度越慢，用戶(hù)跳出率越高，會(huì)被認(rèn)定為BadClick，從而降低排名。

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

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

參考文檔：

頁(yè)面元素對(duì)SEO也有影響，按照重要程度可分為三檔：

TDK是Title,Description,Keywords這3個(gè)標(biāo)簽的簡(jiǎn)稱(chēng)，其中Title、Description很關(guān)鍵，直接影響SEO的搜索詞和搜索結(jié)果展現(xiàn)（簡(jiǎn)稱(chēng)SERP）。

面包屑導(dǎo)航和結(jié)構(gòu)化數(shù)據(jù)，也直接影響SERP。

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

參考文檔：《在搜索結(jié)果中創(chuàng)建良好的標(biāo)題和摘要》

Google官方文檔曾說(shuō)過(guò)：

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

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

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

參考文檔：

假如對(duì)于前端SEO有任何疑問(wèn)前端seo，歡迎留言。

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