网站Logo图片链接HTML代码深藏的SEO技巧-转

原文：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技巧。