淺聊SEO

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

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

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

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

白帽SEO與黑帽SEO

萬事皆有利弊。前端工程師

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

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

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

前端SEO優化

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

網站結構佈局優化

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

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

扁平化結構

控制首頁連接數量

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

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

扁平化目錄層次

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

導航SEO優化

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

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

clipboard.png

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

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

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

clipboard.png

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

clipboard.png

導航的細節

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

clipboard.png

對這個咱們怎麼作優化?先看一下常見的幾種類型。
clipboard.png
很明顯,對於瀏覽爬取的人來講,連接越直接越明顯,越容易獲取。第三種方法明顯更好,不只能獲取分頁的數量,也可以直接獲取連接,不須要經過上一頁下一頁,每次到下一個頁面再來獲取其餘連接。

頁面加載速度

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

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

代碼優化

接下來就看代碼啦!

title,keywords,description

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

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

咱們儘量的在這些地方,精簡且全面的描述咱們的頁面。
clipboard.png

語義化代碼

在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>

使用nav與ul作導航

html位置

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

不要使用js輸出內容

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

盡少使用iframe

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

謹慎使用display:none

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

精簡代碼

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

相關文章
相關標籤/搜索