百度智能小程序为开发者提供全面开放的自然百度搜索接入。本文将主要关注小程序开发人，从以下几个方面介绍如何接入自然搜索：

一、资源收集，介绍通过Web对小程序的检索和收集；

二、基于Web的预览和调试，解释开发者如何预览和调试Web小程序；

三、搜索引擎优化，在小程序开发中介绍应该注意哪些搜索引擎优化方法；

四、其他开发建议，列在小程序开发中，考虑基于Web实现，有哪些实现问题需要注意。

在介绍之前，我们先了解一下什么是小程序接入自然搜索。

通过接入百度搜索生态百度小程序开发，在百度App（版本10.10以上）中，用户无需准确搜索小程序名称，只要搜索相关的小程序页面即可内容被检索，小程序结果将显示在百度搜索结果页面，为用户提供更精准便捷的服务。

在内容同质的情况下，搜索会优先显示智能小程序页面。当一个智能小程序的页面被用户检索到时支付宝小程序开发，其展示表单会有一个小程序标签，用户可以在百度App（版本10.10或以上）中点击搜索结果打开智能小程序。开发者只需进行简单的配置工作，自己开发的智能小程序就可以被百度搜索收录和分发。

例如：在百度App中搜索“北大高考”，在自然搜索结果中就可以看到百度贴吧小程序的相关搜索结果。点击结果会直接打开百度贴吧小程序的对应页面

那么百度智能小程序是如何连接自然搜索的呢？在接下来的章节中，我们将详细介绍小程序访问自然搜索的原理以及小程序开发用户访问自然搜索需要注意的问题。

一、资源收集

在网络生态系统中，我们对搜索引擎如何发现和包含资源并不陌生。通过爬取网页，爬虫可以很好地解析和索引页面内容。那么，作为一个以客户端形式存在的小程序，它是如何实现资源收集的呢？

答案是百度小程序开发，由于网络爬虫技术比较成熟，只要将小程序转换成网页版，就很容易利用现有的爬虫能力实现对小程序页面的收录。在这里，今天的主角即将隆重登场——网页小程序

网页小程序是百度小程序的网页版。每个 Web 小程序都是一个单页应用程序站点，可以在具有唯一对应 URL 的浏览器中打开。网页版小程序的内容、风格和交互行为与对应客户端打开的小程序基本一致。

以百度翻译小程序为例，下图是在百度App中打开百度翻译小程序和在safari浏览器中打开其网页版小程序的效果：

那么基于Web的小程序是如何生成的呢？

百度智能小程序可以自动生成网页版小程序。小程序发布时，后台会为每个小程序自动生成一个网页版小程序。也就是说web化对小程序开发开发者是透明的，开发者无需任何额外适配即可完成转换（当然由于H5与客户端的天然差异，我们还是有一些开发建议希望开发者可以关注，后面会详细介绍）。

有人问：让爬虫知道有那么严重吗？一个HTML就够了，客户端小程序的样式和交互要保持一致？事实上，随着 SPA 应用的广泛普及，现代爬虫仅靠解析静态 HTML 是无法完全获取有效页面内容的。因此，爬虫的爬取过程会根据页面的动态数据和样式布局，对页面进行渲染，更好地理解页面内容。也就是说爬虫看到的页面和我们看到的页面是一模一样的。

在百度开发者工具2.2.4及以上版本中，默认开启Web-based。该工具的早期版本需要手动打开 Webization 开关。对于之前没有开启的小程序，只要升级到最新版本重新发布，就会自动开启。

当一个小程序发布时，爬虫会通过自我发现收集和索引基于Web的小程序的每个页面。

除了自己发现的资源采集方式，如果开发者想要获得更及时的资源采集效率，还可以主动提交资源列表，即sitemap，实现日级、周级资源收藏。站点地图提交请参考官方文档《获取自然搜索结果——提交站点地图》

对于已经在百度H5站收录的资源，也可以通过配置H5域名，提交H5和小程序页面映射规则，替换原有H5页面收录结果，继承现有权重。具体提交方式请参考官方文档《访问自然搜索结果——配置URL映射规则》

二、基于Web的预览和调试

开发者工具提供了一种访问网页效果的方法。

在预览Webization之前，请确保配置了服务器域名配置中的请求域名，否则无法正常返回接口数据请求。配置方式：小程序后台-设置-开发设置-服务器域名-请求的合法域名

在开发者工具中，在登录状态下，点击“预览”按钮，在弹窗中切换到“WEB预览”选项卡即可预览网页效果。您可以直接扫码或通过手机浏览器查看。

