uniapp 搜索引擎seo优化(ssr 服务器渲染 非uniCloud版)

 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

1. 不能有环境代码。详情可以看官方的比如 window document
2. 还有很多api不支持 比如 uni.getSystemInfoSync
3. App.vue不会调用 需要在main.js挂载钩子
4. 如果有npm包 需要在服务器上的项目安装一遍
5. 为每个页面实现不同的meta信息需要自己实现 这个项目只提供uniapp的ssr解决办法。
6. 注意链接 都是onclik事件
7. 如果有不兼容的代码 会node报错 不会服务器渲染 但不影响网页运行
8. ssr很多代码不兼容 多到让你怀疑人生 做好心里准备。

源码：uniapp_ssr_demo