抖音开放平台Logo
开发者文档
“/”唤起搜索
控制台
  • 开发教程与代码示例
  • 入门
  • 小程序框架
  • 小程序运行时
  • 自定义组件
  • 基础教程
  • 能力教程
  • 流量入口
  • 在抖音直播间挂载小程序
  • 在抖音短视频上挂载小程序锚点
  • 接入侧边栏复访营销工具-退出挽留玩法
  • 通用能力
  • 推广变现
  • 经营能力
  • 行业能力
  • AI/AR 算法能力
  • 性能优化
  • 安全
  • Web 化接入搜索

    收藏
    我的收藏

    简介

    本 codelabs 会聚焦于小程序如何通过适配 Web 化方案,推送数据到抖音搜索,以便用户能搜索到更多小程序内容。

    视频教程

    前提条件

      •小程序已上线
      •企业主体小程序
      •主营类目:不支持一级类目为【金融】、【电商】申请,其他类目均支持
      •路径为:小程序控制台 > 运营 > 流量配置 > 小程序 Web 化接入。

    目标

    学习内容

      •如何完成小程序 Web 化的页面适配,包括开发、调试、上线。
      •如何推送 Web 化适配后的页面 sitemap 到平台。
      •如何在小程序控制台进行 Web 化数据运营。

    概念和原理

    小程序 Web 化接入搜索的链路如下:
      1.开发者完成页面选取和适配,将需要收录的页面通过平台或者接口的形式推送给小程序平台。
      2.小程序平台将开发者提交的指定小程序页面(sitemap 格式)转化成具体的 H5 页面(该 H5 不会被用户访问到,仅给抖音爬虫访问),并对 H5 页面进行审核。审核通过后,小程序平台将 H5 页面提交给抖音搜索爬虫。
      3.抖音搜索爬虫会按照开发者设置的抓取频次抓取对应转化后的 H5 页面,将页面关键信息抽取出来存储到搜索索引库中。
      4.在用户访问抖音 App 进行搜索时,抖音搜索会匹配到相关的索引库中的内容并展示出小程序卡片。用户点击卡片后可直接跳转至开发者提交的小程序页面。

    页面选取

    推荐选取偏图文类的内容页面。具体来说通常是小程序内具体某业务场景下的内容详情页,例如新闻详情页面、汽车详情页面、小说简介页、漫画简介页等。
    不推荐提交偏时效性或与用户信息相关的页面,例如首页、推荐列表页、个人信息页等。

    页面适配

    页面信息设置

    页面信息包括 title、keywords、description 等内容,未设置这些信息会影响爬虫抓取和算法理解效果。
    通过 tt.setPageInfo 设置页面 Web 化后的页面信息,入参为:
    属性名
    类型
    默认值
    必填
    说明
    最低支持版本
    title
    string
    ​
    是
    页面文章标题,根据页面的主要内容设置,且需要每个页面尽量唯一。需要根据页面接口返回值进行设置。 长度限制 70 字符。
    3.22.0
    keywords
    string
    ​
    是
    页面文章关键词,多个关键词之间使用英文逗号 “,” 隔开。
    3.22.0
    description
    string
    ​
    是
    页面文章摘要、描述信息。 长度限制 70 字符。
    3.22.0
    success
    function
    ​
    否
    接口调用成功的回调函数
    3.22.0
    fail
    function
    ​
    否
    接口调用失败的回调函数
    3.22.0
    complete
    function
    ​
    否
    接口调用结束的回调函数(调用成功、失败都会执行)
    3.22.0

    代码示例

    Page({ onLoad() { const data = fetchData(); tt.setPageInfo && tt.setPageInfo({ title: data.title, keywords: data.keywords, description: data.description, }); }, fetchData() { // 具体的页面信息请求接口 tt.request(); return { title: "小程序web化接入", description: "Web化是平台通过技术手段帮助抖音小程序自动转化得到的一个 H5 版本的小程序,其功能与展示形式与小程序一致。在对小程序进行Web化后,小程序的页面就可以被搜索爬虫抓取,从而可以以自然结果的样式在搜索结果中展现。这个H5版本的小程序不会被普通用户直接访问到,仅用于被搜索的爬虫抓取内容。用户在C端访问时,点击搜索卡片后打开的仍然是小程序。", keywords: "web化,搜索,小程序", }; }, });

    页面调试

    需进行 IDE 调试,以保证页面在 Web 化后渲染正常。
    由于 Web 化后的页面是供爬虫抓取,Web 化环境的特殊性导致其不支持部分小程序能力。
    完成页面适配后,可以在 IDE 进行预览调试,本地验收效果。
    抖音开发者工具提供测试版本支持 Web 化预览及配置检测。下载地址:

    使用示例

    页面渲染正常且正确设置页面信息,Web 化检测全部通过。
    页面渲染异常,Web 化检测未通过,提示白屏。
    未正确设置页面信息,Web 化检测未通过。
    若小程序使用不支持的能力,但不阻塞页面渲染,Web 化检测通过并打印不支持能力调用次数。

    页面发布

    在 IDE 完成 Web 化页面适配后,需要把适配后的代码更新到线上,进行小程序正式版发布。
    下一章节将介绍页面适配完成后,如何提交页面收录。

    页面收录

    抓取频次 Quota 设置

    重点说明:抓取频次与提交的页面量关系,包括 QPS 的计算。
    ​

    页面提交数量

    单日提交的路径上限为 1000。若有大量存量优质内容需要快速收录,可与对接运营或研发单独沟通。

    爬虫抓取频次

    爬虫的抓取频次,可以在后台进行设置,建议抓取频次设置为每日提交页面数量的两倍。 这是由于入搜索之前会由治理完成审核,因此同样的页面会被请求两次。

    QPS 计算

    计算公式:
      •页面访问 QPS = Math.min (抓取上限,单日提交页面数量 * 2) / (24 * 60 * 60)。
      •开发者服务器的 QPS = 页面访问 QPS * 页面内的接口请求数。
    举例说明:
      •假如设置抓取频次上限为 80 万次/天,单日提交页面数量为 100 万,那么实际入库数量每日为 40 万,页面访问的 QPS 为 800000/(24*60*60) 约等于 9.25,开发者服务器的 QPS 等于页面访问 QPS 9.25 * 页面内的接口请求数。
      •假如设置抓取频次上限为 200 万次/天,单日提交页面数量为 100 万,那么实际入库数量每日为 100 万,页面访问 QPS 为 2000000/(24*60*60)约等于 23。

    页面提交

    开发者可以向平台提交小程序 sitemap 文件,即由小程序页面地址所组成的文件,可通过在开发者平台上上传文件或通过服务端 OpenAPI 来提交页面。文件用于标记哪些页面内容支持被抖音索引和搜索展示,有如下格式和限制:
      •纯文本格式,每行填入一个路径,行与行之间分隔符为 '\n'
      •文件整体大小小于10M,路径数需要小于10w,单个路径大小需要小于200字节
      •路径需要符合小程序页面链接的path+query要求
    样例:
    pages/index/1?t=1 pages/index/2?t=2 pages/index/3?t=3 ....

    在开发者平台提交页面

    通过 OpenAPI 提交页面

    示例代码

    Go
    Java
    Python
    ​
    package main import ( "fmt" "io/ioutil" "net/http" "strings" ) func main() { url := "https://open.douyin.com/api/apps/v1/search/upload_sitemap/" method := "POST" payload := strings.NewReader(`{ "app_id": "tt5daf2b12c285xxxx", "page_paths": [ "pages/index/1?t=1", "pages/index/2?t=2", "pages/index/3?t=3" ] }`) client := &http.Client{} req, err := http.NewRequest(method, url, payload) if err != nil { fmt.Println(err) return } req.Header.Add("access-token", "clt.78743ab256619da1fde8efabfb7c50da1jJz6mjqx0xwukNHcIdhIKWaAbOU_lq") req.Header.Add("Content-Type", "application/json") res, err := client.Do(req) if err != nil { fmt.Println(err) return } defer res.Body.Close() body, err := ioutil.ReadAll(res.Body) if err != nil { fmt.Println(err) return } fmt.Println(string(body)) }
    ​

    索引删除

    开发者可向平台提交需要删除的已索引资源,包括死链、低质及不希望在抖音搜索中展现的内容,提交内容将在抖音搜索结果中屏蔽,该屏蔽操作将在 30 分钟后生效。可通过开发者平台或服务端 OpenAPI 来删除索引。注意以下两点:
      •删除的索引无法再恢复。
      •提交的文件格式类似 sitemap 文件格式。

    在开发者平台删除索引

    通过 OpenAPI 删除索引

    参考删除索引。

    示例代码

    Go
    Java
    Python
    ​
    package main import ( "fmt" "io/ioutil" "net/http" "strings" ) func main() { url := "https://open.douyin.com/api/apps/v1/search/delete_index/" method := "POST" payload := strings.NewReader(`{ "app_id": "tt5daf2b12c285xxxx", "name":"index", "path_list": [ "pages/index/1?t=1", "pages/index/2?t=2", "pages/index/3?t=3" ] }`) client := &http.Client{} req, err := http.NewRequest(method, url, payload) if err != nil { fmt.Println(err) return } req.Header.Add("access-token", "clt.78743ab256619da1fde8efabfb7c50da1jJz6mjqx0xwukNHcIdhIKWaAbOU_lq") req.Header.Add("Content-Type", "application/json") res, err := client.Do(req) if err != nil { fmt.Println(err) return } defer res.Body.Close() body, err := ioutil.ReadAll(res.Body) if err != nil { fmt.Println(err) return } fmt.Println(string(body)) }
    ​

    数据运营

    在完成页面收录后,开发者可以在小程序控制台查看具体的数据指标,其中包括页面爬取状态、页面收录数据、小程序搜索卡片的曝光量和点击量。
    模块
    数据口径
    统计口径
    流量概况
    搜索曝光量
    在时间筛选范围内的用户浏览小程序搜索卡片产生的曝光数据
    搜索点击量
    在时间筛选范围内的用户点击小程序搜索卡片的数据
    索引概况
    总收录页面数
    截止至更新时间的收录成功页面数据总数(页面重复提交只计入最新一次提交结果)
    总错误页面数
    截止至更新时间的收录失败数据总数(页面重复提交只计入最新一次提交结果)
    日折线图—收录页面数
    总收录页面数每日变化趋势
    日折线图—错误页面数
    总错误页面数每日变化趋势
    索引页面错误详情
    页面收录失败明细
    截至更新时间的收录失败原因聚合统计

    总结

    至此你已完成小程序 Web 化接入搜索 Codelab。
    你在该 Codelab 中了解了:
      •如何完成页面适配
      •如何完成页面收录
      •如何查看收录及搜索数据
    更多资料请参考 Web 化接入搜索介绍。