半個(gè)月前給客戶做了一個(gè)老小程序的 SEO 的初步優(yōu)化計(jì)劃，合計(jì)費(fèi)時(shí)約 2 天左右，個(gè)中細(xì)節(jié)比較多， 這里舉例兩個(gè)比較重要，但是又不算難改的優(yōu)化點(diǎn)。

前端優(yōu)化：跳轉(zhuǎn)的 URL 可以直接打開

簡單可以測試為，分享出去的卡片，均可以直接打開（請務(wù)必測試是否登錄，神坑）。

這里牽扯到兩個(gè)問題。

• 頁面渲染邏輯
• query 所攜帶的參數(shù)
• 組件內(nèi) URL 問題

第一個(gè)問題會(huì)牽扯到后端接口下發(fā)的內(nèi)容，比如這樣的場景：

后端下發(fā)了一個(gè)列表數(shù)據(jù)，種種原因?qū)е铝斜碇芯桶它c(diǎn)擊列表后詳情所要展示的所有內(nèi)容，然后分享出去的是詳情。這種情況基本是一個(gè)分享一個(gè)炸，自然微信小程序的頁面爬蟲也是個(gè)個(gè) GG。這種情況就得前后端一起優(yōu)化，獨(dú)立一個(gè) /x/detail 的接口，通過 id 等方式可獲取詳情的詳情數(shù)據(jù)，并且注意，分享頁務(wù)必接口設(shè)定無需登錄。

然后就是這個(gè) id 之類的東西如何帶進(jìn)去，這就是第二個(gè)問題。

有時(shí)候可能會(huì)因?yàn)橐恍┨厥庠蛟?localStorage 或干脆直接掛在 getApp() 實(shí)例內(nèi)存上，臨時(shí)儲(chǔ)存上個(gè)頁面的 key，然后下個(gè)頁面出來后在 onLoad 中拿這個(gè) key 去使用。如果你有這個(gè)操作或者歷史遺留問題，務(wù)必將其放在下個(gè)頁面的 path 上，掛載在 query 后面。原因就是爬蟲不會(huì)從上頁面給你帶內(nèi)存數(shù)據(jù)，更不會(huì)驗(yàn)證本地緩存是否有效。

第三個(gè)問題也很常見，因?yàn)樾〕绦?SEO 中有一條是能用 navigator 則用 navigator， 而很有可能 nav 的功能被你封裝在了一個(gè)組件內(nèi)，常見比如 card 類組件，其本身就是一個(gè) view（記得換成 navigator）下包含了其他元素。而點(diǎn)擊操作之前可能是 bindtap 后根據(jù)組件攜帶的 item 計(jì)算出來的 path，而 item 是父級頁面獲取的接口 list 元素。如果出現(xiàn)這種情況，那么首先把組件的根 view 換成navigator，刪除 bindtap 與相應(yīng)事件，給 navigator 的 url 屬性寫上 item.url（或類似），然后在父級頁面獲取 list 的地方，多一個(gè)步驟，把 list 給 map 一下，或者 forEach 一下，給 list 的元素分別加上 url，這個(gè) url 的計(jì)算在這里直接進(jìn)行即可。

服務(wù)端優(yōu)化：使用頁面路徑推送能力

這個(gè)就跟搜索引擎的站長提交鏈接地址一樣，只不過這里提交的是小程序頁面 path 與 query。多的不說，直接 NodeJS 代碼參考下即可。

function pushWeixinPages() {
  // 默認(rèn)起始 ID
  let id = 0
  // 這里放個(gè)本地文件保存上次推送的頁面 ID，建議 ID 為數(shù)據(jù)庫自增索引
  // 本地保存是為了服務(wù)器重啟不至于又來一遍
  fs.readFile('./menu\_id', async (error, menu\_id) => {
    console.log(error)
    if(error) {
      // 如果本地沒有記錄文件，則新建一個(gè)從零開始
      fs.writeFileSync('./menu\_id', '0')
    } else {
      id = menu\_id.toString()
      // 某頁面數(shù)據(jù)庫儲(chǔ)存的數(shù)據(jù)
      let push\_sql = \`
        SELECT \[selector\] FROM \[from\] where \[where\] order by id;
      \`
      // console.log(push\_sql)
      // 執(zhí)行數(shù)據(jù)庫語法，請自行封裝
      let ret = await util.sqlHandle(push\_sql)
      // 推送的頁面數(shù)組
      let pages = \[\]
      ret.forEach(({ id }, idx) => {
        // 添加每一項(xiàng)進(jìn)數(shù)組
        pages.push({
          path: '/pages/detail/index',
          query: \`id=${id}\`
        })
        // 最后一項(xiàng)的時(shí)候，本地存一下進(jìn)度 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,
      })
      // 其他，愿意的話可以做做安全判斷
    }
  })
}

其他語言參考處理即可，具體業(yè)務(wù)具體邏輯。

其他優(yōu)化方面

順便提一下，以下幾方面：

1. onShareAppMessage 時(shí)候配置 title 與 image
2. sitemap
3. web-view 不收錄

完事。