網站(zhàn)SEO優化如何帶給你(nǐ)更多(duō)的流量世界看臉，網站(zhàn)看流量，門(mén)面自然要漂亮，不過很(hěn)多(duō)朋友(yǒu)以為(wèi)做(zuò)網站(zhàn)是門(mén)技(jì)術(shù)活兒，自己學藝不精做(zuò)不好，沒有(yǒu)流量自然也就沒用利潤可(kě)言。如果你(nǐ)看了今天這篇軟文，就會(huì)明(míng)白，刀法于人(rén)，雖有(yǒu)招式，但(dàn)無內(nèi)功支撐，久戰必敗。而這篇好文，就像內(nèi)功修煉心法，按6個(gè)大(dà)招來(lái)，速成可(kě)待。

适用前提：

非專業設計(jì)師(shī) 沒太多(duō)空(kōng)閑時(shí)間(jiān)去做(zuò)。 為(wèi)什麽要做(zuò)網站(zhàn)?網站(zhàn)是用來(lái)傳達信息的。一切不以傳達有(yǒu)效信息的網站(zhàn)都是yy. 網站(zhàn)是用來(lái)促使用戶行(xíng)動的，也即Call To Action。無法讓用戶産生(shēng)你(nǐ)所期望的都是無效的。

所以，先擺脫一個(gè)錯誤的認識：網站(zhàn)僅僅是用來(lái)裝飾用的，僅僅是為(wèi)了吸引人(rén)注意的，有(yǒu)點流量還(hái)用愁利潤在何方麽?所以，我們既然是專業網站(zhàn)建設設計(jì)，就要回歸到做(zuò)設計(jì)的本源，為(wèi)了達到以上(shàng)效果，同時(shí)兼顧美觀、大(dà)方、好看。

你(nǐ)需要讓用戶有(yǒu)參與感，這也是進行(xíng)用戶體(tǐ)驗設計(jì)的時(shí)候最難的一點，因為(wèi)實現參與感就意味着你(nǐ)需要為(wèi)用戶提供高(gāo)質量的內(nèi)容，還(hái)得(de)以絕妙而令人(rén)興奮的方式來(lái)呈現出這些(xiē)內(nèi)容。如果你(nǐ)覺得(de)自己的網站(zhàn)死氣沉沉，那(nà)麽接下來(lái)的這六大(dà)秘訣，應該能讓你(nǐ)的網站(zhàn)煥發活力

1、視(shì)差：讓單純的滾動變成互動

如果改變網站(zhàn)某一方面的設計(jì)能讓用戶與網站(zhàn)之間(jiān)的參與度提高(gāo)7成，那(nà)麽你(nǐ)會(huì)不會(huì)使用?實際上(shàng)，很(hěn)多(duō)網站(zhàn)已經開(kāi)始這樣做(zuò)了，這就是視(shì)差滾動給網站(zhàn)帶來(lái)的改變。作(zuò)為(wèi)設計(jì)趨勢，視(shì)差滾動已經席卷了網頁設計(jì)領域。這種獨特而醒目的設計(jì)風格讓信息和(hé)內(nèi)容的呈現更加有(yǒu)趣和(hé)直觀。

視(shì)差滾動設計(jì)中，多(duō)種元素會(huì)随着頁面滾動而運動，給人(rén)以一種獨特的動态體(tǐ)驗，這種體(tǐ)驗還(hái)會(huì)驅使用戶進一步滾動。如果你(nǐ)想設計(jì)出一個(gè)視(shì)差滾動的網頁，諸如Webydo這樣的免代碼工具可(kě)以幫你(nǐ)制(zhì)作(zuò)出動感而精美的網頁。最近他們又推出了新工具，Parallax Scrolling Animator，非常不錯哦。

2、符号與标識：視(shì)覺潤滑劑

