SEO必須能夠保證其技術實現並對搜尋引擎友好
支援JavaScript的網站將繼續存在。由於JavaScript在其眾多框架中成為現代網站越來越受歡迎的資源，因此SEO必須能夠保證其技術實現對搜尋引擎友好。
在本文中，我們將重點介紹如何針對Google優化JS網站（儘管Bing也推薦了相同的解決方案，動態呈現）。
本文內容包括：
- SEO的 JavaScript挑戰
2.客戶端和伺服器端呈現
- Google如何抓取網站
4.如何檢測客戶端呈現的內容
5.解決方案：混合渲染和動態渲染
-
SEO的JavaScript挑戰
React，Vue，Angular，Node和Polymer。如果這些花哨的名字中至少有一個響鈴，那麼很可能你已經在處理一個由JavaScript驅動的網站了。
所有這些JavaScript框架都為現代網站提供了極大的靈活性和強大功能。
它們在客戶端呈現（如允許瀏覽器而不是伺服器呈現頁面），頁面載入功能，動態內容，使用者互動和擴充套件功能方面開啟了大量可能性。
如果我們只關注對SEO有什麼影響，JavaScript框架可以為網站做以下事情：
根據使用者的互動動態載入內容
外部化可見內容的載入（請參閱下面的客戶端呈現）
外部化元內容或程式碼的載入（例如，結構化資料）
遺憾的是，如果在不使用一對SEO鏡頭的情況下實施，JavaScript框架可能會對頁面效能構成嚴峻挑戰，從速度缺陷到渲染阻塞問題，甚至阻礙內容和連結的可抓取性。
在稽核JavaScript驅動的網頁時，SEO必須遵循許多方面，可歸納如下：
Googlebot是否可以看到該內容？請記住，機器人不與頁面互動（影象，選項卡等）。
連結是否可以抓取，因此遵循？始終使用錨點（）和引用（href =），甚至與“onclick”事件一起使用。
渲染速度是否足夠快？
它如何影響抓取效率和抓取預算？
要回答很多問題。那麼SEO應該從哪裡開始呢？
以下是優化JS網站的關鍵指南，以便在保持搜尋引擎機器人滿意的同時使用這些框架。
2.客戶端和伺服器端呈現：最好的“frenemies”
當他們必須應對JS驅動的網站時，所有SEO所需的最重要的知識可能是客戶端和伺服器端呈現的概念。
瞭解兩者的差異，好處和缺點對於部署正確的SEO策略至關重要，而不是在與軟體工程師（最終負責實施該策略的人）交談時迷路。
讓我們看一下Googlebot如何抓取和索引頁面，將其作為一個非常基本的順序過程：
googlebot如何抓取和索引頁面
1.客戶端（Web瀏覽器）向伺服器發出多個請求，以便下載最終顯示該頁面的所有必要資訊。通常，第一個請求涉及靜態HTML文件。
2.然後下載HTML文件引用的CSS和JS檔案：這些是有助於生成頁面的樣式，指令碼和服務。
3.網站渲染服務（WRS）解析並執行JavaScript（可以管理全部或部分內容或僅僅是一個簡單的功能）。
這個JavaScript可以通過兩種不同的方式提供給bot：
客戶端：所有工作基本上都“外包”給WRS，WRS現在負責載入所有指令碼和必要的庫來呈現該內容。伺服器的優點是當真實使用者請求頁面時，它會節省大量資源，因為指令碼的執行發生在瀏覽器端。
伺服器端：伺服器對所有內容進行預先烹飪（也稱為渲染），最終結果傳送到機器人，準備進行爬網和索引。這裡的缺點是所有作業都由伺服器在內部執行，而不是外部化到客戶端，這可能導致進一步請求的呈現中的額外延遲。
- 咖啡因（Google的索引器）對找到的內容進行索引
在內容中發現新連結以進行進一步爬網
這是理論，但在現實世界中，Google沒有無限的資源，必須在爬行中做一些優先順序。
-
Google如何實際抓取網站
Google是一款非常智慧的搜尋引擎，擁有非常智慧的抓取工具。
但是，當涉及應用於Web開發的新技術時，它通常採用被動方法。這意味著谷歌和它的機器人需要適應新的框架，因為它們變得越來越流行（JavaScript就是這種情況）。
出於這個原因，谷歌抓取JS驅動的網站的方式仍然遠非完美，而且SEO和軟體工程師需要以某種方式減輕盲點。
簡而言之，谷歌實際抓取這些網站的方式如下：
googlebot如何抓取JS呈現的網站
上面的圖表由Tom Greenaway在Google IO 2018會議上分享，它基本上說的是 – 如果您的網站嚴重依賴JavaScript，您最好快速載入JS內容，否則我們將無法在第一波期間渲染它（因此將其編入索引），並且它將被推遲到第二波，沒有人知道何時可能發生。
因此，基於JavaScript的客戶端呈現內容可能會由第二波中的機器人呈現，因為在第一波中它們將載入伺服器端內容，這應該足夠快。但是他們不想花太多資源來承擔太多工。
湯姆格林納威的話：
“谷歌搜尋中的JavaScript驅動網站的呈現推遲到Googlebot有可用於處理該內容的資源。”
對SEO的影響是巨大的，您的內容可能直到一週，兩週甚至五週後才被發現，同時，只有您的無內容頁面將被演算法評估和排名。
在這一點上SEO最應該擔心的是這個簡單的等式：
沒有找到內容=內容（可能）幾乎不可索引
如何減少無內容的頁面排名？很容易猜到任何SEO。
到現在為止還挺好。下一步是學習內容是在客戶端還是在伺服器端呈現（不需要軟體工程師）。
4.如何檢測客戶端呈現的內容
選項一：文件物件模型（DOM）
有幾種方法可以瞭解它，為此，我們需要介紹DOM的概念。
文件物件模型定義HTML（或XML）文件的結構，以及如何訪問和操作這些文件。
在SEO和軟體工程中，我們通常將DOM稱為瀏覽器呈現的最終HTML文件，而不是生成在伺服器中的原始靜態HTML文件。
您可以將HTML視為樹的主幹。您可以向其新增分支，葉子，花和果實（即DOM）。
JavaScript所做的是操縱HTML並建立一個增加功能和內容的豐富DOM。
在實踐中，您可以通過在您正在檢視的任何頁面上按“Ctrl + U”來檢查靜態HTML，並在完全載入後通過“檢查”頁面來檢查DOM。
大多數情況下，對於現代網站，您會發現這兩個文件完全不同。
選項二：免費的JS配置檔案
在Chrome中建立新的個人資料，並通過內容設定禁止JavaScript（直接在此處訪問它們 – Chrome：//設定/內容）。
使用此配置檔案瀏覽的任何URL都不會載入任何JS內容。因此，頁面中的任何空白點都標識了客戶端提供的一段內容。
選項三：在Google Search Console中以Google格式抓取
如果您的網站已在Google Search Console中註冊（我無法想到它不會有任何正當理由），請使用舊版控制檯中的“抓取為Google”工具。這將返回Googlebot檢視頁面的呈現方式以及普通使用者如何看待該頁面的呈現。有很多不同之處？
連結構建內容生成中的三個基本因素 如何進行品牌檢索稽核 如何為您的影象編寫SEO友好的替代文字 如何完美平衡聯盟營銷和SEO
選項四：在無頭模式下執行Chrome版本41（Chromium）
谷歌在2018年初正式宣告他們使用舊版Chrome（特別是版本41，任何人都可以從這裡下載）以無頭模式呈現網站。主要含義是，在該版本的Chrome中無法很好地呈現的頁面可能會遇到一些面向爬行的問題。
選項五：使用Googlebot在Screaming Frog上抓取頁面
並禁用JavaScript呈現選項。檢查機器人是否正確呈現了內容和元內容。
在完成所有這些檢查之後，仍然請問您的軟體工程師，因為您不想留下任何鬆散的結果。
5.解決方案：混合渲染和動態渲染
要求軟體工程師回滾一項偉大的開發工作，因為它會傷害SEO可能是一項艱鉅的任務。
經常發生的是，SEO不參與開發過程，只有在整個基礎設施到位時才會呼叫它們。
我們的SEO應該致力於改善我們與軟體工程師的關係，讓他們意識到任何創新對SEO的巨大影響。
這就是從一開始就可以避免像無內容頁面這樣的問題。解決方案有兩種方法。
混合渲染
這種方法也稱為同構JavaScript，旨在最大限度地減少對客戶端呈現的需求，並且不區分機器人和真實使用者。
混合渲染表明以下內容：
一方面，所有非互動式程式碼（包括所有JavaScript）都在伺服器端執行，以便呈現靜態頁面。爬蟲和使用者訪問頁面時都可以看到所有內容。
另一方面，客戶端（瀏覽器）僅執行使用者互動式資源。這有利於頁面載入速度，因為需要更少的客戶端呈現。
動態渲染
該方法旨在檢測機器人發出的請求與使用者放置的請求，並相應地提供頁面。
如果請求來自使用者：伺服器提供靜態HTML並利用客戶端呈現來構建DOM並呈現頁面。
如果請求來自機器人：伺服器通過內部渲染器（例如Puppeteer）預渲染JavaScript，並將新的靜態HTML（由JavaScript操縱的DOM）傳遞給機器人。
谷歌如何動態渲染JavaScript網站
兩全其美的
結合這兩種解決方案還可以為使用者和機器人提供巨大的好處。
如果請求來自使用者，請使用混合呈現
如果請求來自機器人，請使用伺服器端呈現
結論
隨著現代網站中JavaScript的使用日益增長，通過許多簡單易用的框架，它要求軟體工程師完全依賴HTML來搜尋不實際也不可行的搜尋引擎機器人。
但是，客戶端渲染解決方案引發的SEO問題可以使用混合渲染和動態渲染以不同方式成功解決。
瞭解可用的技術，您的網站基礎設施，工程師和解決方案可以保證您的SEO策略的成功，即使在JavaScript驅動的網站等複雜環境中也是如此。
免責宣告：本文僅代表作者個人觀點，與窮思筆記網無關。其原創性以及文中陳述文字和內容未經本站證實，對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾，請讀者僅作參考，並請自行核實相關內容。