什么是SEO?
SEO是Search Engine Optimization的缩写,直译过来就是“搜索引擎优化”的意识。故名意思,SEO是一种优化(提高)网站在搜索引擎内的自然排名的行为的统称。
当里个当,当里个当,闲言碎语不要讲,下面我就表一表seo的几种常见手段,啊真香~
SEO优化方案
1. title标签
例如:<title>掘金</title>
title标签相当于网站的名片,他会直接显示在搜索结果中。一个好的标题势必可以为网站带来流量,从而提升网站排名。
2. META标签至关重要
描述关键词title属性namehttp- equiv
1.1 name
A. Keywords(关键词,很重要)
说明:规定一个逗号分隔的关键词列表(告诉搜索引擎页面是与什么相关的)。
例如:<meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python">
B. description(网站内容描述,很重要)
说明:规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。
例如:<meta name="description" content="掘金是面向全球中文开发者的技术内容分享与交流平台。我们通过技术文章、沸点、课程、直播等产品和服务,打造一个激发开发者创作灵感,激励开发者沉淀分享,陪伴开发者成长的综合类技术社区。">
C. author
说明:作者的名字
例如:<meta name="author" content="Hege Refsnes">
D. generator
说明:代表说明网站的采用的什么软件制作。
例如:<meta name="generator" content="Hege Refsnes">
E. theme-color
说明:代表页面显示设计的建议颜色。
例如:<meta name="theme-color" content="#4285f4" />
1.2 http- equiv
;
A. refresh(期限)
说明:定义文档自动刷新的时间间隔(下面content中的2是指停留2秒钟后自动刷新到URL网址)。这个属性值慎重使用,因为它会使得页面不受用户控制。
例如:<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
B. set-cookie
说明:如果网页过期,那么存盘的cookie将被删除。
例如:<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">
3. HTML语义化
语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
很多同学写网页都是通篇div,这么搞虽然简单无脑,但是对于浏览器解析网页内容不太友好。
而HTML语义化不仅便于开发者阅读,还有利于浏览器爬虫的解析,对seo优化很有帮助。
所以我们在开发时要遵循语义化的开发规范,根据页面内容,选择合适的标签,优化代码,使得网页结构更加清晰。
下面介绍几种标签的使用:
h标签
h标签一种有六个,分别是h1,h2…h6。h1-h6文字由大到小,权重也逐渐降低。相比其他标签而言,h标签在页面中的权重非常高,所以不要滥用h标签。要利用h标签告诉浏览器网页的核心内容!例如:
h1写主标题,通常与网页title标签一致,可以在页面展示,一个页面最好只有一个h1标签。
h2写次级标题,h3-h6以此类推,细分网页结构。
nav
可以帮助 UA 迅速获得导航内容,例如读屏器可以省去很多渲染直接跳到导航位置。
aside
可以表示与周围内容关系不太密切的内容 (广告),通常表现为侧边栏内容 (相关背景内容)、引述内容
header
通常是一组介绍性描述 (搜索框 / logo / …),网络爬虫知道诸如与之类的部分后可以非常简单的跳过它们,更好的定位网页内容
article
独立的文档、页面、应用、站点,可以单独发布、重用;可以是一篇帖子、一篇文章、一则用户评论、一个可交互的 widget
section
section标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
当你希望这个元素的内容体现在文档的提纲 (outline) 中时,用 section是合适的。
4. 内链|外链
内链:从自己网站的一个页面指向另外一个页面。通过内链让网站内部形成网状结构,让蜘蛛的广度和深度达到最大化。
外链:在别的网站导入自己网站的链接。通过外链提升网站权重,提高网站流量。
一般来说,内链和外链都能提升网站排名,在搜索引擎优化领域,还有内链为王、外链为皇的说法。
查看我的另一篇文章以掘金示例,利用内链/外链进行网站SEO优化,了解以下信息:
外链的好处
如何判断一个网站是否适合做外链
使用nofollow避免权重分散
5. 确保页面性能
6. sitemap站点地图
Sitemap是一个文件,它可以通知搜索引擎该网站有哪些可供抓取的网页。最常见也是最简单的,就是创建一个XML文件(sitemap.xml),在其中列出网站中的网址以及关于每个网址的其他元数据(上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等),以便搜索引擎可以更加智能地抓取网站。它就相当于一个给搜索引擎导航的文件。
示例:相关知识传送门
sitemap生成工具:# 10款超赞的Sitemap生成工具推荐
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//www.tripfe.cn/sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://www.tripfe.cn/sitemap-pages.xml</loc>
<lastmod>T00:23:51.990Z</lastmod>
</sitemap>
<sitemap>
<loc>https://www.tripfe.cn/sitemap-posts.xml</loc>
<lastmod>T05:12:44.989Z</lastmod>
</sitemap>
<sitemap>
<loc>https://www.tripfe.cn/sitemap-authors.xml</loc>
<lastmod>T05:56:43.049Z</lastmod>
</sitemap>
<sitemap>
<loc>https://www.tripfe.cn/sitemap-tags.xml</loc>
<lastmod>T04:55:17.701Z</lastmod>
</sitemap>
</sitemapindex>
7. Canonical URL(网址规范化)
rel="canonical"标签rel="canonical"标签
head
<head>
<link rel="canonical" href="https://wangxiaokai.vip" />
</head>
例如掘金的规范化网址:
6. 使用HTTPS
谷歌曾发公告表示,使用安全加密协议(HTTPS),是搜索引擎排名的一项参考因素。
所以,在域名相同情况下,HTTPS站点比HTTP站点,能获得更好的排名。
7. SSR服务端渲染( Server-Side Rendering)
当下SPA应用盛行,虽然它有用户体验好,服务器压力小等优点,但是同时也暴露出很多问题。例如首屏加载慢,不利于SEO等(因为这些spa应用内容是有js动态更新的,蜘蛛无法爬取网页内容)。
而ssr的出现,很好的解决了seo的问题。因为服务端渲染是指指客户端向服务器发出请求,然后运行时动态生成 html 内容并返回给客户端。所以客户端可以获取到完整的页面内容。
目前流行的 Vue/React 前端框架,都已经推出了SSR的解决方案:
Vue的nuxt.js
React的next.js
对于 Vue/React 来说,对于它们的 SSR/SSG 框架出现的原因就是主要就是 SEO 和首屏加载速度。
8. 预渲染prerender-spa-plugin
prerender-spa-plugin