Attraction11

Appearance

Return to top
On this page

HTML5 相关知识笔记

前端需要注意的 SEO 技巧

参考文章

搜索引擎的工作原理

当我们在输入框中输入关键词，点击搜索或查询时，然后得到结果。深究其背后的故事，搜索引擎做了很多事情。

在搜索引擎网站，比如百度，在其后台有一个非常庞大的数据库，里面存储了海量的关键词，而每个关键词又对应着很多网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为 “搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，如果“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。

一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是 flash 和 js，那么它是看不懂的，会犯迷糊，即使关键字再贴切也没用。相应的，如果网站内容是它的语言，那么它便能看懂，它的语言即 SEO。

SEO 简介

全称：Search Engine Optimization，搜索引擎优化。

前端 SEO

通过网站的结构布局设计和网页代码优化， 使前端页面既能让浏览器用户看得懂，也能让蜘蛛看得懂。

网站结构布局优化：尽量简单、开门见山，提倡扁平化结构

  1. 控制首页链接数量
  2. 扁平化的目录层次
    • 尽量让“蜘蛛”只要跳转 3 次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”，通过 3 级就能找到香蕉了
  3. 导航优化
    • 导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
    • 每一个网页最好加上面包屑导航
  4. 网站的结构布局
    • 页面头部： logo 和 主导航、和用户的信息
    • 页面底部： 版权信息、友情链接
  5. 控制页面的大小、减少 http 请求，提高网站的加载速度

网页代码的优化

  1. <title>标题</title> 强调重点即可，尽量把关键词放在最前面， 关键词不要重复出现，尽量做到每个页面的 title 标题不要设置相同的内容。

  2. <meta keywords> 关键词 列举出几个页面的重要关键字即可，切记过分堆砌

  3. <meta description> 网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

  4. <body></body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。

  5. <a></a>标签 页内链接 要加 title 属性加以说明， 让方访客和蜘蛛指定而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

  6. 正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过 CSS 设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。

  7. <br>标签：只用于文本内容的换行

  8. <img>应使用 "alt" 属性加以说明

  9. <strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容， <em>标签强调效果仅次于<strong>标签。<b>、<i>标签: 只是用于显示效果时使用，在 SEO 中不会起任何效果。

  10. 巧妙利用 CSS 布局，将重要内容的 HTML 代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

  11. .重要内容不要用 JS 输出，因为“蜘蛛”不认识

  12. 尽量少使用 iframe 框架,因为“蜘蛛”一般不会读取其中的内容

  13. 谨慎使用 display：none ：对于不想显示的文字内容，应当设置 z-index 或设置到浏览器显示器之外。因为搜索引擎会过滤掉 display:none 其中的内容。

  14. js 代码如果是操作 DOM 操作，应尽量放在 body 结束标签之前，html 代码之后。

meta 标签： 提取关键信息

设置页面的表述信息

通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果

例如，在百度中搜索“拉勾”，就会发现网站的描述信息，这些描述信息就是通过 meta 标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。

设置页面的表述信息

设置搜索文档关键字

为了让搜索引擎更好地识别页面，除了描述信息之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容， 也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如 Google 引擎就会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索到的权重）。

当我们搜索关键字“垂直互联网招聘”的时候搜索结果会显示拉勾网的信息，虽然显示的搜索内容上并没有看到“垂直互联网招聘”字样，这就是因为拉勾网页面中设置了这个关键字。

搜索文档关键字

对应代码：

html
<meta
  content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招"
  name="keywords"
/>

<meta
  content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招"
  name="keywords"
/>

有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面

比如：

html
<!--那么在这些页面中可以这样设置-->
<link href="https://xx.com/a.html" rel="canonical" />

<!--那么在这些页面中可以这样设置-->
<link href="https://xx.com/a.html" rel="canonical" />

这样可以让搜索引擎避免花费时间抓取重复网页。不过需要注意的是，它还有个限制条件，那就是指向的网站不允许跨域

img 标签的 alt 和 title 属性区别

  1. title 是 global arrtibutes 之一， 用于为元素提供附加的信息。通常当鼠标滑倒元素上的时候显示。

  2. alt 是 img 的特有属性， 是图片的内容等价描述，用于图片无法加载时显示。可提高图片高可访问性，除了装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

Released under the MIT License.

Copyright © 2022-present Attraction11