SEO
SEO(Search Engine Optimization),即搜索引擎优化。SEO 是随着搜索引擎的出现而来的,两者是相互促进,互利共生的关系。SEO 的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。而优化的目的就是为了提升网站在搜索引擎中的权重,增加对搜索引擎的友好度,使得用户在访问网站时能排在前面。
SEO 原理
在搜索引擎网站的后台会有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是被称之为“搜索引擎蜘蛛”或“网络爬虫”程序从茫茫的互联网上一点一点下载收集而来的。随着各种各样网站的出现,这些勤劳的“蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之,如果“蜘蛛”认为是垃圾信息或重复信息,就舍弃不要,继续爬行,寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时,就能检索出与关键字相关的网址显示给访客。
一个关键词对应多个网址,因此就出现了排序的问题,与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容,提炼关键词的这个过程中,就存在一个问题:“蜘蛛”能否看懂。如果网站内容是 flash 和 js 等,那么它是看不懂的,会犯迷糊,即使关键字再贴切也没用。相应的,如果网站内容可以被搜索引擎能识别,那么搜索引擎就会提高该网站的权重,增加对该网站的友好度。这样一个过程我们称之为 SEO。
如何做 SEO
如何做 SEO 分为 传统的网站 SEO
和 SPA 网站 SEO 。两者不是完全独立的,SPA 网站 SEO 是在使用 传统的网站 SEO
之外,额外可以使用的 SEO 方案。
传统网站 SEO 优化
网站设计优化
- TDK 设置
Title: 描述网站的标题。注意网站主页 一般使用 xx-yyy 的形式,网站其他页面 一般用 aaa_bbb-xx 的形式。
- 腾讯云 - 产业智变 云启未来
- 阿里云-上云就上阿里云
- 云服务器 CVM云主机云计算服务器_弹性云服务器-腾讯云
- 云服务器 ECS云主机服务器托管_弹性计算-阿里云
Description: 简单描述一下网站是做什么的,有何用途。
- 腾讯云为数百万的企业和开发者提供安全稳定的云计算服务,涵盖云服务器、云数据库、云存储、视频与 CDN、域名注册等全方位云服务和各行业解决方案。
- 阿里云服务器(Elastic Compute Service, 简称 ECS)是一种处理能力可弹性伸缩的云计算服务器,云服务器可以帮助构建更加安全稳定的应用,让您更专注于核心业务创新。云服务器可以助力降低开发运维投入和整体的 IT 成本,并支持包年包月、按量付费等模式,方便更好的财务管理.
Keywords: 用几个关键词描述一下网站,一般以“一个核心词+三五个长尾词”组合成标题。
- 腾讯云,云服务器,云主机,CDN,对象存储,域名注册备案,云存储,云数据库,互联网+解决方案,QQ 云
- 云服务器 ECS,云主机,服务器托管,虚拟主机,vm,阿里云 ecs
- 网站布局的优化
- 通过布局,把重要的内容放在前面。
- 扁平化布局。
- 代码块优化
- 代码优化,就是板块、栏目代码,最好使用对应的简拼或者全拼。
- 网站 url 优化
- 长的不如短的
- 动态不如静态
- 层级不宜过深,不超过 3 级
- robots.txt
# first group
User-agent: Baiduspider
User-agent: Googlebot
Disallow: /article/
# second group
User-agent: *
Disallow: /
Sitemap: https://www.xxx.com/sitemap.xml
以上配置表明:
- 允许百度和谷歌的搜索引擎访问站内除 article 目录下的所有文件/页面(eg: article.html 可以,article/index.html 不可以);
- 不允许其他搜索引擎访问网站;
- 指定网站地图所在。
- sitemap
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.xxx.com/</loc>
<lastmod>2019-12-17</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>http://www.xxx.com/detail/xxx</loc>
<lastmod>2019-12-17</lastmod>
</url>
</urlset>
- 元信息标签及其他的标签们
-
meta:robots
<meta name="robots" content="index,follow,archive"> -
canoncial 和 alternate 属性值
<link rel="canoncial" href="https://www.xxx.com" /><link rel="alternate" href="https://m.xxx.com" />
网站内容优化
- 语义化标签
- 页面内容关键词强化
- 图片加上 alt
- 用 h1 标签写主题,且全篇有且只有一个 h1
- table 加上 caption
- 面包屑导航
站外优化
- 在搜素引擎排名较高的公众平台(百家号 ,知道,贴吧、搜狐、知乎等)发布正面网站信息,以建设良好口碑 ;负面信息排名较高的需删除或者屏蔽处理。
- 百度,互动,搜狗等百科的创建更新与维护,(互动百科在今日头条有着较高的排名,现在今日头条也在发展搜素引擎),百科对树立品牌形象较为重要。
- 公关舆情传播,宣传新闻源发布。
- 站外推广与外链建设。
SPA 网站 SEO
- SSR 服务器渲染
- SSG 静态页面生成
- 预渲染
- 使用 Phantomjs
针对爬虫做处理
下面一一说明
SSR 服务器渲染
服务端渲染, 在服务端 html 页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构
- 优势: 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
- 缺点: 服务器 nodejs 环境的要求, 且对原代码的改造成本高!
SSG 静态页面生成
静态页面生成(SSG):Static Stie Generation
Nuxt.js/Next.js 可以进行 generate 静态化打包, 缺点: 动态路由会被忽略。 /users/:id
-
优势:
- 编译打包时, 就会帮你处理, 纯静态文件,访问速度超快;
- 对比 SSR,不涉及到服务器负载方面问题;
- 静态网页不宜遭到黑客攻击,安全性更高。
-
不足:
- 如果动态路由参数多的话不适用。
预渲染
prerender-spa-plugin (插件)
如果你只是对少数页面需要做 SEO 处理(例如 / 首页, /about 关于等页面)
预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)
- 优势: 设置预渲染简单, 对代码的改动小
- 缺点: 只适合于做少数页面进行 SEO 的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)
使用 Phantomjs 针对爬虫 做处理
Phantomjs 是一个基于 webkit 内核的无头浏览器,没有 UI 界面,就是一个浏览器, 其内的点击、翻页等人为相关操作需要程序设计实现。
这种解决方案其实是一种旁路机制,原理就是通过 Nginx 配置, 判断访问的来源 UA 是否是爬虫访问,
如果是则将搜索引擎的爬虫请求转发到一个 node server,再通过 PhantomJS 来解析完整的 HTML,返回给爬虫。
-
优势:
- 完全不用改动项目代码,按原本的 SPA 开发即可,对比开发 SSR 成本小太多了;
- 对已用 SPA 开发完成的项目,这是不二之选。
-
不足:
- 部署需要 node 服务器支持;
- 爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;(不影响用户的访问)
- 如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,解决方法是判断访问的 IP,是否是百度官方爬虫的 IP。
SPA SEO 小结
- 如果构建大型网站,如商城类 => SSR 服务器渲染
- 如果只是正常公司官网, 博客网站等 => 预渲染/静态化/Phantomjs 都比较方便
- 如果是已用 SPA 开发完成的项目进行 SEO 优化,而且部署环境支持 node 服务器,使用 Phantomjs。
进阶
爬虫终究要去请求资源,所以从 Url 到拉取页面内容的整个过程都可以优化的,包括如下优化项:
- dns prefetch (dns 预解析)
- 动态 dns
- CDN
- 浏览器缓存
- 代码压缩、图片雪碧图、图片使用图标
- etc...