Airtable 如何通過服務(wù)器端渲染 React 改進(jìn) SEO。搜索網(wǎng)絡(luò)是新用戶發(fā)現(xiàn)新業(yè)務(wù)和解決方案的常用方式。成功的用戶獲取策略通常涉及尋找方法來增加您網(wǎng)站的流量,排名高于競爭對手,并最終說服用戶注冊您的產(chǎn)品或安裝您的應(yīng)用程序。小的優(yōu)化有可能產(chǎn)生巨大的影響,這就是搜索引擎優(yōu)化 (SEO) 至關(guān)重要的原因。
在 2021 年期間,我們著手為我們的營銷登陸頁面創(chuàng)建一個新的以 SEO 為中心的基礎(chǔ)架構(gòu),以優(yōu)化我們的搜索引擎排名并吸引更多 Airtable 的潛在用戶。更高的排名意味著來自使用搜索引擎的人的新印象、點(diǎn)擊和轉(zhuǎn)化。
從歷史上看,Airtable 的登錄產(chǎn)品和注銷營銷登錄頁面位于同一個 repo 中,主要使用客戶端呈現(xiàn)的 React。當(dāng)我們決定將注銷頁面拆分到它們自己的存儲庫中時,我們有機(jī)會重新設(shè)計登錄頁面的基礎(chǔ)結(jié)構(gòu),以更好地滿足 SEO 需求。
優(yōu)化 HTML 的生成方式是 SEO 的基礎(chǔ),所有其他改進(jìn)都將在此基礎(chǔ)上進(jìn)行。換句話說,如果您的 Web 應(yīng)用程序框架和構(gòu)建系統(tǒng)不能很好地促進(jìn) SEO,那么在其他層面上投資 SEO 工作就會變得更加困難。我們對營銷頁面的不同基礎(chǔ)架構(gòu)選項進(jìn)行了探索:
- 靜態(tài)網(wǎng)絡(luò)應(yīng)用
- 客戶端呈現(xiàn)的網(wǎng)絡(luò)應(yīng)用程序
- 服務(wù)器端呈現(xiàn)的網(wǎng)絡(luò)應(yīng)用程序
我們最終決定服務(wù)器端渲染最好地為 SEO 的成功建立一個代碼庫;并選擇 NextJS 作為框架來促進(jìn)它。讓我向您介紹為什么我們做出這個決定,以及它如何使專注于改進(jìn)其 SEO 基礎(chǔ)架構(gòu)的團(tuán)隊受益。
項目目標(biāo)
- 讓搜索引擎盡可能容易地索引我們的網(wǎng)頁
- 確保對我們頁面的更改可以及時編入索引
- 無需重新部署網(wǎng)絡(luò)應(yīng)用程序即可啟用動態(tài)呈現(xiàn)的內(nèi)容
- 繼續(xù)利用 React 和 Typescript 來保持兩個存儲庫的一致性
Google 如何抓取網(wǎng)頁并將其編入索引
為了在不同的網(wǎng)絡(luò)應(yīng)用程序基礎(chǔ)設(shè)施選項之間進(jìn)行評估,我們需要了解搜索引擎如何發(fā)現(xiàn)和解析網(wǎng)頁以產(chǎn)生有機(jī)搜索結(jié)果。2021 年,谷歌占所有搜索引擎搜索量的 90% 以上。因此,我們的 SEO 評估將幾乎完全集中在 Google 搜索上。
更新頁面或添加新頁面后,新內(nèi)容可能需要4 天到 4 周的時間才能顯示在 Google 搜索結(jié)果中。Google 的網(wǎng)絡(luò)爬蟲Googlebot在將頁面數(shù)據(jù)發(fā)送到排名算法之前具有三個處理階段:
- 爬行
- 渲染
- 索引
爬行隊列
爬蟲負(fù)責(zé)搜索 Internet 以發(fā)現(xiàn) URL。它向爬行隊列中的已知 URL 發(fā)送 HTTP 請求以檢索頁面的 HTML。然后,爬蟲會解析 HTML 以查找更多要添加到爬網(wǎng)隊列的 URL。
例如,如果從抓取隊列中檢索到 URL 并返回以下 HTML,則在檢查文件以確保允許該頁面被索引/store后,將發(fā)現(xiàn)該 URL 并將其添加到抓取隊列中。robots.txt
<html lang="zh-cn">
<head>
<script src="main.js" />
</head>
<body>
<div>
<h1>Kitty Litter</h1>
<a href="/store">網(wǎng)上商城</a>
</div>
</body>
</html>
爬蟲不執(zhí)行任何 JavaScript,只會解析它提供的 HTML。這意味著如果頁面在 JS 執(zhí)行之前包含所有必要的內(nèi)容,那么 Googlebot 已經(jīng)擁有索引和排名頁面所需的所有信息。
另一方面,如果 JS 需要運(yùn)行以生成頁面內(nèi)容,那么 Googlebot 需要先完成渲染網(wǎng)站的額外工作,然后才能正確抓取頁面并將其編入索引。
JS 渲染隊列
Googlebot 的渲染器將使用無頭 Chromium 實例來解析和執(zhí)行 JS,以生成完整的 HTML 頁面。HTML 被發(fā)送到爬蟲,因此可以再次解析它并可以發(fā)現(xiàn) URL。呈現(xiàn)的 HTML 也被發(fā)送到索引器進(jìn)行處理。
想象一下每天持續(xù)抓取和呈現(xiàn)所有互聯(lián)網(wǎng)需要多少處理能力!甚至谷歌也有其局限性。您的網(wǎng)站被編入索引的速度受Googlebot 實例的可用性、帶寬和時間的限制。
但是,與任何代碼一樣,JS 中可能存在阻止 Googlebot 為頁面編制索引的錯誤。企業(yè)需要主動監(jiān)控Google Search Console,以檢查 Googlebot 是否遇到 JS 錯誤。
索引隊列
索引器負(fù)責(zé)在將頁面內(nèi)容添加到搜索索引之前解析和分析頁面內(nèi)容。在此步驟中,Googlebot 將嘗試根據(jù)標(biāo)題、關(guān)鍵字和整個頁面內(nèi)容來理解內(nèi)容的意圖。
在設(shè)置初始 Web 應(yīng)用程序基礎(chǔ)結(jié)構(gòu)后,為索引器優(yōu)化內(nèi)容成為 SEO 的主要焦點(diǎn)。
比較基礎(chǔ)架構(gòu)選項
下表總結(jié)了我們考慮的三個基礎(chǔ)架構(gòu)選項之間的比較以及每個選項的優(yōu)缺點(diǎn),我將對此進(jìn)行更詳細(xì)的討論。
靜態(tài)HTML
靜態(tài)網(wǎng)站可以說是最容易設(shè)置的,因為在最簡單的形式中,它由具有固定內(nèi)容的 HTML 文件組成,這些文件可以用作靜態(tài)的、可緩存的資產(chǎn)。不需要服務(wù)器邏輯,文件完全按照存儲的方式發(fā)送到瀏覽器。術(shù)語Jamstack有時用于描述此架構(gòu),因為部署只是一堆文件。
盡管可以在沒有任何 Web 庫或框架的情況下構(gòu)建靜態(tài)網(wǎng)站站點(diǎn),但靜態(tài)站點(diǎn)生成器 (SSG)(例如 Next.js、Hugo、Gatsby、Jekyll 等)允許使用組件等復(fù)雜的 Web 開發(fā)功能。這些框架在構(gòu)建時將代碼轉(zhuǎn)換為靜態(tài) HTML,然后可以將其部署到內(nèi)容分發(fā)網(wǎng)絡(luò) (CDN)。在構(gòu)建期間而不是在 Web 服務(wù)器上按需生成標(biāo)記的過程稱為預(yù)渲染。
初始 HTML 包含所有內(nèi)容
相同的 HTML 會在第一頁加載時提供給每個訪問者,包括搜索引擎機(jī)器人。這使得 Googlebot 無需解析和執(zhí)行 JS 即可輕松抓取頁面并將其編入索引。這并不意味著我們不能在頁面上使用 JS 來使元素交互,但由于我們沒有在客戶端使用 JS 來生成 HTML,我們正在為 SEO 的成功做好準(zhǔn)備。
無與倫比的速度和性能
因為靜態(tài) Web 應(yīng)用程序項目只是一堆文件,所以它們可以直接從 CDN 分發(fā)。沒有應(yīng)用服務(wù)器或任何預(yù)處理,以及用戶瀏覽器可以緩存靜態(tài)文件的事實意味著應(yīng)用程序?qū)⒕哂蟹浅?斓男阅堋?焖偌虞d時間意味著更好的用戶體驗和更好的 SEO 支持。
需要部署才能更改內(nèi)容
更新頁面是指通過代碼部署更新文件系統(tǒng)上的一個或多個文件。這對于簡單的項目可能沒問題,但對于更新非常頻繁且沒有持續(xù)部署 (CD) 的更大更復(fù)雜的項目,這可能會成為一個巨大的麻煩。
客戶端呈現(xiàn) (CSR) HTML
客戶端呈現(xiàn)的應(yīng)用程序意味著 HTML 內(nèi)容幾乎完全使用 JS 在瀏覽器中呈現(xiàn)。頁面的初始 GET 請求返回一個部分 HTML 文件,其中包含<script>引用主 JS 文件的標(biāo)記。JS 代碼運(yùn)行并將頁面內(nèi)容注入瀏覽器的 DOM。
每個頁面都不是有不同的 HTML 文件,而是在瀏覽器中動態(tài)創(chuàng)建每個路由。React、Vue、Angular 和 Ember 都是客戶端渲染框架的例子。與靜態(tài)站點(diǎn)類似,不需要 Web 服務(wù)器邏輯,可以將 JS 包和其他構(gòu)建工件部署到靜態(tài)服務(wù)器或 CDN。
初始 HTML 缺少關(guān)鍵頁面內(nèi)容
如果您要在瀏覽器中禁用 JS 并訪問客戶端呈現(xiàn)的網(wǎng)頁,該頁面很可能會丟失關(guān)鍵的頁面內(nèi)容。<script>這是因為在執(zhí)行標(biāo)記中引用的 JS 以將頁面內(nèi)容注入瀏覽器的 DOM之前,從服務(wù)器檢索的初始 HTML 是不完整的。
例如,如果下面的 HTML 被抓取工具抓取,它將沒有可抓取的內(nèi)容,Google 需要將 URL 添加到呈現(xiàn)隊列。with 元素id=”root”是DOM 容器,頁面內(nèi)容將在 JS 執(zhí)行后在運(yùn)行時注入。
<html lang="en">
<head>
<script src="main.js" />
</head>
<body>
<div id="root">
正在加載...
</div>
</body>
</html >
性能影響
由于瀏覽器正在執(zhí)行生成 HTML 的繁重工作,因此需要將任何正在使用的第 3 方 JS 依賴項下載到客戶端,這會增加帶寬并降低性能。瀏覽器需要做的工作越多,對用戶體驗和 SEO 的影響就越大。因為 JS 必須在 HTML 被抓取之前運(yùn)行,所以 CSR 網(wǎng)頁需要更長的時間才能出現(xiàn)在搜索結(jié)果中。
動態(tài)內(nèi)容
由于 HTML 是在客戶端動態(tài)生成的,因此可以非常靈活地調(diào)用 API 并向不同的用戶顯示不同的內(nèi)容,或者通過更新 CMS 或數(shù)據(jù)庫來更新內(nèi)容而無需部署代碼。
服務(wù)器端呈現(xiàn) (SSR) HTML
服務(wù)器端呈現(xiàn)是將客戶端 JavaScript 應(yīng)用程序呈現(xiàn)為服務(wù)器上的靜態(tài) HTML 的過程。SSR 是一個很大的類別,與靜態(tài)站點(diǎn)和 CSR 都有重疊。它類似于靜態(tài)站點(diǎn)生成器,因為 JS 框架用于從服務(wù)器生成 HTML,但 SSR Web 應(yīng)用程序可以在 Web 服務(wù)器上運(yùn)行時動態(tài)地執(zhí)行此操作。這意味著當(dāng)用戶或機(jī)器人訪問網(wǎng)頁時,服務(wù)器會收到 http 請求并動態(tài)生成特定于該請求的 HTML,然后將其返回給客戶端。我所說的這種 SSR 的“風(fēng)味”,有時也被稱為經(jīng)典 SSR。為避免將此基礎(chǔ)結(jié)構(gòu)與預(yù)渲染混淆,主要區(qū)別在于渲染發(fā)生在運(yùn)行時而不是構(gòu)建時。
所有流行的現(xiàn)代 Web 框架(如 React、Vue 和 Angular)都支持某種形式的 SSR,而 Next.js 等框架專門圍繞支持服務(wù)器端渲染而構(gòu)建。
初始 HTML 包含所有內(nèi)容
由于頁面的初始 GET 請求返回 HTML 中的所有內(nèi)容,因此 Googlebot 可以很容易地抓取頁面并將其編入索引。
動態(tài)內(nèi)容
由于 HTML 是在服務(wù)器上動態(tài)生成的,因此可以非常靈活地調(diào)用 Web 服務(wù)器內(nèi)的 API、向不同的用戶顯示不同的內(nèi)容,或者無需使用 CMS 或數(shù)據(jù)庫部署代碼即可更新內(nèi)容。
性能影響
由于服務(wù)器正在執(zhí)行生成 HTML 的繁重工作,因此會對性能產(chǎn)生影響。這可以通過添加一些 HTML 緩存來調(diào)解,但它不會像靜態(tài)站點(diǎn)那樣快。