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

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

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

這里牽扯到兩個問題。

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

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

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

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

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

第三個問題也很常見，因為小程序 SEO 中有一條是能用 navigator 則用 navigator， 而很有可能 nav 的功能被你封裝在了一個組件內(nèi)，常見比如 card 類組件，其本身就是一個 view（記得換成 navigator）下包含了其他元素。而點擊操作之前可能是 bindtap 后根據(jù)組件攜帶的 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 為數(shù)據(jù)庫自增索引
  // 本地保存是為了服務器重啟不至于又來一遍
  fs.readFile('./menu\_id', async (error, menu\_id) => {
    console.log(error)
    if(error) {
      // 如果本地沒有記錄文件，則新建一個從零開始
      fs.writeFileSync('./menu\_id', '0')
    } else {
      id = menu\_id.toString()
      // 某頁面數(shù)據(jù)庫儲存的數(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) => {
        // 添加每一項進數(shù)組
        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 不收錄

完事。