JavaScript和SEO機器人體驗

JavaScript和SEO：讓你的機器人體驗和你的用戶體驗一樣好
技術先進的搜索引擎優(yōu)化SEO
深圳網(wǎng)站制作意識到這是非常重要的我們作為SEO理解JavaScript的搜索體驗的影響。搜索引擎能以用戶的方式看到你的內(nèi)容并體驗你的站點嗎？如果沒有，您可以用什么解決方案來修復它？

了解JavaScript和搜索性能的潛在影響是現(xiàn)代SEO專業(yè)核心技能。如果搜索引擎不能爬行一個網(wǎng)站或無法解析和理解內(nèi)容，沒有什么會被索引和網(wǎng)站不會排名。

SEO與JavaScript相關的最重要問題：搜索引擎能看到內(nèi)容并掌握網(wǎng)站經(jīng)驗嗎？如果沒有，可以利用什么解決方案來解決這個問題？

基本面

什么是JavaScript？

在創(chuàng)建一個現(xiàn)代Web頁面時，主要有三個組件：

超文本標記語言是站點的主干或內(nèi)容的組織者。它是網(wǎng)站的結構（例如標題、段落、列表元素等），并定義靜態(tài)內(nèi)容。

CSS–級聯(lián)樣式表的設計、浮華，魅力，和樣式添加到網(wǎng)站。它構成頁面的表示層。

JavaScript是動態(tài)Web的交互性和核心組件。

了解更多關于網(wǎng)頁開發(fā)和如何編寫基本javascript的代碼。

javacssseo.gif

圖片來源：1, 2, 3

JavaScript要么放在HTML標簽內(nèi)（即嵌入HTML），要么鏈接/引用。目前有大量的JavaScript庫和框架，包括jQuery，AngularJS，reactjs，EmberJS，等。

JavaScript庫和框架：

什么是ajax？

Ajax，即異步JavaScript和XML，是一組JavaScript和XML相結合的Web開發(fā)技術，允許Web應用程序在后臺與服務器通信，而不干擾當前頁面。異步意味著代碼的其他功能或線可以運行在腳本運行。XML作為數(shù)據(jù)傳遞的主要語言；然而，術語Ajax是用于所有類型的數(shù)據(jù)傳輸（包括JSON；我猜”阿賈伊”不健全，“AJAX”[一語雙關]）作為清潔。

Ajax的一個常用用法是更新網(wǎng)頁的內(nèi)容或布局，而無需啟動完整的頁面刷新。通常，當頁面加載時，頁面上的所有資產(chǎn)必須被請求并從服務器獲取，然后在頁面上呈現(xiàn)。然而，對于Ajax，只需要加載頁面之間不同的資產(chǎn)，這就改善了用戶體驗，因為它們不必刷新整個頁面。

人們可以把Ajax看作是微型服務器調(diào)用。Ajax的一個很好的例子就是谷歌地圖。頁面更新沒有一個完整的頁面重載（即微型服務器調(diào)用被用來加載內(nèi)容為用戶導航）。

相關的圖像

圖片來源

什么是文檔對象模型（DOM）？

作為一個SEO專業(yè)人員，你需要理解DOM是什么，因為這正是谷歌用來分析和理解網(wǎng)頁的原因。

DOM是您在瀏覽器中“檢查元素”時所看到的內(nèi)容。簡單地說，您可以將DOM看作是在接收HTML文檔來呈現(xiàn)頁面之后所采取的步驟。

瀏覽器接收的第一件事是HTML文檔。之后，它將開始解析該文檔中的內(nèi)容并獲取額外的資源，如圖像、CSS和JavaScript文件。

DOM是對信息和資源進行解析的形式。人們可以把它看作是網(wǎng)頁代碼的結構化、有組織的版本。

現(xiàn)在，DOM通常與最初的HTML文檔非常不同，這是因為它們統(tǒng)稱為動態(tài)HTML。動態(tài)HTML是頁面根據(jù)用戶輸入、環(huán)境條件（例如一天中的時間）以及其他變量改變內(nèi)容的能力，它利用HTML、CSS和JavaScript。

一個簡單的例子，它通過JavaScript填充：

HTML源代碼

DOM

什么是無頭瀏覽？

無頭瀏覽僅僅是在沒有用戶界面的情況下獲取網(wǎng)頁的行為。重要的是要理解，因為谷歌和現(xiàn)在的百度利用無頭瀏覽來更好地理解用戶的體驗和網(wǎng)頁內(nèi)容。

PhantomJS和Zombie.js頭瀏覽器腳本，通常用于自動化測試目的網(wǎng)頁的互動性，并初步要求繪制靜態(tài)HTML快照（預渲染）。

