蘇州SEO優化JavaScript看似無限的可能性，使得基于HTML和CSS的普通網站正在成為過去。但是，盡管JavaScript為用戶提供了出色的動態體驗，但它也為開發人員創建了一個雷區。正因為如此，JavaScript搜索引擎優化已成為不可忽視的事情。
javascript如何工作？
除HTML和CSS外，JavaScript是三種核心Web開發技術之一，HTML用于創建靜態頁面（意味著代碼按原樣顯示在瀏覽器中，并且不能根據用戶的操作進行更改），而JavaScript使網頁變為動態頁面。程序員可以在用戶單擊按鈕或從下拉框中選擇一個值時使用JavaScript來更改HTML標記的值和屬性。JavaScript與HTML代碼一起放置在頁面上，并且與代碼結合使用。
客戶端和服務器端呈現
在討論JavaScript時，我們需要提到兩個概念，并且理解它們之間的差異：服務器端渲染和客戶端渲染。
傳統上，與靜態HTML頁面一樣，代碼在服務器上呈現（服務器端呈現）。在訪問某個頁面時，Googlebot會獲取完整的準備好的內容，因此無需執行任何操作，只需下載CSS文件并在瀏覽器中顯示信息即可。
另一方面，JavaScript通常運行在客戶端機器上（客戶端呈現），這意味著Googlebot最初獲取的頁面沒有任何內容，然后JavaScript創建用于加載呈現的DOM（文檔對象模型）內容。每當頁面加載時都會發生這種情況。
很明顯，如果Googlebot無法正確執行并呈現您的JavaScript，則無法看到您希望看到的頁面和內容。而這正是JavaScript搜索引擎優化所帶來的大部分問題。
如何避免這些問題？如何檢查網站是否正確呈現？
讓Googlebot正確呈現您的網站需要您專注于正確呈現網站上的鏈接和內容。如果您不提供鏈接，Googlebot將難以在您的網站上找到它的方式，如果您沒有在網站上正確呈現內容，Googlebot將無法看到它。
這里有一些選項可以幫助你
1.網站：命令
首先，site：命令將顯示Google目前為您的網站編制了多少頁面，如果網站的很多頁面還沒有進入索引，那可能是內部鏈接出現問題的跡象。
其次，您可能需要檢查JavaScript加載的內容本身是否已被Google索引。
要做到這一點，您需要找到一行文本，這些文本不會在您的初始HTML代碼中顯示，并且只在JavaScript執行后加載。之后，使用site：yourdomain.com命令在Google索引中搜索這一行文本。
請注意，這不適用于cache：命令，因為緩存版本的頁面只包含原始的，尚未渲染的代碼。
2.Chrome 41
2017?年8月，Google更新了其搜索指南，并宣布他們正在使用Chrome 41進行呈現。這是對SEO的改變，因為你現在可以檢查Google究竟如何呈現頁面，而不是猜測。
現在，您可以下載Chrome 41并查看Googlebot如何呈現和看到網站或網頁。
3.Chrome DevTools
JavaScript代碼的某些部分可能會被編程為執行特定用戶的操作 – 點擊，滾動等。但是，Googlebot不是用戶，它不會點擊或向下滾動，因此它不會看到您正在加載這些操作的內容。
檢查所有基于JavaScript的元素是否在沒有任何用戶操作的情況下加載的最快最容易的方法是使用Chrome開發工具：
在Chrome中打開您的網站
在DevTools中打開元素選項卡
通過查看瀏覽器構建的實際頁面的DOM來查看頁面的呈現方式 – 確保所有關鍵的導航和內容元素都已經存在。
我建議您在Chrome 41中檢查它，這會讓您確信Googlebot在技術上可以看到該元素。
當然，您也可以在當前的Chrome版本中進行檢查并進行一些比較。
4.Google Search Console的抓取和呈現
Google Search Console中的抓取和呈現功能，可以讓我們了解Google如何渲染我們的網站。
首先，您必須復制并粘貼您的網址。然后點擊“提取并渲染”，然后等待一會兒。這將允許您查看Googlebot是否可以呈現您的網頁并查看任何相關文章，副本或鏈接。
在這里，您還可以使用Google的移動友好測試，它會顯示JavaScript錯誤和呈現的頁面代碼。
5.服務器日志分析
為了驗證Googlebot如何抓取您的網站，您可以采取的最后一件事是服務器日志分析。通過仔細查看服務器日志，您可以檢查Googlebot是否訪問過特定的網址，以及Googlebot是否檢索過哪些網址。
在服務器日志上，您可以分析許多元素。例如，您可以檢查Googlebot是否訪問您的舊文章，如果沒有，則可能是鏈接有問題，這也可能是由JS的問題引起的。
您還可以檢查Googlebot是否能看到您網站的每個部分 – 如果沒有，這也可能是由渲染問題引起的。
服務器日志不會告訴你Googlebot如何看到這些頁面，您只能檢查是否訪問過這些頁面以及發送了哪些響應代碼。需要額外的分析來確定是否有任何問題是由JavaScript引起的。
此外，通過查看服務器日志，您可以檢查Googlebot是否請求了關鍵的JavaScript文件，或完全忽略它們。
javascript呈現時可能出現的問題
即使您的網頁在Search Console中的抓取和呈現中正確呈現，這并不意味著您可以放松身心。您還需要注意其他問題。
讓我們從你將要面對的最大問題之一開始……
1.超時
盡管沒有指定確切的超時時間，但據說Google不能等待超過5秒的腳本。我們的實驗證實了這一規則，如果腳本加載時間超過5秒，Google通常不會對其生成的內容編制索引。
抓取和呈現會顯示Google是否可以呈現網頁，但不會包含超時。請務必記住，Fetch和Render比標準的Googlebot更加寬容，因此您需要采取額外的步驟以確保您提供的腳本能夠在5秒內加載。
2.瀏覽器限制
正如我前面提到的那樣，Google使用一種過時的瀏覽器版本來呈現網站：三年前的Chrome 41.由于JavaScript技術已經發展并且持續快速發展，因此Google的一些最新功能Chrome 41可能不支持最新版本的Chrome。
因此，最佳解決方案是下載Chrome 41瀏覽器（Google用于Web渲染的確切版本）并熟悉它。檢查控制臺日志以查看發生錯誤的位置，并讓開發人員修復它們。
3.要求用戶交互加載的內容
Googlebot不會像用戶那樣行事，Googlebot不會點擊按鈕，也不會展開“更多閱讀”，不會進入制表符，也不會填充任何表格……只能閱讀并遵循。
這意味著您要呈現的整個內容應該立即加載到DOM，而不是在執行操作之后加載。
這對于“閱讀更多”內容和菜單尤其重要，例如在漢堡菜單中。
我們能做些什么來幫助Googlebot更好地呈現網站？
Googlebot呈現的網站不是單向街道。開發人員可以做很多事情來促進這一過程，幫助您聚焦Googelbot呈現的內容并為開發人員提供良好的睡眠。
1.避免使用OnClick鏈接
搜索引擎不會將onclick =“window.location =”視為普通鏈接，這意味著在大多數情況下，它們不會遵循這種類型的導航。而搜索引擎絕對不會將它們視為內部鏈接信號。
點擊之前鏈接在DOM中是至關重要的。您可以通過在Chrome 41中打開開發人員工具來檢查這一點，并檢查重要鏈接是否已經加載 – 沒有任何額外的用戶操作。
2.避免＃在URL中
該＃片段標識符不支持和Googlebot忽略。因此，不要使用example.com/#url?URL結構，請嘗試使用干凈的URL格式 –?example.com/url。
獨特的內容，唯一的網址
您的每一部分內容都必須位于“某處”，以供搜索引擎對其進行索引。這就是為什么要記住，如果您在不更改網址的情況下動態更改內容，則會阻止搜索引擎訪問它。
3.避免JS錯誤
HTML非常寬容，但JavaScript絕對不是。
如果您的網站在JS腳本中包含錯誤，它們將不會被執行，這可能會導致您的網站內容根本無法顯示。腳本中的一個錯誤可能會導致多米諾效應，導致很多其他錯誤。
要檢查代碼并使JavaScript免于出錯，您可以再次使用Chrome開發工具并查看“控制臺”選項卡，以查看發生了哪些錯誤以及JavaScript代碼的哪一行。
4.不要在robots.txt中阻止JS
阻止JS文件是一個非常古老的做法，但它仍然經常發生。它甚至有時候會在某些CMS中作為默認值出現。盡管目標是優化抓取預算，但阻止JS文件（和CSS樣式表）被認為是一種非常糟糕的做法。但是不要把它從我這里拿出來，這是谷歌對這個話題所說的話：
“我們建議確保Googlebot可以訪問任何有意義地促進您網站的可見內容或其布局的嵌入式資源……”
所以不要做這樣的事情：
預渲染
當您發現Google在呈現JavaScript網站時遇到問題時，可以使用預渲染。
預渲染為您的網站提供現成的HTML快照。這意味著Googlebot不會收到JavaScript，而是純粹的HTML。與此同時，訪問該網站的用戶將獲得相同的JavaScript頁面版本。
最流行的解決方案是使用外部服務進行預渲染，如Prerender.io，它與所有最重要的JS框架兼容。
使用此解決方案非常簡單 – 您只需將中間件或片段添加到Web服務器即可。
概要
JavaScript的主題是SEO世界中最有活力的話題，絕對值得你關注，特別是它發展得如此之快。本文中描述的問題只是您可以調查的一小部分，以確保Googlebot正確呈現您的網站。
