单页面应用SEO方案

最近希望在现有SPA网站的基础上,对网站进行SEO优化,所以列出了几种方案。

一、Rendertron

Rendertron是一款headless Chrome渲染解决方案,旨在即时渲染和序列化网页,它作为独立的HTTP服务器运行,使用Headless Chrome渲染请求的页面, 在SPA网站完成加载时自动检测并将响应序列化回原始请求。

具体流程:

  1. 增加代理服务器,用于检测是否需要预渲染;
  2. 代理服务器返回Rendertron服务器渲染的内容。

Demo:

环境及工具要求:Node、npm

  1. 下载rendertron

打开cmd命令提示符,输入

npm install rendertron

下载时间较长,需要耐心等待。

  1. 运行rendertron
rendertron

rendertron服务默认监听的端口是3000

浏览器输入
http://localhost:3000/render/【网站地址】

http://localhost:3000/render/https://www.hongwanyg.com

即可浏览rendertron渲染SPA网站后返回的内容。
更加详细的Demo点这里:https://www.jianshu.com/p/38e6d3bf596d

影响范围:

1、前端

前端路由模式需要启用路由的 history 模式

需要更改门户内大部分的打开新页面的跳转地址。

2、服务端

服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html

优缺点:

优点:影响范围最小,时间成本最低。

缺点:

  1. rendertron渲染速度较慢(20s+,可以通过配置缓存,降低渲染时间,但首次渲染还是慢)。
  2. 仅仅供给SEO使用,若想要正常使用该方式渲染出的网站,还需做进一步处理。

二、SSR for VUE

具体操作:

使用Nuxt.js或者vue-server-renderer等服务端渲染应用框架。

影响范围:

前端代码需要改动的地方非常多,大部分组件都要改。

优缺点:

优点:效果最好,基本所有页面都能满足SEO。

缺点:前端改动的成本大,时间成本高。


三、 koa2 + (ejs | pug) 或者Java + thymeleaf 产出需要SEO的页面

具体操作:

  1. 根据需要SEO的页面,编写对应的html文件,渲染从服务端获取的数据。
  2. 使用Node作为代理服务器和渲染服务器,检测到需要预渲染,则渲染对应的页面返回(过程与方案一类似)。

影响范围

  1. 需要新增特定的页面,供给百度蜘蛛之类的程序收集页面数据。
  2. 若使用koa2 + (ejs | pug) 则需要新增node程序。

优缺点

优点:不影响前端原有代码,是一种扩展式的方法。

缺点:

  1. 页面仅供SEO使用;

  2. 需要时间成本开发新增页面,或需添加代理服务器;

  3. 后期需要新增SEO的页面也需要跟着新增对应的页面文件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,588评论 1 45
  • 前后端分离算是最近Web开发的大趋势了,目前已经有大量的公司使用了前后端分离的开发方式。那我们就来大概谈谈前后端分...
    程点阅读 37,622评论 13 108
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,605评论 0 7
  • 【转载】CSDN - 张林blog http://blog.csdn.net/XIAOZHUXMEN/articl...
    竿牍阅读 3,507评论 1 14