[ad_1]
嗨，您好。技術SEO在這裡。我在2015年開始與Angular合作，重新設計電子商務網站。我已經打破了很多，但修復得更多。
如果您是初次使用SEO的SEO或需要有關此處引用的概念的其他信息，請參閱Rachel Costello的 了解JavaScript基礎知識：您的備忘單 是一個很好的資源。
最重要的是：不要驚慌。您無需成為所提及的每項技術的專家。
您獲得利益相關者支持並與開發人員溝通的能力可能是您最大的優勢。我們將提供額外的資源來提供幫助。
讓我們從基礎知識開始
網站由代碼組成。代碼用語言編寫。三種語言構成了大多數網站。
HTML創建內容。 CSS製作布局，設計和視覺效果。
這兩種語言可以製作出美觀，功能性強的平面頁面 – 但大多數情況下它們都很無聊。
輸入JavaScript（JS），一個編程代碼的Web版本。
藉助JavaScript，網站可以個性化互動式用戶體驗。人們去參與網站。 JS製作引人入勝的網站
Angular是JavaScript的演變
Angular是一種擴展JS來構建站點的方法。使用Angular，從您的伺服器發送的十幾行平面HTML展開並執行個性化的互動式用戶體驗。
用它建造了近100萬個站點。收養率正在迅速增長。
如果您還沒有使用過Angular或其他JavaScript框架，那麼您可能會這樣做 不久。
要讓搜索引擎了解Angular站點，他們必須呈現JavaScript
要讓搜索引擎體驗Angular內容，他們需要執行JavaScript。許多搜索引擎無法呈現JavaScript。
不要驚慌。
如果您的市場主要由百度，Yandex，Naver或其他非渲染搜索引擎主導，請跳至渲染部分。
Googlebot <3s JavaScript
不完全是。他們喜歡它，因為人類喜歡豐富的互動體驗！
……因為 95％ 網站使用它。
當您的模型依賴於最受信任的Web內容索引時，為JS生成的內容編製索引是一件好事。
這並不意味著它是一個歷史上完美的關係。搜索引擎優化專業人士已經厭倦了Googlebot的能力和抓取JS的承諾。
缺乏明確性導致警告Angular可以殺死你的SEO。
在 I / O 2018，網站管理員團隊公開談論了Google在索引Angular和其他JS內容時遇到的問題。一些SEO專業人員瘋了，其他人生氣，有些人……不合理地興奮？
我支持那種興奮。代表搜索。 （去年，我在開發者大會上遇到了一些對搜索引擎優化人員存在的困惑回應。向技術搜索引擎優化的心臟箭頭。）
開發人員很興奮。
然後John Mueller和Tom Greenaway走上舞台，解決搜索社區中的一個重大誤解：搜索是如何運作的。
抓取，索引，排名 – 輕鬆一，三，四！
在Google 2018年開發者大會之前，搜索引擎優化專業人員的工作基本前提是Googlebot的流程分三個步驟：爬行，索引和排名。
直到2019年4月，Google自己的資源反映了一個簡單的三步流程。
潛伏在這個簡化過程中的是各種各樣的隱藏假設：
- Googlebot在抓取JS時呈現JS。
- 索引基於呈現的內容。
- 這些操作在單個序列中同時發生。
- Googlebot是神奇的，可以立即完成所有事情！
這是問題所在。我們忽略了渲染。
渲染是獲取和執行初始HTML分析中調用的腳本的過程。
我們將初始HTML解析的輸出和JavaScript稱為DOM（文檔對象模型）。
如果站點使用JavaScript，則HTML將與DOM不同。
初始HTML（在JavaScript執行之前）
DOM（JavaScript執行後）
單個頁面的兩個視圖可能非常不同。最初的HTML只有16行。執行JavaScript後，DOM內容豐富。
您可以通過查看頁面源來查看初始HTML分析。要查看DOM，請在瀏覽器中打開「開發人員工具」，然後單擊「檢查」。或者，使用鍵盤快捷鍵Cmd + shift + I.
兩波索引
由於三步流程假設及其對有機績效的影響，Google網站管理員團隊澄清了索引的兩個階段。
第一個wave僅基於初始HTML（a.k.a.，查看頁面源）索引頁面。
第二個索引基於DOM。
Googlebot想要愛JavaScript，但他們有時需要你的幫助才能理解它
JavaScript是 最昂貴的資源 在您的網站上。
3G連接上1MB的腳本可能需要5秒。 1.5MB頁面載入費用為0.19美元。 （不，真的。測試你的頁面 我的網站費用是多少？）
對於Googlebot來說，這個成本來自執行腳本的CPU。由於網路上有如此多的JavaScript，因此為Googlebot的渲染引擎創建了一個文字隊列。
這意味著只有在資源可用後，Googlebot才會發現JavaScript生成的內容。
Googlebot的技術債務為角度困難製造了SEO
數字生活的一部分正在與你所擁有的一起工作。我們通常會採取簡單的解決方案，而不是採用需要更長時間的更好方法。
這些捷徑的高潮是科技債務。通常，在實施大的變更之前，必須清理科技債務。
谷歌了解網路豐富內容的主要障礙之一是其網路渲染服務（WRS）。網路爬蟲的核心組件之一是使用2015年發布的Chrome版本。（如果您認為這不是一件大事，請找到您的舊手機 – 從六個月前升級的手機 – 並使用它下一個小時。）
對於搜索引擎優化專業人士和開發人員來說，這意味著推動代碼庫充滿了polyfill以進行改造 ES6 ES5的功能。如果您對這些不熟悉，恭喜！您已經選擇了黃金時代來開始優化Angular網站！
Googlebot的Revving New Rendering Engine
搜索控制台開發者倡導者Martin Splitt本月早些時候在Google I / O上與渲染工程師Zoe Clifford一同宣布 Googlebot是常青樹。
網路爬蟲正在使用 V8 作為其渲染和WebAssembly引擎。截至2019年5月，它正在運行Chrome 74，並將在一周左右的新版本發布後繼續更新。
對我們心愛的網路爬蟲的大規模升級現在可以呈現超過1,000個新功能。您可以測試您的功能兼容性 我可以用嗎。
預計呈現內容的延遲將被編入索引
Google員工暗示Googlebot的未來將結合抓取和渲染。我們還沒有。抓取和渲染仍然是單獨的進程。
仍然存在延遲……但現在支持超過1000種新功能！
– Martin Splitt @???（@ g33konaut） 2019年5月7日
現在Googlebot可以更好地處理Angular，讓我們來談談如何征服它。
優化角度爬行
了解你的版本
您正在開發的Angular版本將對您的優化能力產生重大影響 – 或至少設定期望值。
版本1稱為AngularJS。
對於v2，框架完全重寫。這就是為什麼v1之後的所有內容都被稱為全局術語Angular（即JS被切斷）。
版本很重要（因為Angular程序不向後兼容），所以請問團隊您正在使用哪個版本。
為每個資產提供唯一的URL
Angular經常用作單頁面應用程序（SPA）的一部分。
單頁應用程序允許更新頁面上的內容，而無需將頁面請求返回給伺服器。
使用非同步JavaScript和XML（AJAX）調用填充新內容的請求。沒有新的頁面載入可能意味著瀏覽器中可見的URL不代表屏幕上的內容。
這是一個SEO問題，因為搜索引擎想要索引始終存在於已知地址的內容。如果您的內容只傾向於存在於URI中，那麼它也往往不會排名。
一小段代碼稱為 pushState的（） 在請求新內容時更新URL。
谷歌提供Codelab 在搜索中優化單頁應用程序（SPA）。
使用虛擬網頁瀏覽跟蹤單頁應用程序的分析
如果您的網站動態載入頁面內容並更新文檔的URL，您將需要發送其他綜合瀏覽量來跟蹤這些「虛擬網頁瀏覽量」。
當您的應用程序動態載入內容並更新地址欄中的URL時，也應更新存儲在跟蹤器上的數據。
Google Analytics工作人員提供了詳盡的文檔 SPA的虛擬綜合瀏覽量，包括添加手動標籤，以便在載入新內容時向跟蹤伺服器發送信息。
通過伺服器端渲染您的Hero元素，在第一波索引中發現您的內容
搜索引擎希望將頁面與意圖進行匹配。
此頁面是否有助於回答交易，信息或本地意圖？
如果我的查詢具有事務意圖，那麼產品名稱，價格和可用性等元素對於回答我的意圖至關重要。
此內容稱為您的英雄元素。
通過伺服器端呈現這些，您可以告訴Google在第一波索引中您的頁面匹配的意圖 – 無需等待JavaScript呈現。
除了英雄元素上的這些，使用SSR：
- 結構化數據（Sam Vloeberghs創建了一個 有用的教程）
- 頁面標題
- 元描述
- HTML標記，包括：
- 典範
- 的hreflang
- 日期注釋
不要在HTML和DOM之間自相矛盾
SEO的基礎知識教會我們簡單。
頁面獲得一個標題。一個元描述。一套機器人指令。
使用Angular，您可以在HTML中發送與DOM不同的元數據和指令。
我們的機器人朋友按照設定的順序運行代碼。如果在HTML中放置noindex指令，Googlebot將不會執行腳本來在DOM中查找索引標記，因為您告訴它不要呈現DOM。
不要在HTML和DOM之間拆分結構化數據標記
使用Angular，您可以在HTML（首選）或DOM中呈現Schema.org標記。
兩者都可以工作，但完整標記位於單個位置非常重要 – 無論是HTML還是DOM。
如果通過在HTML中呈現標記的一部分並填充屬性DOM來拆分兩者，則將單獨的組件視為不同的標記集。
它們都不完整。結構化數據標記有效或無效。沒有「偏袒。」最大的努力。
緩慢或受阻的資源可能使內容無法發現
發現內容的方式不會考慮緩慢或被阻止的資源。緩慢的資源將顯示為暫時不可用。
腳本請求需要在~4s內完成。被阻止的資源將在工具輸出中表示為這樣。
支持無限滾動的分頁載入
手機上的分頁可能令人沮喪。
您無需在易用性和Googlebot抓取之間做出選擇。相反，請使用History API檢查點 – 允許用戶（或機器人）返回同一位置的URL。
根據谷歌：
如果要實現無限滾動體驗，請確保支持分頁載入。分頁載入對用戶很重要，因為它允許用戶共享和重新與您的內容互動。它還允許Google顯示指向內容中特定點的鏈接，而不是無限滾動頁面的頂部。
要支持分頁載入，請為用戶可以直接共享和載入的每個部分提供唯一鏈接。我們建議使用History API在動態載入內容時更新URL。
了解更多Google全新的內容 Lazy Loading開發人員文檔。
請勿等待許可權，事件或交互以顯示內容
交互觀察者> Onscroll事件
使用onscroll事件延遲載入？
Googlebot不會看到它。相反，使用Googlebot友好 交叉觀察員 了解組件何時位於視口中。
使用CSS切換可見性進行點擊載入
如果您的網站在手風琴，標籤或其他點擊載入互動背後具有有價值的背景，請不要等待該區域被曝光以載入它。
在HTML或DOM中載入內容並使用CSS功能公開它。
你永遠不會得到這個許可
如果您的網站要求許可權，Googlebot將會拒絕。其中包括地理位置，通知，推送以及列出的許多其他內容 W3C的許可註冊表。
可伸縮鏈接具有帶Href屬性的錨標籤
Web爬網程序的概念基於通過以下鏈接發現內容。您的Angular內容需要與要發現的href屬性的鏈接。
Google不會選擇嵌入了CSS樣式的圖片。
高級圖像嵌入選項包括使用
谷歌的 建議 是：
…當使用以下格式的圖片標記時，您始終提供img元素作為具有src屬性的後備：
在摺疊內容之上使用內聯樣式
對於上層內容的腳本依賴性使您的可發現性處於危險之中。如果在不等待載入腳本資源的情況下無法呈現您的內容，搜索引擎和用戶可能會遇到延遲。
通過內聯中的關鍵CSS來優化關鍵渲染路徑
，允許在瀏覽器中呈現上層內容，而無需等待載入其餘的CSS。詳細了解如何最小化渲染阻止CSS Web基礎知識。
渲染優化
Googlebot愛不是關於網站是否使用JavaScript。這是關於如何呈現JavaScript的。
渲染選項和技術既豐富又令人困惑。
以下是Angular渲染選項的高級概述。拿一杯咖啡坐下來和你的開發人員一起回顧一下 有關渲染選項的詳細文檔。與往常一樣，魔鬼正在實施中，您的體驗可能會有所不同。
客戶端渲染（CSR）
CSR在用戶的瀏覽器中構建頁面。最初的HTML是一個貧血的外殼。用戶只能在獲取和呈現主JavaScript包之後查看和交互。
可發現性評級：?
績效評級：⭐️
伺服器端渲染（SSR）
HTML非常好，你將獲得Bing證明！
SSR也稱為Universal，它在伺服器上構建頁面並發布HTML。該方法是伺服器密集型的，並且具有較高的首次位元組時間權衡，因此您需要主動監控伺服器運行狀況。
可發現性評級：???
績效評級：⭐️⭐️
值得注意的成就：?非渲染搜索引擎的理想選擇
動態渲染
搜索引擎抓取工具的一個非常令人困惑的隱藏（但不是隱藏真實內容）短期解決方案。此技術要求同時提供CSR和SSR渲染，並根據用戶代理確定要提供的內容。
像開源預渲染工具這樣的技術 Rendertron 對您的業務仍然非常有用。
可爬行性評級：???
績效評級：⭐️
可持續性評級：⚰️
如果您尚未實現動態渲染，則此選項可能會超過其最佳日期。
預渲染
可爬行性評級：????
業績評級：⭐️⭐️⭐️
在構建時創建HTML並將其存儲為根據請求提供。改進了FCP，沒有SSR開銷。
僅適用於靜態內容 – 不適用於要更改的內容（請考慮個性化和A / B測試）。
記住孩子，您的付費預渲染服務擁有您。
今天的臉龐：如果您使用的是React，請不要使用第三方進行伺服器端渲染。如果他們失敗或您的信用卡失敗（例如下面的例子），那麼您的網站將在SERP中tank。
自我主持人 https://t.co/7xAiWkW7XW 減少頭痛。 pic.twitter.com/jkN3eMAvs0
– ˗ˏ'Jesse Hanleyˎ'（@jessethanley） 2018年8月21日
混合渲染（帶水合的伺服器端渲染）
我們想要SSR的速度，但CSR的互動性。解決方案：SSR +水合作用。
漸進式水合渲染看起來是未來的方式。它允許組件級代碼拆分。
站點可以推遲渲染組件，直到它們對用戶可見或需要交互。 Angular Universal具有內置補水解決方案： ngExpressEngine。
可爬行性評級：????
表現評級：⭐️⭐️⭐️⭐️
指數覆蓋率優化
使用第一方工具進行測試
技術搜索引擎優化的噩夢是將代碼發布到prod並意識到它不會呈現。升級到Googlebot應該可以緩解polyfill和其他繁瑣的問題。
找出答案的最佳方法是使用Google的工具進行測試。 Search Console URL Inspector提供帶有屏幕截圖滾動的完整呈現。
移動友好測試和豐富的結果也會返回DOM，但不會有截屏滾動。你甚至可以 測試防火牆和本地託管的構建。
即將推出：Googlebot用戶代理更新
Googlebot的用戶代理將保持不變 – 目前。
我們可以期待Search Console工具遷移到v8渲染。
遷移完成後，我們可以預期Googlebot用戶代理會發生變化。
這樣，我們就可以更好地了解Google Google Chrome正在使用的版本。
高效緩存腳本
對腳本的調用會計入您的抓取預算。
如果您在多個頁面上使用相同的腳本，則緩存過期設置允許Googlebot請求腳本一次並在相關頁面上使用它。緩存過期後，Google會再次請求該腳本。
使用版本控制充分利用腳本。通過版本控制，您可以在腳本上設置較長的到期日期。嘿谷歌，你可以在明年使用/myscript.js?v=1！
當代碼版本包含對該腳本包的更改時，我的網站將更新它引用的JavaScript包。嘿谷歌，使用/myscript.js?v=2來渲染這個頁面！
捆綁版本可以緩解發布後的渲染問題
如果Web爬網程序嘗試呈現您的頁面但使用的是過時腳本，則可能會錯誤地呈現該頁面。
如果您的頁面引用要使用的編號版本，搜索引擎將檢查這是否是緩存中的當前版本。如果版本不匹配，搜索引擎將請求正確的捆綁。
如果非同步調用具有唯一的Uris，請使用X-Robots Noindex指令
我有一個網頁，可以非同步載入3個內容。這些AJAX調用中的每一個都有一個唯一的URI：
https://example.com/ajax/meet-my-cat-cta
https://example.com/ajax/random-cat-picture-generator
https://example.com/ajax/featured-bean-toes
每次Googlebot請求我的網頁時，它都會返回4個網址。它資源效率不高。
這在個性化或組件中經常出現，在決定要回饋哪些內容之前必須進行邏輯檢查。
結果可能非常有效。 https://example.com/ajax/random-cat-picture-generator?cat=tank&&pose=bellyrubs顯然是為用戶提供的個性化體驗。
每個參數組合都是唯一的URL。 Googlebot將唯一網址視為唯一網頁（除非另有說明）。
未經檢查的一個AJAX調用可能會導致成千上萬的令人困惑的低價值頁面被搜索引擎排序。 Tank的圖片，世界上最帥的貓，真的增加了用戶體驗，但它是關於環境的。
AJAX呼叫和指數通脹
這些URI本身可以破壞您的索引。 A simple pair of parameters on an AJAX URI will breed like bunnies. Each can be unique and indexable.
Your index status will looks like a roller coaster – a stark climbing rise in the number of pages – followed by a gut-churning drop as Googlebot purges pages from their index.
To avoid this, add X-Robots noindex directives to URIs that load content asynchronously to the page. This will create cleaner technical signals and make Googlebot resources spent on understanding my site more effective.
Make a New Developer Ally
Developers are some of the best allies an SEO can have. Google Webmasters recognize this and have created a new web series focused on the code changes needed to make a discoverable site.
Looking for a place to start?查看 Make your Angular web apps discoverable 和 SEO codelab for developers.
Tuck & Roll, My Friends
In summary, the keys to SEO for Angular are:
- Knowing the difference between HTML and DOM.
- Delivering content at the right time and place.
- Consistent, unique, and crawlable URLs.
- Being aware of your script resources』 indexability, size, response time, and caching policies.
This is the part where we work together to get everybody』s site out there alive and well.
The best way to learn Angular is hands-on so if you』re reading this, keep calm and remember the ancient digital proverb:
It』s not yours until you break it.
Image Credits
In-Post Image #1: Created by author, May 2019
In-Post Image #2: Screenshot taken by author, April 2019
In-Post Image #3: Bartosz Góralewicz via Moz
In-Post Image #4: Taken by Jennifer Holzman at i/o 2018
In-Post Image #5: Screenshot from Archive.org, 3 April 2019
In-Post Image #6: Created by author, May 2019
In-Post Image #7: Screenshot taken by author, March 2019
In-Post Image #8: Screenshot taken by author, March 2019
In-Post Image #9: Created by author, April 2019
In-Post Image #10: Screencap from Google Search and JavaScript Sites (Google I/O』19)
In-Post Image #11: Screenshot of MDN Web Docs
In-Post Image #12: User-centric Performance Metrics, Google Web Fundamentals
In-Post Image #13: Screencap from Google Search and JavaScript Sites (Google I/O』19)
In-Post Image #14: Screencap from Rendering on the Web: Performance Implications of Application Architecture (Google I/O 』19)
In-Post Image #15: Screenshot taken by author, March 2018
In-Post Image #16: Glamorshot of incredibly handsome cat by author
In-Post Image #17: Screenshot and chart creation by author, April 2018