DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO優化集錦 >> 網站頭部LOGO優化三部曲
網站頭部LOGO優化三部曲
編輯:SEO優化集錦     

我們都知道搜索引擎的爬行與人的視覺感官是一致的,從上到下,從左到右。而通常一個網站頁面左上角放置的都是網站的Logo,且通常這裡會起到內頁返回首頁的鏈接作用,因而做好這個Logo部分的優化雖然說不是必不可少,但對於像我這樣對每個細節都精益求精的人來說是勢在必行。

以下我將依次分三步遞進講解這個部分的優化:

一、普通優化

普通優化的代碼,一般如下:

簡單講解一下這段代碼:這段代碼是給logo部分劃分好一個div塊,裡面填充的內容是帶有網站首頁鏈接的圖片。說來簡單,但實際上據觀測有30%的網站優化不到這個程度。

他們通常犯的錯有如下:LOGO圖片沒寫Alt屬性;LOGO圖片沒帶超鏈接;沒給LOGO圖片的樣式添加長寬。

LOGO圖片不寫Alt屬性,對蜘蛛不友好,因其無法抓取圖片裡的內容,不利於SEO;LOGO圖片沒帶超鏈接,無法引導用戶從內頁返回首頁,客戶體驗不夠好;沒給LOGO圖片的樣式添加長寬,會導致浏覽器渲染時長增加。

希望各位站長或寫代碼的朋友能嚴格按照以上代碼寫好自己網站的頭部LOGO,對於網站的權重和客戶體驗都是很好的提升。

二、高級優化

如果你認為按上面提到的代碼優化就OK了,其實不然,上面的代碼個人只能給70分。接下來我們講一下比上面代碼優化度更高的寫法,適合對細節特別在意的朋友。

高級優化的代碼,如下:

咦,這段代碼把超鏈接移到外面,而且沒有LOGO圖片,那不是比上面的代碼還差?且聽我說完,你看到的html代碼確實如此,但是你沒看到它的樣式CSS,這段代碼的含義是將LOGO圖片設置為Logo塊的背景圖,然後給這個塊加首頁鏈接。

為什麼這麼處理呢,因為首先,它的代碼量減少了,少設置LOGO圖片的代碼,其次,“網站名”寫在超鏈接裡,形成了描文本,而我們都知道描文本的鏈接價值是最高的。

有細心的朋友可能觀察到了,如果文字形式的“網站名”寫在LOGO樣式裡面,則看到的效果是文字在背景(即logo)至上,豈不是很難看?當然我還沒說完,LOGO樣式我們還需要增加一個樣式控制text-indent:-99em,讓文字部分(即網站名顯示在屏幕以外),這樣就不會有文字顯示在LOGO上了很多SEOer會說了,這樣隱藏文字的做法是作弊。其實不然,通過本人觀察國外很多網站,很多采用這樣的做法,並不構成作弊,因為這個部分是LOGO,它不同於網頁內容裡隱藏關鍵字的做法,是不會被搜索引擎判定為作弊的。

當然,還是要說,這種高級優化僅適合於高級網頁設計人員,一般水平的朋友就不需要在普通優化的基礎上考慮高級優化了。

三、終極優化

以上的高級優化我個人可以給到90分得高分,而如果想把這個分數進一步提高,我們需要做以下更優的改進!

終極優化的代碼,如下:

這段代碼與上面的高級優化基本相同,僅僅增加了h1標簽我們都知道h1標簽在整個網站裡占有非常非常高的權重,而把網站名這個文字添加h1標簽,無疑大大提高了網站的品牌價值而又會有朋友指出,首頁在網站名外設置h1標簽無可厚非,但要知道頭部部分通常是通用模板代碼,如此一來,每個內頁不是就多出一個h1標簽,而我們都知道h1標簽每個頁面僅能使用一次,不就得不償失了?確實,h1標簽在每個頁面只能使用一次,而通常內頁裡h1都加在title的關鍵詞裡這就需要我們對模板文件做個判斷。

以筆者使用的ecshop商城系統為例,我是這麼寫的

這段代碼是寫在模板內,實際html輸出是不帶{}的內容,它是代表:程序判斷若當前頁面是首頁,則給網站名加h1標簽,如果是其他頁面,則不加。如此一來每個頁面都能有獨立唯一的h1標簽(95%的網站首頁沒有h1)

以上講的分數可以占8分,那離滿分尚有兩分,而這兩分是存在爭議的這兩分得爭議是:使用css spirit,將logo圖片與其他網頁背景圖片整合到一起成一張大圖片,而樣式切割出logo的位置html輸出這樣的好處是減少了服務器的請求,更快的加載,爭議的部分在於搜索引擎不會知道那一張整合後的背景圖片的哪一部分是logo而不被抓取其實這個的還有一個可能是好處又或是壞處的地方,就是它讓增加了嘗試保存你的LOGO圖片的訪問者的難度。號稱國內SEO水平最高的皮包類商城正是使用這樣的終極優化。

好了以上提到的LOGO優化三步曲已到末尾。感興趣的朋友可以依次嘗試,或者淺嘗辄止僅采用最大眾的第一種優化手法。越往後越需要更高的代碼技術,請確保你完全熟悉DIV+CSS後再嘗試,否則容易出現浏覽器不兼容或顯示錯亂的問題。感興趣的朋友也可以到筆者網站上研究這部分代碼,筆者正是使用了最高等級的優化代碼。本文由泰摩網球 www.taimo.cn 原創並獨家供稿,歡迎大家轉載,但請保留網站出處,謝謝合作。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved