濟南網站優化公司,為您提供專業的網站優化,排名優化,關鍵詞優化服務,seo優化師一對一對接,助您快速提升網站關鍵詞排名.

濟南網站優化

幫助企業快速提升網站排名和流量

專注網站優化,SEO關鍵詞排名,一切用數據說話!

整站優化業務咨詢

如何準備JS遷移

點擊次數: 發布時間:2019-12-30 09:45文章來源:搜索引擎優化

以下是將使用靜態html構建的網站遷移到javascript框架時要考慮的步驟。有機流量減少80%是每個企業的噩夢。不幸的是,如果網站遷移不正確,這種噩夢般的場景可能會成為現實。它不是改善現狀,而是最終導致災難。

###

有許多類型的遷移,例如更改,合并或拆分域,重新設計網站或遷移到新框架。

web開發趨勢清楚地表明,javascript的使用近年來一直在增長,javascript框架正變得越來越流行。將來,我們可以預期會有越來越多的網站使用javascript。

###

在本文中,我將向您展示如何準備將使用靜態html構建的網站遷移到javascript框架。

搜索引擎與javascriptgoogle是唯一能夠執行javascript并“查看”內容和導航等元素的搜索引擎,即使它們是由javascript提供支持的。但是,在考慮更改js框架時,您始終需要記住兩件事。

首先,google使用chrome 41渲染頁面。這是一個三年前的瀏覽器,不支持渲染高級功能所需的所有現代功能。即使他們可以提供一般的js網站,也可能會因為依賴google無法處理的技術而無法發現某些重要部分。

其次,js執行是一個非常繁重的過程,因此google會在兩個方面對js網站進行索引。第一波獲取索引的原始html。在js驅動的網站的情況下,這幾乎轉換為空頁。在第二次浪潮中,google執行javascript,以便他們“看到”js加載的其他元素。然后他們準備索引頁面的完整內容。

###

這兩個元素的組合使得如果您決定將當前網站更改為javascript框架,您始終需要檢查google是否可以有效地抓取您的網站并將其編入索引。

正確地遷移到js框架seo可能不喜歡javascript,但這并不意味著它的受歡迎程度會停止增長。我們應該盡可能地做好準備并正確地實施現代框架。

您將在下面找到有助于您瀏覽更改當前框架的過程的信息。我不提供“隨時可用”的解決方案,因為您的情況將是不同因素的結果,并且沒有通用的配方。但是,我想強調你需要特別注意的元素。

涵蓋標準遷移的基礎知識如果沒有您的幫助,您無法指望谷歌能夠理解這一變化。應詳細規劃整個遷移過程。

我想在本文中繼續關注js遷移,因此如果您需要詳細的遷移指南,bastian grimm 已經介紹過這一點。

###

了解您在向google提供內容方面的需求此步驟應在其他任何事情之前完成。您需要決定google將如何接收您網站的內容。你有兩個選擇:

1.客戶端呈現:這意味著您完全依賴google進行呈現。但是,如果你選擇這個選項,你會同意一些低效率。此解決方案的第一個重要缺點是由于上面提到的兩波索引導致內容的延遲索引。其次,可能會發生一切都無法正常工作,因為chrome 41不支持所有現代功能。最后,但并非最不重要的是,并非所有搜索引擎都能執行javascript,因此您的js網站對于bing,yahoo,twitter和facebook來說似乎空洞。

###

2.服務器端呈現:此解決方案依賴于外部機制或負責呈現js網站的其他機制/組件的呈現,創建靜態快照并將其提供給搜索引擎爬蟲。在google i / o大會上,google宣布只為抓取工具提供單獨版本的網站即可。這稱為動態渲染,這意味著您可以檢測爬網程序的用戶代理并發送服務器端呈現的版本。此選項也有其缺點:創建和維護其他基礎結構,如果在服務器上呈現繁重的頁面可能會出現延遲,或者緩存可能出現問題(googlebot可能會收到非常新版本的頁面)。

###

在遷移之前,如果需要選項a或b,則需要回答。

如果您的業務成功是圍繞新鮮內容(新聞,房地產優惠,優惠券)建立的,我無法想象只依賴于客戶端呈現的版本。這可能會導致索引編碼嚴重延遲,因此您的競爭對手可能會獲得優勢。

