语义化 H1 标签

大家都知道搜索引擎比较喜欢H1。在SEO中H1也是很基础也很重要的一步。但有些时候为了界面风格的原因，很多标题性的文字做成了图片。大多数情况下，切割页面的时候就直接用上了图片。在代码上，H1也就对搜索引擎失去了作用。

<h1><img src=”http://www.****.com/xxxx.jpg”></h1> 
jb51.net
其实通过一点小的调整则可以将两者兼顾。  
再来看看这段。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>  
<p class="test">  
<h1>我们</h1>

赞 (0)

相关推荐

  • 语义化 H1 标签

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

  • 关于HTML的语义化标签和无语义化标签

    什么是HTML语义化标签 语义化的标签,旨在让标签有自己的含义,让浏览器认识这个标签所传达的信息,是干什么的有什么作用. 比如:h1标题标签的语义是用它来标识网页或其他部分最重要的标题. 然而span 标签责没有独特的含义. 常用的语义化标签 header元素 是HTML5中新增的语义化标签,用于定义文档的页眉(介绍信息). nav元素 定义页面的导航链接部分区域. <header> <h1>这是标题</h1> <nav> <a>Home<

  • JS实现完全语义化的网页选项卡效果代码

    JS实现完全语义化的网页选项卡效果代码

    本文实例讲述了JS实现完全语义化的网页选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款完全语义化的JS网页选项卡,包括了两种用法,一种是点击式,另一种是滑动门式,具体用哪一种要根据你自己的需要了,滑动门是在鼠标经过时触发,选项卡则是需要鼠标点击的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yyh-web-tab-cha-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • h1标签的使用技巧

    h1标签的使用技巧

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

  • javascript比较语义化版本号的实现代码

    前言 所谓"语义化版本号",就是在版本号中体现出语义,或者说版本号本身是有意义的,不再是随意给的一个数字.这个规范将版本号中每个数字的意义都做了比较严格的说明.当然,其中大部分内容还是沿用我们之前说过的业内的约定,所以,对于有版本号意识的开发者来说,接受这个规范是很容易的. 在移动端APP第三方开发中经常会碰到一些因为版本不同而造成JS SDK或JS API差异或支持的问题.对于移动前端来说,在实际第三方开发中可能会需要根据APP的版本号做一些特殊的业务逻辑处理. 语义化版本号 一般语

  • C# 中的 is 真的是越来越强大越来越语义化(推荐)

    一:背景 1. 讲故事 最近发现 C#7 之后的 is 是越来越看不懂了,乍一看花里胡哨的,不过当我静下心来仔细研读,发现这 is 是越来越短小精悍,而且还特别语义化,那怎是一个爽字了得

  • js库Modernizr的介绍和使用

    js库Modernizr的介绍和使用

    传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站. Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况. Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计. 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能. 什么是Modernizr? Modernizr是一个开源的JS库,它使得那些基

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • Bootstrap学习笔记之css样式设计(2)

    Bootstrap学习笔记之css样式设计(2)

    首先,很感谢各位朋友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的:Bootstrap学习笔记之css样式设计(1) 这次我们来看看bootstrap中关于样式的一些具体关键的类以及如何使用这些类,类与类之间的区别,另外涉及到的一些相关类,举列子的时候解释. 一.表单 1.form-control类:含有此类的<input><select><te

  • 被人遗忘的html tags

    其实有很多html tags是极富于语义的,而在table布局大行其道后,很多语义化的标签就慢慢的被人们淡忘了.比如可能很多人一次都没见过的标签:dl, dt, dd, cite, q, dfn, ins, del, var等等. 1. dl, dt, dd系列定义列表网站重构让很多人知道了ul, ol和li,但是在列表的家族里面还有一个dl,就是"定义列表".比如说词典里面的词的解释.定义就可以用这种列表. 如:<dl><dt>Dog</dt>&l

随机推荐