如何在不損失 SEO 質量的情況下將 WordPress 網站遷移到 Gatsby

已發表: 2022-04-09
如何將 WordPress 網站遷移到 Gatsby


將 WordPress 網站遷移到不同的提供商似乎很少，但越來越多的博客正在脫離曾經最流行的在線內容管理系統。 隨著新技術開始發展，選項也開始增長，近年來，WordPress 面臨著相當多的競爭對手，其中最有前途的是 Gatsby。

雖然以相對相似的方式運作，但許多網站所有者更喜歡 Gatsby 而不是 WordPress 的原因有很多。

從功能和服務到性能質量和可用特權，以下是對 WordPress 和 Gatsby 的詳細介紹，然後是有關如何安全地將基於 WordPress 的站點遷移到 Gatsby 框架的詳細指南，而不會在此過程中損失 SEO 質量.





定義 WordPress



幾十年來，WordPress 一直是排名第一的內容管理系統。 作為一種開源模型，WordPress 多年來繼續為數千個博客和網站提供優質服務，同時提供大量免費內容和 SEO 管理工具，例如插件和擴展。

統計數據指出，大約 29% 的網站所有者仍在使用 WordPress，這使得該平台成為明顯的首選。 WordPress之所以受到眾多用戶的青睞，是由於其簡化的內容上傳，以及對內容及其SEO各方面修改的精確性。 WordPress 擁有豐富的插件庫，包括免費和付費的，但大多數用戶發現後者是一個功能更強大的選項。

也就是說，使用 WordPress 的缺點也很明顯。 一方面，該系統基於 PHP，並帶有大量遺留代碼，這使優化過程複雜化。 由於其各種用例，WordPress 創建了一個簡單的站點來配置，但不是一個快速的站點，並且如您所知，站點越慢，它驅動的流量就越少。 不僅如此，除了優質內容之外，谷歌的主要排名標準是網站的加載速度。

用戶避免使用 WordPress 的其他一些原因包括：



有問題的內容管理器



WordPress 花了一些時間來改造他們的內容編輯器，即便如此，他們也未能出類拔萃。 新的內容管理器 (Gutenberg) 按塊分隔內容，許多用戶認為這具有挑戰性，因為用戶體驗不太理想。 好吧，我不知道——我覺得它真的很好——當你習慣了它時。

大多數用戶正在安裝經典的編輯器插件以保留他們所知道的內容。



編寫 PHP



要修改 WordPress 站點，需要用 PHP 編寫修改。 雖然 WordPress 上存在自定義修改，但許多用戶發現這些修改要求過高且耗時。 由於 PHP 不是最流行的語言，除了 WordPress 網站，處理它有點多餘。

一些用戶更喜歡使用無需代碼即可輕鬆幫助自定義和修改網站設計的頁面構建器。 但是，使用 WordPress，您仍然無法真正擁有世界上所有的功能，也無法構建一個擁有盡可能多的功能的夢想網站。 一個更複雜的網站可能會發現很難使用 WordPress 作為前端。





定義 GatsbyJS



許多人認為 WordPress 是一種過時的技術，但隨著競爭對手的崛起，GatsbyJS 成為最合適的替代品之一。 大多數網站建設者和用戶都使用 JavaScript 和 React.js 等語言的網站，這正是 Gatsby 帶來的。 與 WordPress 的開源特性不同，GatsbyJS 是一個靜態站點生成器，主要內置在 React 中。

當用戶訪問基於 Gatsby 的網站時，該平台不會呈現頁面。 相反，GatsbyJS 在編譯時生成頁面，然後將它們全部在線移動。 系統無需服務器或維護，兼容JS、HTML、CSS等靜態文件。 最後，Gatsby 根本不使用 PHP，這讓以前的 WordPress 用戶鬆了一口氣。

該平台並非沒有缺點，其中之一是無法直接查看您所做的任何站點更改的結果，就像 Gatsby 一樣，必須先編譯所有內容。 然而，為了解決這個問題，許多人依賴 Gitlab CI/CD 管道首先編譯一個網站，然後再將其上線。 Gatsby 允許用戶製作博客文章模板並在 Markdown 中編寫所有內容。

