SEO前端篇（一）頁面佈局

因爲工做須要，在此對seo的一些相關知識作一個總結。

首先要了解必要的基礎知識，什麼是SEO以及搜索引擎的工做原理。這樣才能繼續下面的話題。

1、SEO定義

　　SEO全稱：Search English Optimization，搜索引擎優化。自從有了搜索引擎，SEO便誕生了。爲了提高網頁在搜索引擎天然搜索結果中的收錄數量以及排序位置而作的優化行爲。簡言之，就是但願百度等搜索引擎能多多咱們收錄精心製做後的網站，而且在別人訪問時網站能排在前面。

 

2、搜索引擎的工做原理　

　　當咱們在輸入框中輸入關鍵詞，點擊搜索或查詢時，而後獲得結果。深究其背後的故事，搜索引擎作了不少事情。

　　在搜索引擎網站，好比百度，在其後臺有一個很是龐大的數據庫，裏面存儲了海量的關鍵詞，而每一個關鍵詞又對應着不少網址，這些網址是百度程序從茫茫的互聯網上一點一點下載收集而來的，這些程序稱之爲「搜索引擎蜘蛛」或「網絡爬蟲」。這些勤勞的「蜘蛛」天天在互聯網上爬行，從一個連接到另外一個連接，下載其中的內容，進行分析提煉，找到其中的關鍵詞，若是「蜘蛛」認爲關鍵詞在數據庫中沒有而對用戶是有用的便存入數據庫。反之，若是「蜘蛛」認爲是垃圾信息或重複信息，就捨棄不要，繼續爬行，尋找最新的、有用的信息保存起來提供用戶搜索。當用戶搜索時，就能檢索出與關鍵字相關的網址顯示給訪客。

　　一個關鍵詞對用多個網址，所以就出現了排序的問題，相應的當與關鍵詞最吻合的網址就會排在前面了。在「蜘蛛」抓取網頁內容，提煉關鍵詞的這個過程當中，就存在一個問題：「蜘蛛」可否看懂。若是網站內容是flash和js，那麼它是看不懂的，會犯迷糊，即便關鍵字再貼切也沒用。相應的，若是網站內容是它的語言，那麼它便能看懂，它的語言即SEO。

　　所以能夠得出結論，須要優化體現的部分儘可能不用flash和js來加載，用HTML直接方式加載。

 

有了上面的瞭解，那麼咱們只須要了解「蜘蛛」爬取的規則便可。固然百度和谷歌等搜索引擎大佬也沒有公示其相應的爬取收錄規則，所以這裏只能對本身實際的應用和網上的一些資料作一個整合。

3、蜘蛛的規則

一、讓蜘蛛知道你的網站。

一些人認爲網站建好後首先到各大搜索引擎免費登陸你的網站。其實這個真是畫蛇添足，360已經作過相應測試（他們新建一個網站發佈而後經過百度訪問，次日該關鍵詞的網站顯示在了首頁）。因此這個搜索引擎會自動作的工做，咱們就不要在這裏長篇大論，盲人瞎馬了。只要發佈了，有人訪問蜘蛛就會本身來。

二、留住蜘蛛

蜘蛛來了也會走，蜘蛛跟人工訪問網頁同樣。這裏着重看了將下網頁靜態化和三層結構。

　　網頁的靜態化

　　網頁實現靜態化，重要的信息經過HTML直觀的展示。同時實現網頁文字與圖片等其餘信息的分離，圖片要有專門的圖片服務器，大的資源文件分離到文件服務器。作到儘可能減小應用網頁的大小，最好控制在120KB以內，能作到秒加載。一些加載太慢的網頁，用戶會走，同時蜘蛛也會走，沒時間等你。舞臺只留給準備好的人。

　　網頁的三層結構

　　曾今在網上看到有人說能讓蜘蛛迷路，我不覺感到可笑。縱然能，也是暫時的，蜘蛛是會進化的，不要拿你一我的的智商去挑戰一個優秀的團隊。一個程序陷入無限的死循環那是程序員的無知無能，但鳳毛菱角。通常來說，你想要展現的部分好比商品最好是三層結構以內，好比：手機 —> 華爲 —> HUAWEI P30 就能看到一個詳細的SPU。太繁瑣別人找得煩，蜘蛛也閒煩，結構太深蜘蛛不是迷路跟着你的套路走而是直接跳出，不是蜘蛛over而是你over。

三、蜘蛛爬取的關鍵部分——標籤。

固然網上有一些總結的比較細的，僅供參考。

標題title	10 分	我的認爲這個權重高，應該是10分
內部鏈接	10分
域名	7分
<h1>和<h2>	5分
頁面第一個段落的開始部分	5分
類似關鍵詞	4分
路徑和文件名	4分
<b>和<strong>	1分
內容	1分
img等的Title屬性	1分
img等的alt屬性	0.5分
description	0.5分	我的認爲這個權重更高，應該是10分
keywords	0.05分	我的認爲這個權重更高，應該是10分
每一個句子的開始部分	1.5 分

 

 

 

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 個人理解是首先蜘蛛是爬取 title、description、keywords三個標籤通過第一輪過濾，再在這裏面分析有價值的數據。否則即便大數據也會累死，並且不排序搜索引擎對一些中小型網站帶有色眼鏡。如今更是有商業元素的加成，所以上面的這些儘可能作到人無我有，人有我優。

下面是三大電商網站三個標籤的一個對比

	天貓	淘寶	京東	拼多多
title	<title>天貓tmall.com--理想生活上天貓</title>	<title>淘寶網 - 淘！我喜歡</title>	<title>京東(JD.COM)-正品低價、品質保障、配送及時、輕鬆購物！</title>	<title class="next-head">拼多多 新電商開創者</title>
keywords	<meta name="keywords" content="商城,網上購物,網購,進口食品,美容護理,母嬰玩具,家用電器,手機數碼,家居生活,服飾內衣,養分保健,鐘錶珠寶,飾品箱包,汽車生活,圖書音像,禮品卡">	<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪">	<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東">	<meta name="keywords" content="拼多多 拼多多商城 pinduoduo 拼 拼團 團購 團購app 購物 零食 划算 好貨" class="next-head">
description	<meta name="description" content="天貓，中國線上購物的地標網站，亞洲超大的綜合性購物平臺，擁有10萬多品牌商家。每日發佈大量國內外商品！正品網購，上天貓！天貓千萬大牌正品,品類全，一站購，支付安全，退換無憂！理想生活上天貓!">	<meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各種服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨後付款)等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！">	<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!">	<meta name="description" content="拼多多做爲新電商開創者，致力於將娛樂社交的元素融入電商運營中，經過「社交+電商」的模式，讓更多的用戶帶着樂趣分享實惠，享受全新的共享式購物體驗。" class="next-head">

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 能夠看到淘寶用了最多的關鍵詞28個，其中Keywords的權重可想而知。所以單個頁面（特別是首頁）30個以內的關鍵詞，我想蜘蛛是接受的。

description描述，那就好好描述。有好多用關鍵詞代替的，蜘蛛會不會認爲這是沒用的描述呢？因此這裏仍是跟風吧，跟着大佬們走。好好描述一件事情，好好說明一件事情，用別人聽得懂的大白話。

網站標題title。網站標題就是代碼中的title標籤裏面的內容，不要堆砌關鍵詞，合理分佈，通常是3-5個關鍵詞，關鍵詞之間用_（下劃線）鏈接,關鍵詞越往前權重越高。注意寫好關鍵詞後不會頻繁修改，常常修改排名確定會掉。

作好了上面的三個標籤，儘可能把頁面多放點有用的內容，而後按着上面羅列的14個標籤套，用的到的就好好用格式規範完整。

固然前端技術也是博大精深，就拿一個a標籤來講吧。你一個外鏈加 target="_blank" 和不加徹底是兩個概念，你加了直接在另外一個頁面打開，不加在自身頁面打開，別人通常還會跳回來。這就是友情連接的藝術之一。