為什么JavaScript對SEO有挑戰(zhàn)性？（以及如何修復問題）

有三個（3）主要原因要關注站點上的JavaScript：

檢索：搜索引擎抓取你的網(wǎng)站的能力。

獲得性：機器人的訪問信息和分析你的內(nèi)容的能力。

感知站點延遲：即關鍵的呈現(xiàn)路徑。

檢索

機器人能找到URL并了解你站點的架構嗎？這里有兩個重要元素：

阻止搜索引擎從你的JavaScript（甚至偶然）。

適當?shù)膬?nèi)部鏈接，而不是利用JavaScript事件作為HTML標記的替代品。

為什么阻塞JavaScript這么大？

如果搜索引擎被抓取的JavaScript阻止，他們將不會收到您站點的全部經(jīng)驗。這意味著搜索引擎沒有看到最終用戶看到的內(nèi)容。這樣可以減少你的網(wǎng)站的吸引搜索引擎，最終可能被認為是偽裝（如果意圖確實是惡意的）。

拿谷歌和technicalseo網(wǎng)站的robots.txt文件和讀取和渲染測試工具可以幫助確定Googlebot是阻止資源。

解決這個問題最簡單的方法是通過提供搜索引擎訪問他們所需要的資源來了解您的用戶體驗。

！！！重要提示：與開發(fā)團隊合作，確定哪些文件應該以及不應該被搜索引擎訪問。

內(nèi)部鏈接

內(nèi)部鏈接應實施常規(guī)錨標簽在HTML或DOM（使用一個所有=“www.example .com”HTML標簽）與利用JavaScript功能允許用戶通過網(wǎng)站。

基本上是：不使用JavaScript的onclick事件作為一個內(nèi)部鏈接替換。而最終的URL可能會發(fā)現(xiàn)爬（通過字符串在JavaScript代碼或XML Sitemaps），他們不會與網(wǎng)站相關的全球導航。

內(nèi)部鏈接是搜索引擎對站點的體系結構和頁面重要性的強烈信號。事實上，內(nèi)部鏈接是如此強大，他們可以（在某些情況下）超越“搜索引擎優(yōu)化提示”，如規(guī)范標簽。

網(wǎng)址結構

從歷史上看，基于JavaScript的網(wǎng)站（又名“Ajax網(wǎng)站”）使用片段標識符（#）在URL。

不推薦：

唯一的哈希（#）–孤英鎊的符號是不可能抓到。它用于識別錨鏈接（又名跳轉鏈接）。這些鏈接允許一個人跳轉到頁面上的一段內(nèi)容。在URL的單獨散列部分之后，任何內(nèi)容都不會發(fā)送到服務器，并且會導致頁面自動滾動到第一個元素，并帶有一個匹配ID（或第一個< >元素），該名稱包含以下信息。谷歌建議避免使用“#”網(wǎng)址。

Hashbang（#！）（和escaped_fragments URL）–Hashbang URLs哈克支持爬蟲（谷歌要避免現(xiàn)在只有Bing支持）。很久以前，谷歌和Bing制定了一個復雜的Ajax解決方案，其中一個漂亮的（#！）URL與UX共存與基于等效escaped_fragment HTML程序經(jīng)驗。谷歌已收回了這一建議，寧愿收到確切的用戶體驗。在逃跑片段中，這里有兩個經(jīng)驗：

原有的經(jīng)驗（又名漂亮的URL）：這個URL必須有#！（名）在URL以表明有逃脫的片段或meta元素表明逃跑的片段存在（

）。

逃跑的片段（又名丑陋的URL，HTML快照）：這個URL替換名（#！）“_escaped_fragment_”服務于HTML快照。它被稱為丑陋的URL，因為它很長，看起來像（所有意圖和目的）都是黑客。

圖像結果

圖片來源

推薦:

pushstate歷史API–pushstate是導航和基于歷史的部分API（想想：你的網(wǎng)頁瀏覽歷史記錄）。從本質(zhì)上講，pushstate更新的URL地址欄，只需要在頁面上的變化更新。它允許js站點利用“干凈”URL。pushstate目前是由谷歌支持，當支持瀏覽器的客戶端或混合繪制。

一個很好用的pushstate是無限滾動（即，當用戶點擊新的頁面的URL將更新）。理想情況下，如果用戶刷新頁面，該體驗將使它們處于完全相同的位置。然而

獲得性

