h1标签的使用技巧

h1标签的正确使用可以达到seo的目的，那么如何在使用h1标签的同时，又不失去原有的美观呢？事实上，正确使用h1标签，我们既可以达到seo的目的，也能达到美观的目的。大家都知道搜索引擎比较喜欢h1标签。在SEO中h1标签也是很基础也很重要的一步。但有些时候为了界面风格的原因，很多标题性的文字做成了图片。大多数情况下，切割页面的时候就直接用上了图片。在代码上，h1标签也就对搜索引擎失去了作用。

其实通过一点小的调整则可以将两者兼顾。我们需要两张图片：
1
2

看看这段。h1标签对搜索引擎依然可读，我们只是利用text-indent:-9999px;将“邀请好友加入”的文字远远的扔到左边去了。


代码如下:

<style> 
.test{} 
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url(header.gif) no-repeat;} 
.testbox{background:url(bg.gif); width:522px; height:323px;} 
</style> 
<div class="test"> 
<h1>邀请好友加入</h1> 
</div> 
<div class="testbox"></div>

h1标签的使用

.test{}
.test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url(/upload/20071124114047865.gif) no-repeat;}
.testbox{background:url(/upload/20071124114047678.gif); width:522px; height:323px;}

正确使用h1标签，兼顾美观与seo.

邀请好友加入

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

h1标签还可以这样使用,当然你也可以对h1标签使用样式比如字体大小，字体颜色之类的，当然像上面例子，只是为了达到seo的目的，就不需要使用样式对h1标签进行修改了，因为显示在用户面前的是一张图片。

赞 (0)

相关推荐

  • h1标签的使用技巧

    h1标签的使用技巧

    h1标签的正确使用可以达到seo的目的,那么如何在使用h1标签的同时,又不失去原有的美观呢?事实上,正确使用h1标签,我们既可以达到seo的目的,也能达到美观的目的.大家都知道搜索引擎比较喜欢h1标签.在SEO中h1标签也是很基础也很重要的一步.但有些时候为了界面风格的原因,很多标题性的文字做成了图片.大多数情况下,切割页面的时候就直接用上了图片.在代码上,h1标签也就对搜索引擎失去了作用. 其实通过一点小的调整则可以将两者兼顾.我们需要两张图片:1 2 看看这段.h1标签对搜索引擎依然可读,我

  • MyBatis常用标签以及使用技巧总结

    前言 MyBatis常用标签及标签使用技巧 MyBatis的常用标签有很多,比如 <sql id="">:预定义可以复用的sql语句 <include refid="">:根据id引用定义的sql语句 <trim>:空白补全,配合<if>标签使用 <if test="">:条件判断,该语句返回的true,则该标签内的语句就生效 <bind name="" val

  • html工作中表格&lt;tbody&gt;标签的使用技巧

    在做页面的时候,经常要根据不同的操作来显示或隐藏一个表格中的部分内容,隐藏一行直接用<tr>标签,隐藏多行时用<tbody>就很方便. <table> <tbody id="content1"> <tr><td>表单内容</td></tr> </tbody> <tbody id="content2" style="display:none&qu

  • 语义化 H1 标签

    大家都知道搜索引擎比较喜欢H1.在SEO中H1也是很基础也很重要的一步.但有些时候为了界面风格的原因,很多标题性的文字做成了图片.大多数情况下,切割页面的时候就直接用上了图片.在代码上,H1也就对搜索引擎失去了作用. <h1><img src="http://www.****.com/xxxx.jpg"></h1>  jb51.net其实通过一点小的调整则可以将两者兼顾.  再来看看这段.H1的代码对搜索引擎依然可读,我们只是利用text-inden

  • vue parseHTML函数解析器遇到结束标签

    目录 引言 match函数匹配正则endTag 关键 parseEndTag 函数代码 总结parseEndTag 函数作用 handleStartTag函数后续 最后更新 stack 栈以及 lastTag 引言 承接上篇 parseHTML 函数源码解析拿到返回值后的处理 接下来我们将会讲解当 textEnd === 0 解析器遇到结束标签,parse 结束标签的代码如下: // End tag: var endTagMatch = html.match(endTag); if (endTa

  • Bootstrap基本样式学习笔记之标签(5)

    Bootstrap基本样式学习笔记之标签(5)

    直接看Bootstrap标签例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo

  • Bootstrap基本插件学习笔记之标签切换(17)

    Bootstrap基本插件学习笔记之标签切换(17)

    Bootstrap可以很轻松就实现标签切换的效果. 0x01 样式1 基本样式: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

  • 25个 Git 进阶技巧(翻译)

    25个 Git 进阶技巧(翻译)

    我已经使用git差不多18个月了,觉得自己对它应该已经非常了解.然后来自GitHub的Scott Chacon过来给LVS做培训(LVS是一个赌博软件供应商和开发商,从2013年开始的合同),而我在第一天里就学到了很多. 作为一个对git感觉良好的人,我觉得分享从社区里掌握的一些有价值的信息,也许能帮某人解决问题而不用做太深入研究. 基本技巧 1. 安装后的第一步 在安装好git后,你第一件该做的事是设置你的名字和电子邮箱,因为每次提交都要用到这些信息: $ git config --globa

  • 网页编辑器ckeditor和ckfinder配置步骤分享

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 2.在使用编辑器的地方插入HTML控件<textarea> <textarea id="TextArea1" cols="20" rows=&quo

  • js设置文字颜色的方法示例

    本文实例讲述了js设置文字颜色的方法.分享给大家供大家参考,具体如下: <h1>aaabbbccc</h1> 不允许在h1标签中添加任何字符,可以通过css或js定义,使其aaa为红色bbb为黄色ccc为蓝色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&

随机推荐