App下載

w3cschool小編告訴你什么是前端SEO

猿友 2021-01-09 15:22:49 瀏覽數(shù) (2600)
反饋

SEO簡介

全稱:Search English Optimization,搜索引擎優(yōu)化。自從有了搜索引擎,SEO便誕生了。

推薦好課:SEO基礎知識教程、SEO初學者必備知識、SEO 教程常用SEO引擎優(yōu)化工具

存在的意義:為了提升網(wǎng)頁在搜索引擎自然搜索結果中的收錄數(shù)量以及排序位置而做的優(yōu)化行為。簡言之,就是希望百度等搜索引擎能多多我們收錄精心制作后的網(wǎng)站,并且在別人訪問時網(wǎng)站能排在前面。

分類:白帽SEO和黑帽SEO。白帽SEO,起到了改良和規(guī)范網(wǎng)站設計的作用,使網(wǎng)站對搜索引擎和用戶更加友好,并且網(wǎng)站也能從搜索引擎中獲取合理的流量,這是搜索引擎鼓勵和支持的。黑帽SEO,利用和放大搜索引擎政策缺陷來獲取更多用戶的訪問量,這類行為大多是欺騙搜索引擎,一般搜索引擎公司是不支持與鼓勵的。本文針對白帽SEO,那么白帽SEO能做什么呢?

1. 對網(wǎng)站的標題、關鍵字、描述精心設置,反映網(wǎng)站的定位,讓搜索引擎明白網(wǎng)站是做什么的;

2. 網(wǎng)站內容優(yōu)化:內容與關鍵字的對應,增加關鍵字的密度;

3. 在網(wǎng)站上合理設置Robot.txt文件;

4. 生成針對搜索引擎友好的網(wǎng)站地圖;

5. 增加外部鏈接,到各個網(wǎng)站上宣傳;

前端SEO

通過網(wǎng)站的結構布局設計和網(wǎng)頁代碼優(yōu)化,使前端頁面既能讓瀏覽器用戶能夠看懂,也能讓“蜘蛛”看懂。

(1)網(wǎng)站結構布局優(yōu)化:盡量簡單、開門見山,提倡扁平化結構。

一般而言,建立的網(wǎng)站結構層次越少,越容易被“蜘蛛”抓取,也就容易被收錄。一般中小型網(wǎng)站目錄結構超過三級,“蜘蛛”便不愿意往下爬,“萬一天黑迷路了怎么辦”。并且根據(jù)相關調查:訪客如果經(jīng)過跳轉3次還沒找到需要的信息,很可能離開。因此,三層目錄結構也是體驗的需要。為此我們需要做到:

1. 控制首頁鏈接數(shù)量

網(wǎng)站首頁是權重最高的地方,如果首頁鏈接太少,沒有“橋”,“蜘蛛”不能繼續(xù)往下爬到內頁,直接影響網(wǎng)站收錄數(shù)量。但是首頁鏈接也不能太多,一旦太多,沒有實質性的鏈接,很容易影響用戶體驗,也會降低網(wǎng)站首頁的權重,收錄效果也不好。

因此對于中小型企業(yè)網(wǎng)站,建議首頁鏈接在100個以內,鏈接的性質可以包含頁面導航、底部導航、錨文字鏈接等等,注意鏈接要建立在用戶的良好體驗和引導用戶獲取信息的基礎之上。

2.扁平化的目錄層次,盡量讓“蜘蛛”只要跳轉3次,就能到達網(wǎng)站內的任何一個內頁。扁平化的目錄結構,比如:“植物”--> "水果" --> "蘋果"、“桔子”、“香蕉”,通過3級就能找到香蕉了。

3.導航優(yōu)化

導航應該盡量采用文字方式,也可以搭配圖片導航,但是圖片代碼一定要進行優(yōu)化,<img>標簽必須添加“alt”和“title”屬性,告訴搜索引擎導航的定位,做到即使圖片未能正常顯示時,用戶也能看到提示文字。

其次,在每一個網(wǎng)頁上應該加上面包屑導航,好處:從用戶體驗方面來說,可以讓用戶了解當前所處的位置以及當前頁面在整個網(wǎng)站中的位置,幫助用戶很快了解網(wǎng)站組織形式,從而形成更好的位置感,同時提供了返回各個頁面的接口,方便用戶操作;對“蜘蛛”而言,能夠清楚的了解網(wǎng)站結構,同時還增加了大量的內部鏈接,方便抓取,降低跳出率。

4. 網(wǎng)站的結構布局--不可忽略的細節(jié)

頁面頭部:logo及主導航,以及用戶的信息。

頁面主體:左邊正文,包括面包屑導航及正文;右邊放熱門文章及相關文章,好處:留住訪客,讓訪客多停留,對“蜘蛛”而言,這些文章屬于相關鏈接,增強了頁面相關性,也能增強頁面的權重。

頁面底部:版權信息和友情鏈接。

特別注意:分頁導航寫法,推薦寫法:“首頁 1 2 3 4 5 6 7 8 9 下拉框”,這樣“蜘蛛”能夠根據(jù)相應頁碼直接跳轉,下拉框直接選擇頁面跳轉。而下面的寫法是不推薦的,“首頁 下一頁 尾頁”,特別是當分頁數(shù)量特別多時,“蜘蛛”需要經(jīng)過很多次往下爬,才能抓取,會很累、會容易放棄。

