介紹

SEO 已成為 Internet 上任何 Web 應(yīng)用程序不可或缺的一部分。它不僅控制著市場上產(chǎn)品或服務(wù)的整體性能，而且直接或間接地阻礙了任何企業(yè)主的利潤和效率。因此，考慮到同樣的因素，當(dāng)我們談?wù)撍阉饕鎯?yōu)化或 SEO 時，React 網(wǎng)站面臨著巨大的挑戰(zhàn)。一個主要原因是大多數(shù) React JS 開發(fā)人員和開發(fā)公司更多地關(guān)注客戶端渲染，而谷歌則專注于服務(wù)器端渲染。這給 React 中的 SEO 帶來了巨大的挑戰(zhàn)。繼續(xù)閱讀博文，讓我們首先了解 Google Bot 如何抓取網(wǎng)頁。

Google Bot 如何抓取網(wǎng)頁？

在現(xiàn)有的所有在線搜索和搜索引擎中，Google 獲得了大約 90% 的 SEO，使其成為 SEO 友好型網(wǎng)站最受歡迎的搜索引擎。在深入研究 SEO React 的工作原理之前，讓我們先了解一下 Google 的抓取和索引過程。

下圖摘自谷歌文檔。

Googlebot 索引網(wǎng)站的圖表。

注意：這是框圖。最初的 Googlebot 非常復(fù)雜。

要記住的要點：

• 當(dāng)爬蟲保持空閑時，它會在隊列中選擇即將到來的 URL，請求并收集 HTML。

• 隨后，Googlebot 決定需要在解析 HTML 后收集并執(zhí)行 JavaScript。如果是這樣，該 URL 將被添加到渲染隊列中。

• 在后一點，呈現(xiàn)器收集并執(zhí)行 JavaScript 來呈現(xiàn)頁面，從而將呈現(xiàn)的 HTML 發(fā)送回其位置。

• 處理單元取出網(wǎng)頁上提到的所有URL標(biāo)簽，并將它們添加回抓取隊列。

• 內(nèi)容被添加到 Google 的索引中。

您是否注意到執(zhí)行 JavaScript 的渲染階段和解析 HTML 的處理階段之間的明顯區(qū)別？好吧，這種差異化是基于成本的。執(zhí)行 JavaScript 的成本很高，因為它需要查看 130 萬億個網(wǎng)頁。

一般 SEO 挑戰(zhàn)

基于 React 的網(wǎng)站的 SEO 非常重要。以下是軟件工程師和開發(fā)人員可以解決和修復(fù)的一些 SEO 挑戰(zhàn)。

1.清空首關(guān)內(nèi)容

眾所周知，React 應(yīng)用程序依賴于 JavaScript。結(jié)果，他們與搜索引擎作斗爭。發(fā)生這種情況是由于 React 采用的應(yīng)用程序外殼模型。最初，HTML 不包含有意義的內(nèi)容，因此機器人或用戶需要執(zhí)行 JavaScript 才能查看頁面內(nèi)容。這種方法表示 Googlebot 在初始遍歷期間跟蹤空白頁面。因此，僅當(dāng)頁面呈現(xiàn)時，Google 才會查看內(nèi)容。最終，這會導(dǎo)致數(shù)千頁內(nèi)索引的延遲。

2. 頁面元數(shù)據(jù)

元標(biāo)記非常出色，因為它們使社交媒體網(wǎng)站和 Google 能夠顯示特定頁面的有效縮略圖、標(biāo)題和描述。但是，這些網(wǎng)站依賴于所收集網(wǎng)頁的標(biāo)簽來獲取這些信息。本網(wǎng)站不為著陸頁執(zhí)行 JavaScript。React 渲染每個內(nèi)容，甚至 Meta 標(biāo)簽。由于應(yīng)用程序/網(wǎng)站的應(yīng)用程序外殼保持不變，因此各個頁面很難適應(yīng)元數(shù)據(jù)。

3. 網(wǎng)站地圖

站點地圖是一個文件，其中提供了有關(guān)您站點的視頻、頁面和其他分叉的所有詳細(xì)信息，以及它們之間的關(guān)系。作為智能搜索引擎，Google 讀取此文件以輕松爬入您的網(wǎng)站。React 沒有任何內(nèi)置方法來創(chuàng)建站點地圖。如果你使用 React Router 來管理路由，你需要找到創(chuàng)建站點地圖的工具。雖然，這可能需要您付出一些努力。

4. 用戶體驗和加載時間

無論是什么任務(wù)，獲取、執(zhí)行和解析 JavaScript 都需要花費大量時間。此外，JavaScript 甚至可能需要進行網(wǎng)絡(luò)調(diào)用以收集內(nèi)容，而用戶必須等待才能查看請求的詳細(xì)信息。關(guān)于排名標(biāo)準(zhǔn)，谷歌開發(fā)了一套關(guān)于用戶體驗的網(wǎng)絡(luò)生命力。加載時間延長會影響用戶體驗得分，從而通知谷歌將網(wǎng)站排名降低。

5.其他搜索引擎優(yōu)化注意事項

以下是與建立優(yōu)秀的 SEO 實踐相關(guān)的一些注意事項。

