JavaScript和SEO：讓你的機器人體驗和你的用戶體驗一樣好

技術先進的搜索引擎優化SEO

深圳網站制作意識到這是非常重要的我們作為SEO理解JavaScript的搜索體驗的影響。搜索引擎能以用戶的方式看到你的內容并體驗你的站點嗎？如果沒有，您可以用什么解決方案來修復它？

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

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

基本面

什么是JavaScript？

在創建一個現代Web頁面時，主要有三個組件：

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

CSS–級聯樣式表的設計、浮華，魅力，和樣式添加到網站。它構成頁面的表示層。

JavaScript是動態Web的交互性和核心組件。

了解更多關于網頁開發和如何編寫基本javascript的代碼。

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

JavaScript庫和框架：

什么是ajax？

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

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

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

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

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

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

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

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

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

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

HTML源代碼

DOM

什么是無頭瀏覽？

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

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

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

JavaScript和SEO機器人體驗

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

檢索：搜索引擎抓取你的網站的能力。

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

感知站點延遲：即關鍵的呈現路徑。

檢索

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

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

適當的內部鏈接，而不是利用JavaScript事件作為HTML標記的替代品。

為什么阻塞JavaScript這么大？

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

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

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

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

內部鏈接

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

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

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

網址結構

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

不推薦：

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

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

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

）。

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

推薦:

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

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

獲得性

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

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

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

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

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

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

*John Mueller提到沒有具體的超時值；但是，站點應該在五秒內加載。

*尖叫青蛙測試顯示相關到五秒渲染內容。

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

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

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

1。測試

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

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

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

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

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

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

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

確認您的內容正在DOM中出現。

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

從內容中手動檢查引號。

用谷歌獲取并查看內容是否出現。

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

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

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

2。HTML快照

什么是HTML快照？

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

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

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

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

注意事項

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

第二個考慮因素涉及的隱形風險。如果HTML快照發現不代表網頁上的經驗，它被認為是一個隱形的風險。直接來源：

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

–谷歌開發AJAX爬行常見問題

效益

盡管考慮到這些，HTML快照具有強大的優勢：

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

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

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

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

現場等待時間

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

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

關鍵渲染路徑-優化繪制逐漸加載：

漸進式頁面的渲染

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

渲染阻塞的JavaScript-解決方案

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

內聯：在HTML文檔中添加JavaScript。

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

延遲：在HTML中放置javascript。

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

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

創新互聯專注成都網站建設和網站維護網站托管服務，為企業提供微信小程序開發，APP定制開發，擁有雄厚的網站制作建設APP小程序開發經驗，是具有實力的網站建設公司。

新聞標題：JavaScript和SEO機器人體驗
本文地址：http://vcdvsql.cn/news30/273130.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、網站排名、電子商務、商城網站、網站導航、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