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