芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
2

有利于 SEO 的背景 Logo 代码

作者 芒果/分类 代码/发布于 2009-05-10 01:53

网站 Logo 一般使用在图片上加链接的方式呈现。但细心的设计者会发现,国外的网站 Logo 一般是文字链接形式。Logo 是 SEO 中的关键元素。而文字形式的链接和图片形式的链接相比,前者更适合于搜索引擎优化。下面的代码用于实现背景 Logo 结合隐藏文字链接的效果:

首先,创建一个文字链接:

<a href="#" title="logo" id="logo">Logo</a>

接着,对此链接设定样式:

#logo a{display:block;height:50px;width:100px;background-image:url(logo.gif);background-repeat:no-repeat;text-indent:-1000em;}

样式 #logo 的高度和宽度可根据图片 logo.gif 的大小设定。代码中使用了 text-indent 来使文字缩进 -1000em,既隐藏了文字,又达到了 SEO 的要求。

当然,还可以使用 <span></span> 标记来隐藏文字,只要对此 <span></span> 设置样式为隐藏,则代码如下:

<a href="#" title="logo" id="logo"><span style="display:none;">Logo</span></a>

这种结构与表现分离的做法符合 Web 设计的发展思想。如果需要更加照顾搜索引擎爬虫,不妨为此 Logo 添加 <h1></h1> 标签,加强关键词的重要性。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/useful-seo-background-logo-code/" title="有利于 SEO 的背景 Logo 代码" rel="bookmark">有利于 SEO 的背景 Logo 代码 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 2 条群众意见

  1. 破口大说 /2009-05-27 00:53

    好东西,我收藏了! 回应

    #1
  2. sem /2010-09-14 16:28

    擦边球,环球资源网就这么做的。我也有几个网站这么做了。。。呵呵。 回应

    #2

下面我简单说几句