如果你有一個小網站并且內容沒有經常更新,你可以嘗試將其保留為客戶端呈現,但如果谷歌確實看到了內容和導航,你應該在啟動網站之前進行測試。最有用的工具是gsc中的fetch as google和chrome 41瀏覽器。

但是,谷歌正式表示最好使用動態渲染來確保他們能夠正確,快速地發現頻繁更改的內容。

框架與解決方案如果您選擇使用動態渲染,則應該回答如何向抓取工具提供內容。沒有一個普遍的答案。一般來說,解決方案取決于技術和開發人員和預算以及您的需求。

您可以在下面找到有關幾種方法的選項的評論,但您可以選擇:

我需要一個盡可能簡單的解決方案。可能我會去預渲染,例如prerender.io。它是一種外部服務,可以抓取您的網站,呈現您的網頁并創建靜態快照,以便在特定用戶代理發出請求時為其提供服務。此解決方案的一大優勢是您無需創建自己的基礎架構。

您可以安排重新抓取并創建頁面的新快照。但是,對于規模較大且頻繁更改的網站,可能很難確保所有網頁都按時刷新并向googlebot和用戶顯示相同的內容。

我需要一個通用的解決方案,我遵循趨勢。如果使用react,vue或angular等流行框架之一構建網站,則可以使用專用于給定框架的服務器端呈現方法之一。以下是一些熱門比賽:

angular universal是angular的解決方案。nuxt.js與vue.js一起使用。next.js支持react 。使用安裝在react或vue頂部的其中一個框架可以創建一個通用應用程序,這意味著可以在服務器(服務器端呈現)和客戶端(客戶端呈現)中執行完全相同的代碼。如果您依賴于創建快照和重度緩存(如預渲染),它可以最大限度地減少內容差距問題。

我需要一個通用的解決方案,我不使用流行的框架。您可能會使用一個沒有現成的解決方案來構建通用應用程序的框架。在這種情況下,您可以構建基礎架構進行渲染。這意味著您可以在服務器上安裝無頭瀏覽器,該瀏覽器將呈現您網站的所有子頁面并創建提供給搜索引擎抓取工具的快照。google為此提供了一個解決方案 - puppeteer是一個與prender.io類似的工作庫。但是,一切都發生在您的基礎架構上

我想要一個持久的解決方案。為此,我使用混合渲染。據說此解決方案為用戶和抓取工具提供了最佳體驗,因為用戶和抓取工具在初始請求時收到頁面的服務器端呈現版本。在許多情況下,為用戶提供ssr頁面更快,而不是在瀏覽器中執行所有繁重的文件。所有后續用戶交互均由javascript提供。抓取工具不會通過單擊或滾動與網站交互,因此它始終是對服務器的新請求,并且它們始終會收到ssr版本。聽起來不錯,但實施起來并不容易。

###

您選擇的選項取決于許多因素,如技術,開發人員和預算。在某些情況下,您可能有一些選項,但在許多情況下,您可能有許多限制,因此選擇解決方案將是一個單一選擇過程。

測試實現我無法想象在沒有創建臨時環境和測試一切如何工作的情況下進行遷移。遷移到javascript框架會增加您需要注意的復雜性和其他陷阱。

有兩種情況。如果由于某種原因您決定依賴客戶端渲染,則需要安裝chrome 41并檢查其渲染和工作方式。審核中最重要的一點是檢查chrome dev tools中控制臺中的錯誤。請記住,即使處理javascript時出現小錯誤也可能導致渲染問題。

如果您決定使用向爬網程序提供內容的方法之一,則需要安裝具有此解決方案的暫存站點。下面,我將概述在開始使用網站之前應該檢查的最重要元素:

1.內容平價

您應該始終檢查用戶和抓取工具是否看到完全相同的內容。為此,您需要在瀏覽器中切換用戶代理以查看發送給爬網程序的版本。您應該驗證有關渲染的一般差異。但是,要查看整個圖片,您還需要檢查您網站的dom(文檔對象模型)。從瀏覽器復制源代碼,然后將用戶代理更改為googlebot并獲取源代碼。diffchecker將幫助您查看兩個文件之間的差異。您應該特別注意內容,導航和元數據的差異。

極端情況是您將空的html文件發送到googlebot,就像disqus一樣。

