今天和大家講講搜索引擎優(yōu)化?
搜索引擎優(yōu)化：介紹小程序開(kāi)發(fā)中應該注意哪些搜索引擎優(yōu)化手段；
與普通的 Web 站點(diǎn)一樣，Web 化小程序也可以通過(guò)一些搜索引擎優(yōu)化（SEO）手段獲取更準確的相關(guān)性排名結果。
1. 設置頁(yè)面基礎信息
正如在 H5 開(kāi)發(fā)中，會(huì )在 HTML 中添加 title、meta description、meta keywords 標簽，聲明頁(yè)面相關(guān)內容，小程序的頁(yè)面信息聲明通過(guò)設置頁(yè)面基礎信息實(shí)現。
頁(yè)面基礎信息包括頁(yè)面的標題、摘要、關(guān)鍵詞、頁(yè)面主圖、資源發(fā)布時(shí)間等，以下僅介紹幾個(gè)主要信息，更多設置要求詳見(jiàn)官方文檔《API - 頁(yè)面基礎信息》：
• 標題（Title）：能夠更加快速洞察頁(yè)面內容，了解該結果與需求的相關(guān)性，通常是用來(lái)決定用戶(hù)點(diǎn)擊哪個(gè)結果的主要信息。所以，使用高質(zhì)量的頁(yè)面標題對小程序來(lái)說(shuō)至關(guān)重要；
• 摘要（Description）：小程序首頁(yè)、欄目頁(yè)、分類(lèi)頁(yè)的摘要非常重要，因為有可能在搜索結果中直接被用戶(hù)看到，影響到用戶(hù)是否選擇點(diǎn)擊查看詳情；
• 關(guān)鍵詞（Keywords）：小程序開(kāi)發(fā)者給網(wǎng)站某個(gè)頁(yè)面設定的詞匯，以便讓搜索引擎更好地理解頁(yè)面價(jià)值。keywords代表了小程序主題內容，無(wú)論是首頁(yè)、內頁(yè)還是欄目頁(yè)，關(guān)鍵詞一般都代表的是當前頁(yè)面或者欄目?jì)热莸闹黧w。開(kāi)發(fā)者根據實(shí)際情況設置即可；
• 頁(yè)面主圖（Image）：頁(yè)面中的主體圖片地址，必須是頁(yè)面中真實(shí)展示的與頁(yè)面主體內容相關(guān)的圖片。有效的圖片描述可能會(huì )在搜索結果中展示，給用戶(hù)更直觀(guān)友好的體驗，提升用戶(hù)點(diǎn)擊率。
頁(yè)面基礎信息通過(guò)小程序 API swan.setPageInfo設置，使用示例如下：
更多詳細使用方式介紹見(jiàn)官方文檔《API - 頁(yè)面基礎信息》
頁(yè)面基礎信息的設置粒度是頁(yè)面級的，因此強烈建議在 Page 的 onshow 生命周期中調用，以保證每次頁(yè)面切換都能有效設置當前頁(yè)的頁(yè)面基礎信息。
setPageInfo 在 Web 化的內部實(shí)現其實(shí)就是將調用參數動(dòng)態(tài)設置為 HTML 標簽中的 title、meta description、meta keywords 標簽，以及符合 The Open Graph protocol 的 meta 標簽。因此，想要調試調用 setPageInfo 之后，頁(yè)面基礎信息是否設置成功，可以檢查 Web 化頁(yè)面渲染后的 HTML Element 中是否成功設置了這幾個(gè)標簽。Web 化頁(yè)面預覽方法將在第三章節介紹。
比如上例中的設置結果如下：
swan.setPageInfo 中設置的字段除了在接入自然搜索場(chǎng)景下會(huì )被用到，在接入百度信息流中也起到至關(guān)重要的作用，詳見(jiàn)官方文檔?《信息流流量接入》
另外，swan.setPageInfo API 不僅用于在流量接入場(chǎng)景下的頁(yè)面內容聲明，在客戶(hù)端小程序實(shí)現中，頁(yè)面基礎信息也會(huì )被用作頁(yè)面分享、頁(yè)面收藏時(shí)的摘要信息。
2. 鏈接跳轉
頁(yè)面中的鏈接跳轉對爬蟲(chóng)收錄有很重要的價(jià)值。對于普通 H5，頁(yè)面跳轉的方式通常有兩種：a 標簽跳轉和 window.location.href 賦值方式跳轉。前者直接設置在 HTML 標簽中，發(fā)現效率和準確性相較后者友好很多。
同理，在小程序中，設置頁(yè)面跳轉的方式對應的也有兩種：
• navigator 組件，標簽式聲明
• 導航類(lèi) API，通過(guò)用戶(hù)事件等方式觸發(fā)調用
為了有效的被爬蟲(chóng)發(fā)現，我們強烈建議在兩者都能滿(mǎn)足需求的情況下，使用 navigator 組件的方式聲明鏈接。
推薦跳轉示例：
不推薦跳轉示例：
3. 盡量避免使用 webview 組件
為了方便小程序開(kāi)發(fā)，很多開(kāi)發(fā)者會(huì )選擇通過(guò) webview 組件嵌套 H5 頁(yè)面的方式實(shí)現小程序。?使用 webview 組件嵌套方式實(shí)現的小程序對于爬蟲(chóng)抓取是不友好的。因此，我們不推薦使用這種方式開(kāi)發(fā)小程序。
4. 游客模式兼容
由于爬蟲(chóng)的訪(fǎng)問(wèn)環(huán)境沒(méi)有賬號登錄模擬，在任何頁(yè)面都將以游客模式訪(fǎng)問(wèn)（游客模式下調用 swan.login 會(huì )執行 fail 回調）。因此，開(kāi)發(fā)者希望收錄的頁(yè)面，應考慮對游客模式的兼容。對于無(wú)用戶(hù)信息依賴(lài)的頁(yè)面不添加強制登錄的邏輯，用戶(hù)信息獲取失敗時(shí)仍然展示有效內容。
例如：在一個(gè)博客論壇的博文頁(yè)，只有評論功能需要在用戶(hù)登錄態(tài)完成。那么當在未登錄態(tài)訪(fǎng)問(wèn)該頁(yè)面時(shí)，應該正常展示文章主體，僅在用戶(hù)點(diǎn)擊評論時(shí)再要求登錄。而非在頁(yè)面進(jìn)入時(shí)就強制登錄才可正常瀏覽。
5. 避免頁(yè)面間訪(fǎng)問(wèn)順序依賴(lài)
由于小程序一般外露入口較集中，比如后續頁(yè)面都只會(huì )通過(guò)首頁(yè)跳轉訪(fǎng)問(wèn)，小程序開(kāi)發(fā)者通常很容易忽略頁(yè)面之間訪(fǎng)問(wèn)的獨立性，造成頁(yè)面實(shí)現邏輯與訪(fǎng)問(wèn)路徑過(guò)于耦合的情況。例如：在首頁(yè)請求數據信息后，通過(guò) setStorage 存儲本地，并在跳轉二級頁(yè)時(shí)讀取 storage 中存儲的數據，不做任何判空處理直接展示。
考慮 Web 化小程序被爬蟲(chóng)抓取的情況，每個(gè)頁(yè)面都是獨立入口訪(fǎng)問(wèn)的。所以，應該避免這種耦合訪(fǎng)問(wèn)順序的寫(xiě)法，添加必要的兼容處理?？梢栽谛〕绦蜷_(kāi)發(fā)完成時(shí)，通過(guò)單獨預覽每個(gè) Web 化頁(yè)面的方式檢查是否符合要求。
代碼示例:
首頁(yè)：
二級頁(yè)：
其他開(kāi)發(fā)建議：列舉小程序開(kāi)發(fā)中，考慮Web化實(shí)現，應該注意哪些實(shí)現問(wèn)題。
除了搜索引擎優(yōu)化相關(guān)建議，下面是針對開(kāi)發(fā)者的一些額外的開(kāi)發(fā)建議。
1. 如何在運行時(shí)識別 Web 化環(huán)境
在代碼中，可以通過(guò) API getSystemInfo 判斷是否為Web化環(huán)境。Web化環(huán)境下，調用swan.getSystemInfo()得到的系統信息中，platform值為“web”。
通常情況下，為保證抓取內容相關(guān)性和用戶(hù)體驗一致性，不建議開(kāi)發(fā)者區分 Web 化環(huán)境做差異化實(shí)現。Web 化環(huán)境標識主要服務(wù)于諸如區分環(huán)境統計等需求場(chǎng)景。
2. 避免使用新的ESNEXT語(yǔ)法
考慮到 Web 化可能會(huì )在各種瀏覽器版本打開(kāi)，源碼實(shí)現時(shí)盡量避免使用過(guò)新的 ESNEXT 特性。
3. Fixed 布局樣式
由于 Web 化中 header 和 tabBar 是由 H5 實(shí)現的，包含在窗口中；而小程序中的視窗是除去 header 和 tabBar 的部分。兩種視窗的差異會(huì )導致 fixed 定位的差異。因此開(kāi)發(fā)中盡量避免使用fixed定位方式。如圖：
總結
百度智能小程序提供了接入自然搜索的能力，后臺會(huì )通過(guò)自動(dòng)將小程序生成為 Web 化小程序的方式檢索和收錄小程序資源。除了搜索引擎自主發(fā)現，開(kāi)發(fā)者還可以通過(guò)提交 sitemap 和 URL 映射規則的方式實(shí)現更高效的資源收錄。小程序開(kāi)發(fā)過(guò)程中通過(guò)搜索引擎友好的實(shí)現方式可以提高自然搜索結果排名，提高用戶(hù)搜索體驗。
