语义化与SEO
语义化
理解
Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。 简单来说就是利于 SEO，便于阅读维护理解。
优点
- 有利于开发者的维护和理解；
- 有利于机器对文档内容进行正确的解读；
- 有利于搜索引擎爬虫正确的读取内容，优化SEO；
- 有利于即使样式表丢失，网页仍能维持基本的内容供给用户阅读；
html语义化
HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。 代码示例：
<html>
<body>
<article>
<header>
<h1>h1 - WEB 语义化</h1>
</header>
<nav>
<ul>
<li>nav1 - HTML语义化</li>
<li>nav2 - CSS语义化</li>
</ul>
</nav>
<section>
section1 - HTML语义化
</section>
<section>
section2 - CSS语义化
</section>
<time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
<footer> footer - by 小维</footer>
</article>
</body>
</html>| 标签 | 描述 |
|---|---|
<article> | 定义文章。 |
<aside> | 定义页面内容以外的内容。 |
<details> | 定义用户能够查看或隐藏的额外细节。 |
<figcaption> | 定义<figure>元素的标题。 |
<figure> | 规定自包含内容，比如图示、图表、照片、代码清单等。 |
<footer> | 定义文档或节的页脚。 |
<header> | 规定文档或节的页眉。 |
<main> | 规定文档的主内容。 |
<mark> | 定义重要的或强调的文本。 |
<nav> | 定义导航链接。 |
<section> | 定义文档中的节。 |
<summary> | 定义 <details> 元素的可见标题。 |
<time> | 定义日期/时间。 |
CSS语义化
CSS语义就是class和ID命名的语义。class属性作为HTML与CSS衔接的纽带，其本意是用来描述元素内容的。指用易于理解的名称对html标签附加的class或id命名。如果说HTML语义化标签是给机器看的，那么CSS命名的语义化就是给人看的。良好的CSS命名方式减少沟通调试成本，易于理解。
SEO
SEO（Search Engine Optimization），搜索引擎优化。百度百科对其的解释是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
搜索引擎是怎么工作的呢？主要分为以下三个步骤：
- 爬行抓取，网络爬虫通过特定规则跟踪网页的链接，从一个链接爬到另一个链接，把爬行的数据存入本地数据库
- 使用索引器对数据库中重要信息进行处理，如标题、关键字、摘要，或者进行全文索引，在索引数据库中，网页文字内容，关键词出现的位置、字体、颜色、加粗、斜体等相关信息都有相应记录。
- 索引器将用户提交的搜索词与数据中的信息进行匹配，从索引数据库中找出所有包含搜索词的网页，并且根据排名算法计算出哪些网页应该排在前面，然后按照一定格式返回给用户
从图中，可以看到，爬虫的爬取首先选取一部分精心挑选的种子URL，将这些URL放入待抓取URL队列，从待抓取URL队列中取出待抓取在URL，解析DNS，并且得到主机的ip，并将URL对应的网页下载下来，存储进已下载网页库中。此外，将这些URL放进已抓取URL队列。分析已抓取URL队列中的URL，分析其中的其他URL，并且将URL放入待抓取URL队列，从而进入下一个循环。这就需要让我们考虑，怎样才能让爬虫更多的爬取到我们的网站。
权重
| 网页内容 | 权重分数 |
|---|---|
| 内部链接文字 | 10 |
| 标题title | 10 |
| 域名 | 7 |
| H1，H2字号标题 | 5 |
| 路径或文件名 | 4 |
title属性：（不是<title>，是A标签中title属性） | 1 |
| 加粗或斜体 | 1 |
| alt标记 | 0.5 |
优化
- 突出重要内容---合理的设计title、description和keywords
- 语义化书写HTML代码，符合W3C标准
- 图片img标签添加alt和title属性
- 链接
<a>页内标签添加title属性 - 使用h1标签自带权重