swan.setPageInfo

setPageInfo 接口目前只针对百度 App 开放使用。

配置页面基础信息的接口，目前在 Web 态代码和收藏里会被使用；小程序页面被收藏时，会用到 setPageInfo 中设置的页面标题。setMetaDescription/setMetaKeywords/setDocumentTitle 已停止维护，推荐使用 setPageInfo 。

建议在 Page 的 onShow 生命周期中使用。由于 onShow 生命周期会在用户前进后退时触发，若数据来自 onLoad 等其他生命周期，建议使用变量形式存储并在 onShow 中调用 setPageInfo 函数，详情参见下面的代码示例 2 。

解释：智能小程序可接入百度搜索和宿主 App 信息流，swan.setPageInfo 负责为小程序设置各类页面基础信息，包括标题、关键字、页面描述以及图片信息、视频信息等。开发者为智能小程序设置完备的页面基础信息，有助于智能小程序在搜索引擎和信息流中得到更加有效的展示和分发。其中 title 和 image 字段也增强了用户添加页面收藏的模板展现和回访体验（用户可以在小程序菜单中收藏当前页面，并通过百度 App “我的-常用功能-收藏”回访已收藏的页面）。

注意：仅在 Web 态搜索场景下可预览 setPageInfo 效果，“搜索 Web 态” 与其他场景的区别见Web 态概述。预览方式详见下文示例。

方法参数

Object object

object 参数说明

属性名类型必填默认值说明
titleString是页面标题。
keywordsString是页面关键词，多个关键词之间使用英文逗号 “,” 隔开。
descriptionString是页面描述信息。
releaseDateString否（如宿主 App 信息流则为必填）原始发布时间（年-月-日 时:分:秒 带有前导零），如：2010-07-01 16:30:30。
articleTitleString否文章【内容】标题（适用于当前页面是图文、视频类的展示形式，文章标题需要准确标识当前文章的主要信息点；至少 6 个字，不可以全英文。）。
imageString/Array否（页面有焦点图，或者正文有图片时需要设置）图片线上地址，用于信息流/搜索等流量场景分发、用户收藏后的页面封面显示，展现时有图片可提升用户点击率。开发者可针对一个页面设置最多 3 张，图片必须为页面内图片。单张图片最大 2M ；封面图尺寸：宽>=375px ，高>=250px ，图片宽高比例 3：2 为佳。多张图时，用数组表示。
videoObject/Array否（页面存在视频情况下必填）视频信息，多个视频时，用数组表示。
visitObject否浏览信息。最低支持版本 3.40.6。
likesString否点赞量，若页面未统计可为空。最低支持版本 3.40.6。
commentsString否评论量，若页面未统计可为空。最低支持版本 3.40.6。
collectsString否收藏量，若页面未统计可为空。最低支持版本 3.40.6。
sharesString否分享量，若页面未统计可为空。最低支持版本 3.40.6。
followersString否关注量，若页面未统计可为空。最低支持版本 3.40.6。
successFunction否接口调用成功的回调函数。
failFunction否接口调用失败的回调函数。
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）。

video 参数说明

参数名类型必填说明
urlString是视频地址。
durationString是视频时长（单位：秒）
imageString是视频封面图

visit 参数说明

参数名类型必填说明
pvString否页面的浏览量（不去重用户）
uvString否页面的点击量（去重用户）
sessionDurationString否页面的用户人均停留时长（单位：秒）

示例

请在开发者工具中，单击 “预览”，选择 “WEB 预览”。点击 “在浏览器中调试” 查看效果（注意，在 Web 态中查看 SEO 信息设置时，URL 中必须包含 query 参数 “_swebfr=0”）

图片示例

swan.setPageInfo - 图1