在信息量較大(dà)的網站(zhàn)中，你(nǐ)可(kě)能需要借助大(dà)量的文字來(lái)描述事物，這也就意味着設計(jì)師(shī)需要最大(dà)程度地展示文本。使用圖标和(hé)符合可(kě)以幫助用戶更快更好地定位內(nèi)容。雖然符号和(hé)标識都隻是微小(xiǎo)的視(shì)覺符号，但(dàn)是它們不僅可(kě)以啓發用戶，讓他們更好地理(lǐ)解內(nèi)容，還(hái)可(kě)以像路标一樣引導用戶的視(shì)覺流向。在互聯網發展早期，圖标和(hé)符号通(tōng)常是點陣的，要修改和(hé)調整的話(huà)過程會(huì)非常繁瑣。但(dàn)是現在不一樣了，設計(jì)師(shī)可(kě)以借助圖标字體(tǐ)來(lái)輕松使用符号和(hé)圖标，它們不僅是矢量的，而且還(hái)具備強大(dà)的拓展性，并通(tōng)過CSS便捷地定制(zhì)。最值得(de)推薦的工具無疑是Glyphter，它不僅可(kě)以從開(kāi)源的圖标集來(lái)繪制(zhì)圖标，還(hái)能通(tōng)過上(shàng)傳SVG格式的圖标或者文字來(lái)制(zhì)作(zuò)。使用圖标和(hé)符号來(lái)支撐文本段落和(hé)不同的基面元素，比起單純的文本累積來(lái)的更加靠譜，如果結合動态排版技(jì)術(shù)，你(nǐ)的網站(zhàn)體(tǐ)驗會(huì)更加令人(rén)愉悅、便于閱讀。

3、靈活的版式：響應式設計(jì)

響應式設計(jì)并不僅僅是讓布局更靈活，它還(hái)關乎內(nèi)容。網頁布局能随着屏幕尺寸改變而改變隻是一方面，各個(gè)模塊中所包含的內(nèi)容也應該随之進行(xíng)調整。移動端的用戶通(tōng)常沒有(yǒu)時(shí)間(jiān)浏覽過長的段落，所以請(qǐng)确保移動端的段落足夠簡潔，交互和(hé)響應也應對更加清晰直觀。移動端屏幕本就不大(dà)，如果字體(tǐ)過大(dà)或者過小(xiǎo)都不合适，所以請(qǐng)使用動态排版技(jì)術(shù)确保字體(tǐ)在一個(gè)适宜于閱讀的區(qū)間(jiān)中，千萬不要讓用戶放大(dà)看文本!說道(dào)響應式的網站(zhàn)設計(jì)，Information Architects site 是一個(gè)非常值得(de)學習的案例——它不僅內(nèi)容關于響應式設計(jì)，還(hái)是響應式設計(jì)的發起者之一。這個(gè)博客不僅深入探討(tǎo)了響應式設計(jì)的思想和(hé)技(jì)術(shù)，并且以自己為(wèi)範例展示了如何完美地響應式展示內(nèi)容。響應式的內(nèi)容展示讓用戶更輕松地浏覽，也使得(de)網站(zhàn)本身更加流暢清晰，使得(de)整體(tǐ)上(shàng)更具有(yǒu)吸引力。這種設計(jì)思想也應該延伸到圖片展示上(shàng)。

4、矢量圖片與響應式視(shì)覺

文本隻是網站(zhàn)設計(jì)的諸多(duō)設計(jì)因素之一，圖片和(hé)文本同樣重要。通(tōng)常網站(zhàn)所使用的圖片多(duō)是位圖，格式常見于JPG、PNG以及GIF。而位圖帶來(lái)了2個(gè)問題：

每次使用這樣的圖片的時(shí)候，都會(huì)向網站(zhàn)的加載過程發一個(gè)HTTP請(qǐng)求。随着某個(gè)圖片在網站(zhàn)越來(lái)越受歡迎，這個(gè)加載時(shí)間(jiān)會(huì)開(kāi)始膨脹，更不用說渲染更多(duō)頁面所需要的數(shù)據請(qǐng)求了。解決方案：使用矢量圖片。矢量圖片可(kě)以更容易縮放到任意大(dà)小(xiǎo)，輕松适應任何分辨率。SVG格式是日益流行(xíng)的矢量圖片格式，許多(duō)網頁設計(jì)師(shī)都特别喜歡使用這種格式，因為(wèi)它不僅可(kě)以适配不同的風格，并且能夠實現許多(duō)漂亮而吸引人(rén)的效果。

5、遊戲化

