網(wǎng)站的各個(gè)頁(yè)面分析與優(yōu)化
在完成網(wǎng)站整體站點(diǎn)的部署之后,網(wǎng)站管理員還需要根據(jù)每個(gè)頁(yè)面的類型進(jìn)行不同的優(yōu)化。網(wǎng)站頁(yè)面的優(yōu)化是SEO的重點(diǎn)工作之一,它決定了網(wǎng)站的收錄數(shù)量及收錄率,同時(shí)良好的長(zhǎng)尾詞頁(yè)面還能帶來(lái)長(zhǎng)尾排名及廣泛的流量。因此學(xué)習(xí)完本章,讀者將對(duì)如何優(yōu)化每個(gè)網(wǎng)站頁(yè)面具備全面的認(rèn)識(shí),并提高相應(yīng)的技能。
本章主要內(nèi)容:
·了解網(wǎng)頁(yè)的結(jié)構(gòu)
·網(wǎng)頁(yè)結(jié)構(gòu)對(duì)SEO的影響
·網(wǎng)頁(yè)中的關(guān)鍵詞優(yōu)化
·動(dòng)態(tài)網(wǎng)頁(yè)的SEO的制作網(wǎng)頁(yè)冗余代碼優(yōu)化
頁(yè)面圖片優(yōu)化
5.1了解網(wǎng)頁(yè)的結(jié)構(gòu)
進(jìn)行網(wǎng)頁(yè)優(yōu)化之前需要先了解網(wǎng)頁(yè)的結(jié)構(gòu),這要求網(wǎng)頁(yè)從業(yè)者對(duì)于HTML有一個(gè)系統(tǒng)的了解。這也是進(jìn)行SEO必備的基礎(chǔ)。頁(yè)內(nèi)搜索引擎優(yōu)化技術(shù)將被應(yīng)用到網(wǎng)頁(yè)上的代碼、文件名和內(nèi)容中。為了應(yīng)用頁(yè)內(nèi)優(yōu)化,站長(zhǎng)必須要對(duì)HTML有基本的理解,HTML是用于創(chuàng)建網(wǎng)站頁(yè)面的編程語(yǔ)言。HTML使用的命令稱為標(biāo)簽,用來(lái)告訴瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容。比如需要在HTML文檔內(nèi)部添加Meta標(biāo)簽,這個(gè)標(biāo)簽用來(lái)給搜索引擎提供網(wǎng)站的元數(shù)據(jù)信息。
5.1.1編輯網(wǎng)頁(yè)文件的工具介紹
對(duì)于HTML文件,可以使用任意的文本編輯器,比如Notepad、Notepad++或Dreamweaver等可視化工具,來(lái)構(gòu)建HTML.頁(yè)面。一般 Dreamweaver有一些自動(dòng)生成代碼或者提示功能,因而比較適合初學(xué)者,其他文本編輯軟件還有UItraEdit(UE)和EditPlus等。由于HTML標(biāo)簽基本上都是成對(duì)出現(xiàn),因此Notepad++提供的成對(duì)高亮顯示功能可以
幫助站長(zhǎng)了解到HTML標(biāo)記的層次結(jié)構(gòu)。
Notepad++是一個(gè)免費(fèi)的軟件,可以去http://www.notepad-plus-plus.org/網(wǎng)址下載。進(jìn)人網(wǎng)站后,單擊左側(cè)的“download”按鈕,即可開始下載安裝程序包。
雖然Notepad++提供了高亮功能,非常方便,但是在實(shí)際工作中筆者更愿將它用作一個(gè)輕量級(jí)的代碼審查工具,而在創(chuàng)建網(wǎng)站時(shí)者通常使用較為專業(yè)的Dreamweaver,因?yàn)檫@個(gè)工具會(huì)自動(dòng)添加兼容于各種HTML.標(biāo)準(zhǔn)的網(wǎng)頁(yè)代碼,避免了自己寫代碼的麻煩。在Dreamweaver中,單擊“文件1新建”菜單項(xiàng),將創(chuàng)建一個(gè)新的HTML頁(yè)面。
可以看到,Dreamweaver幫助用戶生成了基本的HTML代碼骨架,只需要在<body>區(qū)中填入HTML內(nèi)容即可。
5.1.2HTML源文檔介紹
基本上一個(gè)HTML頁(yè)面以<html>標(biāo)簽開始,并以</html>標(biāo)簽結(jié)束,HTML語(yǔ)言的標(biāo)
簽要求成對(duì)出現(xiàn),但是這也不是絕對(duì)。W3School提供了一份非常好的HTML教程,網(wǎng)址是 http://www.w3school.com.cn/html/index.asp,建議每個(gè)SEO人員都應(yīng)該學(xué)習(xí)一下,這里主要介紹與SEO優(yōu)化相關(guān)的HTML網(wǎng)頁(yè)構(gòu)建。我們以HTLM5中國(guó)站(http://www.
HTML5cn.org/)為例介紹一下HTML文檔的構(gòu)成。
(1)首先打開瀏覽器,單擊鼠標(biāo)右鍵,選擇“查看源代碼”選項(xiàng)。
(2)一般首頁(yè)文件名稱形如 index.html、index.php、index.asp、index.jsp、index.htm、index.shtml等,當(dāng)然首頁(yè)大部分都通過(guò)服務(wù)器程序?qū)W(wǎng)址進(jìn)行了處理,只顯示主域名而無(wú)文件名,例如,http://www.HTML5cn.org/實(shí)際通過(guò)http://www.HTML5cn.org/index.php 也是
可以訪問的。欄目頁(yè)文件名一般表示為欄目名稱的拼音、英文或首字母縮寫等,如
htp:/www.XXX.com/keji/欄目下將是對(duì)科技內(nèi)容的聚合。不利于SEO的做法則是無(wú)規(guī)則的無(wú)意義命名,如本例未經(jīng)靜態(tài)化的HTML教程欄目地址:htp://www.HTML5cn.org/portalphp?mod=list&catid=15。網(wǎng)站詳情頁(yè)或內(nèi)容頁(yè)由于數(shù)量相對(duì)較為龐大使用拼音或英文等命名,對(duì)程序的要求余比較高、常規(guī)的做法是只需用自然增長(zhǎng)的數(shù)字ID加后綴形成內(nèi)頁(yè)網(wǎng)址,比如盧松松的博客:htp:/lusongsong.com/blog/post/7343.html。 當(dāng)然使用廣泛的DZ(discuz!)論壇程序通常是htp:/www.tui56.com/thread-245529-1-1.html 這樣的。只要靜態(tài)化或偽靜態(tài)化網(wǎng)址并精短易傳播,內(nèi)頁(yè)網(wǎng)址不必過(guò)于苛刻。
<DOCTYPE html>用于對(duì)網(wǎng)頁(yè)進(jìn)行聲明,告訴瀏覽器以什么樣的規(guī)則來(lái)呈現(xiàn)內(nèi)容,有興趣的讀者可以去htp://www.w3school.com.cn學(xué)習(xí),本書只對(duì)HTML做一個(gè)簡(jiǎn)單的介紹。
整個(gè)網(wǎng)頁(yè)將被一個(gè)名為html的標(biāo)簽包裹在內(nèi),其中head部分用于添加諸如TDK(Title、Keywords、Description)以及其他的Meta元信息,用于告訴瀏覽器對(duì)文檔的描述信息,link用于引入外部CSS文件,style用于在HTML文檔中直接添加 CSS樣式等,base標(biāo)簽用于對(duì)HTML文檔內(nèi)a標(biāo)簽href屬性值指定默認(rèn)地址或默認(rèn)目標(biāo),而 Script是HTML文檔中將使用到的js文件,對(duì)SEO人員來(lái)說(shuō)js文件放在HTML文檔末是更有利的SEO行為HTML文檔在瀏覽器中可呈現(xiàn)的部分是body部分。一個(gè)內(nèi)容豐富的網(wǎng)頁(yè)文件,body部分內(nèi)容及結(jié)構(gòu)會(huì)非常復(fù)雜。常使用的結(jié)構(gòu)化標(biāo)簽包括div、nav、header、main、footer,鏈接標(biāo)簽a,表格標(biāo)簽table、tr、td、th、tbody、thead、tfoot等,輸入標(biāo)簽input,文本框標(biāo)簽textarea,列表標(biāo)簽link,段落標(biāo)簽p,行標(biāo)簽 span,圖片標(biāo)簽 img 等,Heading標(biāo)簽也叫做H標(biāo)簽,HTML.里一共有六種大小的heading標(biāo)簽,是網(wǎng)頁(yè)HTML中對(duì)文本標(biāo)題
所進(jìn)行的著重強(qiáng)調(diào)的一種標(biāo)簽,這是在SEO中最為看重的結(jié)構(gòu)化標(biāo)簽之一,除此外還有b、srong、em標(biāo)簽?傆(jì)約119個(gè)結(jié)構(gòu)化標(biāo)簽的組合使用形成了豐富多樣的各種網(wǎng)頁(yè)文檔,是精彩的激動(dòng)人心的Intermet沖浪之旅的基礎(chǔ)。
5.1.3客戶端可見網(wǎng)頁(yè)結(jié)構(gòu)介紹
一個(gè)可見的網(wǎng)頁(yè)文檔將包括頂部LOGO、Slogan、登錄注冊(cè)、收藏、設(shè)置主頁(yè)及搜索條等構(gòu)成的可見網(wǎng)頁(yè)的頭部。
接下來(lái)是網(wǎng)頁(yè)的導(dǎo)航部分,用于給進(jìn)入網(wǎng)站的訪客提供一個(gè)方便的訪問指南,因此一般呈現(xiàn)的是網(wǎng)站最為重要及用戶最為關(guān)心的信息,網(wǎng)頁(yè)導(dǎo)航部分。
5.2網(wǎng)頁(yè)結(jié)構(gòu)對(duì)SEO的影響
網(wǎng)頁(yè)結(jié)構(gòu)對(duì)SEO效果也有明顯的影響。層次清晰、重點(diǎn)突出、加載速度快、無(wú)冗余代碼、噪聲低、服務(wù)器請(qǐng)求次數(shù)少的結(jié)構(gòu)會(huì)提高搜索引擎的收錄,反之如果網(wǎng)頁(yè)結(jié)構(gòu)混亂,各種標(biāo)記毫無(wú)規(guī)律、雜亂無(wú)章地排列會(huì)影響網(wǎng)頁(yè)的收錄,同時(shí)會(huì)使跳出率居高不下,對(duì)SEO的影響是很大的。下面我們來(lái)分別介紹網(wǎng)頁(yè)結(jié)構(gòu)對(duì)SEO的影響。
5.2.1層次清晰、重點(diǎn)突出及降噪處理
在新推出的HTML5中,對(duì)網(wǎng)頁(yè)結(jié)構(gòu)的標(biāo)簽描述更強(qiáng)調(diào)語(yǔ)義化,也就是對(duì)網(wǎng)頁(yè)各個(gè)區(qū)塊在標(biāo)簽上表述得更為清晰,幫助搜索引擎蜘蛛識(shí)別區(qū)塊及各自的重要性。比如article標(biāo)簽用來(lái)標(biāo)記內(nèi)容,aside用來(lái)標(biāo)記側(cè)邊欄,還有command、datalist、section、figure、header、footer、nav等。在編輯HTML文檔的時(shí)候就要注意使用對(duì)應(yīng)的標(biāo)簽來(lái)結(jié)構(gòu)化HTML文檔,幫助蜘蛛識(shí)別,提高抓取效率。在HTML還沒推出來(lái)的時(shí)候,很多前端工程師基于結(jié)構(gòu)優(yōu)化的考慮,會(huì)對(duì)相應(yīng)區(qū)塊采用ID標(biāo)記,比如導(dǎo)航命名ID為nav,頭部命名為header,尾
部命名為footer,也是可以幫助蜘蛛識(shí)別和抓取的。層次清晰、重點(diǎn)突出還包含對(duì)H標(biāo)簽、strong標(biāo)簽、b標(biāo)簽等的正確合理使用。網(wǎng)頁(yè)降噪是為了更加清晰化、重點(diǎn)突出化的一種處理方式,盡力減少或去除彈出廣告、聯(lián)盟廣告及其他一些對(duì)用戶可能沒用的信息。HTML
語(yǔ)言是語(yǔ)義化的標(biāo)簽語(yǔ)言,在清晰理解各種語(yǔ)義化標(biāo)簽功能的基礎(chǔ)上對(duì)HTML文檔進(jìn)行結(jié)構(gòu)化即可建構(gòu)起一個(gè)對(duì)搜索引擎和用戶友好的網(wǎng)頁(yè)文檔結(jié)構(gòu)。
具體來(lái)說(shuō),使用HTML5語(yǔ)言標(biāo)記則對(duì)頁(yè)面對(duì)應(yīng)的區(qū)塊使用對(duì)應(yīng)的標(biāo)簽。使用<header></header>標(biāo)記頭部包裹LOGO、Slogan、注冊(cè)登錄、搜索框等信息,<nav></nav>標(biāo)記網(wǎng)站導(dǎo)航,<main></main>對(duì)應(yīng)網(wǎng)站的主體內(nèi)容,<footer></footer>包含版權(quán)、尾部導(dǎo)航、友情鏈接、聯(lián)系方式等。如果用較老版本HTML創(chuàng)建網(wǎng)頁(yè)文檔,可以使用ID對(duì)各區(qū)塊進(jìn)行結(jié)構(gòu)化。
以上說(shuō)到了用相應(yīng)標(biāo)簽或者ID、CLASS屬性標(biāo)示文檔各個(gè)區(qū)塊,而H標(biāo)簽、strong標(biāo)簽等則是為了使主體內(nèi)容重點(diǎn)更加突出、層次清晰而設(shè)。最佳的參考文檔是百度百科,以“莆田系”詞條為例。
|