半個月前給客戶做了一個老小程序的 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ù)，并且注意，分享頁務必接口設(shè)定無需登錄。

然后就是這個 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)化方面

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

onShareAppMessage 時候配置 title 與 image

sitemap

web-view 不收錄

完事。