診斷JavaScript動力網站的優先事項

診斷JavaScript動力網站的優先事項



在過去的20年中,Google的搜索引擎發生了很大變化。 如果我們從整體上看技術和網絡開發,我們可以看到變化的步伐非常壯觀。

1998年的這個網站提供的信息豐富,但不是非常有吸引力或易於使用:

現代網站不僅看起來好多了,而且還配備了強大的功能,例如推送通知,部分離線工作和眨眼之間加載。

但是,如果我們想要準確,我們應該使用術語“應用程序”而不是“網站”,因為網站是互動的,動態的並且使用JavaScript構建。

JavaScript作為遊戲改變者

最長的時間, Google無法執行JavaScript,但在2015年之後, 該公司在處理JavaScript方面邁出了巨大的一步。

需要強調的是,搜索引擎的發展速度遠遠低於網絡開發領域的發展速度,這可能是谷歌仍然是唯一可以執行JavaScript的搜索引擎的原因。

一開始,當萬維網由僅由靜態超文本標記語言(HTML)構成的網站構建時,Google有一項簡單的任務來完成:

向服務器發出請求→獲取靜態HTML響應→為頁面編制索引

我知道這是對這個過程的超簡單描述,但是我想要展示處理網站與當今處理網站之間的差異。

當開發人員開始使用JavaScript(JS)在網站上添加交互性時,問題就出現了,然後當Javascript用於創建整個網站時,JavaScript的依賴性變得更大時,問題就會加劇。

JavaScript應用程序和網站是Google的挑戰,因為在向服務器發送初始請求後,Googlebot會收到一個空的或幾乎為空的HTML文件。 JS執行後會添加內容,圖片和鏈接。

Google通過嘗試渲染他們訪問的幾乎所有頁面來解決該問題。 所以現在,這個過程看起來或多或少像這樣:

向服務器發出請求→獲取靜態HTML響應→將其發送到索引器→渲染頁面→
索引並將提取的鏈接發送到Googlebot→Googlebot可以抓取下一頁。

由於JavaScript的執行在抓取,渲染和索引過程中增加了很多低效率和延遲,因為:

  • Googlebot的抓取速度變慢了。 它沒有在JS網站的源代碼中看到超鏈接,所以它需要等待索引器呈現頁面,然後將提取的URL發回。
  • 執行JavaScript需要很多資源。 甚至對於Google的數據中心來說,這也令人筋疲力盡。

儘管存在這些障礙,但我們需要為開發動態JS應用程序的繁榮做好準備,因為對React,Vue.js或Angular等開放源代碼框架的興趣持續高漲。 越來越多的網站將使用JavaScript構建。 所以作為SEO,我們需要能夠發現使用它的網站上的問題。

正確的做法

在我們開始深入研究JavaScript以及與之相關的一些混亂之前,讓我們看看三個方面,這些方面將調整我們分析網站的方法:

A.問題的嚴重程度如何?

我們需要理解並明確界定使用JavaScript構建的網站(應用程序),例如單頁應用程序(SPA)和JavaScript的部分依賴關係。 以下是一些可能的場景以及如何說明使用SPA構建的內容以及部分依賴關係:

  • 沒有JavaScript依賴關係。 訪問我們的網站並在瀏覽器中關閉JS – 沒有任何變化。
  • 部分JS依賴關係。 訪問Angular.io網站並在瀏覽器中關閉JS – 主導航不起作用(但鏈接在文檔對像模型[DOM]中可用,稍後我將會討論)。
  • 有意義的JS依賴關係。 訪問AutoZone並關閉JS – 主導航可能不起作用,並且鏈接可能在DOM中不可用。
  • 完整的JS依賴關係。 訪問YouTube,關閉JS並註意所有內容消失!

正如您可能猜到的那樣,如果您對JavaScript有部分依賴關係,則可以解決的問題更少。

B.網站建在哪裡?

靜態HTML網站建立在您的服務器上。 在Googlebot(以及用戶)發出初始請求後,它會收到一個靜態頁面作為響應。

