前端SEO

標籤：

 白帽seo

        

SEO白帽技術：　　白帽SEO定義：白帽seo顧名思義就是光明正大流出水面。一種正義的手法，是使用符合主流搜尋引擎發行方針規定的seo最佳化方法。它是與黑帽seo相反，白帽SEO一直被業內認為是最佳的seo手法，它是在避免一切風險的情況下進行操作的，同時也避免了與搜尋引擎發行方針發生任何的衝突，它也是seoer從業者的最高職業道德標準。　　白帽SEO意義：白帽seo關注長遠利益，可能是3-5年後或是更長時間需要的時間更長久，效果更加。堅持不使用作弊手段，堅持幾年，不出意外的話，你的網站應該可以得到好的流量和排名，也就有了贏利點。而且後續對搜尋引擎的依賴度更小。從長遠的利益發展建議還是用白帽手法。　　白帽SEO可能會覺得用黑帽技術得到排名和利潤，但不久網站就會被封掉，你又要重新去花費時間做另外一個網站。為什麼不用白帽手段踏踏實實的做一個網站呢?給人們真正有用的網站呢?白帽網站不用擔心會被搜尋引擎封掉，你也可以驕傲的說：這個網站是我的。十年二十年以後，這個網站還在給你帶來利潤，何樂而不為呢?從黑帽SEO的角度，他們是有道理。大部分黑帽SEO都是使用程式，他們建立一個幾百萬頁的網頁，放他們的蜘蛛出去抓取就可以了。就算過一兩個月他們的網站被懲罰，可能已經賺了幾千幾萬了。對他來說，投資報酬很搞。一個白帽SEO關注的更多長遠利益，兩年三年，甚至十年九年以後的利益。你堅持不使用作弊手段，堅持十年，不出意外的話，你的網站應該可以得到好的流量，有了流量就有了盈利。　　作為一個seoer應該掌握的30種白帽seo最佳化方法：1、按照Web2.0標準建站，最好通過W3C驗證；2、網站產生偽靜態頁面，當然直接為靜態頁面更好。靜態化頁面更容易被搜尋引擎收錄；3、注重網站內容的原創性；4、各頁面的相似性不要超過70%；5、頁面整理有序，文字分段合理；6、網站更新有規律，每天更新或有規律幾天一更新；7、網頁內容圍繞頁面主要關鍵詞展開，不要偏離整站主題；8、URL中體現英文關鍵詞；9、網頁Title中出現關鍵詞；10、頁面標籤中出現關鍵詞(1-3個)；

 

11、描述標籤中出現關鍵詞；12、內容中自然分布關鍵詞；13、內容評論中出現最好出現關鍵詞；14、內容靠前部和最後部分出現關鍵詞；15、在H1，H2標籤中加入關鍵詞；16、鏈出連結錨文字中包含關鍵詞；17、圖片名包含關鍵詞；18、ALT屬性中加入關鍵詞；19、頁面關鍵詞密度6-8%；20、把關鍵詞用粗體或斜體表現；21、找高PR值站匯入連結；22、找內容相關頁面的匯入連結；23、匯入連結錨文本中包含關鍵詞；24、錨文字在於網頁內容中；25、錨文本周圍出現相關關鍵詞；26、網站的外部連結頁面內容與關鍵詞的相關性盡量高；27、外部匯入連結要有規律的，忌短時間突然加很多或減少很多；28、外部匯入連結所在的頁面匯出連結不要超過100個；29、匯入連結最好來自不同IP地址；

30、錨文字要多樣化(如：企贏，企贏營銷，企贏網路營銷策劃)。

 

SEO最佳化　　

1、 靜態頁面　　將資訊頁面和頻道、網站首頁改為靜態頁面，有利於搜尋引擎更快更好的收錄。　　

2、 頁面標題(Page Title)的關鍵詞最佳化　　必須列出資訊的標題、網站的名稱以及相關關鍵字。　　

3、 Meta標籤的最佳化（過去搜尋引擎最佳化的重要手法，現在已經不是關鍵因素，但仍不可忽略）　　主要包括：Meta description、Meta keywords的設定　　關鍵字密度要適度，通常為2%-8%，也就是說你的關鍵字必須在頁面中出現若干次，或者在搜尋引擎允許的範圍內，要避免堆砌關鍵字。　　

