「技术干货」SEO解决方案-离线预渲染
gaoyangw 2024-11-20 14:51 34 浏览 0 评论
作者/冯雨森
概述
优化SEO将改善网站在搜索引擎结果中的排名,吸引更多的用户访问网站,提高网站的访问量,从而提升品牌效应。
搜索引擎并不会执行JavaScript文件,因此只有将数据在html文件中静态化才会被搜索引擎检索到。
主流SEO解决方案
1. SSR服务端渲染
如VUE-SSR,页面在服务端渲染完成后返回给客户端。
- 优点:SEO效果好,首屏渲染快。
- 缺点:开发成本高,SPA应用无法快速迁移为SSR。页面由服务端渲染,服务器开销大。
2. Nuxt
结合了SPA和SSR,Nuxt在服务端运行一个Nuxt服务,客户端发起请求后,会先在服务端运行页面的Nuxt的asyncData和fetch钩子,通常在这两个钩子里初始化页面数据请求,Nuxt会在钩子执行完毕并渲染完数据后返回页面。相比SSR,Nuxt的开发方式和SPA大部分都相同,并且开发会更加方便,例如路由会直接按照层级结构自动生成,不需要自己写路由,开发成本相比SSR低了很多,迁移成本也相对较低。
- 优点:开发成本和SPA相似,SPA应用迁移成本较低,SEO效果好,可以选择打包成SPA还是SSR,拥有SSR的大部分优点。
- 缺点:服务器开销大,依然是在服务端进行页面渲染,并且因为Nuxt服务可能与后端服务不在一起,有可能因为请求网络延迟导致首屏速度变慢。目前的坑也比较多,踩坑也是个不轻松的过程。
3. 静态 html
最原始的方法,对于静态数据来说,SEO不是问题。
- 优点:页面小,不会引入 vue/react/angular 等框架,大幅减少js的体积,静态数据SEO效果好,首屏渲染快。
- 缺点:开发成本高,维护成本高,并且接口数据是无法静态化的,只对无接口数据需求的纯静态站点有优势。
4. 预渲染
可直接在SPA应用基础上增加预渲染插件即可实现预渲染,例如:prerender-spa-plugin。预渲染是在本地构建时,将指定路由的页面全部渲染出一份html,在客户端请求页面时先请求这份html。
- 优点:SPA应用成本最低的优化SEO方案,只需要添加插件和配置,首屏渲染速度快,SEO效果好。
- 缺点:因为构建渲染页面时,本地环境为localhost,所有与window.location相关代码都可能会出问题,这会导致很多链接错误问题,虽然可以注入变量来解决,但是多环境构建依然可能遇到问题,并且要做很多额外的处理。prerender-spa-plugin是基于puppeteer的,支持接口拉取,但是渲染发生在构建阶段,并且是本地环境,会有很多其他问题,例如每次接口数据修改还需要重新构建,并且渲染页面时一旦有接口报错导致页面渲染失败,也将会是个麻烦的事。我个人认为预渲染还是更适合纯静态类spa站点的静态化。
离线预渲染
离线预渲染与预渲染类似,但是解决了预渲染的一些问题,离线预渲染的使用场景仍具有很大的局限性,但是在特定的场景下,却是非常合适的方案。
LStack的官网www.lstack.com就使用了离线预渲染作为SEO解决方案,我们先看一下对于官网的需求:
1. SEO优化要好
2. 数据要使用接口数据
3. 不能使用服务端渲染(页面很少变化,使用服务端渲染浪费服务器资源)
SEO的要求,首先就可以排除SPA了,数据要使用接口数据,那原生html这种无法静态化接口数据的方案也无法满足这个要求,不能使用服务端渲染,又再次排除了服务端渲染和Nuxt。而预渲染又存在诸多问题,事实上LStack官网重构前正是使用的预渲染方案,只对静态数据做了静态化,但是仍对代码有侵入性,并且遇到了一些本地环境渲染页面而导致的问题,处理这些问题,需要在写代码时考虑这种情况的处理。在这种情况下,离线预渲染就是最合适的解决方案了。
优点
- 改造简单,对源代码0侵入,不需要任何改造,spa不需要任何修改就可以仅搭建一个爬虫服务来实现SEO优化。
- 可以对接口数据静态化。
- 不占用服务器资源,渲染一次,便可以重复使用,直到下次数据变化重新渲染。
- 加速首屏渲染,首屏效果和服务端渲染一致。
- 可以部署到cdn/oss。
缺点
- 仅适用于数据改变频率低,时效性低的站点,例如官网,文案也许一个月变更一次。
- 开发成本虽然低,但是搭建维护坑比较多,需要考虑的点较多。
- 和预渲染一样,因为js拉取完毕后会以spa模式渲染页面,因此js加载完成后页面会闪动一次,替换掉静态html内的内容。
原理
离线预渲染使用爬虫爬取页面,生成静态html,从而实现动态数据的静态化。
爬虫使用puppeteer,puppeteer是nodejs的一个爬虫框架,提供了对headless chrome的高级操控api,headless chrome为无界面chrome。使用这种方式渲染页面,完全模拟了用户的真实访问环境。
- 爬虫生成的静态html,只是对spa原本没有数据的index.html填充了数据,js拉取回来后,依然会执行js,接口依然会触发,行为和spa没有区别,只是首屏从空白页面变为了填充了数据的页面。
- 涉及到登录等有状态的部分,因为爬虫渲染的环境并没有用户登录信息,所以首页面总是未登录状态,js加载完毕后,才会判断登录状态。
方案
项目构建完毕后,将构建完成的源代码上传至OSS,然后拉取源文件到容器中,Nginx代理此项目,然后Puppeteer访问Nginx,对每个路由依次访问并渲染页面,按照路由结构安排文件目录结构,然后打包上传至oss。上传完毕后拉取渲染成功的页面,覆盖到容器中。
踩坑
1. 为了在只用一个Nginx服务的情况下,保证无论页面是否经过爬虫处理都要可以正常访问,并且数据也要是最新的,可以参考这样的规则:每一级路由都有对应的文件夹,此路由页面为此文件夹下的index.html。所有页面路由默认匹配/[url]/index.html,手动拼接/index.html后缀,这样爬虫处理过的页面都可以被正常访问到,而如果此时后端数据更新,要重新渲染页面,因为爬虫会等到页面完全渲染完毕才会储存页面,因此此时最新数据已经通过接口返回了,不必担心数据依然是旧的。而当页面没有被爬虫处理过时,页面只有一个index.html,其他路由都会404,此时当找不到对应文件时,不返回404页面,而是返回index.html,前端js加载完毕后,自动判断路由来跳转对应的页面,如果路由页面不存在,也是前端跳转404,此时的行为完全是spa行为,只有首屏会拉取html,其余页面跳转都是spa行为。
location / {
root /usr/share/nginx/html/website/website;
index index.html;
gzip_static on;
try_files $uri $uri/ /$1/index.html;
}
2. linux环境下,puppeteer安装会报错,是因为chrome安装报错。可以手动安装chrome,然后puppeteer启动添加参数。
const browser = await puppeteer.launch({
args: ['--no-sandbox', '--disable-dev-shm-usage']
});
3. 内网可能会遇到dns问题,爬虫爬到了公网上,导致页面爬错,配置好dns即可。
4. SSL证书错误,只需要在启动参数里添加ignoreHTTPSErrors: true,忽略SSL错误。
5. linux下中文乱码问题,安装中文编码即可。
6. 每一套源码应该有一份配套的html页面,如果代码做了修改,webpack打包出的js文件名也会变化,如果继续使用旧的html,则会导致js拉取到错误的代码,为什么不是404而是200呢?因为Nginx配置中,404的时候,默认转发index.html,所以这种情况下js并不会404,而是js里面都是html代码。而如果这样的事情发生了,那这个页面无论是用户还是爬虫,都只能访问到静态的html了,只能重新拉取代码,并且不要把旧的html页面覆盖进去,如果是自动化部署,脚本逻辑上就需要多做一些考虑了。
7. puppeteer是node的库,但是有基于其他语言的封装,例如java版封装为jvppeteer,但用法上可能会有区别。
LStack产品简介
面向行业应用开发商(ISV/SI)提供混合云/边缘云场景下云原生应用开发测试、交付、运维一站式服务,帮助企业采用云原生敏捷开发交付方法论,从而提高软件开发人员效率、减少运维成本,加快数字化转型,并最终实现业务创新。
-End-
相关推荐
- 如何制作吸引人的网页设计呢?(如何制作吸引人的网页设计呢图片)
-
对于绝大多数的企业来说,都希望能够拥有一个自己的网页,在互联网社会快速发展的现代,如果没有一个自己的网页,就会显得与时代格格不入,跟不上时代潮流,很可能就会被时代所抛弃,在进行网页设计的时候都是采用...
- 如何用Excel制作网页交互效果?(excel怎么做交互式窗口)
-
哈喽,同学你好,我是运营菌。最近我们有一门新课《Excel图表》上新啦,欢迎大家捧场哈~...
- 高效网页设计的5个技巧(高效网页设计的5个技巧有哪些)
-
企业在互联网上的存在与其在街边商店中传递的图像相同或比其重要。网页和在线商店都是实体商店的数字等效产品。在网页上,您必须对实体商店投入同样的精力。互联网销售每年都在增长。此外,购买过程已更改。消费者在...
- 网页设计与制作:打造精美实用的网页设计与制作
-
标题:网页设计与制作:打造精美实用的网页设计与制作导言:在当今数字化时代,网站已成为企业与个人展示与推广的重要平台。一个精美实用的网页设计能够吸引用户的注意力,提升用户体验,并增加转化率。本文将为您介...
- 教育部以问答形式发布2025年高考提示
-
新华社北京6月3日电(记者魏冠宇)2025年高考在即,为更好帮助广大考生了解考试注意事项,教育部6月3日以问答形式发布2025年高考提示,提醒考生做好个人防护。教育部提醒,考生要做好个人防护,当好自身...
- 真我GT5& 真我GT5 240W手机获realme UI 6 15.0.0.406升级
-
IT之家6月1日消息,真我GT5&真我GT5240W手机现开启realmeUI615.0.0.406升级推送,新版本优化了流体云功能,并新增2*4尺寸地铁乘车...
- 今日头条关于个人认证(黄V)规则升级公告
-
尊敬的创作者:今日头条始终致力于搭建优质、健康的内容生态及作者生态,旨在为用户提供更具价值的内容体验,故平台决定,自2025年6月10日起,对头条个人认证(即黄V作者认证)进行优化升级。此次升级将进一...
- SEO简之道(简单seo)
-
SEO复杂吗?为什么学了那么久的SEO还是操作起来相当困难?究竟是什么在阻碍SEOer的成长之路?为什么成不了seoer高手?这个问题恐怕回答起来也是众说非云,答案不一,在这是我只说一个简单的SEO见...
- 新手运营3个月晋级培训(运营培训总结心得体会)
-
对于非技术出身的我,培训一个人无非就是师傅领进门,修行靠个人。培训新手并非单存的告知要做什么,而是在告知具体做哪些的同时还要引导他们,让他们明白做事情需要自己的思考,还要学会怎么发现问题,寻找解决方法...
- 上海昕搜AI优化课:大模型获客实战培训
-
关于上海昕搜科技「大模型获客实战培训」课程的核心信息,结合其公开技术方案与实战案例,可总结为以下结构化内容:一、课程技术架构双引擎驱动模型AISEO体系:基于DeepSeek、ChatGPT等种主流...
- AI生成内容培训:SEO站长必选机构(ai生成技术)
-
以下是针对SEO站长学习AI生成内容的核心培训机构及课程推荐,整合了工具使用、实战策略与行业认证资源,供从业者根据需求选择:一、AI创作工具+SEO培训双轨机构宇宙SEO-宇宙AI提供批量生成SEO文...
- 全网营销推广如何布局、运营及具体实战?
-
全网营销推广:布局、运营与实战全攻略在如今这个数字化飞速发展的时代,全网营销推广就像是企业开启成功大门的一把金钥匙。它能让企业的产品或服务迅速被大众知晓,提升品牌知名度,带来更多的客户和订单。可全网营...
- 你们能不能保证3个月做到行业关键词第一?钱不是问题!
-
这是我上个月刚拒绝的客户原话。从业十年,我们越来越清楚:有些需求看似“合理”,实则违背SEO底层逻辑。今天干脆说点大实话,这几类需求我们真的接不了。...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)
- 百度收录批量查询工具 (48)
- 网站服务器 (53)
- 学生个人网页制作html (56)
- 一键优化 (67)