浅谈SEO-搜索引擎优化

发表于 | 分类于

SEO

搜索引擎在记录网站和自然排名上有一套规则，对这套规则作出相应的优化便称之为 SEO 即 Search Engine Optimization（搜索引擎优化）

SEO：搜索引擎优化，一种利用搜索引擎的搜索规则，让网站在搜索引擎中的排名更好

如何优化

  1. 扁平化的页面设计，标签不超过3层，太深不利于SEO。网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。
  2. 标签语义化

    h1-h6 是用于标题类的，

  3. title、description和keywords
  • 标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容
  • 标签：关键词
  • 标签：网页描述，需要高度概括网页内容
  1. a标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上
    rel=”nofollow” 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
  2. img标签添加alt和title属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

    当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。

  3. 尽量不要用JS输出重要内容

HTML

网站最终都会被输出为 html 页面，这也是搜索引擎能够触及的最小单元之一。当然在传统后端 MVC 直接输出 html 的方法，优化起来相对容易。不过现在前端开发多为单页应用，输出的 html 需要经过 JavaScript 渲染后才能真正的被显示。在单页面应用解决 SEO 上有两种比较常见的方法：

  1. 利用后端渲染，直接输出 html。
  2. 利用 head 中的 meta 相关属性。

文章范围

SEO 中 meta 相关内容，在 meta 标签主要有 title、description、keywords 三个地方对 SEO 有帮助

meta

img的alt

在 SEO（搜索引擎优化）方面 alt 属性 也有一定的作用哦，虽然现在有了 AI 可以识别出图片里面的内容是什么。可是搜索引擎并没有那么聪明哦，它在理解一张图片是什么的时候会去读取 alt 属性，并且配合页面的 title、description 来组织和保存这张图片的信息。这也是为什么在百度、谷歌 搜索关键词时能得到那么多相关图片的原因。

a标签

一般的链接结构是

1
<a href="https://juejin.im/timeline/frontend" >前端</a>

其中前端就是文本内容也叫做锚文本，通常情况下搜索引擎会通过锚文本来理解https://juejin.im/timeline/frontend这个页面的内容是什么。为了告诉 爬虫 哪些可以爬取哪些不可以爬取，可以利用 rel属性来指明

rel 值 解释3
external 表示这是一个站外链接
nofollow 搜索引擎 不应该 抓取 相关链接 并记录权重。
noopener、noreferrer 使得 opener 和 referrer 属性无效，防止 target=”_ blank” 带来钓鱼安全问题 
1
2
3
4
5
<!--PC页面用 alternate 指向移动页面-->
<link rel="alternate" href="http://m.abc.com/">

<!--移动页面用 canonical 指向PC页面-->
<link rel="canonical" href="http://www.abc.com/">