SEOの品質を損なうことなくWordPressサイトをGatsbyに移行する方法

公開: 2022-04-09
WordPressサイトをGatsbyに移行する方法


WordPressサイトを別のプロバイダーに移行することは一握りのように思えるかもしれませんが、オンラインで最も人気のあるコンテンツ管理システムであったものから、ますます多くのブログが脱線しています。 新しいテクノロジーが成長し始めると、オプションも成長します。近年、WordPressは競合他社のかなりのシェアに直面しており、その中で最も有望なのはGatsbyです。

比較的類似した方法で動作している一方で、多くのサイト所有者がWordPressよりもGatsbyを好む理由はさまざまです。

機能とサービスからパフォーマンスの品質と利用可能な特典まで、WordPressとGatsbyの両方を詳しく見てから、プロセスでSEOの品質を損なうことなくWordPressベースのサイトをGatsbyフレームワークに安全に移行する方法の詳細なガイドが続きます。





WordPressの定義



何十年もの間、WordPressはナンバーワンのコンテンツ管理システムを代表してきました。 オープンソースモデルとして、WordPressは何千ものブログやウェブサイトに高品質のサービスを提供し続け、プラグインや拡張機能などの多数の無料コンテンツとSEO管理ツールを提供しました。

統計によると、サイト所有者の約29％が依然としてWordPressを使用しているため、プラットフォームが明らかに最初の選択肢になります。 WordPressが多くのユーザーに支持されている理由は、コンテンツのアップロードが簡素化されていることと、コンテンツとSEOのすべての側面を正確に変更できることです。 WordPressは、無料と有料の両方のプラグインの豊富なギャラリーを誇っていますが、ほとんどのユーザーは後者の方がはるかに機能的なオプションだと感じています。

そうは言っても、WordPressを使用することの欠点も明らかです。 1つは、システムがPHPベースであり、最適化プロセスを複雑にする広範なレガシーコードが付属していることです。 さまざまなユースケースがあるため、WordPressは構成が簡単なサイトを作成しますが、迅速なサイトではありません。ご存知のように、サイトの速度が遅いほど、トラフィックは少なくなります。 それだけでなく、質の高いコンテンツを除いて、Googleの主要なランキング基準は、Webサイトの読み込み速度です。

ユーザーがWordPressの使用を避けた他の理由には、次のようなものがあります。



問題のあるコンテンツマネージャー



WordPressはコンテンツエディタを刷新するのに少し時間がかかりましたが、それでも彼らは優れていませんでした。 新しいコンテンツマネージャー（Gutenberg）は、ユーザーエクスペリエンスが理想的とは言えないため、多くのユーザーが難しいと感じたブロックごとにコンテンツを分離します。 まあ、私は知りません-私はそれが本当に良いと思います-あなたがそれに慣れたとき。

ほとんどのユーザーは、クラシックエディタプラグインをインストールして、自分が知っていることを維持しています。



PHPを書く



WordPressサイトを変更するには、変更をPHPで記述する必要があります。 WordPressにはカスタム変更が存在しますが、多くのユーザーはこれらが過度に要求が厳しく、時間がかかると感じています。 また、PHPはWordPressサイトを除いて最も人気のある言語ではないため、PHPを扱うのは冗長だと感じます。

一部のユーザーは、コードを使用せずにサイトのデザインを簡単にカスタマイズおよび変更できるページビルダーの使用を好みます。 しかし、それでも、WordPressを使用すると、世界中のすべての機能を実際に使用したり、必要な数の機能を備えた夢のサイトを構築したりすることはできません。 より複雑なサイトでは、WordPressをフロントエンドとして使用するのはおそらく難しいでしょう。





GatsbyJSの定義



多くの人がWordPressを時代遅れのテクノロジーと見なしていますが、競合他社が増えるにつれ、GatsbyJSは最も適切な代替手段の1つになりました。 ほとんどのサイトビルダーとユーザーは、JavaScriptやReact.jsなどの言語を使用するサイトに頼っています。これはまさにGatsbyが提供するものです。 WordPressのオープンソースの性質とは異なり、GatsbyJSは静的サイトジェネレーターであり、主にReactに組み込まれています。

ユーザーがGatsbyベースのサイトにアクセスすると、プラットフォームはページをレンダリングしません。 代わりに、GatsbyJSはコンパイル時にページを生成し、それらをすべてオンラインに移動します。 システムはサーバーやそのメンテナンスを必要とせず、JS、HTML、CSSなどの静的ファイルと互換性があります。 最後に、GatsbyはPHPをまったく使用していません。これは、以前のWordPressユーザーにとって大きな安心です。

