单页应用SEO解决方案
?
面试被问到了这个问题, 恰好最近把个人博客的SEO问题解决了, 想来解决方案还算比较合理, 做个分享.
1. 单页应用常用SEO方案
1.1 服务端渲染重构
例如Nuxt, Next.
好处:
- 可以说是一劳永逸
坏处:
- 灵活性不足: 这类框架要改的话就要全部按照他的做法来改, 即便不需要SEO的页面, 也需要全部迁移过去
- 时间成本巨大: 新框架熟悉, 不断采坑会浪费太多时间
- 打包部署方案也得变
- 增加了服务器压力: 又要渲染页面了
总之就是: 侵入性强, 无法短时间内完成, 不适合中途切换, 在一开始确定是最好的, 除非你铁了心要重构.
1.2 预渲染
例如prerender-spa-plugin
原理: 启动一个无头浏览器, 加载应用程序的路由, 将结果保存到静态HTML文件中
适合:
- 内容不会发生变化的页面: 例如营销页面以及广告页面
不适合:
- 内容会变化的页面: 像博客这种- -是不行的, 因为内容在编译后就确定了, 再修改内容, 也不会有变化
优点:
- 代码侵入少: 安装一个plugin, 指定路由即可
缺点:
- 覆盖范围少: 几乎只适合静态页面
- 路由(页面)较多时构建时间长
- 不科学上网phantomjs下不下来: 当时踩的坑, 转头就捣鼓梯子去了
总之就是: 能解决部分问题, 但还不够
1.3 给爬虫开小灶
这种方案灵活性比较强, 没有可以立马npm install
就用的库, 只有大体的解决方向
主要步骤见下
2. 实践给爬虫开小灶
2.1 在请求代理服务器中判断是否为爬虫
这一步至关重要的就是:
- 有调整
Nginx
orApache
等请求代理服务器配置的权限 - 没有的话, 就需要有一个配合你的运维
- 实在不行你用
Node
判断吧
再没有的话, 右上角点✖
以Nginx
为例, 通常使用history API
的项目部署的时候, 都会加上这样的配置
location / {try_files $uri $uri/ /index.html;
}
复制代码
正好, 判断是否为爬虫的代码也在此处~, 就只列出百度和谷歌的爬虫头了
location / {if ($http_user_agent ~* "Baiduspider|Googlebot") {rewrite ^(.*)$ /robot$1 break;proxy_pass http://127.0.0.1:3000;}try_files $uri $uri/ /index.html;
}
复制代码
可以看到对于爬虫请求, 改写了请求地址, 将其转发到后端接口
以博客为例, 爬虫请求文章地址为: /Calabash/articles/20190421145534, 实际处理这个请求的是宿主机127.0.0.1:3000/robot/Calabash/articles/20190421145534
代理地址就是后端开小灶的router
地址
2.2 后端部分
示例代码为Express
注册一个router
, 专门处理爬虫的请求
app.use('/robot', robotRouter)
复制代码
在controller
中自定义处理方案
// 对于文章的请求
router.get('/:userName/articles/:blogDate', robotController.renderArticle)// 对于文章列表的请求
router.get('/:userName', robotController.renderIndex)// default
router.use(robotController.renderIndex)
复制代码
renderArticle
中到底用什么方案来获得HTML, 就要根据需要来了~, 简单的就是查数据 -> 渲染模版
啦
async renderArticle(req, res) {const { userName: author, blogDate } = req.paramsconst blogInfo = await blogModel.findOne({ author, blogDate })if (!blogInfo) return res.status(404).send('Sorry, we cannot find that!')// 文章内容为markdown格式const { blogContent, blogTitle: title } = blogInfoconst content = marked(blogContent)return res.render('article', { title, content, author })
},
复制代码
渲染模版
htmlheadmeta(charset="utf-8")meta(name="description" content="前端技术博客")meta(name="author" content=author)title= titlebodyh1= titlearticle !{content}
复制代码
2.3 方案小结
优点
- 前端代码, 构建, 部署不需要改动: 仅需要修改一点配置文件 + 后端处理
- 覆盖范围广: 不管页面是否常变动, 都可用
- 变动的内容通常请求接口, 然后渲染模版
- 不变动内容, 直接拿模版
- 时间耗费少: 顺理成章哦
缺点
- 需要SEO页面较多的时候, 需要设定的模版也不少: 会增加一些工作量, 当然和全部重构比还好
不确定搜索引擎的防作弊机制是否会制裁: 爬虫内容与正常访问内容差异会比较大, 没找到具体规则, 看见有这个说法.
2.4 效果对比
before
after
3. 总结
一开始就上SSR
当然美滋滋, 中途切换开发成本就太高了, 个人认为参考覆盖范围和开发时间两个因素, 给爬虫开小灶是性价比最高的~
单页应用SEO解决方案相关推荐
- seo需要处理页面html,为什么单页面的seo不友好?如何解决这一问题?
前言 大家可能都知道单页面的SEO不友好,但是你有没有思考过为什么单页面的SEO不友好呢?在单页面盛行的今天,有哪些策略来规避掉这一缺点呢?很好奇有木有?那就跟我一起开启探索之旅吧~ 搜索引擎的工作原 ...
- prerender html5,HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
- 为什么单页面的seo不友好?如何解决这一问题?
大家可能都知道单页面的SEO不友好,但是你有没有思考过为什么单页面的SEO不友好呢?在单页面盛行的今天,有哪些策略来规避掉这一缺点呢? 搜索引擎的工作原理 在搜索引擎网站的后台会有一个非常庞大的数据库 ...
- 南通SEO:单页的SEO元素
来讲一讲单页的几个影响SEO元素 域名和 URL 页面的 title meta 标签 页面的可读文档内容 页面的 HTML 代码 内容的新鲜度,讨论的话题等 对于上面这个清单,当你使用了诸如CMS系统 ...
- 手把手教你做VUE单页应用SEO优化
前言 最近写了个门户网站使用vue做的,不可避免的遇到了SEO方面相关的问题,下面将我采用的解决方案贴出来供大家参考 主流的方案 1.SSR服务器渲染: 2.静态化: 3.Nuxt: 4.预渲染pre ...
- SpringBoot 2 + Spring Security 5 + JWT 的单页应用 Restful 解决方案
此前我已经写过一篇类似的教程,但那时候使用了投机的方法,没有尊重 Spring Security 的官方设计,自己并不感到满意.这段时间比较空,故重新研究了一遍. 特性 使用 JWT 进行鉴权,支持 ...
- 为什么说单页面程序SEO不友好?
搜索引擎的工作原理 在搜索引擎网站的后台会有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是被称之为"搜索引擎蜘蛛"或"网络爬虫&q ...
- 什么是单页应用?它的优缺点?其缺点的解决方案是什么?
文章目录 一.什么是单页应用? 二.单页应用的优缺点 1.优点 2.缺点 三.单页应用缺点的解决方案 一.什么是单页应用? 从字面上来理解: 单页面应用(SPA--------single page ...
- phpcmsV9怎样在单页中调用后台栏目SEO设置的Meta_title
#phpcmsV9中的CSS_PATH是如何定义的?相关配置文件在哪? ######注意:有两种方案. 对照文件路径,对应修改一下,就可以了 -------->(注意红色矩形内容). ##第一种 ...
最新文章
- yii2 后台权限验证获取用户身份_Yii2搭建后台并实现rbac权限控制完整实例教程...
- ::operator new、sgi stl alloc、dlmalloc测试结果
- java 登录 https_java – 如何在Web应用程序中实现HTTPS登录页面?
- windows常用技巧
- svn服务器创建分支原理,svn 创建分支、合并分支、以及报错处理
- mysql full group by_MySql报错only_full_group_by的解决办法
- ubuntu每次启动都出现检测到错误
- 【Java】利用Swing实现登录页面
- 身价超13000亿!他又重回世界首富了
- 稳定土厂拌设备控制系统-基本介绍(图)
- 自然语言处理——分词算法
- pycharm访问服务器终端
- 文件与base64的互相转换操作
- 使用iText处理pdf文件的入门级教程
- 代码整洁之道 php,关于代码整洁之道的详细介绍
- java 手机网站 cookie操作_Java中的cookie管理方案——完整易用的客户端cookie操作库...
- MATLAB app designer 如何设置背景图片
- 正在进行 | 用友企业数智化财务峰会落地广州 高能不断
- 上海交通大学计算机科学杨岚青博士,上海交通大学2014年硕士生拟录取名单公示(4)...
- 深度学习技巧应用4-模型融合:投票法、加权平均法、集成模型法