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**
![](https://i-blog.csdnimg.cn/direct/e10097c19a67441782077be512f94cb5.jpeg)
发行使用ssr
![](https://i-blog.csdnimg.cn/direct/4cf911da811f439484ca3982c9dc05a5.jpeg)
复制生成好的client跟server目录到该项目根目录运行
npm start