搜索引擎已經(jīng)被證明使用無頭瀏覽來呈現(xiàn)DOM以更好地理解用戶的體驗和頁面上的內(nèi)容。也就是說，谷歌可以處理一些JavaScript并使用DOM（而不是HTML文檔）。

同時，有些情況下搜索引擎很難理解JavaScript。沒有人希望Hulu的情況發(fā)生在他們的網(wǎng)站或客戶的網(wǎng)站上。了解機器人如何與您的現(xiàn)場內(nèi)容交互是至關重要的。當你不確定的時候，測試。

假設我們討論的是一個執(zhí)行JavaScript的搜索引擎，那么搜索引擎可以獲得一些重要的內(nèi)容：

如果用戶必須為某件東西開火，搜索引擎可能不會看到它。

谷歌是一個懶惰的用戶。它不會點擊，也不會滾動，也不會登錄。如果從用戶充分的UX要求行動，應采取特殊的預防措施，確保機器人接收同等經(jīng)驗。

如果JavaScript JavaScript加載事件發(fā)生火災，加上~ 5 s *后，搜索引擎可能不會看到它。

* John Mueller提到?jīng)]有具體的超時值；但是，站點應該在五秒內(nèi)加載。

*尖叫青蛙測試顯示相關到五秒渲染內(nèi)容。

*加載事件加五秒是什么谷歌的pagespeed的見解，移動友好的工具，把谷歌的使用；看看Max Prin的測試定時器。

如果JavaScript中存在錯誤，那么如果沒有執(zhí)行整個代碼，那么瀏覽器和搜索引擎都無法通過，并可能錯過頁面的部分。

如何確保谷歌和其他搜索引擎能得到你的內(nèi)容

1。測試

解決JavaScript最流行的解決方案可能是不能解決任何問題（喝咖啡，讓谷歌發(fā)揮算法的才華）。為谷歌提供與搜索者相同的體驗是谷歌的首選方案。

谷歌首次宣布能夠在2014年5月更好地理解Web（即JavaScript）。業(yè)內(nèi)專家建議，谷歌在宣布之前可能會采用JavaScript方式。ipullrank團隊提供的兩大碎片這2011：Googlebot是Chrome和Googlebots有多聰明？（謝謝你，Josh和邁克）。Adam Audette的谷歌可以抓取JavaScript和DOM 2015證實利用。因此，如果你能在DOM中看到你的內(nèi)容，你的內(nèi)容就很有可能被谷歌解析。

adamaudette -我不總是JavaScript，但是當我做，我知道谷歌可以抓取DOM和動態(tài)生成的HTML

近日，Bartosz Goralewicz進行了一個很酷的實驗測試相結合的各種JavaScript庫和框架如何確定谷歌與頁面（例如，它們是索引的URL的內(nèi)容？GSC如何互動？等）。它最終表明，谷歌能夠與多種形式的JavaScript進行交互，并強調(diào)某些框架可能更具挑戰(zhàn)性。John Mueller甚至開始了一個JavaScript搜索組（從我所讀到的，它相當有療效）。

所有這些研究都是驚人的，有助于SEO了解何時關注和采取積極主動的作用。然而，在你決定坐在后面為你的位置是正確的解決方案，我建議在積極謹慎的嘗試小部分認為：Jim Collin的“子彈”，然后炮彈”哲學從他的書很棒的選擇：

“子彈是實證檢驗，旨在學習什么可行，符合三個標準：一顆子彈必須是低成本、低風險、低分心…10xers使用符號來驗證實際將要工作。基于實證的驗證，然后集中資源，發(fā)射炮彈，使大回報集中押注。”

考慮通過以下測試和評審：

確認您的內(nèi)容正在DOM中出現(xiàn)。

測試頁面的子集，看看谷歌是否可以索引內(nèi)容。

從內(nèi)容中手動檢查引號。

用谷歌獲取并查看內(nèi)容是否出現(xiàn)。

應該在加載事件時或超時前發(fā)生谷歌調(diào)用。現(xiàn)在看看谷歌將能夠看到你的內(nèi)容，你是否在你的robots.txt阻止JavaScript的一個很大的考驗。盡管用谷歌獲取信息不是萬無一失的，但這是一個很好的起點。

注意：如果你不在GSC得到驗證，嘗試technicalseo .com的讀取和渲染任何BOT工具。

在測試完所有這些之后，如果某些東西不起作用，搜索引擎和機器人正在努力索引并獲取內(nèi)容，該怎么辦呢？也許你擔心其他搜索引擎（DuckDuckGo，臉譜網(wǎng)，LinkedIn，等等），或者你利用Meta信息需要通過其他程序解析，如推特總結卡或臉譜網(wǎng)Open Graph標簽。如果其中任何一個在測試中被識別，或者作為一個關注點出現(xiàn)，HTML快照可能是唯一的決定。