4、 針對Google製作Sitemaps　　Google的sitemaps是對原來robots.txt的擴充，它使用XML格式來記錄整個網站的資訊並供Google讀取，使搜尋引擎能更快更全面的收錄網站的內容。　　可以使用Google提供的Sitemap產生器製作（需要技術人員製作）：　　https://www.google.com/webmaster ... emap-generator.html　　也可以由技術部人員製作更全面的Sitemaps。　　

5、 圖片的關鍵詞最佳化　　圖片的替代關鍵詞也不要忽略，其另外一方面的作用是，當圖片不能顯示的時候，可以給訪問者一個替代解釋語句。　　

6、 避免表格的嵌套　　目前本站的表格嵌套太多，搜尋引擎通常唯讀取3個＜table>的嵌套，如果太多，會造成部分有用資訊沒有被檢測到。　　

7、 採用web標準進行網站重構　　盡量使網站的代碼符合W3C的HTML 4.0或XHTML 1.0規範。通過XML＋CSS技術進行網站重構，減少不表格及冗餘代碼，提高網站頁面的擴充性，相容性，可以使更多瀏覽器支援。　　

8、 網站結構的扁平化規劃　　目錄和內容結構最好不要超過3層，如果有超過三層的，最好通過子網域名稱來調整和簡化結構層數。另外目錄命名的規範做法是使用英文而不是拼音字母　　

9、 頁面容量的合理化　　合理的頁面容量會提升網頁的顯示速度，增加對搜尋引擎蜘蛛程式的友好度。同時建議js指令碼和css指令碼盡量用連結檔案　　

10、外部檔案策略　　把javascript檔案和css檔案分別放在js和css外部檔案中。這樣做的好處是把重要的頁面內容放到頁面頂部，同時能縮小檔案大小。有利於搜尋引擎快速準確地抓取頁面　　重要內容。其他的字型（FONT）和格式化標籤也盡量少用，建議採用CSS定義。

11、外部連結　　儘可能多地讓其他跟你主題相關的網站連結本站，同時盡量同PR值更高的網站進行相互連結。如果網站提供與主題相關的匯出連結，被搜尋引擎認為有豐富的與主題相關的內容，也有利於排名，例如各類招商網站、投融資網站的概念。另外避免連結不顧品質的大面積撒網，對搜尋引擎而言寧少要精。　　

12、網站地圖　　網站自身的網站地圖是搜尋引擎更全面索引收錄你的網站的重要因素。建議製作 基於文本的網站地圖，內含網站所有欄目、子欄目。網站地圖的三大因素：文本、連結、 關鍵詞，都極其有利於搜尋引擎抓取主要頁面內容。特別是動態組建目錄網站尤其需要 建立網站地圖。　　

13、映像熱點　　除AltaVista、Google明確支援映像熱點連結外，其他引擎暫不支援。當“蜘蛛” 程式遇到這種結構時，就會無法辨別。因此盡量不要設定映像熱點(Image Map)連結。　　

14、FLASH應用　　FLASH由於不含文字資訊，應盡量用於功能展示和廣告，少用於網站欄目和頁面。

15、JS指令碼　　在不支援JS腳步的瀏覽器裡 NOSCRIPT> 標籤會起到重要提示作用，對搜尋引擎的Spider搜尋也會有協助。

16、Frame架構　　Frame標籤會被搜尋忽略，盡量少用，如果一定要用，則應正確使用Noframe標籤， 在Noframe>/Noframe>地區中包含指向frame頁的連結或帶有關鍵詞的描述文本，同 時在架構以外的地區也出現關鍵詞文本。

17、資訊的內部連結　　有助提高網站排名和PR值，例如相關資訊、推薦資訊等

－－－－－－－－－－－－－－－－－－－－－－－－－－網站結構布局最佳化

推薦使用扁平化結構。網站的目錄層級要儘可能少，中小型網站不要超過3級。做到扁平化結構需要注意以下的3個方面：

