应用的性能好坏直接影响到用户的体验,SEO
做的再好,脱离了性能优化一切也都是空谈,所以 SEO
和性能优化是相辅相成的。响应速度也是搜索引擎排序的一个重要指标
页面头部标签
-
标题(30字以内)
<title>淘宝网 - 淘!我喜欢</title>
强调重点即可,重要的关键词出现不要超过
2
次,而且要靠前,不同页面的title
要有所不同 -
描述(150字以内)
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!">
对页面内容的高度概括,不可过分堆砌关键词,不同页面的
description
要有所不同 -
关键字
<meta name="keywords" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
告诉搜索引擎本页的重点、关键词,用英文逗号分隔
-
总结
代码顺序按照 标题 -> 描述 -> 关键字 依次
语义化的好处
-
符合W3C规范
-
代码结构清晰,方便阅读,有利于团队合作开发
-
语义化代码让搜索引擎容易理解网页,有利于搜索引擎优化(SEO)
语义化内容标签
-
超链接
内部链接,要加
title
属性加以说明外部链接,要加
rel="nofollow"
属性,告诉蜘蛛无需追踪 -
图片
img
要加上alt
属性加以说明 -
表格
标题使用
caption
标签 -
标题
h1
一个页面只可有一个,多用于包含logo
h2
模块标题h3
段落的小节标题h4, h5, h6
基本上不使用 -
强调内容的重要性
<em>强调文本</em> <strong>强调文本</strong>
strong
和em
都表示强调,strong 显示为粗体,em 显示为斜体,且 strong 的强调程度要比 em 更高 -
视觉上突出显示文本
<mark></mark>
如:搜索结果中高亮的关键词
-
时间
<p>文章发表于<time datetime="2019-08-28 20:00">2019-08-28</time></p>
-
定义联系信息
<address></address>
也可定义
article
元素的作者信息,但不适用于嵌套的article
元素 -
代表一段独立的内容,经常与说明配合使用
<figure> <!-- 图片、图表、表格等 --> <figcaption>标题/说明</figcaption> </figure>
figcaption
元素必须是figure
元素的第一个或者最后一个子元素 -
换行
br
只用于文本内容的换行 -
版权符号
输入法输入
'banquan'
,按序号选择版权符号
语义化结构标签
-
section使用场景
<header></header> <section> <h2>标题</h2> <p>段落内容</p> </section> <section> <h2>标题</h2> <img src="./img/product.jpg" alt="图片说明"> </section> <section> <h2>标题</h2> <p>段落内容</p> </section> <footer></footer>
对页面中的内容进行分块,一个
section
元素通常由标题以及内容组成不推荐为那些没有标题的内容使用 section 标签
-
article使用场景
<article> <header> <h2>标题</h2> <p>发表日期:<time datetime="2019-08-28 20:00">2019-08-28</time></p> </header> <p>文章内容段</p> <p>文章内容段</p> </article>
它比
section
具有更明确的语义,代表一个独立的、完整的相关内容块,可以包含一个或多个section
-
aside使用场景
<aside> <h2></h2> <ul> <li></li> <li></li> </ul> </aside>
独立于内容的一部分,且可以被单独的拆分出来而不会使整体受影响,常用于定义页面侧边栏
-
main使用场景
<main></main>
用来呈现文档或应用的主体部分,一个页面只能有一个
main
标签 -
header使用场景
1、页面中的header
<header> <h1 role="logo"> <a href="/">文字Logo</a> </h1> <nav> <a href="/">首页</a> <a href="/product">产品介绍</a> <a href="/about">关于我们</a> </nav> </header>
2、分块中的header
<section> <header> <h2>标题</h2> <p>信息介绍</p> </header> <p>分块内容段</p> </section>
3、文章中的header
<article> <header> <h2>标题</h2> <p>发表日期:<time datetime="2019-08-28 18:00">2019-08-28</time></p> </header> <p>文章内容段</p> </article>
article、section、aside、nav 都可以拥有自己的 header 和 footer
-
role属性的使用场景
用来增强语义性,当现有的 HTML 标签不能充分表达语义的时候,可以借助
role
属性来说明
注意事项
-
重要内容尽量靠前放
搜索引擎抓取
HTML
的顺序是从上到下的,而有的搜索引擎对抓取的内容长度有一定的限制 -
重要内容不要用JS输出
搜索引擎不会抓取
JS
的生成内容 -
其他
页面结构尽量扁平化,目录结构不宜过深,最好不超过
三级
,每级都有面包屑导航
,成树状结构分布。否则不利于搜索引擎抓取做
404
页面,不仅提高蜘蛛体验,也提高用户体验一起学习,加群交流看 沸点