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

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

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

這里牽扯到兩個問題。

• 頁面渲染邏輯
• query 所攜帶的參數
• 組件內 URL 問題

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

后端下發(fā)了一個列表數據，種種原因導致列表中就包含了點擊列表后詳情所要展示的所有內容，然后分享出去的是詳情。這種情況基本是一個分享一個炸，自然微信小程序的頁面爬蟲也是個個 GG。這種情況就得前后端一起優(yōu)化，獨立一個 /x/detail 的接口，通過 id 等方式可獲取詳情的詳情數據，并且注意，分享頁務必接口設定無需登錄。

然后就是這個 id 之類的東西如何帶進去，這就是第二個問題。

有時候可能會因為一些特殊原因在 localStorage 或干脆直接掛在 getApp() 實例內存上，臨時儲存上個頁面的 key，然后下個頁面出來后在 onLoad 中拿這個 key 去使用。如果你有這個操作或者歷史遺留問題，務必將其放在下個頁面的 path 上，掛載在 query 后面。原因就是爬蟲不會從上頁面給你帶內存數據，更不會驗證本地緩存是否有效。

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

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

這個就跟搜索引擎的站長提交鏈接地址一樣，只不過這里提交的是小程序頁面 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)
      // 執(zhí)行數據庫語法，請自行封裝
      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,
      })
      // 其他，愿意的話可以做做安全判斷
    }
  })
}

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

其他優(yōu)化方面

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

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

完事。