您可以通过单击上图中的“在浏览器中打开”来查看网页 URL。网页URL地址规则如下：

三、搜索引擎优化

与普通网站一样，网络小程序也可以通过一些搜索引擎优化（SEO）方法获得更准确的相关性排名结果。

1.设置页面基本信息

在 H5 开发中，标题、元描述和元关键字标签被添加到 HTML 以声明与页面相关的内容。小程序的页面信息声明是通过设置页面的基本信息来实现的。

页面的基本信息包括标题、摘要、关键词、页面主图、资源发布时间等，以下仅介绍几个主要信息。更多设置要求请参考官方文档《API - 页面基本信息》：

页面的基本信息是通过小程序API swan.setPageInfo 设置的。使用示例如下：

Page({
    onShow() {
        swan.setPageInfo({
            title: 'Win10控制面板在哪？怎么找出来-百度经验',
            keywords: 'Win10控制面板在哪？win10面板,电脑软件,电脑,游戏/数码',
            description: 'Win10控制面板在哪？升级了Wi10系统发现：电脑上的【控制面板】不见了，教大家怎么把消失的【控制面板】找回来。',
            image: 'https://example.com/myphoto.jpg'
            ...
        });
    })
);

更详细的使用介绍请参考官方文档《API - 页面基本信息》

页面基本信息的设置粒度是页面级的，所以强烈建议在Page的onshow生命周期中调用，保证每次页面切换都能有效设置当前页面的页面基本信息。

内部实现

Webization 中的setPageInfo 是将调用参数动态设置为HTML 标签中的title、meta description、meta 关键字标签，以及符合The Open Graph 协议的meta 标签。因此，如果想在调用setPageInfo后调试页面的基本信息是否设置成功，可以在网页渲染后的HTML Element中查看这些标签是否设置成功。网页预览方法将在第二章介绍。

例如，上例中的设置结果如下：

    
	...
    
    
    
    

...

swan.setPageInfo中设置的字段不仅用于访问自然搜索场景，在访问百度信息流中也起到了至关重要的作用。详见官方文档《信息流流量接入》

另外，swan.setPageInfo API 不仅用于流量访问场景中页面内容的声明，在客户端小程序的实现中百度小程序开发，也将页面的基本信息作为摘要信息页面共享和页面收藏。

2. 链接跳转

页面中的链接跳转对爬虫索引有很大的价值。对于普通的H5来说，页面跳转通常有两种方式：标签跳转和window.location.href赋值方式跳转。前者直接设置在HTML标签中，发现效率和准确率比后者友好很多。

同样，在小程序中，设置页面跳转有两种方式：

✅推荐跳跃示例：

点我跳转

❎不推荐跳转示例：

点我跳转
Page({
    jump() {
        swan.navigateTo({
            url: '/pages/detail/detail'
        });
    }
    ...
})

3.避免使用 webview 组件

为了方便小程序开发，很多开发者选择用webview组件嵌套H5页面来实现小程序。嵌套webview组件实现的小程序对爬虫爬取不友好。因此，我们不建议以这种方式开发小程序。

4. 访客模式兼容

由于爬虫的访问环境没有账号登录模拟，任何页面都会以guest模式访问（guest模式调用swan.login会执行fail回调）。因此，开发者想要包含的页面应该考虑与游客模式的兼容性。对于不依赖用户信息的页面，不添加强制登录逻辑，用户信息获取失败时依然显示有效内容。

例如：在博客论坛的博文页面中，只需要在用户登录状态下完成评论功能即可。那么，在未登录状态下访问页面时，文章主体应该可以正常显示，并且只有在用户点击评论时才需要登录。不用在进入页面时强制登录，可以正常浏览。

5. 避免页面之间的访问顺序依赖

由于小程序一般会暴露很多入口 系统定制开发 ，比如后续页面只会通过首页跳转访问，小程序开发用户通常容易忽略页面间访问的独立性，导致页面实现逻辑过多和访问路径耦合的情况。例如：首页请求数据信息后，使用setStorage在本地存储数据，跳转到二级页面时读取存储在storage中的数据，不做空处理直接显示。

考虑网页小程序被爬虫爬取的情况，每个页面都有独立的入口访问。因此，应避免这种耦合访问顺序的编写方式，并应增加必要的兼容性处理。 小程序开发 完成后，可以通过单独预览每个网页化页面来检查合规性。

代码示例：

【昱远信息系统开发定制】