分享SEO优化的8个技巧

什么是SEO呢？SEO即Search Engine Optimization的缩写，直译为“搜索引擎优化”。简单来说，SEO就是一种用于优化网站在搜索引擎中自然排名的行为统称。

下面咱们就来详细说一说seo的几种常见手段。

seo优化方案

1. title标签

例如：title掘金 / title。title标签就如同网站的名片，会直接在搜索结果中显示。一个优质的标题能够为网站吸引流量，进而提升网站排名。

2. META标签极为重要

META标签是网页head区的辅助性标签，其作用是通过配置参数来描述页面属性。在SEO中，元标签主要涉及描述和关键词，它们与title标签通常被称为三大标签。这三大标签能够很好地帮助搜索引擎了解你的网站，从而提高排名。当下几乎所有搜索引擎都利用网上机器人自动查找meta值来对网页进行分类。

meta标签的属性有两种：name和http-equiv。

name

meta标签的name属性语法格式为：meta name = "参数" content = "具体的参数值"。其中name属性主要有以下几种参数：

A. Keywords(关键词，非常重要)

说明：规定一个逗号分隔的关键词列表。

例如：meta name = "keywords" content = "掘金, 稀土, Vue.js, 前端面试题, Kotlin, ReactNative, Python"

B. description(网站内容描述，非常重要)

说明：规定页面的描述。搜索引擎会将此描述展示在搜索结果中。

例如：meta name = "description" content = "掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务，打造一个激发开发者创作灵感，激励开发者沉淀分享，陪伴开发者成长的综合类技术社区。"

C. author

说明：作者的名字

例如：meta name = "author" content = "HegeRefsnes"

D. generator

说明：代表说明网站采用什么软件制作。

例如：meta name = "generator" content = "HegeRefsnes"

E. theme - color

说明：代表页面显示设计的建议颜色。

例如：meta name = "theme - color" content = "#4285f4" /

http - equiv

http - equiv顾名思义，类似于http的文件头作用，它能向浏览器传递一些有用信息，以帮助正确且精确地显示网页内容。

meta标签的http - equiv属性语法格式是：meta http - equiv = "参数" content = "参数变量值";。其中http - equiv属性主要有以下几种参数：

A. refresh(期限)

说明：定义文档自动刷新的时间间隔。此属性值需谨慎使用，因为它会使页面不受用户控制。

B. set - cookie

说明：如果网页过期，那么存盘的cookie将被删除。

3. HTML语义化

语义化是指依据内容的结构化，选择合适的标签。

很多同学制作网页时通篇都是div，这样虽然简单省事，但对于浏览器解析网页内容并不友好。

而HTML语义化不仅方便开发者阅读，也有利于浏览器爬虫的解析，对seo优化很有益处。

所以我们在开发时要遵循语义化的开发规范，根据页面内容选择合适的标签，优化代码，使网页结构更加清晰。

下面介绍几种标签的使用：

h标签

h标签共有六个，分别是h1，h2…h6。h1 - h6文字由大到小，权重也逐渐降低。相较于其他标签，h标签在页面中的权重很高，所以不要随意滥用h标签。要利用h标签告知浏览器网页的核心内容！例如：

h1用于写主标题，通常与网页title标签一致，可在页面展示，一个页面最好只有一个h1标签。

h2写次级标题，h3 - h6以此类推，细分网页结构。

strong标签

当需要将某部分文字加粗时，可以选择b标签或者strong标签，二者的区别在于：

b只是为了加粗而加粗，strong是为了强调而加粗。同样i和em也有相同的区别。

建议使用strong、em，而非b、i等，单纯修改加粗等样式可以用css实现。

nav

能够帮助UA迅速获取导航内容，例如读屏器可以省去很多渲染直接跳到导航位置。

aside

可以表示与周围内容关系不太紧密的内容(广告)，通常表现为侧边栏内容(相关背景内容)、引述内容。

header

通常是一组介绍性描述(搜索框/logo/…)，网络爬虫了解诸如与之类的部分后可以很轻松地跳过它们，更好地定位网页内容。

article

独立的文档、页面、应用、站点，可以单独发布、重用；可以是一篇帖子、一篇文章、一则用户评论、一个可交互的widget。

section

section标签定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。当你希望这个元素的内容体现在文档的提纲(outline)中时，使用section是合适的。

4. 内链｜外链

内链：从自己网站的一个页面指向另一个页面。通过内链让网站内部形成网状结构，使蜘蛛的广度和深度达到最大化。

外链：在别的网站导入自己网站的链接。通过外链提升网站权重，增加网站流量。

一般来说，内链和外链都能提升网站排名，在搜索引擎优化领域，还有“内链为王、外链为皇”的说法。

外链的好处

如何判断一个网站是否适合做外链

使用nofollow避免权重分散

5. 确保页面性能

6. sitemap站点地图

Sitemap是一个文件，它能通知搜索引擎该网站有哪些可供抓取的网页。最常见且最简单的方式，就是创建一个XML文件，在其中列出网站中的网址以及关于每个网址的其他元数据，以便搜索引擎能够更智能地抓取网站。它就相当于一个给搜索引擎导航的文件。

?xml version = "1.0" encoding = "UTF - 8"??xml - stylesheet type = "text / xsl" href = "//www.tripfe.cn/sitemap.xsl"?

sitemap

/sitemap

sitemap

/sitemap

sitemap

/sitemap

sitemap

/sitemap

/sitemapindex

7. Canonical URL

什么是网址规范化呢？简单举个例子：

这几个网址虽然url不同，搜索引擎也确实把它们当作不同的网址，但其实这些网址返回的是同一个页面，这就是不规范网址。

网页规范化就是为了解决网站由于网站url链接不一样但网页内容相同而导致搜索引擎重复收录的问题。其解决方法就是利用rel = "canonical"标签。

想了解更多，可以自行百度rel = "canonical"标签。

解决方法：

在页面的head中，加入以下canonical标签，指定规范化网址。

head

/head

例如掘金的规范化网址：

6. 使用HTTPS

谷歌曾发布公告表示，使用安全加密协议，是搜索引擎排名的一项参考因素。

所以，在域名相同的情况下，HTTPS站点比HTTP站点，能获得更好的排名。

7. SSR服务端渲染

当下SPA应用盛行，虽然它有用户体验好、服务器压力小等优点，但同时也暴露出很多问题。例如首屏加载慢，不利于SEO等。

而ssr的出现，很好地解决了seo的问题。因为服务端渲染是指客户端向服务器发出请求，然后运行时动态生成html内容并返回给客户端。所以客户端能够获取到完整的页面内容。

目前流行的Vue/React前端框架，都已经推出了SSR的解决方案：

对于Vue/React来说，它们的SSR/SSG框架出现的原因主要就是SEO和首屏加载速度。

8. 预渲染prerender - spa - plugin

如果你只想改善部分页面的SEO，完全可以不采用SSR的解决方案，毕竟无论是next.js，还是nuxt.js，都有一定的学习成本。那么你可以使用prerender - spa - plugin插件来实现预渲染页面，在构建时就针对特定的路由生成静态的html文件。

参考及扩展