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)嗎？如果沒(méi)有，您可以用什么解決方案來(lái)修復(fù)它？

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

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

基本面

什么是JavaScript？

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

超文本標(biāo)記語(yǔ)言是站點(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)成頁(yè)面的表示層。

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

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

javacssseo.gif

圖片來(lái)源：1, 2, 3

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

JavaScript庫(kù)和框架：

什么是ajax？

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

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

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

相關(guān)的圖像

圖片來(lái)源

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

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

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

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

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

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

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

HTML源代碼

DOM

什么是無(wú)頭瀏覽？

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

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

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

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

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

獲得性：機(jī)器人的訪問(wèn)信息和分析你的內(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)。這意味著搜索引擎沒(méi)有看到最終用戶看到的內(nèi)容。這樣可以減少你的網(wǎng)站的吸引搜索引擎，最終可能被認(rèn)為是偽裝（如果意圖確實(shí)是惡意的）。

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

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

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

內(nèi)部鏈接

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

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

內(nèi)部鏈接是搜索引擎對(duì)站點(diǎn)的體系結(jié)構(gòu)和頁(yè)面重要性的強(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)到頁(yè)面上的一段內(nèi)容。在URL的單獨(dú)散列部分之后，任何內(nèi)容都不會(huì)發(fā)送到服務(wù)器，并且會(huì)導(dǎo)致頁(yè)面自動(dòng)滾動(dòng)到第一個(gè)元素，并帶有一個(gè)匹配ID（或第一個(gè)< >元素），該名稱包含以下信息。谷歌建議避免使用“#”網(wǎng)址。

Hashbang（#?。ê蚭scaped_fragments URL）–Hashbang URLs哈克支持爬蟲(chóng)（谷歌要避免現(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替換名（#！）“_escaped_fragment_”服務(wù)于HTML快照。它被稱為丑陋的URL，因?yàn)樗荛L(zhǎng)，看起來(lái)像（所有意圖和目的）都是黑客。

圖像結(jié)果

圖片來(lái)源

推薦:

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

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

獲得性

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

同時(shí)，有些情況下搜索引擎很難理解JavaScript。沒(méi)有人希望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)容：

如果用戶必須為某件東西開(kā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的見(jiàn)解，移動(dòng)友好的工具，把谷歌的使用；看看Max Prin的測(cè)試定時(shí)器。

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

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

1。測(cè)試

解決JavaScript最流行的解決方案可能是不能解決任何問(wèn)題（喝咖啡，讓谷歌發(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庫(kù)和框架如何確定谷歌與頁(yè)面（例如，它們是索引的URL的內(nèi)容？GSC如何互動(dòng)？等）。它最終表明，谷歌能夠與多種形式的JavaScript進(jìn)行交互，并強(qiáng)調(diào)某些框架可能更具挑戰(zhàn)性。John Mueller甚至開(kāi)始了一個(gè)JavaScript搜索組（從我所讀到的，它相當(dāng)有療效）。

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

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

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

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

測(cè)試頁(yè)面的子集，看看谷歌是否可以索引內(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)。盡管用谷歌獲取信息不是萬(wàn)無(wú)一失的，但這是一個(gè)很好的起點(diǎn)。

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

在測(cè)試完所有這些之后，如果某些東西不起作用，搜索引擎和機(jī)器人正在努力索引并獲取內(nèi)容，該怎么辦呢？也許你擔(dān)心其他搜索引擎（DuckDuckGo，臉譜網(wǎng)，LinkedIn，等等），或者你利用Meta信息需要通過(guò)其他程序解析，如推特總結(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)的頁(yè)面（正如您在DOM中看到的），可以返回到搜索引擎漫游器（認(rèn)為：DOM的靜態(tài)HTML版本）。

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

如果搜索引擎（像臉譜網(wǎng)這樣的網(wǎng)站）無(wú)法掌握你的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)頁(yè)上的經(jīng)驗(yàn)，它被認(rèn)為是一個(gè)隱形的風(fēng)險(xiǎn)。直接來(lái)源：

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

–谷歌開(kāi)發(fā)AJAX爬行常見(jiàn)問(wèn)題

效益

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

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

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

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

Bing在其他搜索引擎中并沒(méi)有說(shuō)明它可以抓取和索引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)式頁(yè)面的渲染

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

渲染阻塞的JavaScript -解決方案

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

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

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

延遲：在HTML中放置javascript。

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

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

這個(gè)故事的寓意

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

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

標(biāo)題名稱：JavaScript和SEO機(jī)器人體驗(yàn)
文章出自：http://jinyejixie.com/news49/20549.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站營(yíng)銷、網(wǎng)站建設(shè)、做網(wǎng)站、全網(wǎng)營(yíng)銷推廣、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)