2。HTML快照

什么是HTML快照？

HTML快照是一個完全呈現(xiàn)的頁面（正如您在DOM中看到的），可以返回到搜索引擎漫游器（認為：DOM的靜態(tài)HTML版本）。

谷歌介紹了HTML快照2009，過時的（但仍然支持）他們在2015，和笨拙地提到他們作為一個元素來“避免”在2016年底。HTML快照是谷歌的一個有爭議的話題。然而，它們是重要的理解，因為在某些情況下，它們是必要的。

如果搜索引擎（像臉譜網(wǎng)這樣的網(wǎng)站）無法掌握你的JavaScript，最好是返回一個HTML快照，而不是讓你的內(nèi)容索引和理解。理想情況下，您的站點將利用服務器端的某種形式的用戶代理檢測，并將HTML快照返回給機器人。

同時，我們必須認識到，谷歌想要與用戶相同的體驗（即，如果測試非常糟糕，而JavaScript搜索組不能為您的情況提供支持），那么只提供谷歌快照。

注意事項

當考慮HTML快照，你必須考慮到谷歌已經(jīng)放棄了這個Ajax推薦。雖然谷歌在技術上仍然支持它，但谷歌建議避免使用它。是的，谷歌改變了主意，現(xiàn)在希望獲得與用戶相同的體驗。這個方向是有意義的，因為它允許機器人更真實地體驗用戶體驗。

第二個考慮因素涉及的隱形風險。如果HTML快照發(fā)現(xiàn)不代表網(wǎng)頁上的經(jīng)驗，它被認為是一個隱形的風險。直接來源：

“HTML快照必須包含與最終用戶在瀏覽器中看到的相同內(nèi)容。如果不是這樣的話，它可能被認為是偽裝。”

–谷歌開發(fā)AJAX爬行常見問題

效益

盡管考慮到這些，HTML快照具有強大的優(yōu)勢：

知識搜索引擎爬蟲能夠體會。

某些類型的JavaScript可能更難讓谷歌掌握（咳嗽）…角（也被稱為AngularJS 2）咳嗽）。

其他搜索引擎爬蟲（認為：Bing、臉譜網(wǎng)）能夠體會。

Bing在其他搜索引擎中并沒有說明它可以抓取和索引JavaScript。HTML快照可能是JavaScript重站點的惟一解決方案。和以往一樣，在潛水之前要確保這是事實。

現(xiàn)場等待時間

當瀏覽器接收到HTML文檔并創(chuàng)建DOM（雖然有一定程度的預掃描）時，大多數(shù)資源都會在HTML文檔中出現(xiàn)。這意味著，如果您的HTML文檔頂部有一個巨大的文件，瀏覽器將首先加載這個巨大的文件。

谷歌關鍵的渲染路徑的概念是加載用戶需要什么盡快，可譯為“把一切→在用戶面前的倍以上，盡快。”

關鍵渲染路徑-優(yōu)化繪制逐漸加載：

漸進式頁面的渲染

然而，如果您有不必要的資源或JavaScript文件阻塞了頁面加載的能力，那么您將得到“阻止JavaScript”。

渲染阻塞的JavaScript -解決方案

如果你分析你的網(wǎng)頁速度的結果（如網(wǎng)頁速度的見解的工具，工具webpagetest.org，握點，等等），確定有一個渲染阻塞JavaScript的問題，這里有三個可能的解決方案：

內(nèi)聯(lián)：在HTML文檔中添加JavaScript。

異步：使JavaScript異步（即添加“異步”屬性的HTML標簽）。

延遲：在HTML中放置javascript。

！！！重要提示：理解腳本必須按優(yōu)先級排列是很重要的。用于加載上述折疊內(nèi)容的腳本必須優(yōu)先考慮，不應推遲。另外，引用其他文件的任何腳本只能在引用文件加載后使用。確保與開發(fā)團隊緊密合作，以確認用戶體驗沒有中斷。

閱讀更多：谷歌開發(fā)人員的速度文檔

這個故事的寓意

爬蟲和搜索引擎會盡力爬，執(zhí)行和解釋你的JavaScript，但不保證。確保你的內(nèi)容抓取，索取，而不是開發(fā)網(wǎng)站潛在障礙。關鍵=每個情況都需要測試。基于結果，評估潛在的解決方案。

感謝：感謝Max Prin（@ maxxeight）評審內(nèi)容塊和分享你的知識，洞察力和智慧。沒有你就不一樣了。