我们经常会发现网站首页中的H1标签没有地方放。这时咱们不妨试试下面的3种方法:

方法1:在logo图片背后添加H1标签


对应的源代码如下:

<div class="top_left"> 
<h1>
<a href="http://www.seo.net.cn/"><img  src="../images/index_logo.jpg" alt="SEO赚钱培训" ></a>
</h1>
</div>

也可以把logo.jpg放在CSS样式表里面,

.top_left h1 a {

background: url("../images/index_logo.jpg") no-repeat scroll center center;

  }

/*a标签样式规则只在top_left类选择器里面的h1选择器内起作用*/

所以源代码就变成了:

<div class="top_left"> 
<h1>
<a href="http://www.seo.net.cn/" title="SEO赚钱培训
"></a>
</h1>
</div>


方法2:将H1放在源代码中,但是在页面中不给予显示

下面这个网站首页显示的内容中,我们是看不到H1标签的痕迹的(用户看不到),


H1标签仅仅出现在源代码中(搜索引擎能看到),如下:


我们可以通过这种方法在不损用户体验的前提下针对搜索引擎最大程度地做SEO优化。这种效果是怎么做出来的呢,请往下看。

这种效果我们用的是html中的标签。用于对网页或区段进行组合。代码如下:

<hrgroup>

<h1>深圳电商培训机构</h1>

<h2>主要开设电商培训班和美工培训班</h2>

</hrgroup>

查看实际效果,我们会发现标签里面的文字内容在页面中正常显示了。


这时我们再配合使用display属性和属性值none,就能成功将文字内容隐藏。(display:none,不显示的意思)

<hrgroup style="display:none">

<h1>深圳电商培训机构</h1>

<h2>主要开设电商培训班和美工培训班</h2>

</hrgroup>

再看效果,问题解决:


方法3:添加在文本中

下面这个网站,就是把h1标签用在了logo旁边。


源代码如下:

 

当然,要达到上面的效果,我们是需要对h1标签定义一个CSS样式,把h1中的文字字号缩小,同时控制文字的位置,如下所示:

     .header .logo h1 {

  color: #333; /*颜色为黑色*/

  font-size: 14px; /*字号14像素*/

  left: 175px; /*距离顶点横坐标175像素*/

  position: absolute; /*距离是从横坐标0开始的绝对距离*/

  top: 0; /*头部距离为0*/

  width: 100px; /*宽度为100像素*/

  }

  /*h1样式规则只在header类选择器里面的logo类选择器内起作用*/

上面就是笔者收集的在网站首页添加h1标签的3种方法,希望对你有帮助。