原文:http://www.webkaka.com/blog/archives/Logo-image-link-html-for-SEO.html
突然发现,一个普通不过的网站Logo的链接,却隐藏着令人感叹的SEO技术。
网站Logo位,有的网站选择放置形象图片,有的网站比较简单,只写个网站关键词。而不管是放图片还是放文字,都会带上一个连到主页的链接。
正常情况下的HTML代码应该是这样的
图片链接:<a href="http://www.yourtsite.com/"><img src="logo.jpg"></a>
文字链接:<a href="http://www.yourtsite.com/">你的网站关键词</a>
为了SEO,Logo位链接不能这样写
因为是Logo位,所以,你得为其加上最重要标签:H1。这样,对于只有文字的形式来说,比较好办,HTML代码写为
文字链接:<h1><a href="http://www.yourtsite.com/">你的网站关键词</a></h1>
但是对于图片Logo来说,在img标签外面加H1是没有效的,因此,你得想办法让Logo位既出现你的网站关键词链接,又要显示你的Logo图片。实现的方法是使用CSS技术。方法如下:
首先,在网页的HTML代码这样写
<div id="logo">
<h1><a href="http://www.yoursite.com/" >你的网站关键词</a></h1>
</div>
然后,在CSS里对logo样式进行设置。我们的目标是不用显示这个文字,取而代之的是一张Logo图片。实现的CSS代码如下
#logo{
float: left;
text-align: left;
text-indent: -999em;
background-image: url(logo.jpg);
}
#logo h1 a{
width: 200px;
height: 50px;
display: block;
}
如果你细心点,你就会发现,现在的blog和cms平台,都采用了这个技术,可见他们不单对程序开发有深远研究,同时对SEO的研究也很深入的。而对SEO没有研究过的程序员开发的企业或者个人网站,往往会容易忽略这些SEO技巧。