以下是使用 Gatsby 的更多主要好處：

  • 零重裝

作為單頁應用程序或 SPA，Gatsby 不需要點擊的站點頁面來加載全新的資源。

  • 圖像細化

平台上使用的所有圖像都會自動過濾掉元數據等外部痕跡，並立即調整大小、壓縮、優化和延遲加載。

  • 預取資源

Gatsby 有能力發現某個頁面上所有可用的鏈接並將數據加載到站點緩存中。

  • 代碼替換

使用 Gatsby，所使用的代碼被簡化、捆綁、縮小，並且，唉，服務。





將 WordPress 數據遷移到 Gatsby 框架



當您考慮將整個內容從 WordPress 轉移到 Gatsby 時，要考慮的最重要方面是不要失去現有的 SEO 價值。

值得慶幸的是，蓋茨比讓其他平台內容的接收變得相當容易。

您需要傳輸內容的第一件事是源插件。 源插件將幫助 Gatsby 無縫並自動填充其 Graphql 存儲，同時授予您訪問所有輸入信息的權限。 可以修改源插件以滿足您的需求，甚至使您的平台開源而不是靜態。

Graphql 在獲取 API 數據方面提出了一個完善的解決方案，並且與它的前身 REST API 有很大不同。 Graphql 是 Gatsby 平台的補充資產，旨在用作系統本身的一部分。 完全繞過 Graphql 是可能的，但作為一種選擇被高度忽視，因為它不會授予您訪問各種重要功能的權限。

下一步是促進寫作過程並將所有內容移至 Markdown。 Markdown 或 .md 文件使用戶能夠編寫簡單的純文本，然後可以更輕鬆地將其轉換為 HTML。 更重要的是，Markdown 將提供所有 .md 文件以及該站點的 Github 代碼，並使流程版本受控。 一些用戶可能會發現 Gatsby Advanced Started (GAS) 也很有用，因為該項目可以創建面向 SEO 的 Gatsby 網站。



如何將 WordPress 帖子轉移到 Markdown



首先，您需要導出所有可行的 WordPress 文章。 完成後，您需要將它們轉換為純文本或 Markdown。 有一個工具可以做到這一點，它被稱為 WordPress Export to Markdown。 使用此工具，您可以提取所有 WordPress 內容、其標籤、類別和基本的 SEO 方面。 該工具需要額外的步驟來轉換文章內容和發布圖像。

獲得後，這些文件就可以放入項目內容文件夾中了。 下次運行 Gatsby 時，您只會注意到一些文章，但是一旦您構建了站點，所有內容都將被表示為已獲取。



如何使用 Gatsby 創建帖子和頁面



Gatsby 的性能類似於 WordPress 中使用的 PHP。 然而，由於 Gatsby 完全使用 React，它會將語言組合放在頁面文件夾下，從而自動將它們轉換為站點頁面。 此功能非常適合一維頁面內容，例如“索引”和“關於我”。

在動態內容方面，如類別或博客文章，歡迎用戶依賴 Gatsby 的現成模板來創建特定頁面。 那些將使用 GAS 的人手頭已經有了帖子模板，以及他們的標籤和類別。 隨意再次評估您的內容，使其更具動態性，從而與 Gatsby 更兼容。 您所做的所有更改都會立即顯示在瀏覽器中，這使得 Gatsby 對快速迭代非常友好。

請記住，Gatsby 的精髓在於它的 gatsby-node.js 文件。 在這裡，您可以估計模板和頁面行為，以及要使用的 slug 和元素和額外數據。 考慮該文件也是有害的，因為它可以幫助您填充節點，或者換句話說，數據存儲在您的 GraphQL 中。



如何設計 Gatsby 網站



