JavaScript和SEO機(jī)器人體驗(yàn)

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

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

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

基本面

什么是JavaScript？

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

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

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

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

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

javacssseo.gif

圖片來源：1, 2, 3

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

JavaScript庫和框架：

什么是ajax？

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

Ajax的一個(gè)常用用法是更新網(wǎng)頁的內(nèi)容或布局，而無需啟動(dòng)完整的頁面刷新。通常，當(dāng)頁面加載時(shí)，頁面上的所有資產(chǎn)必須被請(qǐng)求并從服務(wù)器獲取，然后在頁面上呈現(xiàn)。然而，對(duì)于Ajax，只需要加載頁面之間不同的資產(chǎn)，這就改善了用戶體驗(yàn)，因?yàn)樗鼈儾槐厮⑿抡麄€(gè)頁面。

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

相關(guān)的圖像

圖片來源

什么是文檔對(duì)象模型（DOM）？

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

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

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

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

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

一個(gè)簡(jiǎn)單的例子，它通過JavaScript填充：

HTML源代碼

DOM

什么是無頭瀏覽？

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

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

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

有三個(gè)（3）主要原因要關(guān)注站點(diǎn)上的JavaScript：

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

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

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

檢索

機(jī)器人能找到URL并了解你站點(diǎn)的架構(gòu)嗎？這里有兩個(gè)重要元素：

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

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

為什么阻塞JavaScript這么大？

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

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

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

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

內(nèi)部鏈接

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

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

內(nèi)部鏈接是搜索引擎對(duì)站點(diǎn)的體系結(jié)構(gòu)和頁面重要性的強(qiáng)烈信號(hào)。事實(shí)上，內(nèi)部鏈接是如此強(qiáng)大，他們可以（在某些情況下）超越“搜索引擎優(yōu)化提示”，如規(guī)范標(biāo)簽。

網(wǎng)址結(jié)構(gòu)

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

不推薦：

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

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

原有的經(jīng)驗(yàn)（又名漂亮的URL）：這個(gè)URL必須有#?。┰赨RL以表明有逃脫的片段或meta元素表明逃跑的片段存在（

）。

逃跑的片段（又名丑陋的URL，HTML快照）：這個(gè)URL替換名（#?。?ldquo;_escaped_fragment_”服務(wù)于HTML快照。它被稱為丑陋的URL，因?yàn)樗荛L(zhǎng)，看起來像（所有意圖和目的）都是黑客。

圖像結(jié)果

圖片來源

推薦:

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

一個(gè)很好用的pushstate是無限滾動(dòng)（即，當(dāng)用戶點(diǎn)擊新的頁面的URL將更新）。理想情況下，如果用戶刷新頁面，該體驗(yàn)將使它們處于完全相同的位置。然而

獲得性

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

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

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

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

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

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

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

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

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

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

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

1。測(cè)試

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

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

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

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

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

“子彈是實(shí)證檢驗(yàn)，旨在學(xué)習(xí)什么可行，符合三個(gè)標(biāo)準(zhǔn)：一顆子彈必須是低成本、低風(fēng)險(xiǎn)、低分心…10xers使用符號(hào)來驗(yàn)證實(shí)際將要工作。基于實(shí)證的驗(yàn)證，然后集中資源，發(fā)射炮彈，使大回報(bào)集中押注。”

考慮通過以下測(cè)試和評(píng)審：

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

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

從內(nèi)容中手動(dòng)檢查引號(hào)。

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

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

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

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

2。HTML快照

什么是HTML快照？

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

谷歌介紹了HTML快照2009，過時(shí)的（但仍然支持）他們?cè)?015，和笨拙地提到他們作為一個(gè)元素來“避免”在2016年底。HTML快照是谷歌的一個(gè)有爭(zhēng)議的話題。然而，它們是重要的理解，因?yàn)樵谀承┣闆r下，它們是必要的。

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

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

注意事項(xiàng)

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

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

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

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

效益

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

知識(shí)搜索引擎爬蟲能夠體會(huì)。

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

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

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

現(xiàn)場(chǎng)等待時(shí)間

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

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

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

漸進(jìn)式頁面的渲染

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

渲染阻塞的JavaScript -解決方案

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

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

異步：使JavaScript異步（即添加“異步”屬性的HTML標(biāo)簽）。

延遲：在HTML中放置javascript。

?。。≈匾崾荆豪斫饽_本必須按優(yōu)先級(jí)排列是很重要的。用于加載上述折疊內(nèi)容的腳本必須優(yōu)先考慮，不應(yīng)推遲。另外，引用其他文件的任何腳本只能在引用文件加載后使用。確保與開發(fā)團(tuán)隊(duì)緊密合作，以確認(rèn)用戶體驗(yàn)沒有中斷。

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

這個(gè)故事的寓意

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

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