プラットフォームには欠点がないわけではありません。その1つは、Gatsbyの場合と同様に、サイトの変更の結果を直接確認できないことです。すべてを最初にコンパイルする必要があります。 ただし、この問題を解決するために、多くの場合、Gitlab CI / CDパイプラインを使用して、最初にWebサイトをコンパイルし、次にオンラインで公開します。 Gatsbyを使用すると、ユーザーはブログ投稿テンプレートを作成し、すべてのコンテンツをマークダウンで書き込むことができます。

Gatsbyを使用する主な利点は次のとおりです。

  • ゼロリロード

シングルページアプリまたはSPAとして、Gatsbyは新しいリソースをロードするためにクリックされたサイトページを必要としません。

  • 画像の絞り込み

プラットフォームで使用されるすべての画像は、メタデータなどの外部トレースから自動的にフィルタリングされ、すぐにサイズ変更、圧縮、最適化、遅延読み込みされます。

  • リソースのプリフェッチ

Gatsbyには、特定のページで利用可能なすべてのリンクを見つけて、データをサイトキャッシュにロードする機能があります。

  • コードの変更

Gatsbyを使用すると、使用されるコードが単純化され、バンドルされ、縮小され、残念ながら提供されます。





WordPressデータのGatsbyFrameworkへの移行



コンテンツ全体をWordPressからGatsbyに移行することを検討している場合、考慮すべき最も重要な側面は、既存のSEO値を失わないことです。

ありがたいことに、ギャツビーは他のプラットフォームのコンテンツの受信をかなり簡単にします。

コンテンツを転送するために最初に必要なのは、ソースプラグインです。 ソースプラグインは、GatsbyがGraphqlストアにシームレスかつ自動的にデータを入力するのに役立ち、すべての入力情報へのアクセスを許可します。 ソースプラグインは、ニーズに合わせて変更でき、プラットフォームを静的ではなくオープンソースにすることもできます。

Graphqlは、APIデータの取得において洗練されたソリューションを提供し、その前身であるRESTAPIとは大きく異なります。 Graphqlは、Gatsbyプラットフォームを補完する資産であり、システム自体の一部として使用することを目的としています。 Graphqlを完全にバイパスすることは可能ですが、さまざまな重要な機能へのアクセスが許可されないため、オプションとして無視されます。

次のステップは、書き込みプロセスを容易にし、すべてをMarkdownに移動することです。 マークダウン（.mdファイル）を使用すると、ユーザーはシンプルでプレーンなテキストを記述して、HTMLに簡単に変換できます。 さらに、MarkdownはサイトのGithubコードとともにすべての.mdファイルを配信し、プロセスバージョンを管理します。 このプロジェクトではSEO指向のGatsbyサイトを作成できるため、一部のユーザーはGatsby Advanced Started（GAS）も役立つと感じるかもしれません。



WordPressの投稿をMarkdownに転送する方法



何よりもまず、実行可能なすべてのWordPress記事をエクスポートする必要があります。 それが完了したら、これらをプレーンテキストまたはマークダウンに変換する必要があります。 それを行うツールがあり、それはWordPress ExporttoMarkdownと呼ばれています。 このツールを使用すると、すべてのWordPressコンテンツ、そのタグ、カテゴリ、および重要なSEOの側面を抽出できます。 このツールは、記事のコンテンツだけでなく、投稿画像も変換するための追加の手順を実行します。

取得すると、ファイルはプロジェクトコンテンツフォルダーに配置できるようになります。 次回Gatsbyを実行すると、記事がほんの少しだけ表示されますが、サイトを構築すると、すべてのコンテンツが取得済みとして表示されます。



Gatsbyを使用して投稿とページを作成する方法



Gatsbyのパフォーマンスは、WordPressで使用されているPHPに似ています。 ただし、GatsbyはReact全体を使用するため、言語複合語をページのフォルダーの下に配置し、自動的にサイトページに変換します。 この機能は、「インデックス」や「自己紹介」などの1次元ページコンテンツに最適です。

カテゴリやブログ投稿などの動的コンテンツに関しては、ユーザーは特定のページを作成するためにGatsbyのすぐに使用できるテンプレートを利用できます。 GASを使用する人は、タグとカテゴリとともに、投稿テンプレートをすでに手元に置いています。 コンテンツをもう一度見積もり、より動的にして、Gatsbyとの互換性を高めてください。 行ったすべての変更は一度にブラウザに表示されるため、Gatsbyは迅速な反復に非常に適しています。

Gatsbyの本質は、gatsby-node.jsファイルにあることを忘れないでください。 ここでは、テンプレートとページの両方の動作、およびスラッグと要素、および使用する追加データを見積もることができます。 このファイルは、ノードにデータを取り込むのに役立つため、つまり、データがGraphQLに保存されるため、考慮するのも有害です。



ギャツビーサイトのスタイルを設定する方法