動態Web應用程序(DWA)內置在瀏覽器中,因此在初始請求後,我們會收到一個空的或幾乎空的HTML文件,並且使用JavaScript以異步方式加載內容。 縱觀全局,我們可以假設客戶端渲染在JS和搜索引擎優化(SEO)方面存在問題時是真正的惡棍。

C.谷歌有什麼限制?

前段時間,Google透露了它如何渲染網站:共享網絡渲染服務(WRS)負責渲染頁面。 在他們身後是一個基於Chrome 41的無頭瀏覽器,它於2015年推出,所以它有點過時了。 Google使用三年前的瀏覽器對於呈現現代Web應用程序具有實際影響,因為它不支持現代應用程序使用的所有當前功能。

Google的工程師Eric Bidelman證實他們知道Google與JS的限制。 根據非官方聲明,我們預計Chrome 41將在2018年底更新為更新版本。

要深入了解支持和不支持的內容,請訪問Caniuse.com,並將Chrome 41與最新版本的Chrome進行比較。 名單很長:

處理資源

超時是使JS和SEO難以匹配的下一件事。

JavaScript應用通常非常繁重,Google資源有限。 想像一下,在JavaScript的情況下,Google需要渲染每個頁面才能看到內容。 下面的例子顯示了多重的JS執行。

如果你有一個JS文件和一個大小相同的圖像文件,你會發現解析大約需要2秒,而執行JavaScript大約需要1.5秒。

Google需要合理管理其處理資源,因為它需要處理大量的數據。 萬維網由10億多個網站組成,並且每天都在增長。 下面的圖表顯示,過去五年中,桌面版網頁的中值大小幾乎增加了100%。 移動版網站的適當指標增加了250%!

JavaScript網站的自然結果是對這些網站的抓取,索引和最終排名的延遲。

準備和有用的資源

從事技術搜索引擎優化的SEO們需要注意細節。 在JavaScript網站的情況下,我們需要為需要解決的棘手問題做好準備,並且我們必須了解我們不能總是依靠共同的和眾所周知的規則。

Google知道SEO和開發者在理解搜索行為方面存在問題,他們正試圖幫助我們。 以下是來自Google的一些資源,您應該遵循並檢查以幫助您解決任何JS問題:

診斷JavaScript引發的網站問題

現在我們知道了Google的限制,讓我們嘗試在JavaScript網站上發現一些問題並尋找解決方法。

Google看到了什麼?

三年前,谷歌宣布它能夠呈現和理解像現代瀏覽器這樣的網站。 但是,如果我們查看關於呈現JS網站的文章和評論,您會注意到它們包含許多警示詞,如“可能”,“一般”和“並非總是”。

這應該強調一個事實,即雖然Google在JS執行中越來越好,但它仍然有很大的改進空間。

源代碼與DOM

源代碼是Googlebot在進入頁面後看到的內容。 這是沒有將JS集成到代碼中的原始HTML。 請注意一個重要的事實,即Googlebot不會呈現網頁。

Googlebot是一個抓取工具,所以它的工作是瀏覽頁面,從源代碼中提取元素並將它們發送給索引器。 文檔對像模型(DOM)是網站的渲染版本,它意味著原始HTML被JavaScript改變了,結構化和組織化。

“檢查元素”顯示文檔對像模型。 渲染是通過Web Rendering服務完成的,該服務是Google Indexer的一部分。 請牢記以下幾點:

  • 抓取時將原始HTML考慮在內。
  • 索引時會考慮DOM。

JavaScript網站以兩種方式編入索引,這使得索引的整個過程完全不同:

  • 第一波:Google僅提取元數據並根據此信息為網址編制索引。
  • 第二次浪潮:如果Google有足夠的資源,它會呈現頁面以查看內容。 它可以重新編制頁面並加入這兩個數據源。

請記住,在第二次索引浪潮中,Google不會更新最初索引的元素(如果它們被JavaScript更改)。 如果您使用JavaScript添加rel =“canonical”標記,Google不會收到它。

然而,最近John Mueller表示,如果Google在頁面呈現過程中陷入困境,則可能會使用原始HTML進行索引。

