前端SEO（搜索引擎优化）和语义化

合理的title、description、keywords

title值强调重点，要靠前，不同页面title不要相同。
description对页面内容高度概括，长度合适，不同页面有所不同。
keywords列举重点关键词即可，不要过分堆砌关键词。

语义化

语义化的标签，旨在让标签有自己的含义，就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

优点

易于用户阅读，css样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

常见语义化标签

<title>：页面主体内容。
<hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>：无序列表。
<li>：有序列表。
<small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em>：将其中的文本表示为强调的内容，表现为斜体。
<mark>：使用黄色突出显示部分文本。
<figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto>：定义块引用，块引用拥有它们自己的空间。
<q>：短的引述（跨浏览器问题，尽量避免使用）。
<time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr>：简称或缩写。
<dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del>：移除的内容。
<ins>：添加的内容。
<code>：标记代码。
<meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress>：定义运行中的进度（进程）。

h5新增语义化标签

<header>  定义文档或者文档的部分区域的页眉
<nav>  描述一个含有多个超链接的区域
<main>  定义文档的主要内容，该内容在文档中应当是独一无二的
<article> 表示文档、页面、应用或网站中的独立结构
<aside> 表示一个和其余页面内容几乎无关的部分
<footer> 定义最近一个章节内容或者根节点元素的页脚
<section> 表示文档中的一个区域（或节），比如，内容中的一个专题组。

重要内容的html代码放最前

搜索引擎抓取html的顺序是从上到下，保证重要内容一定会被抓取

重要内容不要用js输出

爬虫不会执行js获取内容

提高网站速度

网站速度也是搜索引擎排序的一个重要指标