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

作者:Kaka 时间:2010-11-20 23:44:49 浏览: 评论:30

突然发现，一个普通不过的网站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技巧。

标签: SEO

※ 网站速度慢？试试网站自动优化工具 ※

记忆盒子

把记忆装进灰色的盒子，封装起来，那年那月，重新拾起。

导航