控制首頁的連結數量（網站首頁的權重最高）。首頁應該有有效連結，爬蟲通過首頁的串連到達內頁，如果沒有有效連結就會直接影響網站的收錄數量。當然首頁也不能有過多的連結，內頁的連結不要放在首頁，連結過多會影響使用者體驗。中小企業網站首頁的連結數量應該在100個以內。連結的性質可以是頁面導航、錨鏈。扁平化的目錄層次。盡量讓Spider跳轉3次就可以到達網站的任意一個內頁。例如網站的設計可以使用以下的3級：首頁、欄目、內容頁扁平鋪開的結構，而不能是縱深的結構。例如我們要做一個關於植物的網站可以採用以下的層級結構：3層目錄結構

導航SEO最佳化。導航可以分為主導航和父導航。導航應該使用文字，如果為了使用者體驗採用圖片導航，則應該為圖片設定必要的alt和title屬性。其次在導航的設計上應該使用麵包屑導航。它能夠讓使用者瞭解到當前的位置，瞭解網站內容的組織方式。（方便???的爬取）

 

麵包屑導航：作用

1. 1、讓使用者瞭解當前所處位置，以及當前頁面在整個網站中的位置。
2. 2、體現了網站的架構層級，能夠協助使用者快速學習和瞭解網站內容和組織方式，從而形成很好的位置感。3、提供返回各個層級的快速入口，方便使用者操作。4、Google已經將麵包屑導航整合到搜尋結果裡面，因此最佳化麵包屑導航每個層級的名稱，多使用關鍵字，都可以實現SEO最佳化。麵包屑路徑，對於提高使用者體驗來說，是很有協助的。5、方便使用者，麵包屑主要用於為使用者提供導航一個網站的次要方法，通過為一個大型多級網站的所有頁面提供麵包屑路徑，使用者可以更容易的定位到上一次目錄，引導使用者通行；6、減少返回到上一級頁面的點擊或操作，不用使用瀏覽器的“返回”按鈕或網站的主要導航來返回到上一級頁面；7、不用常常佔用螢幕空間，因為它們通常是水平排列以及簡單的樣式，麵包屑路徑不會佔用頁面太多的空間。這樣的好處是，從內容過載方面來說，他們幾乎沒有任何負面影響；8、降低跳出率，麵包屑路徑會是一個誘惑首次訪問者在進入一個頁面後去瀏覽這個網站的非常好的方法。比如說，一個使用者通過Google搜尋到一個頁面，然後看到一個麵包屑路徑，這將會誘使使用者點擊上一級頁面去瀏覽感興趣的相關主題。這樣，從而，可以降低網站的總體跳出率。9、有利於百度蜘蛛對網站的抓取，蜘蛛直接沿著那個鏈走就可以了，很方便。10、麵包屑有利於網站內鏈的建設，用麵包屑大大增加了網站的內部串連，提高使用者體驗。4。頁面的大小控制在100k以下。

代碼SEO最佳化

• <head>標籤放網頁的標題，各個頁面不同。
• <meta keywords>列舉出幾個重要的關鍵詞。
• <meta description>網頁內容的高度概括。
• <br />標記應該放在文本中間，即使用<p><br /></p>替代突兀的<br />標記。
• html語義化。例如我們要做一個導航，可以使用div+span標記：

<div class="nav">    <span>課程</span>    <span>|</span>    <span>問答</span>    <span>|</span>    <span>社區</span></div>

但是以上的代碼絲毫沒有語義化（div和span標記是html中語義化最低的標籤），推薦的做法是使用ul和li標記，再通過合適的CSS樣式來實現同樣的效果：

<ul class="nav">    <li>課程</li>    <li>問答</li>    <li>社區</li></ul>

