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