代码示例 1

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • JS
  1. Page({
  2.     onShow() {
  3.         swan.setPageInfo({
  4.             title: '晒元宵节活动红包，爱奇艺60张年卡、600张季卡等你拿！-百度贴吧',
  5.             keywords: '百度,百度贴吧,好运中国年,60,晒元,宵节',
  6.             description: '晒元宵节活动红包，爱..昨天的百度App元宵节活动中，共发出2亿现金红包、含151万个手气现金大奖和240辆红旗轿车，谁是好运锦鲤，快来分享！马上惊喜升级~摇中红包的锦鲤们即刻晒出红包金额截图，我们将会抽取660位好运锦鲤',
  7.             articleTitle: '晒元宵节活动红包，爱奇艺60张年卡、600张季卡等你拿！',
  8.             releaseDate: '2019-01-02 12:01:30',
  9.             image: [
  10.                 'https://c.hiphotos.baidu.com/forum/w%3D480/sign=73c62dda83b1cb133e693d1bed5456da/f33725109313b07e8dee163d02d7912396dd8cfe.jpg',
  11.                 'https://hiphotos.baidu.com/fex/%70%69%63/item/43a7d933c895d143e7b745607ef082025baf07ab.jpg'
  12.             ],
  13.             video: [{
  14.                 url: 'https://www.baidu.com/mx/v12.mp4',
  15.                 duration: '100',
  16.                 image: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/image-scaleToFill.png'
  17.             }],
  18.             visit: {
  19.                 pv: '1000',
  20.                 uv: '100',
  21.                 sessionDuration: '130'
  22.             },
  23.             likes: '75',
  24.             comments: '13',
  25.             collects: '23',
  26.             shares: '8',
  27.             followers: '35',
  28.             success: res => {
  29.                 console.log('setPageInfo success', res);
  30.             },
  31.             fail: err => {
  32.                 console.log('setPageInfo fail', err);
  33.             }
  34.         })
  35.     }
  36. });

代码示例 2：开发者动态设置 swan.setPageInfo 字段

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • JS
  1. Page({
  2.     onLoad() {
  3.         this.requestTask = new Promise((resolve, reject) => {
  4.             const requestHandler = swan.request({
  5.                 url: '开发者服务器地址',
  6.                 header: {
  7.                     'content-type': 'application/json'
  8.                 },
  9.                 method: 'POST',
  10.                 dataType: 'json',
  11.                 responseType: 'text',
  12.                 data: {
  13.                     key: 'value'
  14.                 },
  15.                 success: res => {
  16.                     this.setData('data', res.data);
  17.                     resolve();
  18.                 },
  19.                 fail: err => {
  20.                     console.log('错误码：' + err.errCode);
  21.                     console.log('错误信息：' + err.errMsg);
  22.                 }
  23.             });
  24.         });
  25.     },
  26.     onShow() {
  27.         this.requestTask.then( requestData => {
  28.             let res = this.getData('data');
  29.             swan.setPageInfo({
  30.                 title: res.title,
  31.                 keywords: res.keywords,
  32.                 description: res.description,
  33.                 articleTitle: res.articleTitle,
  34.                 releaseDate: res.releaseDate,
  35.                 image: res.image,
  36.                 video: res.video,
  37.                 visit: res.visit,
  38.                 likes: '75',
  39.                 comments: '13',
  40.                 collects: '23',
  41.                 shares: '8',
  42.                 followers: '35',
  43.                 success: res => {
  44.                     console.log('setPageInfo success');
  45.                 },
  46.                 fail: err => {
  47.                     console.log('setPageInfo fail', err);
  48.                 }
  49.             })
  50.         })
  51.     }
  52. });

Bug & Tip

  1. releaseData 、 articleTitle 、 image 、 video 、 visit 字段用于宿主 App 信息流抓取收录分发，并有助于搜索准确理解页面内容。
  2. title 字段用于搜索抓取当前页面，articleTitle 字段用于当前页面在宿主 App 信息流中的标题展示。
  3. 当前页面包含视频信息时 video 为必填字段， url 、 duration 、 image 为 video 的必填参数；如当前页面不包含视频信息，可不填写。
  4. 当前页面包含焦点图或者正文图片时 image 为必填字段。
  5. 当前页面能够统计到用户分发、互动和时长等数据时，visit 字段建议填写。开发者可根据页面实际统计的情况完善 pv 、 uv 、 sessionDuration 、 likes 、 comments 、 collects 、 shares 、 followers 字段，若页面不包含以上字段时，可不填写。