.nav li{    float: left;    list-style: none;    display: block;    margin: 0 5px;    border-right: 1px solid #000;}

• <a>標記要加上說明（title屬性），對於指向外部網站的連結要使用rel="nofollow"屬性告訴爬蟲不要去爬其他的頁面。
• <h1>本文標題要使用<h1>標記，副標題要使用<h2>。可以使用CSS樣式進行顯式風格的設定。切記：不重要的地方不要隨便使用<h1>標記。
• <table>標記的最佳化。使用<caption>標記為表格指定標題。

<table>    <caption>表格標題</caption>    <tr>        <th>季度</th>        <th>銷售額</th>    </tr>    <tr>        <td>1</td>        <td>33665.25</td>    </tr>    <tr>        <td>2</td>        <td>21215.99</td>    </tr></table>

• 強調網頁中的重要內容應該使用<strong>標記，避免使用<b>標記（對搜尋引擎不友好）。<em>的權重僅次於<strong>。如果僅僅使顯示的效果發生變化就使用<b>標記和<i>標記。

• <img>標籤應使用alt說明

• <strong><em>與<b><i>標籤

Tips

1. 將重要html代碼放在最前面，廣告等不重要的部分放在整個文檔的最後，然後利用CSS樣式控制廣告div左右浮動。
2. 重要內容不要使用js輸出。
3. 盡量少使用iframe架構。
4. 對於暫時不需要顯示的元素應該使用z-index屬性而不是display:none;這樣的代碼，因為Spider會過濾display屬性為none的內容。

5. 盡量精簡代碼。

6. 外部連結：rel＝“nofollow” 避免spider跟出去回不來。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

1.　　請減少HTTP請求　　

　　基本原理：

　　在瀏覽器(用戶端)和伺服器發生通訊時，就已經消耗了大量的時間，尤其是在網路情況比較糟糕的時候，這個問題尤其的突出。

　　一個正常HTTP請求的流程簡述：如在瀏覽器中輸入"www.xxxxxx.com"並按下斷行符號，瀏覽器再與這個URL指向的伺服器建立串連，然後瀏覽器才能向伺服器發送請求資訊，伺服器在接受到請求的資訊後再返回相應的資訊，瀏覽器接收到來自伺服器的應答資訊後，對這些資料解釋執行。

　　而當我們請求的網頁檔案中有很多圖片、CSS、JS甚至音樂等資訊時，將會頻繁的與伺服器建立串連，與釋放串連，這必定會造成資源的浪費，且每個HTTP請求都會對伺服器和瀏覽器產生效能負擔。

　　網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。所以，請減少HTTP請求。

　　解決辦法：

　　合并圖片（css sprites），合并CSS和JS檔案；圖片較多的頁面也可以使用 lazyLoad 等技術進行最佳化。

 

2.　　請正確理解 Repaint 和 Reflow　　 

　　註：Repaint 和 Reflow 也就是重繪和重排，請允許我在這賣弄下我有限認識的那麼幾個英語單詞...囧

　　基本原理：

　　Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變布局(寬高)的情況下發生，如改變visibility、outline、背景色等等。

　　Reflow(重排)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會重新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的所有其它結點的visibility屬性，這也是Reflow低效的原因。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器視窗變化，style屬性的改變等等。如果Reflow的過於頻繁，CPU使用率就會噌噌的往上漲，所以前端也就有必要知道 Repaint 和 Reflow的知識。

　　減少效能影響的辦法：

　　上面提到通過設定style屬性改變結點樣式的話，每設定一次都會導致一次reflow，所以最好通過設定class的方式；　有動畫效果的元素，它的position屬性應當設為fixed或absolute，這樣不會影響其它元素的布局；如果功能需求上不能設定position為fixed或absolute，那麼就權衡速度的平滑性。

　　總之，因為 Reflow 有時確實不可避免，所以只能儘可能限制Reflow的影響範圍。

 

3.　　請減少對DOM的操作　　

　　基本原理：

　　對DOM操作的代價是高昂的，這在網頁應用中的通常是一個效能瓶頸。

　　天生就慢。在《高效能JavaScript》中這麼比喻：“把DOM看成一個島嶼，把JavaScript(ECMAScript)看成另一個島嶼，兩者之間以一座收費橋串連”。所以每次訪問DOM都會教一個過橋費，而訪問的次數越多，交的費用也就越多。所以一般建議盡量減少過橋次數。

　　解決辦法：

　　修改和訪問DOM元素會造成頁面的Repaint和Reflow，迴圈對DOM操作更是罪惡的行為。所以請合理的使用JavaScript變數儲存內容，考慮大量DOM元素中迴圈的效能開銷，在迴圈結束時一次性寫入。

　　減少對DOM元素的查詢和修改，查詢時可將其賦值給局部變數。

　　註：在IE中:hover會降低響應速度。

 

4.　　使用JSON格式來進行資料交換　　

　　基本原理：

　　JSON是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式設定，是理想的資料交換格式。同時，JSON是 JavaScript原生格式，這意味著在 JavaScript 中處理 JSON資料不需要任何特殊的 API 或工具包。

　　與XML序列化相比，JSON序列化後產生的資料一般要比XML序列化後資料體積小，所以在Facebook等知名網站中都採用了JSON作為資料交換方式。

　　JS操作JSON：

　　在JSON中，有兩種結構：對象和數組。

　　1. 一個對象以 “ { ”  開始，“ } ” 結束。每個“名稱”後跟一個 “ : ” ；“名稱/值 對”之間使用 “ ,  ”（逗號）分隔。 名稱用引號括起來；值如果是字串則必須用引號括起來，數值型則不需要。如：

var obj={"name":"darren","age":24,"location":"beijing"}    

　　2. 數組是值（value）的有序集合。一個數組以 “ [ ” 開始， “ ] ” 結束。值之間使用 “ , ” （逗號）分隔。如：

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];