其實，最巧妙的解決方法是讓網頁遊戲化，或者增加遊戲元素吸引用戶，這可(kě)以增加網站(zhàn)的互動性和(hé)獎勵感。遊戲化最常見的就是各種徽章，你(nǐ)可(kě)以在完成各種任務之後解鎖徽章，教育網站(zhàn)Treehouse就是這麽做(zuò)的，當你(nǐ)完成課程之後會(huì)收到新徽章，這對于用戶非常有(yǒu)意義。但(dàn)是，如果你(nǐ)的網站(zhàn)并不具備類似的功能和(hé)結構，那(nà)該怎麽辦?對于博客、電(diàn)商網站(zhàn)或者其他相對更标準的網站(zhàn)而言，遊戲化可(kě)以采取的策略，是在特定情況下為(wèi)用戶提供優惠券或者折扣。比如，用戶可(kě)以通(tōng)過在Twitter上(shàng)轉發網站(zhàn)內(nèi)容來(lái)獲取免費電(diàn)子書(shū)，或者電(diàn)商網站(zhàn)的優惠券，或者獲取更多(duō)隐藏的內(nèi)容，等等等等像這樣的小(xiǎo)活動、小(xiǎo)互動其實可(kě)以賦予用戶更加私人(rén)化的體(tǐ)驗，培養他們的關注意識和(hé)互動意識，鼓勵他們參與，常常回來(lái)。

6、圖像壓縮：網站(zhàn)提速

沒有(yǒu)什麽比網站(zhàn)加載緩慢更讓人(rén)抓狂。如果網站(zhàn)加載時(shí)間(jiān)太長，用戶會(huì)相繼離開(kāi)——誰知道(dào)網站(zhàn)什麽時(shí)候能最終打開(kāi)呢?尤其是在這個(gè)缺乏耐心的時(shí)代。當網站(zhàn)越來(lái)越複雜，越來(lái)越視(shì)覺化，加載時(shí)間(jiān)不可(kě)避免地受到影(yǐng)響。幸運的是，有(yǒu)一些(xiē)技(jì)巧可(kě)以解決這個(gè)問題：

・簡化內(nèi)容,

・優化網站(zhàn)圖片

・通(tōng)過內(nèi)容分發系統(CDN)來(lái)提升網站(zhàn)

對于初學者，許多(duō)設計(jì)師(shī)會(huì)傾向于借助簡化網站(zhàn)內(nèi)容來(lái)提升訪問速度，盡可(kě)能去除空(kōng)白、注釋和(hé)冗餘的CSS與JS文件，小(xiǎo)步快跑。

移動互聯網的推出，各位站(zhàn)長也紛紛的擠入了移動化網站(zhàn)，移動網站(zhàn)可(kě)以說是一個(gè)比一個(gè)做(zuò)的漂亮，那(nà)麽既然做(zuò)了移動化的網站(zhàn)，那(nà)少(shǎo)不了的自然是SEO優化，在PC端上(shàng)你(nǐ)的網站(zhàn)可(kě)能在某個(gè)詞上(shàng)有(yǒu)排名，但(dàn)在移動搜索引擎上(shàng)，未必你(nǐ)會(huì)優先排名展現。

首先來(lái)看看我們需要針對的搜索引擎吧(ba)，也就是今年的移動搜索引擎使用份額。其他的可(kě)以忽略不計(jì)，重點我們考慮在百度，因為(wèi)他在移動搜索引擎中份額占比是79%。

一、大(dà)部分的移動網站(zhàn)都是有(yǒu)一個(gè)二級域名或者一個(gè)二級欄目做(zuò)移動網站(zhàn)，其實這是不科學的，試想一下，你(nǐ)發布一篇文章，有(yǒu)兩個(gè)URL有(yǒu)一模一樣的內(nèi)容，那(nà)就算(suàn)你(nǐ)是一篇原創文章，那(nà)是不是也會(huì)變成了僞原創呢?在SEO的角度考慮，原創和(hé)僞原創差距是甚大(dà)呀!所以，如果條件允許，建議還(hái)是做(zuò)自動響應的移動化站(zhàn)點，比如我的博客，你(nǐ)試着用浏覽器(qì)的放大(dà)功能看看，是不是根據分辨率網站(zhàn)也有(yǒu)少(shǎo)許的變化呢?

\

