國家高新技術網絡營銷企業
16年全網營銷實戰落地品牌
廣州網站建設_廣州關鍵詞優化_競價托管_全網營銷推廣公司-信燁官網
全國服務熱線
020-37738613手機：158 1881 8276
國家高新技術網絡營銷企業
16年全網營銷實戰落地品牌
全國服務熱線
020-37738613
如何讓小程序接入自然搜索能力?
上節課我們講到：
資源收錄--介紹通過Web化實現小程序的破殼檢索收錄
Web 化預覽與調試--講解開發者如何預覽和調試Web小程序
需要回顧一下的同學點擊這里
讓我們開啟今天的重頭戲：搜索引擎優化
搜索引擎優化：介紹小程序開發中應該注意哪些搜索引擎優化手段;
與普通的 Web 站點一樣，Web 化小程序也可以通過一些搜索引擎優化(SEO)手段獲取更準確的相關性排名結果。
1. 設置頁面基礎信息
正如在 H5 開發中，會在 HTML 中添加 title、meta description、meta keywords 標簽，聲明頁面相關內容，小程序的頁面信息聲明通過設置頁面基礎信息實現。
頁面基礎信息包括頁面的標題、摘要、關鍵詞、頁面主圖、資源發布時間等，以下僅介紹幾個主要信息，更多設置要求詳見官方文檔《API - 頁面基礎信息》：
標題(Title)：能夠更加快速洞察頁面內容，了解該結果與需求的相關性，通常是用來決定用戶點擊哪個結果的主要信息。所以，使用高質量的頁面標題對小程序來說至關重要;
摘要(Description)：小程序首頁、欄目頁、分類頁的摘要非常重要，因為有可能在搜索結果中直接被用戶看到，影響到用戶是否選擇點擊查看詳情;
關鍵詞(Keywords)：小程序開發者給網站某個頁面設定的詞匯，以便讓搜索引擎更好地理解頁面價值。keywords代表了小程序主題內容，無論是首頁、內頁還是欄目頁，關鍵詞一般都代表的是當前頁面或者欄目內容的主體。開發者根據實際情況設置即可;
頁面主圖(Image)：頁面中的主體圖片地址，必須是頁面中真實展示的與頁面主體內容相關的圖片。有效的圖片描述可能會在搜索結果中展示，給用戶更直觀友好的體驗，提升用戶點擊率。
頁面基礎信息通過小程序 API swan.setPageInfo設置，使用示例如下:
Page({ onShow() { swan.setPageInfo({
title: 'Win10控制面板在哪?怎么找出來-百度經驗',
keywords: 'Win10控制面板在哪?win10面板,電腦軟件,電腦,游戲/數碼',
description: 'Win10控制面板在哪?升級了Wi10系統發現：電腦上的【控制面板】不見了，教大家怎么把消失的【控制面板】找回來。',
image: 'https://example.com/myphoto.jpg'
...
});
})
);
更多詳細使用方式介紹見官方文檔《API - 頁面基礎信息》
頁面基礎信息的設置粒度是頁面級的，因此強烈建議在 Page 的 onshow 生命周期中調用，以保證每次頁面切換都能有效設置當前頁的頁面基礎信息。
setPageInfo 在 Web 化的內部實現其實就是將調用參數動態設置為 HTML 標簽中的 title、meta description、meta keywords 標簽，以及符合 The Open Graph protocol 的 meta 標簽。因此，想要調試調用 setPageInfo 之后，頁面基礎信息是否設置成功，可以檢查 Web 化頁面渲染后的 HTML Element 中是否成功設置了這幾個標簽。Web 化頁面預覽方法將在第三章節介紹。
比如上例中的設置結果如下：
<html>
<head>
<title>Win10控制面板在哪？怎么找出來-百度經驗button>
Page({ jump() { swan.navigateTo({ url: '/pages/detail/detail' }); } ...})
3. 盡量避免使用 webview 組件
為了方便小程序開發，很多開發者會選擇通過 webview 組件嵌套 H5 頁面的方式實現小程序。 使用 webview 組件嵌套方式實現的小程序對于爬蟲抓取是不友好的。因此，我們不推薦使用這種方式開發小程序。
4. 游客模式兼容
由于爬蟲的訪問環境沒有賬號登錄模擬，在任何頁面都將以游客模式訪問(游客模式下調用 swan.login 會執行 fail 回調)。因此，開發者希望收錄的頁面，應考慮對游客模式的兼容。對于無用戶信息依賴的頁面不添加強制登錄的邏輯，用戶信息獲取失敗時仍然展示有效內容。
例如：在一個博客論壇的博文頁，只有評論功能需要在用戶登錄態完成。那么當在未登錄態訪問該頁面時，應該正常展示文章主體，僅在用戶點擊評論時再要求登錄。而非在頁面進入時就強制登錄才可正常瀏覽。
5. 避免頁面間訪問順序依賴
由于小程序一般外露入口較集中，比如后續頁面都只會通過首頁跳轉訪問，小程序開發者通常很容易忽略頁面之間訪問的獨立性，造成頁面實現邏輯與訪問路徑過于耦合的情況。例如：在首頁請求數據信息后，通過 setStorage 存儲本地，并在跳轉二級頁時讀取 storage 中存儲的數據，不做任何判空處理直接展示。
考慮 Web 化小程序被爬蟲抓取的情況，每個頁面都是獨立入口訪問的。所以，應該避免這種耦合訪問順序的寫法，添加必要的兼容處理。可以在小程序開發完成時，通過單獨預覽每個 Web 化頁面的方式檢查是否符合要求。
代碼示例:
首頁：
Page({ onShow() { swan.request({
url: 'https//example.com/api/data', success: function (res) { ...
swan.setStorageSync('remote-data', res.data);
}
});
}
});
二級頁：
// badPage({ onShow() { let data = swan.getStorageSync('remote-data'); this.render(data);
}
});// betterPage({ onShow() { let data = swan.getStorageSync('remote-data'); if (!data) { swan.request({
url: 'https//example.com/api/data', success: function (res) { ...
data = res.data
}
});
} this.render(data);
}
});
其他開發建議：列舉小程序開發中，考慮Web化實現，應該注意哪些實現問題
除了搜索引擎優化相關建議，下面是針對開發者的一些額外的開發建議。
1. 如何在運行時識別 Web 化環境
在代碼中，可以通過 API getSystemInfo 判斷是否為 Web 化 環境。Web 化環境下，調用swan.getSystemInfo()得到的系統信息中，platform 值為“web”。
通常情況下，為保證抓取內容相關性和用戶體驗一致性，不建議開發者區分 Web 化環境做差異化實現。Web 化環境標識主要服務于諸如區分環境統計等需求場景。
2. 避免使用新的ESNEXT語法
考慮到 Web 化可能會在各種瀏覽器版本打開，源碼實現時盡量避免使用過新的 ESNEXT 特性。
3. Fixed 布局樣式
由于 Web 化中 header 和 tabBar 是由 H5 實現的，包含在窗口中;而小程序中的視窗是除去 header 和 tabBar 的部分。兩種視窗的差異會導致 fixed 定位的差異。因此開發中盡量避免使用fixed定位方式。如圖：
總結
百度智能小程序提供了接入自然搜索的能力，后臺會通過自動將小程序生成為 Web 化小程序的方式檢索和收錄小程序資源。除了搜索引擎自主發現，開發者還可以通過提交 sitemap 和 URL 映射規則的方式實現更高效的資源收錄。小程序開發過程中通過搜索引擎友好的實現方式可以提高自然搜索結果排名，提高用戶搜索體驗。
全國服務熱線
020-37738613
