百度網站搜索引擎優化-SEO和JavaScript：你需要知道的6件事
2021-01-18 16:58:49
了解JavaScript的基礎已經成為現代SEO優化專業人員的一項重要技能，盡管直到最近這兩個學科之間的關系一直是一個備受爭議的主題。
在SEO和JavaScript界面上徘徊的關鍵問題是搜索引擎爬蟲是否能夠正確感知網站的內容，并且真實地評估用戶體驗。
雖然可以通過爬蟲直接讀取與PHP，CSS等一起使用的HTML，但是無法立即訪問基于JavaScript的網站。Google抓取工具首先分析DOM，然后才會渲染網站。
基本定義
在我們深入研究優化JavaScript的最佳實踐之前，讓我們快速瀏覽一些基本術語：
JavaScript是一種用于使網頁動態和交互的編程語言。您可以將JavaScript放入HTML文檔，或者創建鏈接或引用它。
HTML代表超文本標記語言。簡單來說，它是一個內容組織者：HTML提供網站的結構（項目符號列表，標題，副標題，段落等）并定義靜態內容。
AJAX 是異步JavaScript和XML。基本上，它更新內容而不刷新整個頁面。AJAX使Web應用程序和服務器能夠在不干擾當前頁面的情況下進行通信。
但是，您應該注意，從2018年第二季度開始，Google將不再需要AJAX來呈現基于JavaScript的網站。
現代SEO專業人員也應該對DOM（文檔對象模型）有基本的了解。您可以將DOM視為Google用于瀏覽和分析網頁的工具。
首先，Google收到HTML文檔并識別其JavaScript元素。然后瀏覽器啟動DOM，使搜索引擎能夠呈現頁面。
1.讓搜索引擎查看您的JavaScript
Robots.txt旨在為Google搜索引擎提供適當的抓取機會。如果阻止他們看到JavaScript，則網頁抓取工具的頁面顯示方式與用戶不同。
這意味著搜索引擎無法獲得完整的用戶體驗，Google可能會將此類操作解釋為隱藏真實內容。
最好的方法是為網絡抓取工具提供他們以與用戶完全相同的方式查看網頁所需的所有資源。
考慮安排與網站開發人員的會議，并共同決定哪些文件應該從搜索引擎中隱藏，哪些文件應該可以訪問。
2.內部鏈接
內部鏈接是一個強大的SEO工具，用于向搜索引擎顯示您的網站架構并指向最重要的網頁。
這里最基本的建議是：使用內部鏈接，甚至不嘗試用JavaScript點擊事件替換它。
是的，可能會通過點擊事件找到并抓取結束網址，但網頁抓取工具不會將其與您網站seo的全局導航相關聯。
因此，最好通過在HTML或DOM中使用常規錨標記來實現內部鏈接，以便為用戶提供更好的體驗。
3. URL結構
基于JavaScript的網站過去常常在URL中包含片段標識符，但Google不建議使用單獨的哈希（＃）和hashbangs（＃！）。
強烈推薦的方法是pushState History API。它更新地址欄中的URL，并允許JavaScript網站利用干凈的URL。
干凈的URL也稱為搜索引擎優化友好的URL，由純文本組成，非專業用戶可以輕松理解。
考慮使用pushState進行無限滾動，因此每次用戶點擊頁面的新部分時URL都會更新。在完美的場景中，用戶可以刷新頁面并仍然保持在完全相同的位置。
此外，探索SEO 最佳URL實踐并開始使用它們來改善用戶體驗。
4.測試您的網站
谷歌能夠抓取并理解許多形式的JavaScript，盡管其中一些可能比其他形式更具挑戰性。
以下是BartoszGóralewicz的一項實驗，該實驗展示了Googlebot如何在不同的框架上與JavaScript進行交互。
這項研究有助于我們了解何時需要主動擔心和采取行動。
但是，預測可能的錯誤和問題并避免它們總是更好，那么為什么不進行一些測試呢？
請按照以下兩個基本步驟來檢測可能的中斷：
檢查網頁上的內容是否顯示在DOM中。
測試幾頁以確保Google能夠為您的內容編制索引。
了解Google是否能夠在您的robots.txt中查看您的內容和JavaScript并對其進行正確分析至關重要。因此，請考慮手動檢查您的內容片段并通過Google獲取內容以查看內容是否顯示。
按照Google提供的這份簡短指南測試您的網站。
完成所有測試，結果看起來很有希望？大！
但是，如果某些東西不起作用呢？
如果有任何跡象表明Google無法正常查看您的內容，請致電您的開發團隊尋求幫助。
同時，HTML快照可以挽救這種情況。
5. HTML快照
谷歌在2009年推出了HTML快照，并于2015年批準了它們。這是一個長篇故事和一個持續的主題。
您應該知道的是，Google仍然支持HTML快照，盡管它已經確定它們是“避免”的元素。
在幾種情況下，HTML快照可能是必需的，因此您至少應該熟悉它們。
例如，如果搜索引擎無法掌握您網站上的JavaScript，則可以為他們提供HTML快照，這比根本沒有索引和理解您的內容更好。
在完美的世界中，網站將在服務器端使用某種用戶代理檢測，并向機器人和用戶顯示HTML快照。
請注意，Google力求看到與觀看者完全相同的體驗。因此，最好將HTML快照返回給搜索引擎抓取工具。
但是，只有在JavaScript出現問題的情況下才會這樣做，并且無法聯系您的支持團隊。
6.網站延遲
當瀏覽器使用收到的HTML文檔創建DOM時，它會完全按照HTML文檔中提到的方式加載大部分資源。
如果HTML文檔頂部存在一個海量文件，瀏覽器將首先加載這個巨大的文件，所有其他信息只會在之后出現，并且會有很長的延遲。
Google關鍵渲染路徑的關鍵思想是首先加載對用戶至關重要的信息。換句話說，為用戶提供最重要的內容。
如果您的JavaScript文件或一些不必要的資源阻礙了頁面加載速度，您可能會使用渲染阻止JavaScript，也稱為感知延遲。
這意味著您的網頁可能會更快出現，但JavaScript代碼正在減慢它們的速度。
檢查使用Page Speed Insights或其他類似工具加載頁面所需的時間。分析結果以查看是否存在渲染阻止JavaScript。
以下是一些解決它的頂級解決方案：
在HTML中添加JavaScript。
將“async”屬性添加到HTML以使JavaScript異步。
減少HTML文檔中的JavaScript元素。
在嘗試改善這種情況時，請記住JavaScript的基本規則。
例如，腳本必須按特定順序排列（優先順序）。如果某些腳本引用文件，則只能在加載引用的文件后使用它們。
您應該經常與開發團隊保持聯系，以確保任何更改都不會中斷用戶體驗。
結論
搜索引擎不斷發展，因此毫無疑問，谷歌優化他們將來會更好，更快地解讀您的JavaScript。
目前，網站搜索引擎優化請確保您的現有內容可以抓取并可獲取，并確保適當的網站延遲。希望本文將幫助您優化您的網站
在SEO和JavaScript界面上徘徊的關鍵問題是搜索引擎爬蟲是否能夠正確感知網站的內容，并且真實地評估用戶體驗。
雖然可以通過爬蟲直接讀取與PHP，CSS等一起使用的HTML，但是無法立即訪問基于JavaScript的網站。Google抓取工具首先分析DOM，然后才會渲染網站。
基本定義
在我們深入研究優化JavaScript的最佳實踐之前，讓我們快速瀏覽一些基本術語：
JavaScript是一種用于使網頁動態和交互的編程語言。您可以將JavaScript放入HTML文檔，或者創建鏈接或引用它。
HTML代表超文本標記語言。簡單來說，它是一個內容組織者：HTML提供網站的結構（項目符號列表，標題，副標題，段落等）并定義靜態內容。
AJAX 是異步JavaScript和XML。基本上，它更新內容而不刷新整個頁面。AJAX使Web應用程序和服務器能夠在不干擾當前頁面的情況下進行通信。
但是，您應該注意，從2018年第二季度開始，Google將不再需要AJAX來呈現基于JavaScript的網站。
現代SEO專業人員也應該對DOM（文檔對象模型）有基本的了解。您可以將DOM視為Google用于瀏覽和分析網頁的工具。
首先，Google收到HTML文檔并識別其JavaScript元素。然后瀏覽器啟動DOM，使搜索引擎能夠呈現頁面。
1.讓搜索引擎查看您的JavaScript
Robots.txt旨在為Google搜索引擎提供適當的抓取機會。如果阻止他們看到JavaScript，則網頁抓取工具的頁面顯示方式與用戶不同。
這意味著搜索引擎無法獲得完整的用戶體驗，Google可能會將此類操作解釋為隱藏真實內容。
最好的方法是為網絡抓取工具提供他們以與用戶完全相同的方式查看網頁所需的所有資源。
考慮安排與網站開發人員的會議，并共同決定哪些文件應該從搜索引擎中隱藏，哪些文件應該可以訪問。
2.內部鏈接
內部鏈接是一個強大的SEO工具，用于向搜索引擎顯示您的網站架構并指向最重要的網頁。
這里最基本的建議是：使用內部鏈接，甚至不嘗試用JavaScript點擊事件替換它。
是的，可能會通過點擊事件找到并抓取結束網址，但網頁抓取工具不會將其與您網站seo的全局導航相關聯。
因此，最好通過在HTML或DOM中使用常規錨標記來實現內部鏈接，以便為用戶提供更好的體驗。
3. URL結構
基于JavaScript的網站過去常常在URL中包含片段標識符，但Google不建議使用單獨的哈希（＃）和hashbangs（＃！）。
強烈推薦的方法是pushState History API。它更新地址欄中的URL，并允許JavaScript網站利用干凈的URL。
干凈的URL也稱為搜索引擎優化友好的URL，由純文本組成，非專業用戶可以輕松理解。
考慮使用pushState進行無限滾動，因此每次用戶點擊頁面的新部分時URL都會更新。在完美的場景中，用戶可以刷新頁面并仍然保持在完全相同的位置。
此外，探索SEO 最佳URL實踐并開始使用它們來改善用戶體驗。
4.測試您的網站
谷歌能夠抓取并理解許多形式的JavaScript，盡管其中一些可能比其他形式更具挑戰性。
以下是BartoszGóralewicz的一項實驗，該實驗展示了Googlebot如何在不同的框架上與JavaScript進行交互。
這項研究有助于我們了解何時需要主動擔心和采取行動。
但是，預測可能的錯誤和問題并避免它們總是更好，那么為什么不進行一些測試呢？
請按照以下兩個基本步驟來檢測可能的中斷：
檢查網頁上的內容是否顯示在DOM中。
測試幾頁以確保Google能夠為您的內容編制索引。
了解Google是否能夠在您的robots.txt中查看您的內容和JavaScript并對其進行正確分析至關重要。因此，請考慮手動檢查您的內容片段并通過Google獲取內容以查看內容是否顯示。
按照Google提供的這份簡短指南測試您的網站。
完成所有測試，結果看起來很有希望？大！
但是，如果某些東西不起作用呢？
如果有任何跡象表明Google無法正常查看您的內容，請致電您的開發團隊尋求幫助。
同時，HTML快照可以挽救這種情況。
5. HTML快照
谷歌在2009年推出了HTML快照，并于2015年批準了它們。這是一個長篇故事和一個持續的主題。
您應該知道的是，Google仍然支持HTML快照，盡管它已經確定它們是“避免”的元素。
在幾種情況下，HTML快照可能是必需的，因此您至少應該熟悉它們。
例如，如果搜索引擎無法掌握您網站上的JavaScript，則可以為他們提供HTML快照，這比根本沒有索引和理解您的內容更好。
在完美的世界中，網站將在服務器端使用某種用戶代理檢測，并向機器人和用戶顯示HTML快照。
請注意，Google力求看到與觀看者完全相同的體驗。因此，最好將HTML快照返回給搜索引擎抓取工具。
但是，只有在JavaScript出現問題的情況下才會這樣做，并且無法聯系您的支持團隊。
6.網站延遲
當瀏覽器使用收到的HTML文檔創建DOM時，它會完全按照HTML文檔中提到的方式加載大部分資源。
如果HTML文檔頂部存在一個海量文件，瀏覽器將首先加載這個巨大的文件，所有其他信息只會在之后出現，并且會有很長的延遲。
Google關鍵渲染路徑的關鍵思想是首先加載對用戶至關重要的信息。換句話說，為用戶提供最重要的內容。
如果您的JavaScript文件或一些不必要的資源阻礙了頁面加載速度，您可能會使用渲染阻止JavaScript，也稱為感知延遲。
這意味著您的網頁可能會更快出現，但JavaScript代碼正在減慢它們的速度。
檢查使用Page Speed Insights或其他類似工具加載頁面所需的時間。分析結果以查看是否存在渲染阻止JavaScript。
以下是一些解決它的頂級解決方案：
在HTML中添加JavaScript。
將“async”屬性添加到HTML以使JavaScript異步。
減少HTML文檔中的JavaScript元素。
在嘗試改善這種情況時，請記住JavaScript的基本規則。
例如，腳本必須按特定順序排列（優先順序）。如果某些腳本引用文件，則只能在加載引用的文件后使用它們。
您應該經常與開發團隊保持聯系，以確保任何更改都不會中斷用戶體驗。
結論
搜索引擎不斷發展，因此毫無疑問，谷歌優化他們將來會更好，更快地解讀您的JavaScript。
目前，網站搜索引擎優化請確保您的現有內容可以抓取并可獲取，并確保適當的網站延遲。希望本文將幫助您優化您的網站
