哥飞2026-08-28 08:55

以游戏站为例,通俗易懂的讲解前端渲染和后端渲染的区别,以及如何做好游戏站

Head Image
@哥飞 哥飞老师,想问下服务端渲染做页面是谷歌爬虫爬取页面的硬标准么?如果是某个类型的包含多个小游戏的游戏站的话,也强制要求要服务端渲染么?

Head Image哥飞
我觉得你的问题表述方式错了,你应该问,对于多个小游戏的网站,如何做服务端渲染。
。:@哥飞 哥飞老师,想问下服务端渲染做页面是谷歌爬虫爬取页面的硬标准么?如果是某个类型的包含多个小游戏的游戏站的话,也强制要求要服务端渲染么?

Head Image哥飞
你会问出这个问题,要么你是一个前端开发,要么你前后端编程都不懂。

Head Image哥飞
任何一个想要从搜索引擎拿排名的页面都需要服务端渲染。

Head Image哥飞
在这个前提下,你的问题是,如果有 10 个游戏,你的代码要怎么写?

Head Image哥飞
我们先从最简单的方法说起,你可以为每一个游戏做一个 html 文件,同时再做一个首页,在首页里列出 10 个游戏 html 文件的访问网址,于是你就做出来了一个游戏站。

Head Image哥飞
10 个游戏还好,如果是 100 个游戏,1000 个游戏,难道我们也去生成 100个,1000 个html 文件吗? 那显然管理起来很麻烦。 想一想,如果你需要修改页面某个位置的样式,就需要每一个html 文件都去修改一遍,那显然麻烦急了。

Head Image
是的。那有什么更好的方案么。

Head Image
因为我的策略是先上少量游戏,后续慢慢加数量。

Head Image哥飞
而其实,不管是 10 个还是 100 个游戏,其实这些游戏页面,都有一些共性。
都有游戏名称、一句话介绍、分类、iframe url、详细图文介绍等等信息。
如果把 100 个 html 文件的以上信息都抽离出去,你会发现剩下的 html 代码,其实就是页面框架,很相似很相似。
这个页面框架,就是一个页面模板,你可以想象成一篇文章,到处是空格,你用 A 游戏的数据把这些空格填好,整个页面就是 A 游戏页面,用 B 数据填好就是 B 游戏页面。

Head Image
额。。我这边的游戏站初始内容是原创的内容,没有用iframe url,用的astro这个技术栈来实现的原创游戏。因为我想等网站有流量了再接入游戏平台的游戏。所以我的卡点在这里,如果不用astro这种技术栈,还有别的办法可以实现服务端渲染页面么。
哥飞:而其实,不管是 10 个还是 100 个游戏,其实这些游戏页面,都有一些共性。 都有游戏名称、一句话介绍、分类、iframe url、详细图文介绍等等信息。 如果把 100 个 html 文件的以上信息都抽离出去,你会发现剩下的 html 代码,其实就是页面框架,很相似很相似。 这个页面框架,就是一个页面模板,你可以想象成一篇文章,到处是空格,你用 A 游戏的数据把这些空格填好,整个页面就是

Head Image哥飞
你别打岔,等我讲完

Head Image
👌

Head Image哥飞
假设页面模板上有20 个空格等待填写。
那你要添加 10 个游戏,无非准备 10 套包含 20 个信息的数据。 要添加 100 个游戏,也就是准备 100 套数据。
这里的每套数据都只跟游戏自己有关,跟网页样式无关。 拿出任何一套数据填进空格,就组装出来了一个新的游戏页面。

Head Image哥飞
当用户想要打开某个游戏页面时,你可以返回 html 模板,然后在前端 js 触发,像后端获取当前游戏的数据,再用 js 一个一个空格填进去,渲染出来一个游戏网页,这就是前端渲染。
从上面的过程可以看到,前端渲染分两步,第一步返回空壳的 html 模板,第二步 js 获取信息后填入空格,就不再是空壳了,而是有信息的页面了。
但是搜索引擎爬虫大多数时候,只会抓取第一步,于是不管打开你哪个游戏页面,得到的都是同一套空壳html 模板,没有任何信息,那爬虫就不知道你这些页面到底是关于什么的了。
而对于我们这些小网站来说,爬虫也懒得去执行js,于是这些空壳页面就会被舍弃,爬虫直接不要了。

Head Image哥飞
而后端渲染,其实就是在后端把两个步骤做完,当前用户请求的网址是关于游戏 A 的,我们后端程序从数据库里(或者别的地方,如文本文件也行)获取到 A 游戏的数据,程序执行把 html 模板上面的空格填好之后,再返回给前端,让浏览器去显示页面。 后端做的事情,就是动态渲染,也叫做后端渲染。
这时候,不管是用户的浏览器访问,还是爬虫访问,只需要访问一次,就能够得到带了完整游戏信息的 html 代码。 搜索引擎爬虫就可以解析 html 得到游戏信息,从而可以得到网页主题,才有可能进入用户搜索结果里。
具体可见"谷歌搜索模拟器" https://new.web.cafe/search-simulator/