サイトスタイルの記述に関して、Gatsbyは、.cssファイル、Sass、CSS-in-JSなどの多くの実行可能なオプションを提供します。 Gatsbyサイトを設計するためのヒントをいくつか紹介します。
  • Ant、MaterialUI、Materializeなどの利用可能な設計リソースを調べてください。
  • 展開の準備をしてください！ Gatsbyのような静的サイトは、サイトの展開を非常に簡単で手頃な価格にします。 Netlify、AWS Amplify、Now、Surgeなど、無料で高速なツールを多数使用できます。
  • 最適化、最適化、最適化！ Gatsbyを使用するということは、サイトを高速化することを意味します。プラットフォームをいつでも使用して、サイトをさらに高速化し、SEOを促進し、アクセスしやすくすることができます。 最高の最適化ツールの1つは、Lighthouseです。これは、監査、メトリック、Webプラクティス、詳細データ、さらには役立つリンクなど、すべてを自動的に実行するためです。 Google、Firefoxを介してLighthouse監査を実行するか、LighthouseCLIオプションを使用できます。



GatsbyWebサイトを高速に動作させる方法



すべてのコンテンツが移行されたら、次の方法でGatsbyサイトを高速化できます。

  • GraphQLを介してすべてのGatsbyデータを処理します。
  • サイトの速度を低下させる可能性があるため、moment.jsなどの重いライブラリの使用は避けてください。
  • サーバーを信頼して日付を変更し、そのデータをページに送信し、その他の高負荷のタスクを実行します。
  • GraphQLを使用して、より少ないデータを管理します。 このようにして、必要なデータにのみアクセスし、誤って過剰なデータ量を積み上げることを回避できます。
  • アクセス可能にします。 ユーザーがサイトを操作することはありません。そのため、高品質のa11yを組み込むことで、サイトがすべてのカテゴリのユーザーをカバーするようにします。これにより、HTMLが改善され、SEOスコアが最適化されます。 a11yの問題を修正するには、Axeなどの関連ツールを使用できます。



高品質のSEOを維持する方法



グーグルがサイトをランク付けする方法の基本を理解することによって、あなたはあなたのギャツビーサイトをロールに乗せることができるでしょう。 そのためには、次の点に注意してください。
  • ステラと関連コンテンツ
  • ユーザーへのアクセシビリティの向上
  • より高速に実行されるサイト
  • リンクを構築する、または他のドメインでサイトを紹介する





WordPressからGatsbyへの移行に関する簡略化されたガイド



プロセスを要約して促進するために、WordPressからGatsbyJSにサイトを完全に移行するためのステップバイステップガイドを以下に示します。

  • [ツール]>[エクスポート]にあるWordPressからXMLをダウンロードします。
  • ツールを使用して、XMLをマークダウンまたはプレーンテキストに変換します。これにより、ブログ投稿の変換作業の半分以上が実行される場合があります。
  • すべての画像とサーバーコンテンツをダウンロードします。 WordPressのアップロードから画像フォルダに画像をプルします。
  • 壊れたリストを修正し、コードブロックをインデントしてGatsbyスタイルに同化させます。
  • サムネイルを保存し、それぞれのフォルダに移動して再利用します。
  • Netlifyに接続して、自動展開を設定します。 JavaScriptで記述されている場合は、それをtypescriptに移行して有効にします。
  • CSS-in-JSを使用できるように、スタイルオプションを変更します。 スタイルとレイアウトを更新します。
  • 更新を実行して、ブログのコンテンツが「/blog/」カテゴリに分類されるようにします。
  • すべてのURLにリダイレクトを使用します。
  • ナイトモードを作成するラッパーとしてReactContextAPIを使用します。
  • 手動または自動のインポーターを使用して、WordPressのコメントをGatsbyに移行します。

これらのすべての手順を完了すると、ページの構築、GraphQLの習得、適切なクエリの作成、および必要に応じて小さな混乱のクリーンアップが完了します。



移行プロセスにはどのくらい時間がかかりますか？



WordPressからGatsbyにすべてのコンテンツを移行することは、あなたが自由に使えるコンテンツの量とあなたの個人的な努力に依存します。 理想的には、2週間以内にすべてのコンテンツを転送できる必要があります。 ただし、Reactを初めて使用する場合は、それに順応するための時間が必要になることに注意してください。

一度コツをつかめば、MySQLデータベース内のHTMLの大混乱が少なくなるなど、Gatsbyに付属する特典や、アクセス、管理、編集、読み取り、バックアップ、他のユーザーとの共有が簡単なファイルを楽しむことができます。



最後に一つだけ…


もっと多くのことについて



Gatsbyの管理には、CSS、HTML、JavaScript、Node.js、React、ES6、GraphQLの一連のスキルとバックグラウンドが必要ですが、いくつか例を挙げると、ゆっくりと始めて、各テクノロジーを学びます。

プロセスが課題を提起する場合でも、最終的には、移行プロセスのさらに詳細なガイドについて、Gatsby入門チュートリアルに従うことができます。

コーディングを始めましょう。