二、代碼移動網站(zhàn)我們可(kě)以理(lǐ)解成一個(gè)微網站(zhàn)，在微網站(zhàn)的基礎上(shàng)，我們沒必要把網站(zhàn)做(zuò)的如此複雜(特殊功能除外)，所以在代碼上(shàng)能夠簡潔就簡潔，再說用戶看網站(zhàn)不是看你(nǐ)網站(zhàn)代碼多(duō)複雜，網站(zhàn)多(duō)美觀，而是看你(nǐ)網站(zhàn)能不能在最短(duǎn)的時(shí)間(jiān)找到他想要的答(dá)案。其次是通(tōng)常情況下，手機浏覽器(qì)是沒有(yǒu)PC端浏覽器(qì)那(nà)麽強大(dà)，也就是說不是每一個(gè)JS在移動網站(zhàn)上(shàng)都可(kě)以解析到，萬一用戶用的浏覽器(qì)解析不了你(nǐ)的一個(gè)JS呢，那(nà)豈不是看到亂糟糟的?還(hái)有(yǒu)一個(gè)非常嚴肅的問題，當用戶使用2G網絡，要是你(nǐ)把網站(zhàn)做(zuò)的如此複雜，一時(shí)半會(huì)兒加載不出來(lái)咋辦呢?

三、避免耗費用戶流量

在移動互聯網上(shàng)，用戶最關心的啥?流量嘛，如果你(nǐ)做(zuò)一個(gè)網站(zhàn)，一打開(kāi)就是視(shì)頻、flash、彈窗，用戶會(huì)感覺到可(kě)怕，你(nǐ)可(kě)能會(huì)認為(wèi)用戶不知情在你(nǐ)網站(zhàn)上(shàng)耗費的流量，但(dàn)如果有(yǒu)一個(gè)鐵(tiě)杆粉絲一直在關注你(nǐ)的網站(zhàn)，卻因為(wèi)你(nǐ)網站(zhàn)耗費流量過多(duō)，沒到月底沒流量了，你(nǐ)覺得(de)這事兒是好事還(hái)是壞事。在技(jì)術(shù)層面來(lái)講，Apple産品不支持Flash功能，很(hěn)大(dà)一部分智能手機用戶用不了這項功能，同樣，很(hěn)多(duō)智能手機也不支持Java，所以這隻是兩方面都是不討(tǎo)好的做(zuò)法。

四、頁面細節優化

與PC端的網站(zhàn)一樣，頁面不可(kě)确實keywords、description，可(kě)能在PC端上(shàng)，我們不加上(shàng)關鍵詞和(hé)描述搜索引擎一樣可(kě)以識别到你(nǐ)的具體(tǐ)內(nèi)容是什麽，但(dàn)是我們并無法确定到移動搜索引擎是否可(kě)以識别這一點，所以我們做(zuò)到多(duō)一事不如少(shǎo)一事，盡量按照常規出牌。移動化網站(zhàn)也非常在乎死鏈接和(hé)到處鏈接，所以盡量做(zuò)好404、403 等，如果內(nèi)容死鏈希望重定向到首頁，最好通(tōng)過302跳(tiào)轉，不要使用javascript 跳(tiào)轉。其次是外部鏈接，都說外部鏈接影(yǐng)響排名的并不多(duō)，但(dàn)出于剛剛興趣的移動搜索引擎，我們沒有(yǒu)辦法不做(zuò)到面面俱到!

五、跳(tiào)轉

一般情況下我們的PC網站(zhàn)上(shàng)都可(kě)以看到一個(gè)手機版的按鈕，或者是當手機輸入域名的時(shí)候會(huì)自動跳(tiào)轉到手機網站(zhàn)，這一技(jì)術(shù)改變了手機用戶的用戶體(tǐ)驗，如果還(hái)有(yǒu)不懂的朋友(yǒu)，可(kě)以去學習學習網站(zhàn)自動識别手機端與PC端，但(dàn)跳(tiào)轉歸跳(tiào)轉，偏偏還(hái)有(yǒu)用戶就是喜歡用手機看PC網站(zhàn)，所以我們還(hái)的在手機網站(zhàn)上(shàng)做(zuò)一個(gè)按鈕讓移動網站(zhàn)跳(tiào)回PC端，這就是用戶體(tǐ)驗的一個(gè)細節處理(lǐ)。