Head Image哥飞
以上这些每一个游戏的数据,如果可以在网站后台给管理起来,那就会更方便。 网站的编辑人员,可以添加游戏,查看游戏列表,搜索游戏,从游戏列表里选择某个游戏编辑游戏信息,隐藏或者删除某个游戏。 也就是说,编辑不需要懂技术,就可以管好游戏站。
那么游戏开发人员,怎么和网站合作呢? 通常的方式是,职责分离,游戏开发人员把游戏部署起来,给出一个可供 iframe 的 url 给编辑。 编辑拿到后,填到网站后台,再填写好其他信息,就能够快速上架一个游戏。
编辑不需要接触游戏代码,不需要懂游戏代码。 游戏开发后续需要更新游戏,只需要修改游戏代码,重新部署就行,只要保证每一次部署后的网址都是同一个,那么编辑就不需要做任何处理。

Head Image哥飞
而且,这样做还有一个好处,编辑去修改给 SEO 准备的游戏文案,不需要去修改游戏代码。
搜索引擎爬虫抓取到的游戏页面,也都是关于SEO 相关的信息,而不会有任何游戏逻辑代码。
游戏代码不会影响 SEO。

Head Image哥飞
对于你们来说,也是一样的。
不管是你们自己开发的游戏,还是别人开发的游戏,在你的游戏网站发布时,都只需要填写一个游戏 iframe url 就可以了。

Head Image哥飞
@。 还有疑问吗

Head Image
我大概能明白了,所以假如我要做这样的一个站。正确思路应该是找一个审核难度比较低的游戏平台先开发要上的游戏,然后网站内使用 iframe url + 服务端渲染即可。游戏和网站的内容是分开管理的。 @哥飞

Head Image
你可以自己部署呀

Head Image哥飞
“一个审核难度比较低的游戏平台先开发要上的游戏”
这个不一定呀,你自己让 AI 开发游戏,得到游戏代码,部署到 Cloudflare 去就好了

Head Image
或者不一定要是游戏平台,我自己做一个游戏的管理系统也可以?专门存放游戏。然后游戏站负责SEO + iframe url链接游戏。这样是不是也可以?那么我自己做的这个游戏管理系统是否要提交GSC收录呢?应该不用吧。我不确定爬虫会不会怕游戏的内容。

Head Image哥飞
准确的说,是部署到 R2 去

Head Image
R2是什么。。这个概念我不太懂。
哥飞:准确的说,是部署到 R2 去

Head Image
存储桶

Head Image哥飞
“我自己做的这个游戏管理系统是否要提交GSC收录呢?”
你上站的目的是什么? 难道不是搞到流量吗?

Head Image
图片

Head Image
感谢。
引用图片

Head Image哥飞
Cloudflare R2 里边可以放任何静态文件,自然也包括 html 文件和js 文件和css 文件。 你的游戏前端代码,都可以放到 R2 去,只收存储费用,不收请求费用。 这样你的游戏被 100 人玩和被 10000 人玩,费用是一样的。

Head Image哥飞
如果你存储到别的会按照请求收费的地方去,那么玩的人越多,你需要支付的钱也越多。

Head Image哥飞
如果部署到你自己的服务器去,又会受限于服务器的带宽,无法满足很多人同时玩。

Head Image
所以,我可以把游戏打包放到R2、然后游戏站 iframe 链接R2的资源地址来加载游戏。然后提交游戏站收录就可以了。

Head Image哥飞
是的

Head Image
感谢飞哥,我思路清晰了。我应该早点问的。白费了半个月时间折腾游戏站的事情。。因为AI说astro这种技术栈也完美满足SEO。。。。

Head Image
所以我在开发之前就没有问这个问题。。

Head Image哥飞
“astro这种技术栈也完美满足SEO”
这是正确的说法哦

Head Image

Head Image
我目前的游戏站就是基于这个技术做的,已经快做完了。

Head Image哥飞
你要区分游戏网站和游戏代码

Head Image哥飞
网站代码和游戏代码互相隔离

Head Image
那我现在有点疑惑了,我是否要改为Cloudflare R2 + 游戏站提交收录的方式去完成这个游戏站呢。因为我目前是用astro去开发游戏的,目前我是把网站代码和游戏代码放在一个项目里的,我就做不了服务端隔离了。好像就回到我们最开始说的爬虫爬不到网页内容的问题了。

Head Image哥飞
你现在是把游戏代码和网页代码混在一起了,需要分离开来。

Head Image
我明白了,Astro也支持SSR,我把游戏代码和网页代码合理拆分一下就可以了。让爬虫可以先看到SEO的内容比如标题、描述文案、链接这些等等即可。游戏的内容不属于SEO内容,不索引到也无所谓?

Head Image哥飞
是的,游戏代码不需要拿来搞排名

Head Image
感谢飞哥和群友解惑。

Head Image
@哥飞 哥飞老师,还想请教下。如果是这种游戏站的话。如何判断这个站的SEO已经做的足够好了?之前学习的时候很少有提到游戏站的SEO优化思路,所以想请教下。

Head Image哥飞
任何网站的 SEO 思路都是一样的,找到有搜索量的关键词,然后一个关键词做一个页面,每个页面做好 On Page SEO ,写好 TDH,写好网页文案,控制好页面内容聚焦到你想拿排名的关键词(控制好单词数量和关键词密度)。

Head Image
好的。
还没有人阅读
还没有人点赞,来做第一个
还没有人收藏
还没有人打赏,觉得有帮助就用咖啡豆支持 哥飞
还没有人评论,来抢沙发
评论区
    new.web.cafe

    Web.Cafe