微信小程序简易SEO优化

半个月前给客户做了一个老小程序的 SEO 的初步优化计划，合计费时约 2 天左右，个中细节比较多， 这里举例两个比较重要，但是又不算难改的优化点。

---

前端优化：跳转的 URL 可以直接打开

简单可以测试为，分享出去的卡片，均可以直接打开（请务必测试是否登录，神坑）。

这里牵扯到两个问题。

• 页面渲染逻辑
• query 所携带的参数
• 组件内 URL 问题

第一个问题会牵扯到后端接口下发的内容，比如这样的场景：

后端下发了一个列表数据，种种原因导致列表中就包含了点击列表后详情所要展示的所有内容，然后分享出去的是详情。这种情况基本是一个分享一个炸，自然微信小程序的页面爬虫也是个个 GG。这种情况就得前后端一起优化，独立一个 /x/detail 的接口，通过 id 等方式可获取详情的详情数据，并且注意，分享页务必接口设定无需登录。

然后就是这个 id 之类的东西如何带进去，这就是第二个问题。

有时候可能会因为一些特殊原因在 localStorage 或干脆直接挂在 getApp() 实例内存上，临时储存上个页面的 key，然后下个页面出来后在 onLoad 中拿这个 key 去使用。如果你有这个操作或者历史遗留问题，务必将其放在下个页面的 path 上，挂载在 query 后面。原因就是爬虫不会从上页面给你带内存数据，更不会验证本地缓存是否有效。

第三个问题也很常见，因为小程序 SEO 中有一条是能用 navigator 则用 navigator， 而很有可能 nav 的功能被你封装在了一个组件内，常见比如 card 类组件，其本身就是一个 view（记得换成 navigator）下包含了其他元素。而点击操作之前可能是 bindtap 后根据组件携带的 item 计算出来的 path，而 item 是父级页面获取的接口 list 元素。如果出现这种情况，那么首先把组件的根 view 换成navigator，删除 bindtap 与相应事件，给 navigator 的 url 属性写上 item.url（或类似），然后在父级页面获取 list 的地方，多一个步骤，把 list 给 map 一下，或者 forEach 一下，给 list 的元素分别加上 url，这个 url 的计算在这里直接进行即可。

---

服务端优化：使用页面路径推送能力

这个就跟搜索引擎的站长提交链接地址一样，只不过这里提交的是小程序页面 path 与 query。多的不说，直接 NodeJS 代码参考下即可。

function pushWeixinPages() {
  // 默认起始 ID
  let id = 0
  // 这里放个本地文件保存上次推送的页面 ID，建议 ID 为数据库自增索引
  // 本地保存是为了服务器重启不至于又来一遍
  fs.readFile('./menu\_id', async (error, menu\_id) => {
    console.log(error)
    if(error) {
      // 如果本地没有记录文件，则新建一个从零开始
      fs.writeFileSync('./menu\_id', '0')
    } else {
      id = menu\_id.toString()
      // 某页面数据库储存的数据
      let push\_sql = \`
        SELECT \[selector\] FROM \[from\] where \[where\] order by id;
      \`
      // console.log(push\_sql)
      // 执行数据库语法，请自行封装
      let ret = await util.sqlHandle(push\_sql)
      // 推送的页面数组
      let pages = \[\]
      ret.forEach(({ id }, idx) => {
        // 添加每一项进数组
        pages.push({
          path: '/pages/detail/index',
          query: \`id=${id}\`
        })
        // 最后一项的时候，本地存一下进度 ID
        if(idx === ret.length - 1) {
          fs.writeFileSync('./menu\_id', menu.id)
        }
      })
      // 获取微信 access\_token，请自行封装
      let { data } = await local.get('/wx/access\_token')
      // 推给微信
      await axios.post(\`https://api.weixin.qq.com/wxa/search/wxaapi\_submitpages?access\_token=${data.access\_token}\`, {
        pages,
      })
      // 其他，愿意的话可以做做安全判断
    }
  })
}

其他语言参考处理即可，具体业务具体逻辑。

---

其他优化方面

顺便提一下，以下几方面：

1. onShareAppMessage 时候配置 title 与 image
2. sitemap
3. web-view 不收录

---

完事。