網(wǎng)站SEO優(yōu)化如何帶給你更多的流量世界看臉,網(wǎng)站看流量,門面自然要漂亮,不過很多朋友以為做網(wǎng)站是門技術(shù)活兒,自己學(xué)藝不精做不好,沒有流量自然也就沒用利潤可言。如果你看了今天這篇軟文,就會(huì)明白,刀法于人,雖有招式,但無內(nèi)功支撐,久戰(zhàn)必?cái) 6@篇好文,就像內(nèi)功修煉心法,按6個(gè)大招來,速成可待。 適用前提: 非專業(yè)設(shè)計(jì)師 沒太多空閑時(shí)間去做。 為什么要做網(wǎng)站?網(wǎng)站是用來傳達(dá)信息的。一切不以傳達(dá)有效信息的網(wǎng)站都是yy. 網(wǎng)站是用來促使用戶行動(dòng)的,也即Call To Action。無法讓用戶產(chǎn)生你所期望的都是無效的。 所以,先擺脫一個(gè)錯(cuò)誤的認(rèn)識(shí):網(wǎng)站僅僅是用來裝飾用的,僅僅是為了吸引人注意的,有點(diǎn)流量還用愁利潤在何方么?所以,我們既然是專業(yè)網(wǎng)站建設(shè)設(shè)計(jì),就要回歸到做設(shè)計(jì)的本源,為了達(dá)到以上效果,同時(shí)兼顧美觀、大方、好看。 你需要讓用戶有參與感,這也是進(jìn)行用戶體驗(yàn)設(shè)計(jì)的時(shí)候最難的一點(diǎn),因?yàn)閷?shí)現(xiàn)參與感就意味著你需要為用戶提供高質(zhì)量的內(nèi)容,還得以絕妙而令人興奮的方式來呈現(xiàn)出這些內(nèi)容。如果你覺得自己的網(wǎng)站死氣沉沉,那么接下來的這六大秘訣,應(yīng)該能讓你的網(wǎng)站煥發(fā)活力 1、視差:讓單純的滾動(dòng)變成互動(dòng) 如果改變網(wǎng)站某一方面的設(shè)計(jì)能讓用戶與網(wǎng)站之間的參與度提高7成,那么你會(huì)不會(huì)使用?實(shí)際上,很多網(wǎng)站已經(jīng)開始這樣做了,這就是視差滾動(dòng)給網(wǎng)站帶來的改變。作為設(shè)計(jì)趨勢(shì),視差滾動(dòng)已經(jīng)席卷了網(wǎng)頁設(shè)計(jì)領(lǐng)域。這種獨(dú)特而醒目的設(shè)計(jì)風(fēng)格讓信息和內(nèi)容的呈現(xiàn)更加有趣和直觀。 視差滾動(dòng)設(shè)計(jì)中,多種元素會(huì)隨著頁面滾動(dòng)而運(yùn)動(dòng),給人以一種獨(dú)特的動(dòng)態(tài)體驗(yàn),這種體驗(yàn)還會(huì)驅(qū)使用戶進(jìn)一步滾動(dòng)。如果你想設(shè)計(jì)出一個(gè)視差滾動(dòng)的網(wǎng)頁,諸如Webydo這樣的免代碼工具可以幫你制作出動(dòng)感而精美的網(wǎng)頁。最近他們又推出了新工具,Parallax Scrolling Animator,非常不錯(cuò)哦。 2、符號(hào)與標(biāo)識(shí):視覺潤滑劑 在信息量較大的網(wǎng)站中,你可能需要借助大量的文字來描述事物,這也就意味著設(shè)計(jì)師需要最大程度地展示文本。使用圖標(biāo)和符合可以幫助用戶更快更好地定位內(nèi)容。雖然符號(hào)和標(biāo)識(shí)都只是微小的視覺符號(hào),但是它們不僅可以啟發(fā)用戶,讓他們更好地理解內(nèi)容,還可以像路標(biāo)一樣引導(dǎo)用戶的視覺流向。在互聯(lián)網(wǎng)發(fā)展早期,圖標(biāo)和符號(hào)通常是點(diǎn)陣的,要修改和調(diào)整的話過程會(huì)非常繁瑣。但是現(xiàn)在不一樣了,設(shè)計(jì)師可以借助圖標(biāo)字體來輕松使用符號(hào)和圖標(biāo),它們不僅是矢量的,而且還具備強(qiáng)大的拓展性,并通過CSS便捷地定制。最值得推薦的工具無疑是Glyphter,它不僅可以從開源的圖標(biāo)集來繪制圖標(biāo),還能通過上傳SVG格式的圖標(biāo)或者文字來制作。使用圖標(biāo)和符號(hào)來支撐文本段落和不同的基面元素,比起單純的文本累積來的更加靠譜,如果結(jié)合動(dòng)態(tài)排版技術(shù),你的網(wǎng)站體驗(yàn)會(huì)更加令人愉悅、便于閱讀。 3、靈活的版式:響應(yīng)式設(shè)計(jì) 響應(yīng)式設(shè)計(jì)并不僅僅是讓布局更靈活,它還關(guān)乎內(nèi)容。網(wǎng)頁布局能隨著屏幕尺寸改變而改變只是一方面,各個(gè)模塊中所包含的內(nèi)容也應(yīng)該隨之進(jìn)行調(diào)整。移動(dòng)端的用戶通常沒有時(shí)間瀏覽過長的段落,所以請(qǐng)確保移動(dòng)端的段落足夠簡(jiǎn)潔,交互和響應(yīng)也應(yīng)對(duì)更加清晰直觀。移動(dòng)端屏幕本就不大,如果字體過大或者過小都不合適,所以請(qǐng)使用動(dòng)態(tài)排版技術(shù)確保字體在一個(gè)適宜于閱讀的區(qū)間中,千萬不要讓用戶放大看文本!說道響應(yīng)式的網(wǎng)站設(shè)計(jì),Information Architects site 是一個(gè)非常值得學(xué)習(xí)的案例——它不僅內(nèi)容關(guān)于響應(yīng)式設(shè)計(jì),還是響應(yīng)式設(shè)計(jì)的發(fā)起者之一。這個(gè)博客不僅深入探討了響應(yīng)式設(shè)計(jì)的思想和技術(shù),并且以自己為范例展示了如何完美地響應(yīng)式展示內(nèi)容。響應(yīng)式的內(nèi)容展示讓用戶更輕松地瀏覽,也使得網(wǎng)站本身更加流暢清晰,使得整體上更具有吸引力。這種設(shè)計(jì)思想也應(yīng)該延伸到圖片展示上。 4、矢量圖片與響應(yīng)式視覺 文本只是網(wǎng)站設(shè)計(jì)的諸多設(shè)計(jì)因素之一,圖片和文本同樣重要。通常網(wǎng)站所使用的圖片多是位圖,格式常見于JPG、PNG以及GIF。而位圖帶來了2個(gè)問題: 每次使用這樣的圖片的時(shí)候,都會(huì)向網(wǎng)站的加載過程發(fā)一個(gè)HTTP請(qǐng)求。隨著某個(gè)圖片在網(wǎng)站越來越受歡迎,這個(gè)加載時(shí)間會(huì)開始膨脹,更不用說渲染更多頁面所需要的數(shù)據(jù)請(qǐng)求了。解決方案:使用矢量圖片。矢量圖片可以更容易縮放到任意大小,輕松適應(yīng)任何分辨率。SVG格式是日益流行的矢量圖片格式,許多網(wǎng)頁設(shè)計(jì)師都特別喜歡使用這種格式,因?yàn)樗粌H可以適配不同的風(fēng)格,并且能夠?qū)崿F(xiàn)許多漂亮而吸引人的效果。 5、游戲化 其實(shí),最巧妙的解決方法是讓網(wǎng)頁游戲化,或者增加游戲元素吸引用戶,這可以增加網(wǎng)站的互動(dòng)性和獎(jiǎng)勵(lì)感。游戲化最常見的就是各種徽章,你可以在完成各種任務(wù)之后解鎖徽章,教育網(wǎng)站Treehouse就是這么做的,當(dāng)你完成課程之后會(huì)收到新徽章,這對(duì)于用戶非常有意義。但是,如果你的網(wǎng)站并不具備類似的功能和結(jié)構(gòu),那該怎么辦?對(duì)于博客、電商網(wǎng)站或者其他相對(duì)更標(biāo)準(zhǔn)的網(wǎng)站而言,游戲化可以采取的策略,是在特定情況下為用戶提供優(yōu)惠券或者折扣。比如,用戶可以通過在Twitter上轉(zhuǎn)發(fā)網(wǎng)站內(nèi)容來獲取免費(fèi)電子書,或者電商網(wǎng)站的優(yōu)惠券,或者獲取更多隱藏的內(nèi)容,等等等等像這樣的小活動(dòng)、小互動(dòng)其實(shí)可以賦予用戶更加私人化的體驗(yàn),培養(yǎng)他們的關(guān)注意識(shí)和互動(dòng)意識(shí),鼓勵(lì)他們參與,常常回來。 6、圖像壓縮:網(wǎng)站提速 沒有什么比網(wǎng)站加載緩慢更讓人抓狂。如果網(wǎng)站加載時(shí)間太長,用戶會(huì)相繼離開——誰知道網(wǎng)站什么時(shí)候能最終打開呢?尤其是在這個(gè)缺乏耐心的時(shí)代。當(dāng)網(wǎng)站越來越復(fù)雜,越來越視覺化,加載時(shí)間不可避免地受到影響。幸運(yùn)的是,有一些技巧可以解決這個(gè)問題: ・簡(jiǎn)化內(nèi)容, ・優(yōu)化網(wǎng)站圖片 ・通過內(nèi)容分發(fā)系統(tǒng)(CDN)來提升網(wǎng)站 對(duì)于初學(xué)者,許多設(shè)計(jì)師會(huì)傾向于借助簡(jiǎn)化網(wǎng)站內(nèi)容來提升訪問速度,盡可能去除空白、注釋和冗余的CSS與JS文件,小步快跑。 移動(dòng)互聯(lián)網(wǎng)的推出,各位站長也紛紛的擠入了移動(dòng)化網(wǎng)站,移動(dòng)網(wǎng)站可以說是一個(gè)比一個(gè)做的漂亮,那么既然做了移動(dòng)化的網(wǎng)站,那少不了的自然是SEO優(yōu)化,在PC端上你的網(wǎng)站可能在某個(gè)詞上有排名,但在移動(dòng)搜索引擎上,未必你會(huì)優(yōu)先排名展現(xiàn)。 首先來看看我們需要針對(duì)的搜索引擎吧,也就是今年的移動(dòng)搜索引擎使用份額。其他的可以忽略不計(jì),重點(diǎn)我們考慮在百度,因?yàn)樗谝苿?dòng)搜索引擎中份額占比是79%。 一、大部分的移動(dòng)網(wǎng)站都是有一個(gè)二級(jí)域名或者一個(gè)二級(jí)欄目做移動(dòng)網(wǎng)站,其實(shí)這是不科學(xué)的,試想一下,你發(fā)布一篇文章,有兩個(gè)URL有一模一樣的內(nèi)容,那就算你是一篇原創(chuàng)文章,那是不是也會(huì)變成了偽原創(chuàng)呢?在SEO的角度考慮,原創(chuàng)和偽原創(chuàng)差距是甚大呀!所以,如果條件允許,建議還是做自動(dòng)響應(yīng)的移動(dòng)化站點(diǎn),比如我的博客,你試著用瀏覽器的放大功能看看,是不是根據(jù)分辨率網(wǎng)站也有少許的變化呢?
\
二、代碼移動(dòng)網(wǎng)站我們可以理解成一個(gè)微網(wǎng)站,在微網(wǎng)站的基礎(chǔ)上,我們沒必要把網(wǎng)站做的如此復(fù)雜(特殊功能除外),所以在代碼上能夠簡(jiǎn)潔就簡(jiǎn)潔,再說用戶看網(wǎng)站不是看你網(wǎng)站代碼多復(fù)雜,網(wǎng)站多美觀,而是看你網(wǎng)站能不能在最短的時(shí)間找到他想要的答案。其次是通常情況下,手機(jī)瀏覽器是沒有PC端瀏覽器那么強(qiáng)大,也就是說不是每一個(gè)JS在移動(dòng)網(wǎng)站上都可以解析到,萬一用戶用的瀏覽器解析不了你的一個(gè)JS呢,那豈不是看到亂糟糟的?還有一個(gè)非常嚴(yán)肅的問題,當(dāng)用戶使用2G網(wǎng)絡(luò),要是你把網(wǎng)站做的如此復(fù)雜,一時(shí)半會(huì)兒加載不出來咋辦呢? 三、避免耗費(fèi)用戶流量 在移動(dòng)互聯(lián)網(wǎng)上,用戶最關(guān)心的啥?流量嘛,如果你做一個(gè)網(wǎng)站,一打開就是視頻、flash、彈窗,用戶會(huì)感覺到可怕,你可能會(huì)認(rèn)為用戶不知情在你網(wǎng)站上耗費(fèi)的流量,但如果有一個(gè)鐵桿粉絲一直在關(guān)注你的網(wǎng)站,卻因?yàn)槟憔W(wǎng)站耗費(fèi)流量過多,沒到月底沒流量了,你覺得這事兒是好事還是壞事。在技術(shù)層面來講,Apple產(chǎn)品不支持Flash功能,很大一部分智能手機(jī)用戶用不了這項(xiàng)功能,同樣,很多智能手機(jī)也不支持Java,所以這只是兩方面都是不討好的做法。 四、頁面細(xì)節(jié)優(yōu)化 與PC端的網(wǎng)站一樣,頁面不可確實(shí)keywords、description,可能在PC端上,我們不加上關(guān)鍵詞和描述搜索引擎一樣可以識(shí)別到你的具體內(nèi)容是什么,但是我們并無法確定到移動(dòng)搜索引擎是否可以識(shí)別這一點(diǎn),所以我們做到多一事不如少一事,盡量按照常規(guī)出牌。移動(dòng)化網(wǎng)站也非常在乎死鏈接和到處鏈接,所以盡量做好404、403 等,如果內(nèi)容死鏈希望重定向到首頁,最好通過302跳轉(zhuǎn),不要使用javascript 跳轉(zhuǎn)。其次是外部鏈接,都說外部鏈接影響排名的并不多,但出于剛剛興趣的移動(dòng)搜索引擎,我們沒有辦法不做到面面俱到! 五、跳轉(zhuǎn) 一般情況下我們的PC網(wǎng)站上都可以看到一個(gè)手機(jī)版的按鈕,或者是當(dāng)手機(jī)輸入域名的時(shí)候會(huì)自動(dòng)跳轉(zhuǎn)到手機(jī)網(wǎng)站,這一技術(shù)改變了手機(jī)用戶的用戶體驗(yàn),如果還有不懂的朋友,可以去學(xué)習(xí)學(xué)習(xí)網(wǎng)站自動(dòng)識(shí)別手機(jī)端與PC端,但跳轉(zhuǎn)歸跳轉(zhuǎn),偏偏還有用戶就是喜歡用手機(jī)看PC網(wǎng)站,所以我們還的在手機(jī)網(wǎng)站上做一個(gè)按鈕讓移動(dòng)網(wǎng)站跳回PC端,這就是用戶體驗(yàn)的一個(gè)細(xì)節(jié)處理。 |