一、搜索引擎工作原理
當我們在輸入框中輸入關鍵詞，點擊搜索或查詢時，然后得到結果。深究其背后的故事，搜索引擎做了很多事情。
在搜索引擎網站，比如百度，在其后台有一個非常龐大的數據庫，里面存儲了海量的關鍵詞，而每個關鍵詞又對應着很多網址，這些網址是百度程序從茫茫的互聯網上一點一點下載收集而來的，這些程序稱之為“搜索引擎蜘蛛”或“網絡爬蟲”。這些勤勞的“蜘蛛”每天在互聯網上爬行，從一個鏈接到另一個鏈接，下載其中的內容，進行分析提煉，找到其中的關鍵詞，如果“蜘蛛”認為關鍵詞在數據庫中沒有而對用戶是有用的便存入數據庫。反之，如果“蜘蛛”認為是垃圾信息或重復信息，就舍棄不要，繼續爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當用戶搜索時，就能檢索出與關鍵字相關的網址顯示給訪客。
一個關鍵詞對用多個網址，因此就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在“蜘蛛”抓取網頁內容，提煉關鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂。如果網站內容是flash和js，那么它是看不懂的，會犯迷糊，即使關鍵字再貼切也沒用。相應的，如果網站內容是它的語言，那么它便能看懂，它的語言即SEO。
搜索引擎的工作分為三個階段，即爬行，索引和檢索
1、爬行
搜索引擎具有網絡爬蟲或蜘蛛來執行爬網，每次抓取工具訪問網頁時，它都會復制該網頁並將其網址添加到索引中。在“蜘蛛”抓取網頁內容，提煉關鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂。如果網站內容是 flash 和 js，那么它是看不懂的。相應的，如果網站內容是它的語言，那么它便能看懂，它的語言即 SEO
2、索引
此階段，爬網程序會創建搜索引擎的索引。索引就像一本巨大的書，其中包含爬蟲找到的每個網頁的副本。如果任何網頁發生更改，則抓取工具會使用新內容更新圖書
3、檢索
這是搜索引擎以特定順序提供最有用和最相關答案的最后階段
二、SEO簡介
全稱：Search English Optimization，搜索引擎優化。自從有了搜索引擎，SEO便誕生了。
SEO存在的意義：為了提升網頁在搜索引擎自然搜索結果中的收錄數量以及排序位置而做的優化行為。簡言之，就是希望百度等搜索引擎能多多我們收錄精心制作后的網站，並且在別人訪問時網站能排在前面。
分類：白帽SEO和黑帽SEO。
白帽SEO，起到了改良和規范網站設計的作用，使網站對搜索引擎和用戶更加友好，並且網站也能從搜索引擎中獲取合理的流量，這是搜索引擎鼓勵和支持的。
黑帽SEO，利用和放大搜索引擎政策缺陷來獲取更多用戶的訪問量，這類行為大多是欺騙搜索引擎，一般搜索引擎公司是不支持與鼓勵的。
本文針對白帽SEO，那么白帽SEO能做什么呢？
1、對網站的標題、關鍵字、描述精心設置，反映網站的定位，讓搜索引擎明白網站是做什么的；
2、網站內容優化：內容與關鍵字的對應，增加關鍵字的密度；
3、在網站上合理設置Robot.txt文件；
4、生成針對搜索引擎友好的網站地圖；
5、增加外部鏈接，到各個網站上宣傳；
三、前端如何進行SEO？
通過網站的結構布局設計和網頁代碼優化，使前端頁面既能讓瀏覽器用戶能夠看懂，也能讓“蜘蛛”看懂。
1、網站結構布局優化：盡量簡單、開門見山，提倡扁平化樹型結構。
一般而言，建立的網站結構層次越少，越容易被“蜘蛛”抓取，也就容易被收錄。一般中小型網站目錄結構超過三級，“蜘蛛”便不願意往下爬，“萬一天黑迷路了怎么辦”。並且根據相關調查：訪客如果經過跳轉3次還沒找到需要的信息，很可能離開。因此，三層目錄結構也是體驗的需要。為此我們需要做到：
（1）控制首頁鏈接數量
網站首頁是權重最高的地方，如果首頁鏈接太少，沒有“橋”，“蜘蛛”不能繼續往下爬到內頁，直接影響網站收錄數量。但是首頁鏈接也不能太多，一旦太多，沒有實質性的鏈接，很容易影響用戶體驗，也會降低網站首頁的權重，收錄效果也不好。因此對於中小型企業網站，建議首頁鏈接在100個以內，鏈接的性質可以包含頁面導航、底部導航、錨文字鏈接等等，注意鏈接要建立在用戶的良好體驗和引導用戶獲取信息的基礎之上。
（2）扁平化的目錄層次，盡量讓“蜘蛛”只要跳轉3次，就能到達網站內的任何一個內頁。扁平化的目錄結構，比如：“植物”–> “水果” –> “蘋果”、“桔子”、“香蕉”，通過3級就能找到香蕉了。
（3）導航優化
首先、導航應該盡量采用文字方式，也可以搭配圖片導航，但是圖片代碼一定要進行優化，<img>標簽必須添加“alt”和“title”屬性，告訴搜索引擎導航的定位，做到即使圖片未能正常顯示時，用戶也能看到提示文字。
其次，在每一個網頁上應該加上面包屑導航，優化網站分級結構。在每個內頁加面包屑導航是很有必要的，可以讓蜘蛛進入頁面之后不至於迷路。好處是從用戶體驗方面來說，可以讓用戶了解當前所處的位置以及當前頁面在整個網站中的位置，幫助用戶很快了解網站組織形式，從而形成更好的位置感，同時提供了返回各個頁面的接口，方便用戶操作；對“蜘蛛”而言，能夠清楚的了解網站結構，同時還增加了大量的內部鏈接，方便抓取，降低跳出率。
（4）網站的結構布局 —— 不可忽略的細節
頁面頭部：logo及主導航，以及用戶的信息；
頁面主體：左邊正文，包括面包屑導航及正文；右邊放熱門文章及相關文章，好處：留住訪客，讓訪客多停留，對“蜘蛛”而言，這些文章屬於相關鏈接，增強了頁面相關性，也能增強頁面的權重。
頁面底部：版權信息和友情鏈接。
特別注意：分頁導航寫法，推薦寫法：“首頁 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據相應頁碼直接跳轉，下拉框直接選擇頁面跳轉。而下面的寫法是不推薦的，“首頁 下一頁 尾頁”，特別是當分頁數量特別多時，“蜘蛛”需要經過很多次往下爬，才能抓取，會很累、會容易放棄。
（5）控制頁面的大小，減少http請求，提高網站的加載速度。
一個頁面最好不要超過100k，太大，頁面加載速度慢。當速度很慢時，用戶體驗不好，留不住訪客，並且一旦超時，“蜘蛛”也會離開。
2、網頁代碼優化
（1）<title>標題：只強調重點即可，盡量把重要的關鍵詞放在前面，關鍵詞不要重復出現，盡量做到每個頁面的<title>標題中不要設置相同的內容。
（2）<meta keywords>標簽：關鍵詞，列舉出幾個頁面的重要關鍵字即可，切記過分堆砌。
（3）<meta description>標簽：網頁描述，需要高度概括網頁內容，切記不能太長，過分堆砌關鍵詞，每個頁面也要有所不同。
（4）<body>中的標簽：盡量讓代碼語義化，在適當的位置使用適當的標簽，用正確的標簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然。比如：h1-h6是用於標題類的，<nav>標簽是用來設置頁面主導航的等。
語義化書寫HTML代碼，符合W3C標准。不要什么都用div，盡量合理的使用ul、ol、table等使用符合語義化的標簽，語義化代碼讓搜索引擎容易理解網頁。
（5）集中網站權重<a>標簽的使用：頁內鏈接，要加“title” 屬性加以說明，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網站的，則需要加上rel="nofollow"屬性, 告訴 “蜘蛛” 不要爬，因為一旦“蜘蛛”爬了外部鏈接之后，就不會再回來了。
由於蜘蛛分配到每個頁面的權重是一定的，這些權重也將平均分配到每個a鏈接上，可以適當的給鏈接標簽a添加 rel="nofollow" 屬性(例如：當我們項目的某一個導航不需要蜘蛛跟蹤鏈接)：
內鏈采用絕對路徑，減少服務器的響應時間，比如：<a href="www.taobao.com">淘寶網首頁</a>，不要采用<a href="/index.html"></a>。
（6）正文標題要用<h1>標簽：“蜘蛛” 認為它最重要，主要是H1標簽的使用需要特別注意，因為它自帶權重，一個頁面有且最多只能有一個H1標簽，放在該頁面最重要的標題上面。若不喜歡<h1>的默認樣式可以通過CSS設置。盡量做到正文標題用<h1>標簽，副標題用<h2>標簽, 而其它地方不應該隨便亂用 h 標題標簽。
（7）友情鏈接，好的友情鏈接可以快速的提高你的網站權重
友情鏈接，也稱為網站交換鏈接、互惠鏈接、互換鏈接、聯盟鏈接等，是具有一定資源互補優勢的網站之間的簡單合作形式，即分別在自己的網站上放置對方網站的LOGO圖片或文字的網站名稱，並設置對方網站的超鏈接（點擊后，切換或彈出另一個新的頁面），使得用戶可以從合作網站中發現自己的網站，達到互相推廣的目的，因此常作為一種網站推廣基本手段。
友情鏈接是指互相在自己的網站上放對方網站的鏈接。必須要能在網頁代碼中找到網址和網站名稱，而且瀏覽網頁的時候能顯示網站名稱，這樣才叫友情鏈接。
友情鏈接是網站流量來源的根本，比如一種可以自動交換鏈接的友情鏈接網站（每來訪一個IP，就會自動排到第一），這是一種創新的自助式友情鏈接互聯網模式。
（8）CSS Sprites
通俗點講，就是圖片合並，可以把網站中一些比較通用的小圖片，合並到一張圖片上，然后利用CSS技術來分別調用圖片不同的部分。這樣可以大大的減少HTTP的請求量，在網頁加載的時候，速度就快很多，現在很多大中型網站都在用這個前端加速技術，效果也是很不錯的。
（9）圖片的處理：<img>應使用 “alt” 屬性加以說明。
非裝飾性圖片必須加alt，<img> 標簽的 alt 屬性指定了替代文本，用於在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。示例:<img src="xxx.jpg" alt="海爾官網-雙門冰箱" />
alt標簽的作用：
1）增強內容相關性：它是可以利用漢字介紹文章內容的，對於一些特定的企業產品，由於視覺的體驗，它往往是少文字的。
2）提高關鍵詞密度：在操作企業站的時候，我們經常遇到是站點首屏一個大的橫幅banner，幾乎占用了首頁的大部分頁面，為了有效的提高首頁核心關鍵詞密度，我們只能利用一切辦法增添關鍵詞，比如：在圖片的alt標簽中添加。
為圖片指定寬度與高度
這也是很多人比較容易忽略的，在頁面中，請你為每一個圖片，都指定一個width屬性與height屬性，這樣在頁面加載的時候，瀏覽器會預先留出既定的位置，圖片下邊的代碼可以繼續下載而不用等待，提高並行下載的速度，提高了頁面加載的速度。
（10）<strong>、<em>標簽 : 需要強調時使用。<strong>標簽在搜索引擎中能夠得到高度的重視，它能突出關鍵詞，表現重要的內容，<em>標簽強調效果僅次於<strong>標簽。
<b>、<i>標簽: 只是用於顯示效果時使用，在SEO中不會起任何效果。
（11）文本縮進不要使用特殊符號 應當使用CSS進行設置。版權符號不要使用特殊符號 © 可以直接使用輸入法，拼“banquan”，選擇序號5就能打出版權符號©。
（12）巧妙利用CSS布局，將重要內容的HTML代碼放在最前面，最前面的內容被認為是最重要的，優先讓“蜘蛛”讀取，進行內容關鍵詞抓取。
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，保證重要內容一定會被抓取
（13）重要內容不要用JS輸出，因為“蜘蛛”不認識
（14）盡量少使用iframe框架,因為“蜘蛛”一般不會讀取其中的內容
（15）謹慎使用display：none ：對於不想顯示的文字內容，應當設置z-index或設置到瀏覽器顯示器之外。因為搜索引擎會過濾掉display:none其中的內容。
（16）做好404頁面，500等頁面。一般會加首頁鏈接及錯誤提示，並測試其返回狀態碼為404：1、用戶體驗友好，可以留住用戶，不至於直接關閉頁面；2、蜘蛛友好，可以返回抓取其他頁面。
（17）向各大搜索引擎登陸入口提交尚未收錄站點
百度提交入口：https://ziyuan.baidu.com/linksubmit/url
Google提交入口：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl
360提交入口：http://info.so.360.cn/site_submit.html
搜狗提交入口：http://fankui.help.sogou.com/index.php/web/web/index?type=1
必應提交入口：https://www.bing.com/toolbox/webmaster/（必應的匿名提交url已經取消，需要去登陸Bing網站管理員到“配置我的網站”菜單選項中的“提交URL”工具）
（18）利用緩存：
啟用Keep-Alive屬性。Keep-Alive你可以理解為長連接，在沒有啟用keep-alive屬性之前，瀏覽器向服務器請求的connection是即連即斷的，執行一次HTTP請求完成后，馬上斷開這個連接的，而啟用Conncetion的Keep-Alive屬性之后，這個連接可以保持一段時間，從而可以提高頁面加載的速度。
使用瀏覽器緩存。可以使用緩存技術來提高頁面的加載速度，為一些不經常變化的文件，設置一個相對較長的過期時間，這樣當用戶訪問網站后，就會在它的瀏覽器中留下緩 存，當它在下次請求的時候，留在緩存中的組件就不用再向服務器發出HTTP請求了，這樣減少了瀏覽器向網站服務器發出的HTTP請求數，從而提高了頁面加 載速度，這在一些圖片比較多的網站，效果是非常明顯的，我們要善於使用緩存技術。
啟用GZIP壓縮。大中型網站，基本都啟用了GZIP壓縮，如果你使用的是虛擬主機，你可以讓服務商為你啟用，如果自己有服務器，自己啟用也很簡單的，為什么啟用GZIP壓縮就會加快速度呢，因為當啟用了GZIP后，網站服務器向你傳輸數據之前，是經過壓縮了的，當傳輸到你的瀏覽器后，會再被解壓縮的，從而可以在 你的瀏覽器上正常顯示，而且壓縮率可以達到很多高，效果非常好。一般你啟用了壓縮后，搜索引擎對你網站的抓取量也是上升了的。