阅读量:0
uniapp官方提供的seo优化方案必须要uniCloud也就是云函数才能使用。如果你要使用云函数这篇文章对你没用。
uni-app seo终极解决方案更新到了这篇文章：
uni-app ssr(服务器渲染) + 动态路由(伪静态) + seo优化-CSDN博客
在现代Web开发中，搜索引擎优化（SEO）对于提高网站的可见性和吸引流量至关重要。UniApp作为一个跨平台开发框架，通常用于构建移动应用和小程序，但也支持开发H5页面。在H5页面开发中，如果希望这些页面能够在搜索引擎中获得更高的排名，进行适当的SEO优化和服务端渲染（SSR）处理是必不可少的。但uniapp却没有官方给一个非云函数用户的一个解决办法。
开发一个小程序原本以为网页版使用h5版就可以 不需要再开发了。
结果几年了 网站都没被搜索引擎收录。不得已必须实现服务器渲染(ssr)实现静态化。
方法1: 首先尝试改成nuxt.js
会遇到下面问题
1: uniapp有自己的组件。
第三方组件又使用uniapp的组件 结果全部第三方组件无法使用。要全部重写组件。
那工作量还不如重新写一个h5网站了。
2: uniapp的api无法使用。
跟uniapp相关的都无法使用，代码里那么多地方使用了api 要自己实现 。
果断放弃。能肯重写开发也不去踩那巨坑
方法2: 使用官方的方法 uniCloud版云函数。
又要托管 又要云函数。服务器空着不用。去用云函数绝对不可能。
方法3: seo作弊
就是判断是否搜索引擎请求。用 puppeteer 无界面浏览器 去请求真实网站将渲染后的内容返回给搜索引擎。
优点：这种方法挺好不要改任何代码。
缺点：这种作弊内容都不一样 搞不好k站。 而且请求速度慢排名也不会好哪去。 这里就不推荐。
实现没办法 官方文档翻烂了。 搜索引擎找遍了 没有任何成功的案例。
恨不得重新开发一个h5版。但最终去看uniapp的源码 找到了解决办法。就有了方法4.
方法4: 直接调用render 函数就会返回渲染后的html代码。
下面是关键代码片段。 完整代码 在 github https://github.com/fzl51/uniapp_ssr/
app.use(async (req, res, next) => { if (!routes[req.path]) return next() try { console.log('req=>', req.path) // 调用 render 函数 const {title, headMeta, preloadLinks, appHtml, appContext} = await render(req, {}); // 替换模板中的占位符 let finalHtml = templateHtml .replace('<!--preload-links-->', preloadLinks) .replace('<!--app-context-->', appContext) .replace('<!--app-html-->', `${appHtml}`); // 设置标题 finalHtml = finalHtml.replace(/<title>(.*?)<\/title>/, `<title>${title}</title>`); finalHtml = finalHtml.replace(/鼠标右键查看源码 如果源码存在此文字则成功/, ` 鼠标右键查看源码 如果源码存在此文字则成功 `); // 返回最终的 HTML return res.send(finalHtml); } catch (err) { console.error(err) res.status(500).send('Internal Server Error'); } }) uniapp_ssr_demo 用途：实现搜索引擎seo优化提高排名。将项目转为静态内容。 这是一个演示uniapp如何实现ssr服务器渲染 不使用uniapp官方指定的云函数来实现 `uniapp_ssr_demo` 是解决 [uniapp] 项目ssr(服务器端渲染),实现seo的解决方案。 这是实现uniCloud不需要云函数解决方案。 安装
npm install**Note:** 关键是需要安装最新的 @dcloudio/uni-app 及 @dcloudio/uni-h5。
在uniapp设置路由mode **history**
发行使用ssr
复制生成好的client跟server目录到该项目根目录运行
npm start