網(wǎng)站頁(yè)面優(yōu)化重要的方法_網(wǎng)站頁(yè)面優(yōu)化有什么方法
網(wǎng)頁(yè)應(yīng)該力求抓住而不是淹沒(méi)瀏覽者的注意力,過(guò)多的閃爍、色彩、下拉菜單框、圖片等會(huì)讓訪問(wèn)者無(wú)所適從——離開(kāi)是最好的選擇。下面由學(xué)習(xí)啦小編為大家整理的網(wǎng)站頁(yè)面優(yōu)化方法,希望大家喜歡!
網(wǎng)站頁(yè)面優(yōu)化方法
一、單頁(yè)面網(wǎng)站的缺點(diǎn)
1、內(nèi)鏈建設(shè)
在內(nèi)鏈建設(shè)上,單頁(yè)面網(wǎng)站沒(méi)有任何的操作余地,只能忽視這一項(xiàng)重要的優(yōu)化手段;
2、流量獲取
我們知道,很多網(wǎng)站的流量是通過(guò)二級(jí)頁(yè)面和內(nèi)容頁(yè)來(lái)獲取的,而單頁(yè)面網(wǎng)站不存在這樣頁(yè)面,所以對(duì)于流量而言,無(wú)疑對(duì)網(wǎng)站是一個(gè)重大的打擊;
3、跳出率
對(duì)于單頁(yè)面網(wǎng)站來(lái)說(shuō),我們可以不去關(guān)注跳出率的變化,因?yàn)樘雎士隙ㄊ?00%的。這樣高的跳出率對(duì)于搜索引擎而言很可能會(huì)將該網(wǎng)站認(rèn)為是無(wú)價(jià)值的網(wǎng)站,導(dǎo)致很難獲得良好的排名。
4、關(guān)鍵詞的布局
單頁(yè)面網(wǎng)站想要布局大量的關(guān)鍵詞的話很容易被認(rèn)定為關(guān)鍵詞堆砌,而關(guān)鍵詞堆砌是一種常見(jiàn)的作弊行為,這樣很容易被搜索引擎K掉。
呵呵,說(shuō)了這么多單頁(yè)面網(wǎng)站的缺點(diǎn)相信很多人都會(huì)被打擊到,但事物都是相輔相成的,有反面就必定會(huì)有正面,下面我們說(shuō)說(shuō)單頁(yè)面網(wǎng)站的優(yōu)點(diǎn)。
二、單頁(yè)面網(wǎng)站的優(yōu)點(diǎn)
1、利于抓取和收錄
單頁(yè)面網(wǎng)站不用擔(dān)心網(wǎng)站的內(nèi)容不被搜索引擎抓取,只有一個(gè)頁(yè)面嘛,抓取、收錄、展現(xiàn)都是順理成章的事情。
2、利于增強(qiáng)網(wǎng)站的相關(guān)性
單頁(yè)面網(wǎng)站因?yàn)橹挥幸粋€(gè)頁(yè)面,所以我們所做的工作都是圍繞著這個(gè)頁(yè)面而展開(kāi)的,內(nèi)容也好,關(guān)鍵詞也好,單頁(yè)面的網(wǎng)站相關(guān)性總是要更高一些。最為典型的例子就是百度百科,百度百科的頁(yè)面我們就可以把它看作為一個(gè)單頁(yè)面網(wǎng)站,里邊所有的內(nèi)容都是圍繞相關(guān)詞條而編輯的,內(nèi)容極具相關(guān)性和完整性,用戶通過(guò)一個(gè)頁(yè)面就可以了解到該詞條的所有知識(shí)點(diǎn)。
3、利于權(quán)重的集中
這可能是單頁(yè)面網(wǎng)站最為值得炫耀的優(yōu)點(diǎn)了。我們知道,權(quán)重的集中對(duì)于一個(gè)網(wǎng)站的重要性,而單頁(yè)面網(wǎng)站不用做過(guò)多的設(shè)置就可以很好的阻止權(quán)重的分散。這無(wú)疑更加有利于網(wǎng)站相關(guān)關(guān)鍵詞在搜索引擎中的排名。
好了,關(guān)于單頁(yè)面網(wǎng)站的優(yōu)缺點(diǎn)都比較詳細(xì)的介紹給大家了,那么單頁(yè)面網(wǎng)站的SEO優(yōu)化應(yīng)該如何下手呢?
三、單頁(yè)面網(wǎng)站的SEO優(yōu)化策略
1、注重TDK的寫(xiě)法
既然頁(yè)面單一,那么就更需要注重網(wǎng)站標(biāo)題、關(guān)鍵詞和描述的寫(xiě)法。標(biāo)題上來(lái)說(shuō),要簡(jiǎn)單明確,包含主要關(guān)鍵詞,一句話能概括全文;描述上來(lái)講,一句話活一小段文字提煉出文章的精髓,內(nèi)容比標(biāo)題更加詳細(xì);關(guān)鍵詞,用絕對(duì)的與內(nèi)容相關(guān)的詞語(yǔ),多個(gè)關(guān)鍵詞用逗號(hào)分開(kāi)。
2、外鏈錨文本的多樣化
在外鏈建設(shè)上,切忌內(nèi)容單一,這樣很容易造成網(wǎng)站的過(guò)度優(yōu)化,而我們都知道,網(wǎng)站的過(guò)度優(yōu)化對(duì)SEO而言是不利的。
3、網(wǎng)站標(biāo)簽的運(yùn)用
合理的運(yùn)用網(wǎng)站標(biāo)簽可以讓搜索引擎更好的理解網(wǎng)站的層次內(nèi)容,比如h標(biāo)簽,strong標(biāo)簽等等。
4、符合國(guó)際標(biāo)準(zhǔn)
這里所說(shuō)的符合國(guó)際標(biāo)準(zhǔn)指的是告訴搜索引擎我的網(wǎng)站符合W3C標(biāo)準(zhǔn),對(duì)任何瀏覽器都是兼容的。
5、代碼優(yōu)化
CSS和JS的優(yōu)化,盡可能的使用外部導(dǎo)入,從而讓網(wǎng)頁(yè)代碼更加簡(jiǎn)潔,能用CSS就盡量不用JS,畢竟JS對(duì)于搜索引擎而言并不友好。
6、圖片的優(yōu)化
這個(gè)屬于老生常談了,這里就不多說(shuō)了。
7、合理設(shè)置錨點(diǎn)
有一些單頁(yè)面為了展示很多產(chǎn)品特點(diǎn),頁(yè)面會(huì)拉的很長(zhǎng),不利于用戶查看,用戶體驗(yàn)并不好,如果在單頁(yè)面網(wǎng)站上設(shè)置合理的錨點(diǎn),用戶只需要點(diǎn)擊一下快速達(dá)到想要看到的內(nèi)容區(qū)域。
8、避免全是圖片展示
如果單頁(yè)面網(wǎng)站為了提升視覺(jué)效果從而更多的使用圖片,那么就會(huì)造成網(wǎng)站文字內(nèi)容過(guò)少,不利于搜索引擎對(duì)網(wǎng)站的抓取和索引。
9、內(nèi)容為王
之前我們就舉過(guò)百度百科的例子,而作為單頁(yè)面網(wǎng)站來(lái)講,將用戶所有的需求點(diǎn)盡可能完整的展現(xiàn)出來(lái),從而解決用戶的煩惱才是單頁(yè)面網(wǎng)站立足的關(guān)鍵。
網(wǎng)站頁(yè)面優(yōu)化的技巧
1、用GZIP格式壓縮
gzip是GNUzip的縮寫(xiě),它是一個(gè)GNU自由軟件的文件壓縮程序。它是Jean-loupGailly和MarkAdler一起開(kāi)發(fā)的,第一次公開(kāi)發(fā)布版本是1992年10月31日發(fā)布的版本0.1,1993年2月發(fā)布了版本1.0。
我們?cè)贚inux中經(jīng)常會(huì)用到后綴為.gz的文件,它們就是GZIP格式的,現(xiàn)今已經(jīng)成為Internet上使用非常普遍的一種數(shù)據(jù)壓縮格式,或者說(shuō)一種文件格式。
HTTP協(xié)議上的GZIP編碼是一種用來(lái)改進(jìn)WEB應(yīng)用程序性能的技術(shù),大流量的WEB站點(diǎn)常常使用GZIP壓縮技術(shù)來(lái)讓用戶感受更快的速度。
這一般是指WWW服務(wù)器中安裝的一個(gè)功能,當(dāng)有人來(lái)訪問(wèn)這個(gè)服務(wù)器中的網(wǎng)站時(shí),服務(wù)器中的這個(gè)功能就將網(wǎng)頁(yè)內(nèi)容壓縮后傳輸?shù)絹?lái)訪的電腦瀏覽器中顯示出來(lái)。
一般對(duì)純文本內(nèi)容可壓縮到原大小的40%,這樣傳輸就快了,效果就是你點(diǎn)擊網(wǎng)址后會(huì)很快的顯示出來(lái),當(dāng)然這也會(huì)增加服務(wù)器的負(fù)載,一般服務(wù)器中都安裝有這個(gè)功能模塊的。
根據(jù)W3C組織調(diào)查,大部分的網(wǎng)站都沒(méi)有啟用壓縮功能。
2、支持瀏覽器緩存
如果瀏覽器支持緩存,我們就不用重復(fù)下載網(wǎng)頁(yè)資源,最簡(jiǎn)單的設(shè)置緩存方法是在響應(yīng)頭中添加相應(yīng)的內(nèi)容,包括:Expires header,Last-Modified等。
你可以可以通過(guò)配置服務(wù)器來(lái)自動(dòng)添加這些屬性,比如你在Apache服務(wù)器中配置緩存所有的照片一個(gè)月:
ExpiresActive On
ExpiresDefault "access plus 1 month"
3、使用內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN)
CDN的全稱(chēng)是Content Delivery Network,即內(nèi)容分發(fā)網(wǎng)絡(luò)。其目的是通過(guò)在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu),將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的網(wǎng)絡(luò)“邊緣”,使用戶可以就近取得所需的內(nèi)容,提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度。
CDN有別于鏡像,因?yàn)樗如R像更智能,或者可以做這樣一個(gè)比喻:CDN=更智能的鏡像+緩存+流量導(dǎo)流。
因而,CDN可以明顯提高Internet網(wǎng)絡(luò)中信息流動(dòng)的效率,從技術(shù)上全面解決由于網(wǎng)絡(luò)帶寬小、用戶訪問(wèn)量大、網(wǎng)點(diǎn)分布不均等問(wèn)題,提高用戶訪問(wèn)網(wǎng)站的響應(yīng)速度。
為更好地理解CDN,讓我們看一下CDN的工作流程,當(dāng)用戶訪問(wèn)已經(jīng)加入CDN服務(wù)的網(wǎng)站時(shí),首先通過(guò)DNS重定向技術(shù)確定最接近用戶的最佳CDN節(jié)點(diǎn),同時(shí)將用戶的請(qǐng)求指向該節(jié)點(diǎn)。
當(dāng)用戶的請(qǐng)求到達(dá)指定節(jié)點(diǎn)時(shí),CDN的服務(wù)器(節(jié)點(diǎn)上的高速緩存)負(fù)責(zé)將用戶請(qǐng)求的內(nèi)容提供給用戶。
具體流程為: 用戶在自己的瀏覽器中輸入要訪問(wèn)的網(wǎng)站的域名,瀏覽器向本地DNS請(qǐng)求對(duì)該域名的解析,本地DNS將請(qǐng)求發(fā)到網(wǎng)站的主DNS,主DNS根據(jù)一系列的策略確定當(dāng)時(shí)最適當(dāng)?shù)腃DN節(jié)點(diǎn),并將解析的結(jié)果(IP地址)發(fā)給用戶,用戶向給定的CDN節(jié)點(diǎn)請(qǐng)求相——應(yīng)網(wǎng)站的內(nèi)容。
以上三個(gè)方法可以有效地加快頁(yè)面的訪問(wèn)速度,現(xiàn)在我們將對(duì)你的代碼進(jìn)行診斷,幫助我們給頁(yè)面減肥。
4、刪除不需要的資源
當(dāng)你不再需要一個(gè)組件的時(shí)候,你應(yīng)該刪掉它的CSS和JavaScript代碼,如果這些代碼都單獨(dú)放在一個(gè)文件中,那刪掉它們也不是難事,但如果已經(jīng)沒(méi)有用的代碼和其它代碼在一個(gè)文件中,那你肯定要費(fèi)不少精力去刪掉它們。
這個(gè)時(shí)候你就需要使用第三方的工具來(lái)幫你一鍵解決,比如JSLint,Dust-Me Selectors,CSS Usage或是像grunt-uncss一樣的構(gòu)建工具。
5、style和font重復(fù)定義的沉余代碼
要充分利用好CSS代碼定義自己的顏色大小等,有些網(wǎng)站既用了CSS代碼定義了之后又去使用style或者是font這樣的代碼進(jìn)行定義,這樣就無(wú)形中增加了無(wú)用代碼,容易造成代碼冗余,因此我們要對(duì)這樣的代碼進(jìn)行壓縮,實(shí)現(xiàn)代碼精簡(jiǎn)。
6、通用和最小化CSS
理想情況下,需要一個(gè)單獨(dú)的CSS文件,讓每個(gè)頁(yè)面都調(diào)用這一個(gè)布局,當(dāng)然,如果你想要支持老版本的IE,你就得多弄一個(gè)CSS文件。
另外,還要提醒大家一點(diǎn):當(dāng)你把它們構(gòu)建到服務(wù)器上之前,你應(yīng)該把代碼間所有不必要的格式都刪掉。
有很多預(yù)處理工具都可以幫你解決這件麻煩事,比如Sass,LESS和Stylus。
有一些方法可以幫助你直接合并多個(gè)CSS文件,在Windows上:
copy file1.css+file2.css file.css
在Mac或Linux上:
cat file1.css file2.css > file.css
你可以把得到的CSS文件再經(jīng)過(guò)在線的CSS壓縮工具刪除格式化。
最后,在head標(biāo)簽中加載所有的CSS,這樣瀏覽器就知道你的頁(yè)面樣式不用多次重繪了。
7、通用和最小化的JavaScript
利用外部文件,我們可以用Javascript代碼和CSS代碼放在外部文件里面,在我們的HTML代碼里面加上調(diào)用代碼進(jìn)行調(diào)用即可,如果打開(kāi)一個(gè)網(wǎng)站去檢查它的源文件,前面如果有大量的Javascript代碼和CSS代碼就容易使得網(wǎng)站有用的內(nèi)容文字部分推到后面去了,是不利于搜索引擎抓取的。
收集的數(shù)據(jù)顯示:平均每個(gè)頁(yè)面加載了18個(gè)javascript文件,雖然把像jQuery這樣的庫(kù)文件單獨(dú)分開(kāi)非常實(shí)用,但是你自己的JavaScript代碼應(yīng)該保持通用和最小化。
同樣很多第三方的工具可以幫你解決這樣事情,比如YUI Compressor,Closure Compiler和我最喜歡用的The JavaScript CompressorRater,簡(jiǎn)化的JavaScript代碼會(huì)加快網(wǎng)頁(yè)的訪問(wèn)速度,減少HTTP請(qǐng)求次數(shù)。
最后,最好在HTML的body標(biāo)簽后放置JavaScript引用代碼,這樣能保證JavaScript代碼不影響到其它內(nèi)容的加載。
8、減少頁(yè)面嵌套的表格
對(duì)于表格要盡量少使用,尤其是嵌套的表格部分,雖然CSS排版使得我們編寫(xiě)代碼更加的精簡(jiǎn)容易,但往往也是少不了表格的使用的,我們可以不去避免,但一定要減少使用多層嵌套的表格,不要產(chǎn)生沒(méi)有用的代碼。
9、網(wǎng)站圖片的優(yōu)化
對(duì)于一些圖片站來(lái)說(shuō),加載錯(cuò)誤的圖片格式會(huì)對(duì)你的網(wǎng)頁(yè)造成很大影響,所以,建議圖片站的站長(zhǎng)一定要多對(duì)圖片做些優(yōu)化。
(1)、圖片優(yōu)化原則
一般來(lái)說(shuō)選取圖片我們應(yīng)用遵循如下原則:
?、佟⒄掌褂肑PG格式。
?、?、其它所有的圖片都使用PNG格式(具體可查看馬海祥博客《JPG、PNG和GIF圖片的基本原理及優(yōu)化方法》的相關(guān)介紹)。
(2)、調(diào)整大圖的大小
目前智能機(jī)所拍出的照片越來(lái)越大,你不可能把原照片直接展示在頁(yè)面中,普通的編輯器都會(huì)直接上傳原圖,這樣會(huì)讓頁(yè)面的加載速度慢到另一個(gè)級(jí)別,在正常的照片處理中,一般都沒(méi)有必要給用戶高質(zhì)量的圖片展示,所以,你需要一個(gè)自動(dòng)調(diào)整圖片大小的工具。
需要注意的是,圖片的尺寸是不能超過(guò)容量的大小的,這樣一來(lái)頁(yè)面加載了全圖,卻無(wú)法展示出來(lái),現(xiàn)在照片的尺寸基本上都超過(guò)電腦顯示屏的尺寸了。
圖片的大小在網(wǎng)頁(yè)總大小中占很大的比重,圖片減小50%會(huì)導(dǎo)致整體頁(yè)面大小減少75%,所以你應(yīng)該認(rèn)真解決一下圖片的加載
(3)、進(jìn)一步壓縮圖片
僅僅調(diào)優(yōu)圖片的大小是不夠的,你應(yīng)該通過(guò)第三方工具對(duì)圖片進(jìn)行分析,進(jìn)一步壓縮圖片。
比較好用的工具有OptiPNG,PNGOUT,jpegtran和jpegoptim,這些工具大都能安裝成獨(dú)立的工具或是整合到開(kāi)發(fā)過(guò)程中,另外像Smush這樣的工具,還可以直接在云端處理。
10、刪除不必要的字體和注釋
Web fonts已經(jīng)徹底改變了字體的設(shè)計(jì),它減少了很多不必要的文本,然而,目前的字體仍然會(huì)給你的網(wǎng)頁(yè)帶來(lái)多余的字節(jié)。
如果你使用超過(guò)兩種字體,這就已經(jīng)開(kāi)始對(duì)性能造成影響了。
網(wǎng)頁(yè)代碼盡量少用注釋?zhuān)覀冎酪欢纬绦蚶锩婕由献⑨屇軌虮阌谖覀兛焖僬业胶屠斫饩唧w代碼對(duì)應(yīng)的功能,對(duì)于編程人員修改網(wǎng)頁(yè)是有幫助的,但是這樣的代碼對(duì)于搜索引擎來(lái)說(shuō)是沒(méi)有任何的意義的,只能說(shuō)是噪聲,因此我們要減少網(wǎng)頁(yè)代碼里面出現(xiàn)的注釋部分。
提升網(wǎng)站頁(yè)面質(zhì)量的方法
1、代碼之加載速度
網(wǎng)頁(yè)的加載速度直接影響到用戶打開(kāi)網(wǎng)站的體驗(yàn)和蜘蛛爬行次數(shù),如果一個(gè)網(wǎng)頁(yè)無(wú)法打開(kāi)或者打開(kāi)速度過(guò)于慢,很可能會(huì)失去大量的用戶,蜘蛛對(duì)此類(lèi)網(wǎng)站也不會(huì)有任何好感。然而影響速度的不僅僅是服務(wù)器問(wèn)題,服務(wù)器只需要買(mǎi)一臺(tái)好的就不會(huì)太差,真正影響的站內(nèi)代碼。
在百度站長(zhǎng)平臺(tái)上面有一個(gè)欄目“頁(yè)面優(yōu)化建議”上面會(huì)詳細(xì)的寫(xiě)出CSS和JS合并文件、gzip壓縮等等情況,這些都是具備可以?xún)?yōu)化的代碼,然后注意下頁(yè)面的死鏈接就可以了。
2、代碼之頁(yè)面相似度
頁(yè)面相似是非常常見(jiàn)的一種,大多數(shù)站長(zhǎng)都是直接網(wǎng)絡(luò)上面下載源碼,并且安裝免費(fèi)模板,這種模板與其他網(wǎng)站吻合至少達(dá)到了80%以上,但是對(duì)于SEO來(lái)說(shuō),這是一個(gè)嚴(yán)重的錯(cuò)誤。百度喜歡“原創(chuàng)”不僅僅說(shuō)的是文章,代碼也是一樣的,如果模板是自己原創(chuàng)那么以后優(yōu)化會(huì)方便很多。
3、網(wǎng)頁(yè)排版
網(wǎng)頁(yè)排版應(yīng)該滿國(guó)內(nèi)用戶習(xí)慣,根據(jù)習(xí)慣來(lái)布局,打一比方百度和谷歌,從用戶搜索習(xí)慣上看國(guó)內(nèi)用戶更喜歡百度搜索結(jié)果顯示,但是谷歌更適用國(guó)外。所以谷歌淘汰,百度存活。國(guó)內(nèi)用戶更喜歡從左到右,從上到下,谷歌顯示結(jié)果與用戶完全相反。
4、內(nèi)容質(zhì)量
文章質(zhì)量是網(wǎng)頁(yè)質(zhì)量中最重要的一個(gè)因素,一篇文章如果對(duì)用戶具備實(shí)時(shí)性、幫助性、可讀性甚至互動(dòng)性,那么絕對(duì)是“大神”級(jí)別的好文章,文章部分并非只是使用文字表達(dá),一篇真正的高質(zhì)量文章通常是采用圖文結(jié)合,甚至視頻結(jié)合。在文章底部可以加上相關(guān)文章,評(píng)論機(jī)制等等與用戶互動(dòng)。
5、頁(yè)面廣告
現(xiàn)在的個(gè)人站長(zhǎng)通常都是依靠廣告生存,特別是一些信息網(wǎng)站,所以頻繁的廣告占據(jù)了大量的位置,但是這是用戶需求的么?廣告會(huì)影響用戶的體驗(yàn),減少?gòu)V告也許會(huì)讓用戶體驗(yàn)更好。廣告不能一味求多,如果用戶減少,廣告位價(jià)格就會(huì)變低,有一種丟西瓜撿芝麻的感覺(jué)了。
6、內(nèi)部鏈接
內(nèi)部鏈接同樣是網(wǎng)頁(yè)組成因素,有的站長(zhǎng)為了提升關(guān)鍵詞排名,在一篇文章做上大量的錨文本,這種情況同樣是要杜絕的,實(shí)際錨文本只是為了傳遞權(quán)重,在頁(yè)面右邊加上一些相關(guān)文章版塊,最新文章版塊同樣可以傳遞權(quán)重,雖然效果沒(méi)有錨文本好,但是不屬于作弊手段,何樂(lè)而不為呢?