百度智能小程序搜索引擎优化

3343次阅读

与普通的 Web 站点一样,Web 化小程序也可以通过一些搜索引擎优化(SEO)手段获取更准确的相关性排名结果。


1.设置页面基础信息

正如在 H5 开发中,会在 HTML 中添加 title、meta description、meta keywords 标签,声明页面相关内容,小程序的页面信息声明通过设置页面基础信息实现。

页面基础信息包括页面的标题、摘要、关键词、页面主图、资源发布时间等,以下仅介绍几个主要信息,更多设置要求详见官方文档《API - 页面基础信息》:

•标题(Title):能够更加快速洞察页面内容,了解该结果与需求的相关性,通常是用来决定用户点击哪个结果的主要信息。所以,使用高质量的页面标题对小程序来说至关重要;

•摘要(Description):小程序首页、栏目页、分类页的摘要非常重要,因为有可能在搜索结果中直接被用户看到,影响到用户是否选择点击查看详情;

•关键词(Keywords):小程序开发者给网站某个页面设定的词汇,以便让搜索引擎更好地理解页面价值。keywords代表了小程序主题内容,无论是首页、内页还是栏目页,关键词一般都代表的是当前页面或者栏目内容的主体。开发者根据实际情况设置即可;

•页面主图(Image):页面中的主体图片地址,必须是页面中真实展示的与页面主体内容相关的图片。有效的图片描述可能会在搜索结果中展示,给用户更直观友好的体验,提升用户点击率。

页面基础信息通过小程序 API swan.setPageInfo 设置,使用示例如下:

Page({

    onShow() {

        swan.setPageInfo({

            title: 'Win10控制面板在哪?怎么找出来-百度经验',

            keywords: 'Win10控制面板在哪?win10面板,电脑软件,电脑,游戏/数码',

            description: 'Win10控制面板在哪?升级了Wi10系统发现:电脑上的【控制面板】不见了,教大家怎么把消失的【控制面板】找回来。',

            image: 'https://example.com/myphoto.jpg'

            ...

        });

    })

);

更多详细使用方式介绍见官方文档《API - 页面基础信息

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

setPageInfo 在 Web 化的内部实现其实就是将调用参数动态设置为 HTML 标签中的 title、meta description、meta keywords 标签,以及符合 The Open Graph protocol 的 meta 标签。 因此,如要调试调用 setPageInfo 之后,页面基础信息是否设置成功,可以检查 Web 化页面渲染后的 HTML Element 中是否成功设置了这几个标签。Web 化页面预览方法将在第二章节介绍。

比如上例中的设置结果如下:

<!DOCTYPE html>

<html>

<head>

    <title>Win10控制面板在哪?怎么找出来-百度经验</title>

...

    <meta name="description" content="Win10控制面板在哪?升级了Wi10系统发现:电脑上的【控制面板】不见了,教大家怎么把消失的【控制面板】找回来。">

    <meta name="keywords" content="Win10控制面板在哪?win10面板,电脑软件,电脑,游戏/数码">

    <meta property="og:description" content="Win10控制面板在哪?升级了Wi10系统发现:电脑上的【控制面板】不见了,教大家怎么把消失的【控制面板】找回来。">

    <meta property="og:image" content="https://example.com/myphoto.jpg">

</head>

<body>...</body>

</html>

swan.setPageInfo 中设置的字段除了在接入自然搜索场景下会被用到,在接入百度信息流中也起到至关重要的作用,详见官方文档 《信息流流量接入

另外,swan.setPageInfo API 不仅用于在流量接入场景下的页面内容声明,在客户端小程序实现中,页面基础信息也会被用作页面分享、页面收藏时的摘要信息。

2.链接跳转

页面中链接跳转对爬虫收录有很重要的价值。 对于普通 H5,页面跳转的方式通常有两种:a标签跳转window.location.href赋值方式跳转。前者直接设置在 HTML 标签中,发现效率和准确性相较后者友好很多。

同理,在小程序中,设置页面跳转的方式对应的也有两种:

navigator 组件,标签式声明

导航类 API,通过用户事件等方式触发调用