　　對這種數組和對象字面量的操作是非常方便且高效的。如果預Crowdsourced Security Testing道JSON結構的情況下，使用JSON進行資料傳遞簡直是太美妙了，可以寫出很實用美觀可讀性強的代碼。如果你是純粹的前台開發人員，一定會非常喜歡JSON。

 

5.　　高效使用HTML標籤和CSS樣式　　

　　基本原理：

　　HTML是一門用來描述網頁的一種語言，它使用標記標籤來描述網頁，作為一名合格的前端開發，你有必要去知道其常用標籤代表的含義(SEO)和屬性(表現形式)。

　　CSS指層疊樣式表 (Cascading Style Sheets)，如果說把頁面想象成一個人，HTML就是人的骨架，CSS就是人的衣裝，一個人的品味從他的衣裝就能一目瞭然。

　　一名專業的前端開發也是一名優秀的重構，因為在頁面中經常會有各種不合理的嵌套和重複定義的CSS樣式，我不是要你重構頁面，只是希望你在碰到這種情況的時候解決這些問題。如這樣的HTML：

<table><tr><td>
　　<table><tr><td>
　　　　...
　　</td></tr></table>
</td></tr></table>

或者這樣的CSS:

body .box .border ul li p strong span{color:#000}

 　　以上都是對HTML和CSS非常糟糕的使用方法。

　　正確理解：

　　HTML是一門標記語言，使用合理的HTML標籤前你必須瞭解其屬性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比較基礎的就是得知道區塊層級元素和內嵌元素、盒模型、SEO方面的知識。

　　CSS是用來渲染頁面的，也是存在渲染效率的問題。CSS選擇符是從右向左進行匹配的，這裡對css選擇符按照開銷從小到大的順序梳理一下：　

　　ID選擇符 #box
　　類選擇符 .box  
　　標籤 div
　　偽類和虛擬元素 a:hover

　　當頁面被觸發引起迴流（reflow）的時候，低效的選擇符依然會引發更高的開銷，所以請避免低效。

 

6.　　使用CDN加速（內容分髮網絡）　　

　　基本原理：

　　CDN的全稱是Content Delivery Network，即內容分髮網絡。

　　"其基本思路是儘可能避開互連網上有可能影響資料轉送速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網路各處放置節點伺服器所構成的在現有的互連網基礎之上的一層智能虛擬網路，CDN系統能夠即時地根據網路流量和各節點的串連、負載狀況以及到使用者的距離和回應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。" - 百度百科。

　　上面幾句話有多少能安安心心看完的，所以我還是通過說故事再來介紹一遍吧，順便補一句，故事出處不明，^_^：

 

　　古代打仗大家一定都知道，由於古代的交通很不發達，所以當外族進攻的時候往往不能及時的反擊，等朝廷征完兵再把兵派往邊境的時候那些侵略者卻是早已不見了蹤影，這個讓古代的帝王很是鬱悶。後來帝王們學聰明了，都將大量的兵員提前派往邊境駐紮，讓他們平時屯田，戰時當兵，這樣的策略起到了很顯著的作用。

　　不足之處：

　　即時性不太好是CDN的致命缺陷。隨著對CDN需求的逐漸升溫，這一缺陷將得到改進，使來自於遠程伺服器的網路內容網頁與複本伺服器或緩衝器中的網頁保持同步。解決方案是在網路內容發生變化時將新的網路內容從伺服器端直接傳送到緩衝器，或者當對網路內容的訪問增加時將資料來源伺服器的網路內容儘可能即時地複製到快取服務器。 

 

7.　　將CSS和JS放到外部檔案中引用，CSS放頭，JS放尾　　

　　基本原理：

　　註：這個是很基礎且必須遵循的知識點，可是為了文章的完整性勉為其難加進來吧，嘿嘿。

　　引入外部檔案好處是顯而易見的，而且是項目稍稍複雜一點的時候就有必要了這樣做了。

　　易維護、易擴充，方便管理和重複利用。

　　正確的方式：

　　JavaScript是瀏覽器中的霸主，為什麼這麼說，因為在瀏覽器在執行JavaScript代碼時，不能同時做其它事情，即<script>每次出現都會讓頁面等待指令碼的解析和執行（不論JavaScript是內嵌的還是外鏈的），JavaScript代碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。

　　因為這個阻塞的特點，建議把JavaScript代碼放到</body>標籤以前，這樣既能有效防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

　　HTML規範清楚指出CSS要放包含在頁面的<head>地區內，這裡就不多解釋了。

 

8.　　精簡CSS和JS檔案　　

　　基本原理：

　　有一條非常重要的準則一直沒有提到，就是CSS和JavaScript的壓縮，直接減少下載的檔案體積。我個人經常使用的方式是使用 YUI Compressor，它的特點是：移除注釋；移除額外的空格；細微最佳化；標識符替換。

　　YUI Compressor是java程式，如果你對java很熟悉的話可快速的上手使用yuicompressor.jar；如果你對java很陌生也沒關係，一樣可以使用YUI Compressor，下面介紹其使用方式。

　　YUI Compressor的配置和使用：

　　先配置使用環境：

　　1.先確保電腦中是否安裝了JDK

　　2.再配置必要的環境變數(細節不能三兩句說清，所以不知道如何設定還是搜尋吧)

　　3.在cmd介面，輸入javac可測試是否安裝成功

　　使用方法可從cmd到進入yuicompressor.jar所在磁碟，我以自己的yuicompressor-2.4.2.jar為例：

　　1.壓縮JS

　　java -jar yuicompressor-2.4.2.jar api.js > api.min.js

　　2.壓縮CSS

　　java -jar yuicompressor-2.4.2.jar style.css > style.min.css

　　

　　當然，還有另一種更傻瓜式的使用方式，趕興趣的朋友自己可去多嘗試下。

 

9.　　壓縮圖片和使用圖片Sprite技術　　

　　基本原理:

　　註：其實壓縮圖片和圖片精靈是兩個方面的技術，可是既然都是關於圖片的最佳化還是放到一塊吧。

　　現在由於工作的細分，專業的前端工程師已經少有機會去切圖了，可是關於圖片壓縮還是得略微瞭解，一般圖片壓縮的方式有：

　　1.縮小圖片解析度；

　　2.改變圖片格式；

　　3.降低圖片儲存品質。

　　關於圖片精靈(Sprite)技術就和我們工作直接相關，不管是在CSS中的圖片還是在HTML結構中的圖片都會產生HTTP請求，前端最佳化的第一條就是減少請求數，最直接有效方法是使用圖片精靈（CSS Sprite）。圖片精靈就是把許多圖片放到一張大圖片裡面，通過CSS來顯示圖片的一部分。

　　至於圖片精靈的操作細節就不多做介紹了，網上相關內容很多。

 

10.　　注意控制Cookie大小和汙染　　

　　基本原理和使用方法：

　　有關Cookie的基礎和進階知識可以去看本人寫過的一篇文章《JavaScript 操作 Cookie》。

　　因為Cookie是本地的磁碟檔案，每次瀏覽器都會去讀取相應的Cookie，所以建議去除不必要的Coockie，使Coockie體積盡量小以減少對使用者響應的影響；

　　使用Cookie跨網域作業時注意在適應層級的網域名稱上設定coockie以便使子網域名稱不受其影響

　　Cookie是有生命週期的，所以請注意設定合理的到期時間，合理地Expire時間和不要過早去清除coockie，都會改善使用者的回應時間。

 

前端SEO