即使您看到特定的網址已編入索引,但並不表示索引器已發現該內容。 我知道這可能會讓人困惑,所以這裡有一個小小的備忘單:

  1. 要查看發送到Googlebot的HTML,請轉到Google Search Console並使用提取和呈現工具。 在這裡你可以訪問原始的HTTP響應。
  2. 要查看頁面的渲染版本,也可以使用“提取和渲染”工具。
  3. 查看由.txt創建的DOM 網絡渲染服務(WRS) 對於桌面設備,請使用 豐富的結果測試。 對於移動設備,請使用 移動友好測試。

谷歌正式確認,我們可以依靠這兩種方法來檢查谷歌“看到”網站的方式:


將源代碼與DOM進行比較

現在,該分析代碼和DOM了。

在第一步中,根據可索引性對它們進行比較,並檢查源代碼是否包含:

  • 元機器人指令,如索引規則。
  • Canonical標籤。
  • Hreflang標籤。
  • 元數據。

然後看看它們是否符合網站的渲染版本。

要發現差異,可以使用類似的工具 Diff Checker ,它將比較兩個文件之間的文本差異。

使用Diff Checker,從Google Search Console獲取原始超文本傳輸協議(HTTP)響應,並將其與上面第3點提到的工具(豐富結果測試和移動友好測試)中的DOM進行比較。

JavaScript可能會修改某些元素,Google可能會遵循兩條不同的說明。

Googlebot不會滾動

在查看DOM時,還需要驗證依賴於單擊,滾動和填充表單等事件的元素。

JavaScript允許在用戶交互之後加載額外的內容,鏈接和圖像。 Googlebot不會滾動或點擊,因此如果某件事需要顯示某項操作,Google就不會發現該操作。

兩波索引及其後果

回到我之前提到的那兩個浪潮, 谷歌承認,僅在第一輪索引中才會考慮元數據 。 如果源代碼不包含機器人指令,hreflang或標準代碼,則可能不會被Google發現。

Google如何看待您的網站?

要查看Google如何查看網站的呈現版本,請轉到Google Search Console中的Google抓取方式工具,並提供您要檢查的網址並點擊抓取和呈現。

對於復雜或動態的網站,僅僅驗證網站的所有元素是否在他們的位置是不夠的。

谷歌正式表示Chrome 41支持獲取和渲染工具,因此最好下載並安裝該瀏覽器的完全版本。

一旦安裝在個人計算機(PC)上,您可以與網站進行一點點交互,導航到其他部分並檢查由JavaScript觸發的控制台中的錯誤。 Mobile-Friendly測試中的一項新功能還可以在JavaScript控制台中查看JavaScript的錯誤。

我想提一些常見的和微不足道的錯誤來避免:

  • 在診斷呈現富含JavaScript的網站問題時,切勿查看Google中的緩存。 它沒有提供有意義的信息,因為緩存顯示由您的瀏覽器呈現的Googlebot看到的RAW HTML。 JS網站的源代碼只包含幾行代碼,一些指向腳本的超鏈接; JavaScript執行後加載真實內容。
  • 不要在robots.txt中阻止JavaScript資源; 它阻止了正確的渲染(我知道這很明顯,但它仍然會發生)。

內部鏈接

內部鏈接是使網站可抓取的唯一途徑。 由於JavaScript網站的源代碼(一般而言)不包含鏈接,因此整個爬網過程被延遲。 Googlebot需要等待Indexer呈現網頁並將發現的鏈接發回。

診斷JS網站的關鍵因素是 檢查鏈接是否放置在DOM中 。 源代碼不必包含鏈接,但如果DOM沒有鏈接,鏈接將不會被發現。 如果主導航是使用JavaScript構建的,這可能會有很大的影響。

分析超級菜單時要小心。 有時候,它們充滿了對於搜索引擎優化並不總是有益的奇特功能。 以下是John Mueller關於如何查看導航是否適用於Google的提示:

還要注意“加載更多”分頁和無限滾動。 這些元素也很棘手。 它們以平穩的方式加載額外的內容,但是它發生在與網站交互之後,這意味著我們不會在DOM中找到內容。

在Google I / O會議上, 湯姆格林韋提到了兩種可以接受的解決方案 對於這個問題:您可以預加載這些鏈接並通過CSS隱藏它們,或者您可以為後續頁面提供標準超鏈接,以便該按鈕需要鏈接到具有序列中下一個內容的單獨URL。

