掌握 2019 年 Google I/O 大會的最新消息和深入分析資訊。
Google 搜尋正有重大進展，我們非常期待能在 2019 年的 Google I/O 大會上分享這些消息！
在這篇文章中，我們會重點說明讓 JavaScript 網頁應用程式能在 Google 搜尋結果中曝光的最佳做法，包括：
- 可持續更新的新版 Googlebot
- Googlebot 的檢索、轉譯及索引管道
- 特徵偵測和錯誤處理
- 轉譯策略
- Google 搜尋中的網站測試工具
- 常見挑戰與可能的解決方案
- JavaScript 網頁應用程式搜尋引擎最佳化的最佳做法
認識歷久不衰的 Googlebot
今年，我們宣布了眾所期待的新版常態 Googlebot。
Googlebot 現在使用新式 Chromium 引擎，針對 Google 搜尋轉譯網站。更重要的是，我們會測試較新版本的 Chromium，以「確保」Googlebot 持續更新，通常在 Chrome 穩定版發布後的數週內。這項公告對網頁開發人員和 SEO 來說是重大的消息，因為 Googlebot 將在此宣布推出 1000 多項新功能，例如 ES6+、IntersectionObserver 和 Web 元件 v1。
瞭解 Googlebot 的運作方式
Googlebot 是包含多個元件的管線，現在我們來瞭解 Googlebot 如何為 Google 搜尋建立網頁索引。
整體程序的運作方式如下：
- Googlebot 會將網址排入檢索佇列。
- 並根據檢索預算擷取含有 HTTP 要求的網址。
- Googlebot 會掃描 HTML 中的連結，然後將找到的連結排入檢索佇列。
- 接著，Googlebot 會將網頁排入轉譯佇列。
- 無頭 Chromium 執行個體會盡快轉譯網頁，包括執行 JavaScript。
- Googlebot 會使用經過轉譯的 HTML 來建立網頁索引。
您的技術設定可能會影響檢索、轉譯和建立索引的程序。舉例來說，回應時間緩慢或伺服器錯誤都可能會影響檢索預算。另一個例子是，要求 JavaScript 轉譯連結，可能會導致這類連結被發現的速度變慢。
使用功能偵測並處理錯誤
可持續運作的 Googlebot 有許多新功能，但系統仍不支援部分功能。如果依賴不支援的功能或是未正確處理錯誤，可能會導致 Googlebot 無法轉譯您的內容或建立索引。
讓我們看看以下範例：
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
這個頁面有時可能不會顯示任何內容，這是因為使用者拒絕授權，或 getCurrentPosition 呼叫傳回錯誤時，程式碼無法處理。根據預設，Googlebot 會拒絕這類權限要求。
這是更好的解決方案：
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
如果您無法順利為 JavaScript 網站建立索引，請按照我們的疑難排解指南尋找解決方法。
為網頁應用程式選擇合適的算繪策略
目前單頁應用程式的預設顯示策略是用戶端轉譯。HTML 會在執行時載入 JavaScript，然後在瀏覽器中產生內容。
我們來看一個網頁應用程式，顯示一系列貓咪圖片，並且利用 JavaScript 在瀏覽器中完整顯示內容。
如果您可以自由選擇轉譯策略，請考慮使用伺服器端轉譯或預先轉譯。他們會在伺服器上執行 JavaScript，以產生初始 HTML 內容，為使用者和檢索器改善效能。這些策略可讓瀏覽器在連上網路時開始轉譯 HTML，加快網頁載入速度。在I/O 大會的轉譯工作階段或有關網路轉譯的網誌文章中，示範伺服器端轉譯和飲水可以如何改善網頁應用程式的效能和使用者體驗，並為這些策略提供更多程式碼範例。
如果您想瞭解如何解決不執行 JavaScript 的檢索器，或是無法變更前端程式碼集，建議您改用動態轉譯功能，詳情請參閱這個程式碼研究室。但請注意，由於動態轉譯只會向檢索器提供靜態 HTML，因此對於伺服器端轉譯或預先轉譯，您無法帶來良好的使用者體驗或效能優勢。因此比起長期策略，這些挑戰是一段斷斷續續。
測試您的頁面
雖然大多數網頁都能順利透過 Googlebot 檢索，但我們還是建議您定期測試網頁，確保 Googlebot 可以順利存取你的內容，且沒有任何問題。我們提供了幾項實用的工具，可助您達成這項目標。
如要快速檢查網頁，最簡單的方法就是使用行動裝置相容性測試。除了指出行動裝置是否適合行動裝置瀏覽的問題之外，您也可以在 Googlebot 看到的頁面中，擷取前幾行內容與轉譯後的 HTML。
您也可以查看資源載入是否有問題或 JavaScript 錯誤。
建議您在 Google Search Console 中驗證網域，以便使用網址檢查工具進一步瞭解網址的檢索和索引狀態、在 Search Console 偵測到問題時收到訊息，並進一步瞭解網站在 Google 搜尋中的表現。
如需一般 SEO 提示和指南，您可以在 Lighthouse 中使用 SEO 稽核。如要將搜尋引擎最佳化 (SEO) 稽核整合至測試套件，請使用 Lighthouse CLI 或 Lighthouse CI 機器人。
這些工具可協助你在 Google 搜尋中找出網頁問題、進行偵錯及修正。建議你將這些工具納入開發作業。
掌握最新資訊並保持聯繫
如要隨時掌握 Google 搜尋的相關公告和異動，請密切留意網站管理員網誌、Google 網站管理員 YouTube 頻道及我們的 Twitter 帳戶。 此外，您也可以參閱 Google 搜尋開發人員指南和 JavaScript SEO 系列影片，進一步瞭解 SEO 和 JavaScript。