2016-10-9 ui設(shè)計(jì)分享達(dá)人
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
提到網(wǎng)站SEO優(yōu)化，我們首先想到的是“一個中心，兩個基本點(diǎn)”，而訪問一個網(wǎng)站，我們首先會去關(guān)注的是這個網(wǎng)站的導(dǎo)航，一個網(wǎng)站的導(dǎo)航就好比是一本書的目錄，具有檢索功能、報(bào)道功能、導(dǎo)讀功能，通過網(wǎng)站的導(dǎo)航我們就可以了解到這個網(wǎng)站的主題和定位，具有引領(lǐng)讀者的作用，由此看來網(wǎng)站導(dǎo)航在SEO優(yōu)化網(wǎng)站有著舉足輕重的地位。
將導(dǎo)航放置何處，以何種方式展現(xiàn)，這都是不容忽視的，無論是水平布局還是垂直布局，都要盡量滿足用戶使用習(xí)慣，水平式導(dǎo)航菜單的好處是明顯，清晰可見，大家都會知道導(dǎo)航條在上方，而且不是那么占據(jù)空間，而垂直的導(dǎo)航菜單可以兼容不同的屏幕尺寸。
說到網(wǎng)站的導(dǎo)航，究竟網(wǎng)站中包含了那五大導(dǎo)航，這五大導(dǎo)航在SEO優(yōu)化網(wǎng)站中究竟又有什么作用？接下來，SEO論壇就結(jié)合一下SEO優(yōu)化知識來給大家一起探討網(wǎng)站中的五大導(dǎo)航。
1、主導(dǎo)航
一個導(dǎo)航必須可以告訴用戶自己所瀏覽的欄目是什么，同時在分不清次導(dǎo)航的情況下對自己所處的位置也有個了解，不管怎么說，主導(dǎo)航是網(wǎng)站的主體，同時也是能否讓用戶停留在網(wǎng)站中的關(guān)鍵所在，所以覺得好好設(shè)置主導(dǎo)航是網(wǎng)站優(yōu)化中必須做好的第一步。
（1）、主導(dǎo)航的作用
網(wǎng)站主導(dǎo)航位于網(wǎng)站最上面，通常網(wǎng)站的主導(dǎo)航主要包括網(wǎng)站的首頁和產(chǎn)品新聞欄目及各個單頁面的導(dǎo)入鏈接。
從用戶體驗(yàn)度的角度來看：一般情況下，導(dǎo)航上的欄目或單頁面，是這個網(wǎng)站中最主要的、必不可少的內(nèi)容，也是SEO站長希望除了首頁外，最希望別人點(diǎn)擊進(jìn)入的一些頁面或想要別人了解的一些信息。
從搜索引擎優(yōu)化的角度來看，網(wǎng)站的主導(dǎo)航位于SEO優(yōu)化網(wǎng)站中F區(qū)的最重要的部位，是搜索引擎蜘蛛檢索最看重、權(quán)重較高的一個位置，同時在網(wǎng)站的主導(dǎo)航上還布局了產(chǎn)品新聞欄目及各個單頁面的導(dǎo)入鏈接（各個二級欄目間的回流設(shè)置），是設(shè)置整個網(wǎng)站回流的最核心的部分。
所以，不管是從用戶體驗(yàn)度上考慮還是從搜索引擎優(yōu)化的角度考慮，網(wǎng)站的主導(dǎo)航都是一個網(wǎng)站中必不可缺少的一部分。
（2）、主導(dǎo)航的優(yōu)化設(shè)置
首先主導(dǎo)航其實(shí)就是咱們常說的菜單欄，這個導(dǎo)航條在網(wǎng)站中占據(jù)的位置是整站除了網(wǎng)站標(biāo)題之后最重要的，它既要提供給搜索引摯網(wǎng)站有哪些內(nèi)容，同時也要讓用戶知道網(wǎng)站做的內(nèi)容有哪些。
對于主導(dǎo)航咱們需要從兩方面來對其分析看看如何做優(yōu)化設(shè)置：
①、從搜索引摯方面，主導(dǎo)航必須是純文字形的，而且不能帶任何的修改代碼，特別是以圖片、FLASH、JS代碼、框架代碼作導(dǎo)航的是要不得的，同時主導(dǎo)航中的相關(guān)欄目都應(yīng)該前后具有相關(guān)性，千萬不要前面的是減肥的，后面是豐胸的，不相關(guān)的導(dǎo)航欄目并不能提升關(guān)鍵詞排名。
②、從用戶瀏覽的方面分析，首先咱們需要弄清楚用戶需要什么的樣導(dǎo)航，導(dǎo)航呈現(xiàn)的形式如何，顏色的搭配是否合理，是否刺眼等。
2、副導(dǎo)航
提到副導(dǎo)航，我們都知道是相輔于主導(dǎo)航的導(dǎo)航，通常網(wǎng)站是沒有副導(dǎo)航的，只有在網(wǎng)站主導(dǎo)為圖片的情況下，才會在網(wǎng)站底部加上副導(dǎo)航。
（1）、副導(dǎo)航的作用
只所以在首頁增加網(wǎng)頁副導(dǎo)航，是為了方便用戶更直接的找到自己想要看的產(chǎn)品，當(dāng)然還有一個目的就是網(wǎng)頁副導(dǎo)航可以增加相關(guān)關(guān)鍵詞的密度，有利于自己網(wǎng)站的關(guān)鍵詞排名，但是很多人往往把副導(dǎo)航給忽略了，而細(xì)節(jié)的考慮，更沒人去注意了。
副導(dǎo)航使用的目的主要是從搜索引擎優(yōu)化的角度考慮的，輔導(dǎo)航主要由主要欄目、單頁面及網(wǎng)站內(nèi)的一些重要頁面的錨文本鏈接組成的，這樣不僅有利于引導(dǎo)搜索引擎蜘蛛對網(wǎng)站內(nèi)這些重要頁面的抓取，同時副導(dǎo)航也是網(wǎng)站回流的一部分，是SEO優(yōu)化網(wǎng)站中重要的組成部分，一個網(wǎng)站可以沒有副導(dǎo)航，但如果有副導(dǎo)航就如同錦上添花，更加有利于網(wǎng)站優(yōu)化，提升網(wǎng)站關(guān)鍵詞排名。
（2）、網(wǎng)站副導(dǎo)航在左邊比較好？還是右邊好？
按照國人的瀏覽習(xí)慣，SEO論壇建議站長在進(jìn)行網(wǎng)站建設(shè)的時候，把產(chǎn)品的副導(dǎo)航放置在左邊，為什么會放置在左邊呢？其實(shí)，這主要是根據(jù)訪客的瀏覽習(xí)慣，像WordPress的一些欄目都在左側(cè)，這可能跟國外客戶的瀏覽習(xí)慣有關(guān)，就像過紅綠燈一樣，國人都是遵循靠右邊走的原則，而國外有些國家過紅綠燈的規(guī)則是靠左邊走的。
有人會有疑問，你為什么就這么肯定國人的瀏覽習(xí)慣是靠左邊的呢？其實(shí)，我們還可以借助工具分析下用戶瀏覽行為，以及用戶點(diǎn)擊行為，我相信很多做美工的朋友，應(yīng)該更能體會副導(dǎo)航條到底是放在左邊還是放置在右邊比較好。
給大家提供一個百度統(tǒng)計(jì)里面的工具：百度熱力圖，這個可以看出你網(wǎng)站的頁面，哪個地方鼠標(biāo)點(diǎn)擊去區(qū)域比較密集，估計(jì)很多人都沒有用過。
（3）、產(chǎn)品類別多的話，如何設(shè)置欄目副導(dǎo)航？
有的企業(yè)產(chǎn)品類別很多，這個時候應(yīng)該如何設(shè)置副導(dǎo)航欄目呢？給大家提供兩種常見的方法：一種是我們只在首頁副導(dǎo)航寫上產(chǎn)品的大類別，就像我這篇文章里面第一幅圖片一樣，把一個類別按照一個系列來劃分，當(dāng)用戶點(diǎn)擊垃圾桶系列的時候，我們在欄目頁在進(jìn)行詳細(xì)分類，比如下面這個賣垃圾桶的，他就是在首頁只放置了大類別的，而欄目頁按照材料進(jìn)行了詳細(xì)劃分。
這種分類相對來說還是比較清晰明了的，用戶可以按照一些垃圾桶的材料進(jìn)行選擇自己想購買的產(chǎn)品，而右邊的序號，用戶只要報(bào)出什么類別的那個號，銷售人員就能大概知道是哪個垃圾桶了，非常有利于用戶體驗(yàn)。
另一種，可以直接在首頁做成下來菜單那種形式的，鼠標(biāo)放到大類別上面自動出現(xiàn)相關(guān)下屬的小類別，或者做成京東這種樣式的，點(diǎn)擊大類分別出現(xiàn)不同的小類，如下圖所示：
其實(shí)網(wǎng)站建設(shè)中有很多細(xì)節(jié)都是需要注意的，我們整天說用戶體驗(yàn)，但是很多做網(wǎng)站還是沒考慮到訪客的體驗(yàn)，只是按照葫蘆畫瓢，沒有加入一些有利于用戶體驗(yàn)的細(xì)節(jié)，這其實(shí)都需要網(wǎng)站策劃或者負(fù)責(zé)人的網(wǎng)絡(luò)公司應(yīng)該做的。
3、面包屑導(dǎo)航
面包屑導(dǎo)航在SEO優(yōu)化網(wǎng)站中的地位雖不及主導(dǎo)航，但是它在網(wǎng)站的重要性也是不容忽視的，我們都知道，網(wǎng)站主導(dǎo)航是在多個欄目頁面之間切換，主要包括各個二級欄目（產(chǎn)品欄目、新聞欄目）及優(yōu)化網(wǎng)站內(nèi)重要頁面（單頁）間的切換，而面包屑導(dǎo)航主要是首頁、二級目錄和三級目錄之間的相互切換，比如首頁-新聞欄目-新聞詳細(xì)頁面，將每一級都寫成錨文本了解形式，這樣一來不僅提升了用戶體驗(yàn)度（用戶就會知道自己當(dāng)前所處的位置，方便用戶的流量），同時也有了搜索引擎的抓取，也讓搜索引擎蜘蛛了解你SEO優(yōu)化網(wǎng)站的結(jié)構(gòu)。
分類頁上面的面包屑導(dǎo)航相對來說優(yōu)化設(shè)置比較容易，只要把分類欄目跟首頁連在一起就行了，而且分類頁的面包屑導(dǎo)航一般都是由一而終的，就是不管你翻多少頁，次導(dǎo)航的內(nèi)容都一樣的，那對于內(nèi)容頁的面包屑導(dǎo)航咱們應(yīng)該如何做呢？
?。?/span>1）、導(dǎo)航最后一層不要設(shè)置回鏈，畢竟這是最底一層了，設(shè)置回鏈對優(yōu)化不利，有為優(yōu)化而內(nèi)鏈的嫌疑。
?。?/span>2）、導(dǎo)航前面兩層都應(yīng)該設(shè)置超鏈接指向相應(yīng)的頁面，這樣方便用戶通過次導(dǎo)航就可以返回上一層。
?。?/span>3）、導(dǎo)航不得加H標(biāo)簽，一些站長喜歡在這里加上H標(biāo)簽來聚集網(wǎng)站權(quán)重，其實(shí)是弊大于利。
4、底部導(dǎo)航
一般程序都不會自帶底部導(dǎo)航的，大部分擁有底部導(dǎo)航的原因是站長為了增加關(guān)鍵詞密度及提示用戶可以通過底部導(dǎo)航返回相應(yīng)的欄目而設(shè)置的，當(dāng)然設(shè)置了底部導(dǎo)航并不是說對SEO優(yōu)化不利，只要設(shè)置正確了，其效果還是有的，那么咱們應(yīng)該如何做優(yōu)化設(shè)置呢？
就如某某博客的底部導(dǎo)航的設(shè)置方法，在底部導(dǎo)航中，如果不是為了SEO優(yōu)化而設(shè)置的，那么首先要在鏈接中加上NOFOLLOW標(biāo)簽，告訴搜索引摯不要爬行這些鏈接，因?yàn)樵蹅兪菫榱朔奖阌脩舳O(shè)置的；如果為了優(yōu)化而設(shè)置的那就不要加NOFOLLOW標(biāo)簽了。
一般底部導(dǎo)航應(yīng)該放一些自已認(rèn)為有必要的欄目關(guān)鍵詞，如聯(lián)系我們、免責(zé)聲明、版權(quán)所有之類的就不要設(shè)置了，放這些到底部導(dǎo)航既浪費(fèi)地方，而且對于用戶和SEO優(yōu)化都沒有任何的幫助，盡量的把自己認(rèn)為重要的，需要重復(fù)提示的內(nèi)容放到底部導(dǎo)航，既可以告訴搜索引摯哪些是重點(diǎn)，同時也讓用戶可以在瀏覽到頁腳時快速的返回到相應(yīng)的頁面。
對于底部導(dǎo)航的優(yōu)化設(shè)置，首先需要一定量的數(shù)據(jù)分析，因?yàn)檫@個用得好對SEO幫助非常有用，然后根據(jù)網(wǎng)站的特點(diǎn)來設(shè)置，盡可能的把底部導(dǎo)航用在一些需要重要提醒的地方。
5、網(wǎng)站地圖導(dǎo)航
提到網(wǎng)站地圖，我想各位SEOer們可能都會想到sitemap.html、sitemap.xml、sitemap.txt的網(wǎng)站地圖，這些網(wǎng)站地圖的制做，是有利于搜索引擎抓取的，也是我們將網(wǎng)站提交給百度、谷歌、雅虎各大搜索引擎的檢索的重要文件。
而在這里我想說的網(wǎng)站地圖是指一個包含整個網(wǎng)站頁面的單頁面，這個單頁面通常是需要我們手動添加的，但是這個頁面就如同橋頁需要我們針對這頁面操作頁面外鏈，并且要在整個網(wǎng)站中的其他頁面也布局這個頁面的鏈接，均衡這個頁面中的導(dǎo)出鏈接。
網(wǎng)站地圖中包含了整個網(wǎng)站中的所有頁面，這樣更加的有利于搜索引擎的抓取和檢索，有利于網(wǎng)站的優(yōu)化。
以上的五個導(dǎo)航就是SEO優(yōu)化網(wǎng)站中的五大導(dǎo)航。希望各位SEO站長們能夠合理的布局好這五個導(dǎo)航，通過這五個導(dǎo)航將整個網(wǎng)站銜接在一起，使整個網(wǎng)站活起來，讓整個網(wǎng)站的性能得到更大的提升，從而在搜索引擎中獲得更好的排名。
結(jié)語：導(dǎo)航菜單可能是網(wǎng)頁設(shè)計(jì)中最重要的部分了，每個用戶瀏覽網(wǎng)站時一定有所需，因此導(dǎo)航菜單能夠幫助用戶尋找信息，好的導(dǎo)航菜單像是導(dǎo)游，告訴用戶網(wǎng)站是干什么的，內(nèi)容分類有哪些，在哪里可以找到什么信息。
一個導(dǎo)航的優(yōu)化設(shè)置是否處理得好，不但影響著SEO優(yōu)化的效果是否最大化，同時對于用戶體驗(yàn)而言也是非常重要的，所以說，把網(wǎng)站的所有導(dǎo)航都設(shè)置好，并做好優(yōu)化處理，在搜索引摯和用戶方面都可以獲得不少的印象分。
（注：本文來自網(wǎng)絡(luò)，版權(quán)歸原作者所有）
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com