• 使用 CDN 服務(wù)每個靜態(tài)資產(chǎn)，如 JS、CSS、字體等，并使用響應(yīng)式圖像來降低加載時間。

• 改進 robots.txt 文件可以幫助搜索機器人分析如何在您的網(wǎng)站上爬行。

如果您想提高您的React 應(yīng)用程序性能，那么 React.memo 是實現(xiàn)相同目標(biāo)的絕佳解決方案！

應(yīng)對 SEO 挑戰(zhàn)

讓我們了解為 SEO 優(yōu)化 React 如何以及為什么具有挑戰(zhàn)性。

ReactJs 是 2022 年 Web 開發(fā)的一個有利可圖的選擇，但讓我們看看 React 開發(fā)人員在開發(fā) SEO 友好網(wǎng)站時面臨哪些挑戰(zhàn)。

1.單頁應(yīng)用（SPA）的使用

為了幫助減少加載時間問題，開發(fā)人員開發(fā)了基于 JS 的單頁應(yīng)用程序 (SPA)。這是 React 應(yīng)用程序 SEO 和 React 網(wǎng)站 SEO 的主要問題。他們不會重新加載全部內(nèi)容。相反，他們刷新內(nèi)容。因此，這項技術(shù)自推出以來一直在提升網(wǎng)站性能方面發(fā)揮著至關(guān)重要的作用。

2. 缺少動態(tài) SEO 標(biāo)簽

SPA 在動態(tài)過程中加載信息。因此，當(dāng)爬蟲點擊某個鏈接時，它會挑戰(zhàn)完成頁面加載周期。元數(shù)據(jù)無法刷新。這是爬蟲無法顯示 SPA 的主要原因，最終以空頁面格式被索引。通常，在排名方面，這些都不好。然而，這需要一點關(guān)注，因為開發(fā)人員可以通過為 Google 機器人生成單獨的頁面輕松解決這些問題。但是，這里又出現(xiàn)了另一個挑戰(zhàn)。創(chuàng)建單獨的頁面除了難以在 Google 的首頁搜索結(jié)果中對網(wǎng)站進行排名外，還會增加業(yè)務(wù)開支。

3. SPA 的 Seo 問題

眾所周知，單頁應(yīng)用優(yōu)化了網(wǎng)站性能；關(guān)于 SEO 有幾個問題。

想要構(gòu)建 SEO 友好的 Web 應(yīng)用程序？
今天就聯(lián)系我們，聘請 React 開發(fā)人員為您的企業(yè)構(gòu)建最佳的 SEO 網(wǎng)站。

如何使 React 應(yīng)用程序?qū)?SEO 友好

正如我們所讀到的，有幾個因素導(dǎo)致 React 對 SEO 不友好。但是，現(xiàn)在問題出現(xiàn)了“如何使 React 網(wǎng)站 SEO 友好？” 出色地！這是有關(guān)如何實施 React Js SEO 方法并使您的 React Web 應(yīng)用程序 SEO 友好的答案。

1.同構(gòu)反應(yīng)

同構(gòu) JavaScript 技術(shù)具有自動檢測服務(wù)器端 JavaScript 是否啟用的能力。在禁用 JavaScript 的情況下，同構(gòu) JavaScript 在服務(wù)器端工作，從而向客戶端服務(wù)器提供最終內(nèi)容。頁面加載后，所有必需的內(nèi)容和屬性都變得可用。但是，當(dāng)啟用 JavaScript 時，它的表現(xiàn)就像一個具有多個組件的動態(tài)應(yīng)用程序。這使得加載速度比傳統(tǒng)網(wǎng)站更快，讓用戶在 SPA 中獲得流暢的體驗。

2.預(yù)渲染

作為制作單頁和多頁 Web SEO 友好應(yīng)用程序的主要方法之一，預(yù)呈現(xiàn)通常在爬蟲或搜索機器人無法有效呈現(xiàn)網(wǎng)頁時使用。Pretenders 是一種獨特的程序，可以限制對網(wǎng)站的請求。如果請求來自爬蟲，預(yù)呈現(xiàn)器會向您的網(wǎng)站發(fā)送緩存的靜態(tài) HTML 版本。如果您的集合發(fā)送請求，頁面將正常加載。

優(yōu)點：

• 這些程序在執(zhí)行多種現(xiàn)代 JavaScript 和轉(zhuǎn)換為靜態(tài) HTML 方面非常有效

• 易于整合

• 支持最新的網(wǎng)絡(luò)新奇事物

缺點：

• 服務(wù)不是免費的

• 不適合頻繁更改數(shù)據(jù)的頁面

• 如果網(wǎng)站太大，加載時間會很長

3. 服務(wù)器端呈現(xiàn)：獲取包含全部內(nèi)容的 HTML 文件：

如果你想構(gòu)建一個 React Web 應(yīng)用程序，你需要對客戶端渲染和服務(wù)器端渲染有準(zhǔn)確的了解?？蛻舳顺尸F(xiàn)是一個 Googlebot 和一個瀏覽器，它接收內(nèi)容較少或沒有內(nèi)容的空 HTML 文件。