5.控制頁面的大小,減少http請求,提高網(wǎng)站的加載速度。

一個頁面最好不要超過100k,太大,頁面加載速度慢。當速度很慢時,用戶體驗不好,留不住訪客,并且一旦超時,“蜘蛛”也會離開。

(2)網(wǎng)頁代碼優(yōu)化

1.<title>標題:只強調重點即可,盡量把重要的關鍵詞放在前面,關鍵詞不要重復出現(xiàn),盡量做到每個頁面的<title>標題中不要設置相同的內容。

2.<meta keywords>標簽:關鍵詞,列舉出幾個頁面的重要關鍵字即可,切記過分堆砌。

3.<meta description>標簽:網(wǎng)頁描述,需要高度概括網(wǎng)頁內容,切記不能太長,過分堆砌關鍵詞,每個頁面也要有所不同。

4.<body>中的標簽:盡量讓代碼語義化,在適當?shù)奈恢檬褂眠m當?shù)臉撕?,用正確的標簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如:h1-h6 是用于標題類的,<nav>標簽是用來設置頁面主導航的等。

5.<a>標簽:頁內鏈接,要加 “title” 屬性加以說明,讓訪客和 “蜘蛛” 知道。而外部鏈接,鏈接到其他網(wǎng)站的,則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬,因為一旦“蜘蛛”爬了外部鏈接之后,就不會再回來了。

6.正文標題要用<h1>標簽:“蜘蛛” 認為它最重要,若不喜歡<h1>的默認樣式可以通過CSS設置。盡量做到正文標題用<h1>標簽,副標題用<h2>標簽, 而其它地方不應該隨便亂用 h 標題標簽。

7.<br>標簽:只用于文本內容的換行,比如:

  1. <p>
  2.    第一行文字內容<br/>
  3. 第二行文字內容<br/>
  4. 第三行文字內容
  5. </p>

8.表格應該使用<caption>表格標題標簽

9.<img>應使用 "alt" 屬性加以說明

10.<strong>、<em>標簽 : 需要強調時使用。<strong>標簽在搜索引擎中能夠得到高度的重視,它能突出關鍵詞,表現(xiàn)重要的內容,<em>標簽強調效果僅次于<strong>標簽。

<b>、<i>標簽: 只是用于顯示效果時使用,在SEO中不會起任何效果。

10、文本縮進不要使用特殊符號 &nbsp; 應當使用CSS進行設置。版權符號不要使用特殊符號 &copy; 可以直接使用輸入法,拼“banquan”,選擇序號5就能打出版權符號?。

12、巧妙利用CSS布局,將重要內容的HTML代碼放在最前面,最前面的內容被認為是最重要的,優(yōu)先讓“蜘蛛”讀取,進行內容關鍵詞抓取。

13.重要內容不要用JS輸出,因為“蜘蛛”不認識

14.盡量少使用iframe框架,因為“蜘蛛”一般不會讀取其中的內容

15.謹慎使用 display:none :對于不想顯示的文字內容,應當設置z-index或設置到瀏覽器顯示器之外。因為搜索引擎會過濾掉display:none其中的內容。

16. 不斷精簡代碼

17.js代碼如果是操作DOM操作,應盡量放在body結束標簽之前,html代碼之后。

注意點:

HTML:

1.標簽的有開有合。

2.避免冗余代碼,例如去除空格字符。

3.合理利用標簽語義化。

4.合理的嵌套規(guī)則,避免行元素內嵌套塊元素。

5.img標簽內需要添加title屬性和alt屬性。

6.a標簽內需要添加title屬性。

7.Meta標簽的優(yōu)化(過去搜索引擎優(yōu)化的重要手法,現(xiàn)在已經(jīng)不是關鍵因素,但仍不可忽略)主要包括: Meta description、Meta keywords的設置  關鍵字密度要適度,通常為2%-8%,也就是說你的關鍵字必須 在 頁面中出現(xiàn)若干次,或者在搜索引擎允許的范圍內,要避免堆砌關鍵字。

8.<title>頁面標題,必須列出信息的標題、網(wǎng)站的名稱以及相關關鍵字,避免堆關鍵字。

9.合理使用注釋。

CSS:

1.避免將css代碼寫在標簽內。

2.如果css代碼量少,可直接寫在頭部。否則請使用外部引入的方式。

3.請不要使用通配符選擇器 *{margin:0;padding:0;} 這不僅僅因為它是緩慢和低效率的方法,而且還會導致一 些不必要的元素也重置了外邊距和內邊距。請引用reset文件,引用reset文件在自己定義的css文件之前。

4.css代碼縮寫可以提高你寫代碼的速度,精簡你的代碼量,包括margin,padding,border ,font, background和顏色值等。

5.利用css繼承,如果一個父元素內有多個子元素擁有相同的樣式,可將相同的樣式定義在元素上。

6.如果多個元素擁有相同的樣式,可定義一個通用的class或使用群組選擇器。

7.使用背景圖合并技術。

8.適當?shù)拇a注釋。

JS:

1.采用外部引入的方法。

2.合理合并JS代碼,可減少服務器的壓力。

3.良好的JS代碼習慣。例如:減少頁面重繪,減少作用域鏈上的查找次數(shù)。


1 人點贊