第 128 期(技巧)：关于logo显示的SEO小技巧

[wingmeng]

在一个注重 SEO 的网页中，通常会在 <h1> 标签中使用关键词 —— 一般是网站名称或其他核心关键词。但大多数场景下我们希望 <h1> 标签的内容显示为图形（如logo、美术字等），同时又希望其中的关键词被搜索引擎读取到。
我们一般是这样做的：

1. 使文字不显示

   h1 {
     width: 60px;
     height: 40px;
     font-size: 0;
     background: url("images/logo.png");
   }

   <h1>Website Name</h1>

   这种方法通过设置 font-size 为 0 来在视觉上隐藏关键词，通过设置 background-image 来显示 logo，这种做法其实并不可取，有 SEO 作弊的嫌疑，会被搜索引擎惩罚。类似在文字上面做文章的方法还有设置 color: transparent，同样不可取。

2. 将文字挤出可视区

   h1 {
     width: 60px;
     height: 40px;
     white-space: nowrap;
     text-indent: 100%;
     overflow: hidden;
     background: url("images/logo.png");
   }

   <h1>Website Name</h1>

   这种方法是通过设置一个足够大的缩进值，将文字“挤出”可视区，从而实现视觉上不可见的效果。

3. content 替换法

   h1 {
     content: url("images/logo.png");
   }

   <h1>Website Name</h1>

   这种方法主要利用 content 属性，将 <h1> 中的内容替换为 logo 来显示，代码量非常少，而且无需设置容器的高宽，图片会自动撑开。