隨后，JavaScript 代碼從服務(wù)器下載內(nèi)容并允許用戶在他們的屏幕上查看。然而，客戶端呈現(xiàn)面臨著與 SEO 有關(guān)的幾個挑戰(zhàn)。這是因為 Google 抓取工具無法查看任何內(nèi)容或查看較少未正確編入索引的內(nèi)容。相反，通過服務(wù)器端呈現(xiàn)，瀏覽器和 Google Bots 會接收 HTML 文件以及全部內(nèi)容。這有助于谷歌機器人毫無困難地執(zhí)行索引和排名更高。

反應(yīng) SEO 最佳實踐

這些最佳實踐將為您提供有關(guān)如何使您的 React 網(wǎng)站對 SEO 友好的答案：

1. React路由器使用

要知道，React 遵循的是 SPA（Single-Page Application）。但是，如果您在頁面中適當(dāng)?shù)孛枋瞿承?SEO 元素和規(guī)則，則可以更好地利用 SPA 模型。本指南需要將頁面打開為不帶井號 (#) 的單獨 URL。

（根據(jù)谷歌，它無法讀取與哈希鏈接的 URL，因此它可能不會索引任何由 React 生成的 URL）。

因此，我們以在單獨頁面中打開的方式創(chuàng)建 URL。我們必須在 URL 中使用React Router 鉤子。以下是相同的示例：

在構(gòu)建內(nèi)容時，我們建議您不要運行帶有 setTimeout 的進程。在這些情況下，Googlebot 可能會在無法讀取內(nèi)容時離開頁面和網(wǎng)站。

2. 網(wǎng)址大小寫

當(dāng) URL 包含小寫或大寫時，Google 會將某些頁面視為單獨的頁面。
例如：
/vendi
/Vendi
這兩個 URL 將被 Google 視為兩個單獨的頁面。為避免此類頁面重復(fù)，請將每個 URL 都寫成小寫。

3.鏈接中的“A Href”用法

確保為鏈接提供“a href”。遺憾的是，Googlebot 無法讀取通過 onclick 提供的鏈接。因此，使用 Href 定義鏈接變得至關(guān)重要，這樣 Googlebot 就可以更輕松地發(fā)現(xiàn)其他相關(guān)頁面并訪問它們。

4.反應(yīng)頭盔

SEO 的一個重要組成部分是元數(shù)據(jù)。因此，即使使用 React，它也應(yīng)該出現(xiàn)在源代碼中。將描述和標(biāo)題保持在相同的結(jié)構(gòu)中可能對 CTR 和其他 SEO 規(guī)模沒有足夠的幫助。

這是 React Helmet 發(fā)揮作用的時候。下面是一個示例代碼結(jié)構(gòu)以及元數(shù)據(jù)：

如果描述元素?zé)o法發(fā)揮作用，請嘗試通過接收第一個頁面內(nèi)容樣本的 160 個字符來填寫描述。

確保將結(jié)構(gòu)化數(shù)據(jù)項與元數(shù)據(jù)一起保存在源代碼中。（組織架構(gòu)、產(chǎn)品等）

例如，下面是 yolcu360.com 的 Raw & Render 版本。結(jié)構(gòu)化數(shù)據(jù)在兩個版本中都以受保護的形式顯示。理想情況下，我們看不到這種差異。

生的：

渲染：

當(dāng)您使用 Rich Results 測試工具測試頁面時，Googlebot 可以輕松查看您頁面上的結(jié)構(gòu)化數(shù)據(jù)。

您可以通過同時運行頭盔和服務(wù)器端渲染來顯示 Google 中的元數(shù)據(jù)或內(nèi)容和元素。任何缺陷或潛在的元數(shù)據(jù)錯誤都會對搜索結(jié)果中出現(xiàn)的每個指標(biāo)產(chǎn)生負(fù)面影響。

5. 404錯誤代碼

所有有缺陷的頁面都運行 404 錯誤代碼。因此，這是一個溫和的提醒，要設(shè)置 server.js 和 route.js 等文件。

6. 圖片

您應(yīng)該使用“img src”指定您的頁面圖像。根據(jù)一項研究，盡管圖像在其工具中顯示時沒有任何并發(fā)癥，但它仍然無法為它們編制索引。

正確使用：在 React 中使用任何類似 CSS 背景的東西都會導(dǎo)致索引圖像困難。

錯誤使用：了解前端框架比較：

7.反應(yīng)懶惰

實施延遲加載將幫助用戶更快地瀏覽網(wǎng)站，并對我們在 Google 中的頁面速度得分產(chǎn)生積極影響。

你可以在 npm 上找到這個包。

您可以使用React-Snap來優(yōu)化網(wǎng)站速度。下面是一個示例：與 Vue 或 Angular 等其他幾個 JavaScript 框架相比，React 可以獲得更小的文件。它不會發(fā)布不需要的和不適用的代碼。因此，它有助于極大地提高頁面速度。更準(zhǔn)確地說，您可以將 2MB 的 JS 文件拆分為 60-70kb 的文件，并在單獨的進程中運行。

結(jié)論

言鼎科技