突然發(fā)現(xiàn),一個普通不過的網(wǎng)站Logo的鏈接,卻隱藏著令人感嘆的SEO技術(shù)。
網(wǎng)站Logo位,有的網(wǎng)站選擇放置形象圖片,有的網(wǎng)站比較簡單,只寫個網(wǎng)站關(guān)鍵詞。而不管是放圖片還是放文字,都會帶上一個連到主頁的鏈接。
正常情況下的HTML代碼應(yīng)該是這樣的
圖片鏈接:<a href="http://www.yourtsite.com/"><img src="logo.jpg"></a>
文字鏈接:<a href="http://www.yourtsite.com/">你的網(wǎng)站關(guān)鍵詞</a>
為了SEO,Logo位鏈接不能這樣寫
因為是Logo位,所以,你得為其加上最重要標(biāo)簽:H1。這樣,對于只有文字的形式來說,比較好辦,HTML代碼寫為
文字鏈接:<h1><a href="http://www.yourtsite.com/">你的網(wǎng)站關(guān)鍵詞</a></h1>
但是對于圖片Logo來說,在img標(biāo)簽外面加H1是沒有效的,因此,你得想辦法讓Logo位既出現(xiàn)你的網(wǎng)站關(guān)鍵詞鏈接,又要顯示你的Logo圖片。實現(xiàn)的方法是使用CSS技術(shù)。方法如下:
首先,在網(wǎng)頁的HTML代碼這樣寫
<div id="logo">
<h1><a href="http://www.yoursite.com/" >你的網(wǎng)站關(guān)鍵詞</a></h1>
</div>
然后,在CSS里對logo樣式進(jìn)行設(shè)置。我們的目標(biāo)是不用顯示這個文字,取而代之的是一張Logo圖片。實現(xiàn)的CSS代碼如下
#logo{
float: left;
text-align: left;
text-indent: -999em;
background-image: url(logo.jpg);
}
#logo h1 a{
width: 200px;
height: 50px;
display: block;
}
如果你細(xì)心點,你就會發(fā)現(xiàn),現(xiàn)在的blog和cms平臺,都采用了這個技術(shù),可見他們不單對程序開發(fā)有深遠(yuǎn)研究,同時對SEO的研究也很深入的。而對SEO沒有研究過的程序員開發(fā)的企業(yè)或者個人網(wǎng)站,往往會容易忽略這些SEO技巧。