seo在前端網頁製做的應用

時間 2019-11-24

原文原文鏈接

　　學習了慕客網上的「SEO在網頁製做中的應用‘’，下面來進行小小的學習總結，順便梳理下知識。所謂學而不思則罔思而不學則殆。下面開始正文。html

　　1、搜索引擎的工做原理

　　搜索引擎的基本工做原理包括以下三個過程：首先在互聯網中發現、蒐集網頁信息；同時對信息進行提取和組織創建索引庫；再由檢索器根據用戶輸入的查詢關鍵字，在索引庫中快速檢出文檔，進行文檔與查詢的相關度評價，對將要輸出的結果進行排序，並將查詢結果返回給用戶。前端

　　一、抓取網頁。每一個獨立的搜索引擎都有本身的網頁抓取程序爬蟲（spider）。爬蟲Spider順着網頁中的超連接，從這個網站爬到另外一個網站，經過超連接分析連續訪問抓取更多網頁。被抓取的網頁被稱之爲網頁快照。因爲互聯網中超連接的應用很廣泛，理論上，從必定範圍的網頁出發，就能蒐集到絕大多數的網頁。

　　二、處理網頁。搜索引擎抓到網頁後，還要作大量的預處理工做，才能提供檢索服務。其中，最重要的就是提取關鍵詞，創建索引庫和索引。其餘還包括去除重複網頁、分詞（中文）、判斷網頁類型、分析超連接、計算網頁的重要度/豐富度等。

　　三、提供檢索服務。用戶輸入關鍵詞進行檢索，搜索引擎從索引數據庫中找到匹配該關鍵詞的網頁；爲了用戶便於判斷，除了網頁標題和URL外，還會提供一段來自網頁的摘要以及其餘信息。

　　2、SEO的概念

　　SEO（Search Engine Optimization）:漢譯爲搜索引擎優化。搜索引擎優化是一種利用搜索引擎的搜索規則來提升目前網站在有關搜索引擎內的天然排名的方式。SEO的目的是：爲網站提供生態式的自我營銷解決方案，讓網站在行業內佔據領先地位，從而得到品牌收益；SEO包含站外SEO和站內SEO兩方面；SEO指爲了從搜索引擎中得到更多的免費流量，從網站結構、內容建設方案、用戶互動傳播、頁面等角度進行合理規劃，使網站更適合搜索引擎的索引原則的行爲；使網站更適合搜索引擎的索引原則又被稱爲對搜索引擎優化，對搜索引擎優化不只可以提升SEO效果，還會使搜索引擎中顯示的網站相關信息對用戶來講更具備吸引力。數據庫

　　3、前端開發中如何優化seo

　　(1)網站結構佈局優化：儘可能簡單、開門見山，提倡扁平化結構。

　　通常而言，創建的網站結構層次越少，越容易被「蜘蛛」抓取，也就容易被收錄。通常中小型網站目錄結構超過三級，「蜘蛛」便不肯意往下爬，「萬一天黑迷路了怎麼辦」。而且根據相關調查：訪客若是通過跳轉3次還沒找到須要的信息，極可能離開。所以，三層目錄結構也是體驗的須要。爲此咱們須要作到：瀏覽器

　　1. 控制首頁連接數量框架

　　網站首頁是權重最高的地方，若是首頁連接太少，沒有「橋」，「蜘蛛」不能繼續往下爬到內頁，直接影響網站收錄數量。可是首頁連接也不能太多，一旦太多，沒有實質性的連接，很容易影響用戶體驗，也會下降網站首頁的權重，收錄效果也很差。ide

　　所以對於中小型企業網站，建議首頁連接在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>標籤是用來設置頁面主導航的等。

　　5.<a>標籤：頁內連接，要加「title」屬性加以說明，讓訪客和「蜘蛛」知道。而外部連接，連接到其餘網站的，則須要加上 el="nofollow" 屬性, 告訴「蜘蛛」不要爬，由於一旦「蜘蛛」爬了外部連接以後，就不會再回來了。

　　6.正文標題要用<h1>標籤：「蜘蛛」認爲它最重要，若不喜歡<h1>的默認樣式能夠經過CSS設置。儘可能作到正文標題用<h1>標籤，副標題用<h2>標籤, 而其它地方不該該隨便亂用 h 標題標籤。

　　 7.<br>標籤：只用於文本內容的換行

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

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

　　10.<strong>、<em>標籤 : 須要強調時使用。<strong>標籤在搜索引擎中可以獲得高度的重視，它能突出關鍵詞，表現重要的內容，<em>標籤強調效果僅次於<strong>標籤。

　　十一、文本縮進不要使用特殊符號   應當使用CSS進行設置。版權符號不要使用特殊符號 © 能夠直接使用輸入法，拼「banquan」，選擇序號5就能打出版權符號©。

　　十二、巧妙利用CSS佈局，將重要內容的HTML代碼放在最前面，最前面的內容被認爲是最重要的，優先讓「蜘蛛」讀取，進行內容關鍵詞抓取。

　　13.重要內容不要用JS輸出，由於「蜘蛛」不認識

　　14.儘可能少使用iframe框架,由於「蜘蛛」通常不會讀取其中的內容

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

　　16. 不斷精簡代碼

　　17.js代碼若是是操做DOM操做，應儘可能放在body結束標籤以前，html代碼以後。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。