SEO源码优化之html5语义化标签

SEO优化当中除了挖掘关键词,网站布局结构优化,内容优化之外还有个重要的步骤就是源码优化,在源码优化中主要有以下几个方面:

1,提高网页信噪比(减少网页中的图片、flash、将html页面内的css样式转化成外部调用的css样式表,减少css、js请求次数等,提升文字段落的占比 );

2,提高源码加载速度(优化源码中的404错误、压低图片质量、js放入网站底部或使用async方式加载,避免JS执行阻塞渲染);

3,对非文字元素(比如图片,视频等)要指定宽高,避免浏览器重排重绘;

4,加入利于SEO优化的标签属性(比如h1 h2、nofollow、strong、meta属性等等);

5,将网站的内容结构布局按照html5语义化标签来编写源码,使搜索引擎蜘蛛更好的判断出网站的内容结构,智能化分析突出重点优化内容;

SEO源码优化之html5语义化标签

源码优化基本就是以上5点内容,今天借东风SEO对第5点展开详细总结下当下html5语义化标签

1. <header>
定义了文档的头部区域,在一个文档中可以定义多个<header>元素。它是块元素

<header>
   <p>这是文档的头部</p>
</header>

2.<footer>
定义文档页脚,它不只是页面的最底部,在文档中也可以定义多个。

<header>
   <address>南京鼓楼</address>
</header>

3.<article>
定义页面独立的内容区域,标签定义的内容本身必须是有意义且必须独立于文档的其他部分,可用在的地方:博客文章,新闻,评论等。

<article>
    <h2>五一劳动节</h2>
    <div>
        今天是五一劳动节
    </div>
</article>

4.<aside>
定义页面的侧边栏内容

<aside>
  <ul>
    <li>腾讯</li>
    <li>阿里</li>
    <li>百度</li>
  </ul>
</aside>

5.<time>
定义时间或日期,time标签中的datetime属性定义的时间不会被显示,但可能被其他应用使用

<time datetime="2018-01-17">今天是我生日</time>

6.<ruby>
加注释,ruby标签有两个子元素,rt注释的内容,rp是该标签不显示时显示的文字

<ruby>
  人<rt>ren</rt>
  <rp>该标签无法显示</rp>
</ruby

7.<details>
用于描述文档或者文档某一部分细节,summary是details元素的标题

<details>
  <summary>点击查看更多</summary>
  <p>这是点击后的内容</p>
</details>

8.<mark>
定义带有几号的文本,它会给你想要突出显示的文本加个 背景色

<p>我最喜欢<mark>数学</mark></p>

9.<nav>
定义导航栏

<nav>
  <a href="http://www.jgfish.com">百度</a>
  <a href="http://www.360.com">360</a>
<nav>

10.<progress>
progress显示数据的进度,属性value指定当前值,max最大值,最小值0不用设置

<progress value="30" max="100"></progress>

11.<section>
section一般有两个作用,1.定义文档中的节,和div类似。2.定义文章,这时一般带有标题

<section>
  <h1></h1>
  <p></p>
</section>

12.<video>
定义视频,属性src引入资源,controls视频的控制控件

<video src="" controls="controls">你的浏览器不支持video标签</video>

以防用户浏览的视频不支持某些格式的视频,可以为用户多准备些格式的视频,目前支持的视频格式video/ogg,video/mp4,video/webm其他格式需要转换

<video controls="controls">
  <source src="" type="video/ogg">
  <source src="" type="video/mp4">
  <source src="" type="video/webm">
  你的浏览器不支持video标签
</video>


13.<audio>
该标签可定义声音,及其他的音频文件,不加controls不显示音频的控制界面

<audio src="" controls="controls">你的浏览器不支持audio标签</audio>

<video controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx.mp3" type="audio/mpeg">
  你的浏览器不支持audio标签
</video>

目前音频可用类型audio/ogg,audio/mpeg

14.<datalist>
提示可能的值,datalist及其选项不会被显示出来,它仅仅是合法输入值的列表使用input元素的list属性来邦定datalist,下面选项使用option定义

<input type="text" list="cars">
  <datalist id="cars">
      <option value="宝马"></option>
      <option value="奔驰"></option>
      <option value="奥迪"></option>
  </datalist>


15.<embed>
定义插入的内容,如插件,flash,标签中间不要加内容会显现出来

<embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash">
</embed>

16.<canvas>
canvas画布只是个容器,你可以通过控制坐标在canvas上绘制图形,一般配合js可以实现非常复杂的动画效果

17,<picture>
分辨率切换:当用小屏设备浏览网页时候,没有必要在加载pc端的大图了,节省带宽;同样,在pc上加载移动端小屏幕的图像的时候,会出现拉伸,模糊、有颗粒感;()
艺术方向切换:更改图像以及适应不同的图像显示的尺寸;比如,在pc端我们看到一个大图,横向的、中间有个人;然后在移动端浏览这个网页时候,照片非常小,人物更小;这种情况,在移动端可以设置一个新的图片,使人物大小看起来合适;

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

18,figure:此元素的内容可以是一张图片、视频、代码等;主要作用是用来进一步丰富、修饰主题内容的(比如文章中插入一张图片);其内容和主题相关,但如果删除,则不会影响主体内容。(将图片独立于P之外,为图片提供语义)

此元素一般与figcaption元素一起配合使用;

figcaption:用于描述figute元素中的数据(图片、视频、代码等)的说明/标题;所以说,figcaption一般都是放在figure元素中的第一个或者最后一个元素中;(与img中的alt属性不同的是,alt属性是在图片未能加载显示的时候出现展示,而figcaption则不管数据内容是否加载展示,都会显示)

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h2>Passionate <span>Julia</span></h2>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>           
</figure>

html5语义化标签

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://jgfish.com/seo/174.html

发表评论

中国赞表情 摊手表情 吃瓜表情 笑哭表情 偷笑表情 衰表情 汗表情 思考表情 费解表情 抓狂表情 晕表情 流泪表情 疑问表情 嘻嘻表情 吃惊表情 鼓掌表情