WEB前端-搜索引擎工作原理與SEO優化


一、搜索引擎工作原理

搜索引擎的工作分為三個階段,即爬行,索引和檢索

 

1、爬行 

搜索引擎具有網絡爬蟲或蜘蛛來執行爬網,每次抓取工具訪問網頁時,它都會復制該網頁並將其網址添加到索引中。

在“蜘蛛”抓取網頁內容,提煉關鍵詞的這個過程中,就存在一個問題:“蜘蛛”能否看懂。如果網站內容是 flash 和 js,那么它是看不懂的。相應的,如果網站內容是它的語言,那么它便能看懂,它的語言即 SEO

 

2、索引 

此階段,爬網程序會創建搜索引擎的索引。索引就像一本巨大的書,其中包含爬蟲找到的每個網頁的副本。如果任何網頁發生更改,則抓取工具會使用新內容更新圖書

 

3、檢索  

這是搜索引擎以特定順序提供最有用和最相關答案的最后階段

 

 

二、SEO 簡介

全稱:Search English Optimization,搜索引擎優化,即為了提升網頁在搜索引擎自然搜索結果中的收錄數量以及排序位置而做的優化。

 

1、SEO 的分類

  • 白帽 SEO:起到了改良和規范網站設計的作用,使網站對搜索引擎和用戶更加友好,並從搜索引擎中獲取合理的流量
  • 黑帽 SEO:利用和放大搜索引擎政策缺陷來獲取更多用戶的訪問量

 

2、白帽 SEO 的使用

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

(2)網站內容優化:內容與關鍵字的對應,增加關鍵字的密度;

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

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

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

 

 

三、前端 SEO 優化

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

 

1、網站結構布局優化

(1)控制首頁鏈接數量

對於中小型企業網站,建議首頁鏈接在100個以內,鏈接的性質可以包含頁面導航、底部導航、錨文字鏈接等

 

(2)扁平化的目錄層次

盡量讓“蜘蛛”只跳轉3次,就能到達網站內的任何一個內頁

 

(3)導航優化

導航應該盡量采用文字方式,也可以搭配圖片導航,但<img>標簽務必添加“alt”和“title”屬性,告訴搜索引擎導航的定位

<img src="" alt="" title="">

其次,在每一個網頁上應該加上面包屑導航

 

對用戶而言,可以讓用戶了解當前所處的位置,形成更好的位置感,並方便用戶操作;

對蜘蛛而言,能夠清楚的了解網站結構,同時還增加了大量的內部鏈接,方便抓取,降低跳出率。

 

(4)結構布局的規范優化

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

  b、頁面主體:左邊面包屑導航及正文;右邊放熱門文章及相關文章,既增強了頁面相關性,也增強頁面的權重

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

注意:分頁導航推薦寫法:“1 2 3 4 5 6 7 8 9 10 下拉框/輸入框”,這樣“蜘蛛”能夠根據相應頁碼直接跳轉,下拉框直接選擇頁面跳轉

 

(5)控制頁面的大小

一個頁面最好不要超過100k,太大,頁面加載速度慢,用戶體驗不好,並且一旦超時,“蜘蛛”也會離開

 

2、網頁代碼優化

(1)<title>

標題,強調重點即可,盡量做到每個頁面的 <title> 標題內容不重復

<title>英雄聯盟全新官方網站-騰訊游戲</title>

 

(2)<meta keywords>

關鍵詞,列舉出幾個頁面的重要關鍵字即可

<meta name="Keywords" content="英雄聯盟,lol,lol新手禮包,lol攻略,lol視頻,lol視頻攻略,英雄資料,英雄聯盟戰爭學院,明星解說視頻,101戰爭學院,英雄,攻略,WCG,點亮圖標,賽事">

 

(3)<meta description>

網頁描述,高度概括網頁內容的關鍵詞,每個頁面也要有所不同

<meta name="Description" content="英雄聯盟官方網站,海量風格各異的英雄,豐富、便捷的物品合成系統,游戲內置的匹配、排行和競技系統,獨創的“召喚師”系統及技能、符文、天賦等系統組合,必將帶你進入一個嶄新而又豐富多彩的游戲世界。">

 

(4)標簽語義化

比如:h1-h6是用於標題類的,<nav>標簽是用來設置頁面主導航的等

 

(5)<a>標簽:

頁內鏈接,要加“title” 屬性加以說明,讓訪客和 “蜘蛛” 知道;

外部鏈接,鏈接到其他網站的,則需要加上 el="nofollow" 屬性,避免“蜘蛛”爬了外部鏈接之后,就不回了

 

(6)正文標題要用 <h1> 標簽:

“蜘蛛” 認為它最重要,若不喜歡<h1>的默認樣式可以通過CSS設置

 

(7)<br>

只用於文本內容的換行

<p>
    第一行文字<br/>
    第二行文字<br/>
    第三行文字
</p>

 

(8)<caption>

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

 

(9)<img> 應使用 “alt” 屬性加以說明

 

(10)<strong> 和 <em> : 需要強調時使用

<strong>標簽在搜索引擎中能突出關鍵詞

<em>標簽強調效果僅次於 <strong>

而 <b>、<i>標簽: 只是用於顯示效果時使用,在 SEO 中不起效果

 

(11)避免使用 &nbsp; 和 &copy;

空格符 &nbsp; 應用 CSS 進行設置

版權符 &copy; 可以直接使用輸入法打“©”

 

(12)少用 iframe 框架,因為“蜘蛛”一般不會讀取其中的內容

 

(13)少用 display: none;

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM