淺聊SEO

SEO【search engine optimization】即搜索引擎優化。

搜索引擎對用戶來講，就是搜東西，那他是怎樣展現關鍵詞的相關東西呢？這就須要有人天天逛互聯網，天天看無數個新網站，將全部逛過的網站貼標籤，分類，排序。等有人想要找網頁，他就能按照整理的標籤，快速的展現結果。這我的天然就是搜索引擎公司。

那麼咱們做爲網站編寫者，不少時候咱們都但願從搜索引擎獲取客戶流量，極度但願度娘收錄咱的時候，能將本身的網頁，放在相關關鍵字搜索頁面的前列。

所以咱們勢必須要根據搜索引擎收錄網站的方式，作一些優化，能讓他更好的識別咱們的網站。

白帽SEO與黑帽SEO

萬事皆有利弊。

一句話，白帽是光明正大用技術宣傳本身，黑帽是做弊蹭流量。

白帽seo是經過正常的手段對網站內部(包括網站標題，網站結構，網站代碼，網站內容，關鍵字密度等)調整、網站外部的連接建設，來提升網站關鍵字在搜索引擎排名的一種seo技術。
白帽SEO是搜索引擎提倡的，也是一種良性競爭。運營者經過對本身網站合理的優化，讓搜索引擎爬取，達到靠前排序。

黑帽SEO就是採用搜索引擎禁止的方式優化網站，不是關鍵字內容的網站，卻添加該關鍵字，通常該類型網站點進去並非用戶想要的內容，是一大批很醜的廣告。這固然不被搜索引擎提倡，甚至於說是頭疼的，還須要想辦法如何在搜索結果內剔除掉那些頁面。影響搜索引擎對網站排名的合理和公正性。

前端SEO優化

咱們做爲前端工程師，天然考慮網站構建與代碼上的優化————網站結構優化，代碼優化。

網站結構佈局優化

其實搜索引擎的抓取，也是按人類的邏輯來瀏覽收錄，經過頁面之間的連接串來串去，只不過比人要更蠢更機械一些。

因此討論網站的結構時，咱們能夠從人的角度去想，什麼樣結構的網站能立刻理解。
本網站舉例

扁平化結構

控制首頁連接數量

網站作到扁平，即讓se能直觀的理解。咱們知道，爬蟲爬取網頁是根據連接與頁面內容來的，所以，頁面必需要有比較清晰的連接和文字說明內容。
iframe，flash作的頁面，爬蟲很難理解內容，這些對SE很不友好。

因此在首頁，咱們要儘量合理的，清晰的放置多的頁面連接，寫清楚每一個連接的描述，內容，讓SE更好的理解，切忌不要繁複。

扁平化目錄層次

網站層次既然要清晰，目錄最好不要超過三次分級。人點三次找不到內容都不想往下翻了，四五層的結構徹底能夠稱之爲晦澀難懂。大部分網站，只須要一個總覽分類列表，與詳情頁兩層結構便可。不一樣的是，不一樣分類，不一樣詳情長得不同，但點擊進入返回的邏輯層次不多。

導航SEO優化

不只網站結構要清晰之外，網站頁面之間的關聯也要清晰，才能方便閱讀理解。

大部分的導航都是這麼作的。
header上面是總的大分類導航，左側，是當前頁面內容的小分類導航，不一樣大類的小分類不一樣。

還有最底部的footer的分類導航

這樣，se在爬取連接的時候，可以很好的區分咱們網站的結構，這樣就能很好的找到想要的不一樣內容，貼上不一樣的目錄標籤，方便搜索。

除此以外還有一類，麪包屑導航。除了上面的分類導航之外，連接之間的關聯也是很重要的，麪包屑導航可以很清晰的反映咱們處於哪一層級的位置。

那剩下的部分是什麼，很是常見的，就是咱們的推廣連接。他是正文連接的相關連接，添加這些相關的連接，也可以幫助當前頁面增長權重，更好的理解頁面的內容。

導航的細節

導航除了以上之外，就是分頁了，每個12345也是咱們的連接，依舊是se爬取的對象。

對這個咱們怎麼作優化？先看一下常見的幾種類型。

很明顯，對於瀏覽爬取的人來講，連接越直接越明顯，越容易獲取。第三種方法明顯更好，不只能獲取分頁的數量，也可以直接獲取連接，不須要經過上一頁下一頁，每次到下一個頁面再來獲取其餘連接。

頁面加載速度

瀏覽頁面最煩的是什麼，頁面打不開。

se也是同樣的，加載越慢，就會下降網站的權重，所以咱們要控制好本身的頁面大小，注意壓縮，注意服務器響應。

代碼優化

接下來就看代碼啦！

title，keywords，description

在網頁頭部，咱們有三個很重要的元素，用來描述頁面。

<title></title>
<meta name="keywords" content="">
<meta name="description" content="">

咱們儘量的在這些地方，精簡且全面的描述咱們的頁面。

語義化代碼

在html標籤中，每個標籤都規定過特定的用處。咱們根據這些規則來正確使用標籤，而不是全部的東西都使用div，就會很好的幫助SE來理解咱們的網頁。

標籤	經常使用語義	seo優化方法
h1-h9	標題系列	將標題或者重要名稱用h1包裹，副標題使用h2，加權重，若顯大，css改樣式就好
p	正文內容	正文統一用P標籤，方便se理解注意：br標籤只適用於文本內也就是p標籤內
ul	無序列表	使用ul作導航能夠幫助se理解這是導航欄
ol	有序列表
dl	定義數據列表
img	圖片	圖片存在title與alt，每一項都填寫完整能夠幫助理解圖片
a	連接	存在rel，若是是外鏈而不是本身內部連接，設爲rel="nofollow"，讓爬蟲不爬出本身的網站
strong/em	加粗/斜體	增長內容權重，強調內容，若是僅僅爲了加粗斜體，使用<b><i>

html位置

se抓取的時候，把前面的html視爲最重要的，所以，咱們把重要的html寫在最前面。若是真實展現不應這樣，咱們用css調整位置便可。

不要使用js輸出內容

se在抓取內容的時候，是不識別js，只會瀏覽分析html，因此重要的東西，儘可能不要使用js後期渲染

盡少使用iframe

se是不會獲取iframe標籤裏面的內容的，因此咱們展現內容，儘量不要使用iframe

謹慎使用display:none

se會忽略讀取這部份內容，所以若是咱們爲了避免顯示重要的內容，可使用z-index，或者使用定位設到顯示區域之外

精簡代碼

se是根據標籤來判斷內容及內容之間的聯繫，所以，越容易理解越好。咱們就不要過於嵌套，能使用一個標籤的事情就不要使用兩個