下一個重要元素是嵌入內部鏈接的方法。 Googlebot僅遵循標準超鏈接,這意味著您需要在代碼中看到類似這樣的鏈接:

文本 / a>

如果您看到OnClick鏈接,它們看起來像這樣並且不會被發現。

因此,在瀏覽源代碼和DOM時,請務必確保在內部鏈接上使用正確的方法。

網址 – 乾淨和獨特

獲取內容索引的基本規則是為每條內容提供乾淨且唯一的URL。

很多時候,JS支持的網站在URL中使用hashtag。 谷歌已經明確表示,在大多數情況下,抓取工具不會發現這種類型的URL。

在分析網站時,請檢查以確保結構不是通過以下網址構建的:

Google網址中的#號後面的所有內容都將被剪切並忽略,因此內容將不會被編入索引!

超時

沒有人喜歡渲染延遲,甚至谷歌。 據說Google最多等待5秒鐘才能獲得併執行JavaScript(請注意,5秒規則基於觀察結果,並未經Google確認)。 我認為Google必須限制執行的最長時間,因為渲染是非常耗費資源的過程。

不幸的是,診斷超時問題並不容易。 如果我們沒有足夠快地提供內容,我們可能無法獲取索引的內容。

在JavaScript網站的情況下,您需要等待一段時間才能加載其他元素,甚至整個部分。 裝載機顯示將出現新的東西:

如果JavaScript按時執行,則Web呈現服務可以正確呈現頁面,並且可以使用JavaScript為內容加載索引。 但是,如果我們查看搜索結果,則會看到加載器已編入索引。 啊!

我們如何發現這些問題? 我們可以使用Screaming Frog等工具抓取網站,延遲時間設置為5秒。 在渲染模式下,您可以看到渲染版本是否一切正常。

不要依賴於檢查提取和渲染工具中的延遲。 它可以等待2分鐘的JavaScript,所以它比Google的Indexer更耐心。

約翰穆勒建議我們可以檢查Google是否在移動友好測試中及時呈現了網頁,如果網站能夠正常工作,那麼索引應該沒問題。

在分析網站的同時,看看網站是否實現了像加載程序那樣的人為延遲,這迫使等待內容交付:

沒有理由設定類似的元素; 它在索引不可發現的內容方面可能具有顯著的效果。

索引

如果內容未被編入索引,您將無法獲得任何內容。 這是檢查和診斷最簡單的因素,也是最重要的!

使用site:domain.com命令

檢查索引的最有用的方法是眾所周知的查詢:

網站:域名“來自您網站的幾行內容”

如果您搜索了一些內容並在搜索結果中找到它,那太棒了! 但是,如果你找不到它,捲起袖子開始工作。 你需要找出為什麼它沒有索引!

如果您想進行複雜的索引分析,則需要檢查域和不同部分中可用的不同類型頁面中的部分內容。

延遲加載圖像

Google表示加載“懶惰”圖片可能存在問題:

如果您的圖片緩慢加載,請向您正在提供的圖片添加標記,以便在JavaScript關閉時顯示圖片。

讓Google可以發現懶惰內容的第二個選項是結構化數據:

包起來

不要將這篇文章用作JS網站的唯一核對清單。 儘管這裡有很多信息,但這還不夠。

本文旨在成為深入分析的起點。 每個網站都是不同的,當你考慮獨特的框架和個人開發人員的創造力時,不可能僅僅通過檢查清單來結束審計。


本文中表達的意見是來賓作者的意見,並不一定是搜索引擎土地。 職員作者被列出 這裡


關於作者

Maria Cieslak是一位高級技術SEO顧問 Elephate ,“ 最佳的小型SEO機構 “她在日常工作中涉及到為大型國際結構創建和執行搜索引擎優化策略,並追求她對利用JavaScript框架構建的現代網站的興趣,瑪麗亞一直是歐洲SEO會議的演講嘉賓,包括2018年的SMX倫敦, 在廣泛的主題上發表演講,包括技術SEO和JavaScript。

歡迎您留言討論

發表迴響

Close Menu