前端SEO优化

什么是SEO？

SEO就是Search Engine Optimization——搜索引擎优化。简单来说就是通过改良网站的内容、布局、属性等等配置来提升网站在搜索引擎“心中的地位”

如何进行SEO？

想要进行优化，首先得知道搜索引擎工作的过程：

• 搜索：搜索引擎根据用户搜索关键字从数据库匹配相关数据，并在算法计算权重排序后展现给用户
• 收录：爬虫抓取网页，分析内容与链接，进入下一个链接；抓取网页，分析内容与链接，进入下一个链接…

根据过程，我们可以提炼出：

1. 使用关键字进行匹配，结果排序：我们需要提高网站与目标关键字的匹配度，来提升排名（设置TDK，h1标签等）
2. 爬虫在网站链接之间跳转：
   1. 别让它太累：网站嵌套层级不宜过多（你设置一个/a/b/c/d/e/f/g/001.html这么难进入，它不会给你高权重的
   2. 我们需要爬虫跳转进预期的网站（而不是404）：内链设置、网站地图
   3. 根据规范，这些链接会给目标网站带去权重：我们需要优质网站来链接我们（友链）
   4. 如果我们有多个镜像站：我们不希望他们平分权重（canonical）
3. 爬虫会分析网站内容：
   1. 你得让它能爬：提升网站的可访问性（速度）
   2. 分析是从前往后的：将网站重要内容放在前面
   3. 我们不能做无用功：避免js动态注入重要内容、不使用iframe嵌入重要内容

具体

TDK

TDK即title、description、keywords；权重依次降低。可通过下面的标签进行设置

• <title>aabb</title>：需要契合内容主题
• <meta name="description" content="xxx" />：高度概括网站内容
• <meta name="keywords" content=""/>：提取网站关键词，一般5-8个（因为 关键词太多会被有些搜索引擎视为恶意嫖权重 或者 太多关键词会分散权重等）（还有就是现在keywords的权重被降低了好多，远没有前两个重要）

h1标签等

• 对于博客来说，还是要尽量避免在文章中使用一级标题；因为已经有了一个文章标题作为一级标题，再写就是多个一级标题了（爬虫说：我分不清！）
• 对于布局来说，尽量使用语义化标签进行标注：如article、aside等
• 对于图片，重要图片请加上alt属性来增强权重；装饰性图片就不必了
• 重要内容就别用iframe引入了，爬虫难搞

LOGO优化

有时候需要在超链接中展示LOGO；但是搜索引擎识别的是文字而非图片

• 使用a标签的background设置LOGO，然后使文字大小为0从而隐藏文字，这样搜索引擎爬虫仍旧会爬取此文字，但用户侧显示的为LOGO

镜像站点

比如我有两个站点：主站main.site，镜像站mirror.site。可以设置<link rel="canonical" href="https://main.site/page_url"，来将镜像站的权重集中到主站。

网站地图与Robot.txt

站点地图（Sitemap）可以帮助搜索引擎快速的抓取你的网站（特别是在你的大部分网页都是孤立的，互相之间基本没有内联联系的情况下） robot.txt文件会告诉爬虫哪些url允许访问，哪些不允许，你也可以在此文件中定义你的站点地图路径（需要注意的是，在robot.txt中禁止爬虫访问的url，就不要再出现在站点地图中了）

外链与内链

• 入链：外站对你的链接是可以提升你网站的权重的，所以快去互加友链提升站点权重吧
• 出链：网站的所有出链是会评分此网站的出链权重的，所以对于某些不重要的链接，可以适当地在a标签上添加rel=nofollow属性让爬虫忽略对此链接的跟踪，从而留点权重给本页的其他链接
• 不要用button做网页跳转，爬虫它不懂

其他

• Http与Https、网站速度
• 网站目录结构尽量不要超过3级
• 不要display:none;关键信息