在編寫網站樣式方面，Gatsby 提供了許多可行的選項，例如 .css 文件、Sass、CSS-in-JS 等。 以下是有關如何設計 Gatsby 網站的一些提示：
  • 探索可用的設計資源，例如 Ant、MaterialUI 和 Materialize。
  • 做好部署準備！ 像 Gatsby 這樣的靜態站點使站點部署變得超級簡單且經濟實惠。 歡迎您使用許多免費且快速的工具來執行此操作，例如 Netlify、AWS Amplify、Now 和 Surge。
  • 優化，優化，優化！ 使用 Gatsby 意味著擁有更快的網站，並且您始終可以使用該平台使其更快、SEO 提升和可訪問。 最好的優化工具之一是 Lighthouse，因為它會自動執行所有操作：審計、指標、網絡實踐、詳細數據，甚至是有用的鏈接。 您可以通過 Google、Firefox 或使用 Lighthouse CLI 選項運行您的 Lighthouse 審核。



如何讓你的 Gatsby 網站快速運行



遷移所有內容後，您可以通過以下方式使您的 Gatsby 網站更快：

  • 通過 GraphQL 處理所有 Gatsby 數據。
  • 避免使用像moment.js這樣繁重的庫，因為它們會使網站變慢。
  • 信任您的服務器來修改日期、將該數據發送到您的頁面以及執行其他繁重的任務。
  • 使用 GraphQL 管理更少的數據。 這樣，您將只訪問您需要的數據，並避免錯誤地堆積過多的數據量。
  • 使其可訪問。 您的用戶不會像您那樣與您的網站進行交互，因此請確保網站通過合併質量 a11y 來涵蓋所有類別的用戶，這也可以改善 HTML 和優化 SEO 分數。 要修復 a11y 問題，您可以使用相關工具，例如 Axe。



如何保持高質量的 SEO



通過了解 Google 如何對網站進行排名的基礎知識，您將能夠讓您的 Gatsby 網站一帆風順。 為此，請注意以下幾個方面：
  • 恆星和相關內容
  • 用戶可訪問性更高
  • 運行速度更快的網站
  • 建立鏈接，或在其他域上展示您的網站





從 WordPress 遷移到 Gatsby 的簡化指南



為了總結和促進這個過程，這裡是一個將您的網站從 WordPress 完全遷移到 GatsbyJS 的分步指南。

  • 從 WordPress 下載 XML，在工具 > 導出中找到。
  • 使用工具將 XML 轉換為 Markdown 或純文本，這有時可以完成轉換博客文章一半以上的工作。
  • 下載所有圖像和服務器內容。 將 WordPress 上傳的圖像拉到圖像文件夾中。
  • 修復損壞的列表和縮進代碼塊以融入 Gatsby 風格。
  • 保存縮略圖並將它們移動到相應的文件夾以供重複使用。
  • 連接到 Netlify 以設置自動部署。 如果用 JavaScript 編寫，請將其遷移到 typescript 以啟用它。
  • 更改樣式選項，以便他們可以使用 CSS-in-JS。 更新樣式和佈局。
  • 運行更新，使博客內容屬於“/blog/”類別。
  • 對所有 URL 使用重定向。
  • 使用 React Context API 作為包裝器來創建夜間模式。
  • 使用手動或自動導入器將 WordPress 評論遷移到 Gatsby。

一旦涵蓋了所有這些步驟，您就可以構建頁面、掌握 GraphQL、進行適當的查詢以及在需要時清理小混亂。



遷移過程需要多長時間？



將所有內容從 WordPress 遷移到 Gatsby 將取決於您擁有的內容量以及您的個人努力。 理想情況下，您應該能夠在不超過兩週的時間內傳輸所有內容。 但是，請記住，如果您是 React 新手，您將需要時間來適應它。

一旦掌握了竅門，您將享受 Gatsby 帶來的好處，例如 MySQL 數據庫中的 HTML 破壞更少，以及易於訪問、管理、編輯、讀取、備份和與他人共享的文件。



最後一件事…


關於更多的事情



雖然管理 Gatsby 需要一套技能和 CSS、HTML、JavaScript、Node.js、React、ES6 和 GraphQL 方面的背景，僅舉幾例，但要慢慢開始並學習每一種技術。

即使該過程帶來了挑戰，最終，您也可以按照 Gatsby 入門教程獲取有關遷移過程的更詳細指南。

讓我們開始編碼，好嗎？