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