網站LOGO文字化 SEO兼顧網站使用者完美體驗技巧

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

網站的LOGO是網站的靈魂，我們可以從谷歌和百度經常更新自己設計的獨到的LOGO可以看到。 但我們大多數站長來說，LOGO可能是不會經常換的，但問題是，眾多搜尋引擎對於圖片的理解能力相對較差，而對連結或者說錨文本的認識卻比較獨到。 那麼，我們是否可以利用連結來替換圖片呢?

或許，你認為不可能，但事實並非如此。 利用DIV+CSS，我們可以輕鬆的實現這個預想。

首先，一個正常的LOGO位置我們會怎麼寫呢?

< div id="logo" >< a href="HTTP://www.hezewangzhan.com" >< img src="/image/logo.gif" alt="菏澤網站建設" / >&l t; /a >< /div >

這樣寫是正常的，但問題是百度等搜尋引擎對於圖片的理解能力有限，即便我們加上了alt標籤，但百度還是很可能不認這個。 為什麼我們要將這麼重要的位置讓給一個圖片呢?

經過一段研究，我想到了另外的解決方法，將代碼改造成如下：

< h1 id="logo" >< a href="HTTP://www.hezewangzhan.com" >菏澤網站建設< /a >< /h1 >

OK,如面的代碼，我們將圖片去掉，而使用了直接的錨文本，為了凸顯主體，我們還是用了h1標籤。 再一次強調了這個關鍵字。

好了，直接在瀏覽器中顯示這段文字絕對是讓你尷尬的，那麼我們要怎麼來在CSS中控制這段代碼呢?

#logo { width:170px; height:88px; background:url(/image/logo.gif) no-repeat; text-indent:-10000px;}

#logo a { display:block; width:170px; height:88px;}

寬度和高度的控制這個不必詳細說明，說一下幾個重要的部分：

1：text-indent:-10000px; 這段代碼是說，文本縮進負一萬圖元，也就是說，跑到雲霄之外了。 因此，文字會看不見的。 這種隱藏文字的方法是目前為止我遇到的一種最好的方法，毫不誇張的說，沒人教我這招兒，是我自己研究出來的。 但在我看了CSS禪意花園這本書之後知道，一名叫做rundle的國外設計師最早使用這種文字隱藏的方法。

2：background:url(/image/logo.gif) no-repeat;這段代碼是使用背景圖片，也就是我們設計的LOGO。 如果說前面的是隱藏，這裡就是替換，那麼綜合來說，這就是「圖像替換文本」的一個小小的CSS技巧。

當然，思維開闊的人還會有其他不同的方法，譬如：如下代碼：

#logo { width:170px; height:88px; background:url(/image/logo.gif) no-repeat;}

#logo a { display:none;}

這代代碼比我提供的代碼更為簡潔，不是嗎?問題是，百度或者其他搜尋引擎如果抓取CSS的話，很可能認為你這是作弊。 不過更多的SEOER認為搜尋引擎是不讀取CSS的。 所以，這個我就不得而知了。

但，問題並沒有結束，因為，如果沒有A呢?也就是說，我們不加連結，貌似就僅自己上面的解決方法了。

當然，還有其他的，如字體是0，這樣的設計是我認為不可取的，因為這樣字不是不會顯示，而是會顯得特別的小。 大家可以試驗一下。

對了，站長網在每個文章的每段前面都加兩個全形的空格，用來表示斷行的意思。 我認為這個不妥。 因為這個無疑增加了網頁的大小。 使用 text-indent:2em;即可實現這個效果。 站長站就是這樣做的。

這些代碼的用處並非是只有這些，給大家展示一個我客戶的網站:HTTP://www.feiyuedianchi.com 這個網站的代碼和展示效果將會讓你吃驚!如果你的瀏覽器禁用CSS，我相信， 這個網頁依然能夠清晰的給你這個網站的構架和想要表達的內容。

你還有更好的點子嗎?歡迎與各位探討!

文章首發：HTTP://www.hezewangzhan.com/news/news/6911.html轉載請保留連結。