更新记录

0.1.0(2021-02-18)

初次提交


平台兼容性

阿里云 腾讯云 支付宝小程序云
× ×

云函数类插件通用教程

使用云函数类插件的前提是:使用HBuilderX 2.9+


注意:uni-app官方已更新支持SSR方案,详情参考:https://uniapp.dcloud.net.cn/collocation/ssr,推荐使用该方案,uniCloud-db组件天然支持,且无需购买虚拟机安装Node.js服务环境。

=========================

如下为原插件内容。

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

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

如何解决?

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

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

方案概述

本方案的核心思路,可简述如下:

  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结果。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

SEO优化方案-适用于uniCloud&uni-app开发的web站点(以下简称软件)源码使用许可协议

2022年10月

本许可协议,是数字天堂(北京)网络技术有限公司(以下简称DCloud)对其所拥有著作权的“软件”,提供的使用许可协议。

您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束,如您不接受本协议,则不能使用、复制、修改本软件。

授权许可范围

a) 授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可,您可以使用这些源码制作自己的应用。

b) 您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境,比如客户端脱离uni-app,或服务端脱离uniCloud(如涉及uniCloud)。

c) DCloud未向您授权商标使用许可。您在根据本软件源码制作自己的应用时,需以自己的名义发布软件,而不是以DCloud名义发布。

d) 本协议不构成代理关系。

DCloud的责任限制 “软件”在提供时不带任何明示或默示的担保。在任何情况下,DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。

您的责任限制

a) 您需要在授权许可范围内使用软件。

b) 您在分发自己的应用时,不得侵犯DCloud商标和名誉权利。

c) 您不得进行破解、反编译、套壳等侵害DCloud知识产权的行为。您不得利用DCloud系统漏洞谋利或侵害DCloud利益,如您发现DCloud系统漏洞应第一时间通知DCloud。您不得进行攻击DCloud的服务器、网络等妨碍DCloud运营的行为。未经书面许可,您不得利用DCloud的产品进行与DCloud争夺开发者的行为。

d) 如您违反本许可协议,需承担因此给DCloud造成的损失。

本协议签订地点为中华人民共和国北京市海淀区。

根据发展,DCloud可能会对本协议进行修改。修改时,DCloud会在产品或者网页中显著的位置发布相关信息以便及时通知到用户。如果您选择继续使用本框架,即表示您同意接受这些修改。

条款结束

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问