数字营销的推动者

SEO源码优化之html5语义化标签
作者:一鸣网络优化 添加时间:2020-10-22 浏览次数:5

  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.baidu.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>


本文由一鸣网络网站SEO优化团队网络整编而成,不代表本站观点,如需了解更多SEO优化的文章、新闻、工具和SEO优化技巧、案例、各种网站优化知识百科请进入:http://www.tzyseo.com/contact.html并且可以对一鸣网络优化师进行一对一问答

本文地址:https://www.tzyseo.com/news_40/306.html