###

這就是他們的seo可見性:

###

他們看到了更好的日子。現在主頁甚至沒有編入索引。

2.導航和超鏈接

為了100%確定google看到,抓取并傳遞鏈接汁,您應該遵循實施在google i / o conference 2018上共享的內部鏈接的明確建議。

###

如果您依賴服務器端呈現方法,則需要檢查頁面的預呈現版本的html是否包含您期望的所有鏈接。換句話說,如果它與客戶端呈現的版本具有相同的導航。否則,google將無法看到頁面之間的內部鏈接。您可能遇到問題的關鍵區域是方面導航,分頁和主菜單。

3.元數據

元數據根本不應該依賴于js。google表示,如果您使用javascript加載規范標記,他們可能不會在第一波索引中看到這一點,并且他們不會在第二波中重新檢查此元素。結果,可以忽略規范信號。

###

在測試暫存站點時,請始終檢查ssr版本是否在head部分中具有規范標記。如果是,請確認規范標簽是正確的標簽。無論您使用客戶端渲染還是服務器端渲染,經驗法則總是向搜索引擎發送一致的信號。

在檢查網站時,請始終驗證csr和ssr版本是否具有相同的標題,說明和機器人說明。

4.結構化數據

結構化數據有助于搜索引擎更好地了解您網站的內容。

在啟動新網站之前,請確保您網站的ssr版本顯示您要用結構化數據標記的所有元素,以及標記是否包含在預呈現版本中。例如,如果要將標記添加到痕跡導航欄中。在第一步中,檢查ssr版本上是否顯示了面包屑。在第二步中,在rich results tester中運行測試以查看標記是否有效。

5.懶加載

我的觀察表明,現代網站喜歡加載延遲加載的圖像和內容(例如產品)。附加元素加載在滾動事件上。對于用戶來說,它可能是一個很好的功能,但googlebot無法滾動,因此這些項目將無法被發現。

看到有這么多網站管理員以seo友好的方式遇到延遲加載問題,google發布了延遲加載最佳實踐的指南。如果要在滾動上加載圖像,請確保支持分頁加載。這意味著如果您滾動,url應該更改(例如,通過添加分頁標識符:?page = 2,?page = 3等),最重要的是,url將使用適當的內容進行更新,例如使用歷史api。

不要忘記在head部分添加rel =“prev”和rel =“next”標記以指示頁面的順序。

快照生成和緩存設置如果您決定為搜索引擎抓取工具創建快照,則需要監控其他一些內容。

您必須檢查快照是否是您網站的客戶端呈現版本的精確副本。您無法加載標準用戶看不到的其他內容或鏈接,因為它可能被評估為隱藏真實內容。如果創建快照的過程效率不高,例如您的頁面非常繁重且服務器速度不夠快,則可能會導致創建損壞的快照。因此,您將向爬網程序提供部分呈現的頁面。

在某些情況下,渲染基礎架構必須以高速運行,例如黑色星期五,當您想要非常快速地更新價格時。您應該在極端條件下測試渲染,并查看更新給定頁數所需的時間。

最后一件事是緩存。正確設置緩存可以幫助您保持效率,因為許多頁面可以直接從內存中快速提供。但是,如果您沒有正確規劃緩存,google可能會收到過時的內容。

監控監測遷移后是一個自然的步驟。但是,在遷移到js框架的情況下,有時還需要監視和優化。

遷移到js框架可能會影響web性能。在許多情況下,有效載荷增加,這可能導致更長的加載時間,特別是對于移動用戶。一個好的做法是監控用戶如何看待網站的性能并比較遷移前后的數據。為此,您可以使用chrome用戶體驗報告。

###

如果真實用戶指標隨時間發生變化,它將提供信息。您應該始終致力于改進它們并盡快加載網站。

摘要遷移始終是一個危險的過程,您無法確定結果。如果您詳細計劃整個過程,可能會降低風險。在所有類型的遷移中,規劃與執行同樣重要。如果您參與遷移到js框架,則需要處理額外的復雜性。您需要做出其他決定,并且需要驗證其他內容。但是,隨著web開發趨勢繼續朝著越來越多地使用javascript的方向發展,您應該準備好遲早需要面對js遷移。祝好運!

久久青草费线频观看