掌握 2019 年 Google I/O 大會的最新消息和洞察資訊。
Google 搜尋在近期發展，讓我們在 2019 年 Google I/O 大會上分享這些內容！
本文將著重在最佳做法，說明如何讓他人透過 Google 搜尋找到 JavaScript 網頁應用程式，包括：
- 可持續更新的新版 Googlebot
- 用於檢索、轉譯及建立索引的 Googlebot 管道
- 功能偵測和錯誤處理
- 轉譯策略
- 網站在 Google 搜尋中的測試工具
- 常見挑戰與可能的解決方案
- 在 JavaScript 網頁應用程式中進行搜尋引擎最佳化的最佳做法
認識不退流行的 Googlebot
今年，我們宣布了眾所期盼的新型 Googlebot。
Googlebot 目前會使用新型的 Chromium 引擎，為 Google 搜尋顯示網站。有鑑於此，我們會測試較新版本的 Chromium，藉此「保持」更新 Googlebot (通常在每次 Chrome 穩定版發布後的幾週內)。這項重大消息對網頁程式開發人員和搜尋引擎最佳化 (SEO) 而言至關重要，因為這則公告標示了 Googlebot 中超過 1000 項新功能的推出，例如 ES6+、IntersectionObserver 和 Web 元件 1.0 版。
瞭解 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 網站管理員 YouTube 頻道和我們的 Twitter 帳戶，隨時掌握有關 Google 搜尋的公告和異動資訊。 此外，如要進一步瞭解搜尋引擎最佳化 (SEO) 和 JavaScript，請參閱 Google 搜尋開發人員指南和 JavaScript 搜尋引擎最佳化 (SEO) 系列影片。