SEO优化方案-适用于uniCloud&uni-app开发的web站点

注意：uni-app升级到Vue 3.0后，提供了更为简洁的、开箱即用的SSR方案，详见：https://ask.dcloud.net.cn/article/39355，推荐使用该套方案。

=============如下是原文，较为繁琐，不再推荐=============

基于uni-app开发的应用，发行到H5平台时，本质是SPA应用，前端只有JS代码及CSS样式，所有数据均来自服务器动态请求。

SPA模式有流畅的切页动画，面向用户提供了更好的体验。但SPA对搜索引擎并不友好，国内百度等搜索引擎，尚无法模拟执行JS代码，导致基于SPA开发的站点，在搜索引引擎的收录较差。

如何解决？

本文分享一种较为简单的SEO优化方案，适用于绝大多数站点的列表、详情页面。

本方案已得到 quickapp.dcloud.io 站点验证，准确有效，下图是百度对 quickapp.dcloud.io 站点的收录截图：

注意：本方案已总结为云函数插件，提交插件市场，详见：https://ext.dcloud.net.cn/plugin?id=4193

方案概述

本方案的核心思路，可简述如下：

1. 通过DNS解析服务商分线路解析域名，如果是搜索引擎线路，则解析到中转服务器；普通用户走默认线路，CNAME到uniCloud的静态托管域名。
2. 中转服务器获取请求参数，转发给云函数
3. 云函数查询云数据库，返回数据

下图是对本方案的示意：

DNS分线路解析

现在主流的DNS解析服务商是支持分线路对域名进行解析的，如支持位置（境内、境外）、电信运营商（移动、电信、联通、教育网）、搜索引擎（百度、谷歌、必应等）解析到不同的地址。

本方案要求开发者拥有一台有固定IP的服务器，然后在DNS服务商将搜索引擎线路解析到该服务器。

PS：如果开发者没有固定IP的服务器，不要着急，DCloud正在准备解决方案，敬请期待。

如下是DNSPOD(腾讯云)的线路解析示意：

阿里云的域名解析需要分别针对百度、谷歌、必应设置，无法统一设置搜索引擎线路：

中转服务器转发请求

搜索引擎爬取站点时，DNS解析服务商根据来源线路，将域名解析到开发者的有固定IP的服务器上，该服务器需解析该请求，并再次转发到SEO通用云函数中。

如下是一段基于Node.js的解析转发代码，可参考：

let http = require('http')  
let syncReq = require('sync-request')  

http.createServer(function(req, res) {  
    if (req.url !== '/favicon.ico') {  

        let host = req.headers.host  
        let path = req.url  

        if (host == 'quickapp.dcloud.io') {  

            //云函数URL化后，可访问的HTTP域名地址，注意修改成自己的云函数地址  
            const uniCloudPath = 'https://www.example.com/seo'   

            //转发请求到云函数  
            let html = syncReq('GET', uniCloudPath + '?url=' + encodeURIComponent(path) +  
                '&domain=' +encodeURIComponent(host)).getBody().toString();  

            res.writeHead(200, {  
                'Content-Type': 'text-plain'  
            });  

            //向搜索引擎返回数据  
            res.end(html);  
        } else {  
            res.writeHead(403)  
            res.end()  
        }  
    }  
}).listen(3000)  

SEO云函数响应数据

云函数收到请求后，解析url地址，获取所需参数，查询数据库，返回html页面。

注意：因需返回html页面内容，故目前仅腾讯云支持。

你可以根据自身业务，编写云函数给与定制化的响应。为了简化开发，我们同时提供了一个通用的SEO云函数，你只需要配置seoConfig.json即可，如下是一段配置示例：

{  
    "path": ["/", "/pages/index/index"],//匹配的path地址  
    "type": "list",//页面为列表类型  
    "meta": { //响应的html中携带的元数据，辅助SEO  
        "title": "DCloud新闻",  
        "keywords": "uni-app,DCloud",  
        "description": "主流的HTML5服务商"  
    },  
    "data": { //数据源配置，用法同uniCloud-db组件  
        "collection": "opendb-news-articles",  
        "field": "_id,title,excerpt",  
        "orderby": "create_date desc",  
        "pageSize": 20  
    },  
    "template": "page-list.html",//响应的html页面模板  
    "templateBind": {//数据和模板的绑定字段  
        "thumb": {  
            "imgsrc": "item.img",  
            "imgalt": "item.title"  
        },  
        "title": "item.title",  
        "subtitle": "item.excerpt",  
        "to": "{$domain}/pages/detail/detail?id={item._id}"//列表的href调转地址  
    },  
    "footer": "京ICP备12046007号-4"  
}

你配置seoConfig.json后，将seo云函数上传，并开启云函数的url化即可。

FAQ

1. 如何判断DNS的分线路解析配置正确

查看固定IP服务器上的访问日志，根据访问来源的UA及IP判断是否为搜索引擎。

1. 如何测试SEO云函数的响应是否正确

通过浏览器直接访问seo云函数的url地址，查看是否响应了正确的html结果。