为了有效的被爬虫发现,我们强烈建议在两者都能满足需求的情况下,使用 navigator 组件的方式声明链接。

☑ 推荐跳转示例:

<navigator url="/pages/detail/detail">点我跳转</navigator>

☒不推荐跳转示例:

<button bindtap="jump">点我跳转</button>Page({
   jump() {
       swan.navigateTo({
           url: '/pages/detail/detail'
       });
   }
   ...})

3.避免使用 webview 组件

为了方便小程序开发,很多开发者会选择通过 webview 组件嵌套 H5 页面的方式实现小程序。 使用 webview 组件嵌套方式实现的小程序对于爬虫抓取是不友好的。因此,我们不推荐使用这种方式开发小程序。

4.游客模式兼容

由于爬虫的访问环境没有账号登录模拟,在任何页面都将以游客模式访问(游客模式下调用 swan.login 会执行 fail 回调)。因此,开发者希望收录的页面,应考虑对游客模式的兼容。对于无用户信息依赖的页面不添加强制登录的逻辑,用户信息获取失败时仍然展示有效内容。

例如: 在一个博客论坛的博文页,只有评论功能需要在用户登录态完成。那么当在未登录态访问该页面时,应该正常展示文章主体,仅在用户点击评论时再要求登录。而非在页面进入时就强制登录才可正常浏览。

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

由于小程序一般外露入口较集中,比如后续页面都只会通过首页跳转访问,小程序开发者通常很容易忽略页面之间访问的独立性,造成页面实现逻辑与访问路径过于耦合的情况。例如: 在首页请求数据信息后,通过 setStorage 存储本地,并在跳转二级页时读取 storage 中存储的数据,不做任何判空处理直接展示。

考虑 Web 化小程序被爬虫抓取的情况,每个页面都是独立入口访问的。所以,应该避免这种耦合访问顺序的写法,添加必要的兼容处理。 可以在小程序开发完成时,通过单独预览每个 Web 化页面的方式检查是否符合要求。

代码示例:

首页:

Page({

    onShow() {

        swan.request({

            url: 'https//example.com/api/data',

            success: function (res) {

                ...

                swan.setStorageSync('remote-data', res.data);

            }

        });

    }

});

二级页:

// badPage({
   onShow() {
       let data = swan.getStorageSync('remote-data');
       this.render(data);
   }});// betterPage({
   onShow() {
       let data = swan.getStorageSync('remote-data');

       if (!data) {
           swan.request({
               url: 'https//example.com/api/data',
               success: function (res) {
                   ...
                   data = res.data                }
           });
       }

       this.render(data);
   }});

本文由夫唯SEO特训营编辑整理。

搜外专注SEO培训和SEO周边Saas服务解决方案,10年来超过五万学员在此获得技术提升和人脉圈子。

SEO课程包含移动搜索、零基础建站、群站SEO思维、搜外6系统、SEM入门等。

192期A班报名时间7月1日-7月15日,请添加招生客服小沫微信:seowhy2021。 微信扫码添加客服人员

我们的目标是:让非技术人员轻松学会互联网技术。

  • 搜外会员SEO交流群(免费)

    微信扫码添加客服人员
  • 小程序运营交流群(免费)

    微信扫码添加客服人员
  • 搜外会员SEM竞价交流群(免费)

    微信扫码添加客服人员
  • 夫唯学员SEO交流群(VIP)

    微信扫码添加客服人员

扫码获取资源

微信扫码添加客服人员
  • SEO技术实战微信群

    微信扫码添加客服人员
  • 大站流量总监群(审核身份)

    微信扫码添加客服人员
  • Google独立站英文SEO群

    微信扫码添加客服人员
  • SEO团队KPI管理表格

    微信扫码添加客服人员
  • 工业品网站友情链接群

    微信扫码添加客服人员
  • 本地生活服务业友链群

    微信扫码添加客服人员

跟夫唯老师系统学习群站SEO
成为互联网运营推广大咖

掌握SEO技巧、建站前端、群站霸屏、SEM入门、新闻源推广……
Processed in 0.177498 Second , 51 querys.