NodeJSおよびその他のバックエンドスタックでReactまたはVueを使用するリアクティブJavaScriptのSEO

今年初めにHTML5、CSS3、およびJavascriptを使用してSEOフレンドリーマークアップを強化する方法についてのライブディスカッションでは、Reactについて多くの時間を費やしました。 SEOのために覚えておく必要のあるReactのニュアンスを掘り下げていきます。ディスカッションに参加したDudaの戦略的統合のディレクターであるRussJeffreyによる分析にコードを使用します。

反応するか、反応しないか?

反応フレームワークは、ダッシュボードの詳細がFacebookやTwitterに期待するような体験のように、活気のあるユーザーのコミュニティと協調して維持されるため、Webサイト(アプリケーション)ページの下に魔法がぶつかるような感覚を与えることができます。

ただし、ビジネス要件によって、プロジェクトで最終的に使用するテクノロジを決定する必要があります。 Facebookタイプのダイナミックを必要とするアプリを作成している場合は、それを提供するためのリアクティブなフレームワークの作成に投資する必要があります。しかし、実際には、そのような要件を持つサイトはほとんどありません。ほとんどの場合、基本的なパフォーマンス上の理由から、jQuery、またはそれを回避できる場合はバニラJavaScriptを使用することをお勧めします。

少数のページで1つのリアクティブ要素を使用する場合、リアクティブコードを必要な場所とタイミングに限定する方法があります。サーバー側(またはクライアント側)の条件付きコードを記述してロードします。パワーポップアップモーダルインタラクティブメニュータブ付きコンテンツなどだけを実行したい場合、リアクティブライブラリのコストとメリットを考慮すると、他のアプローチよりも有利になりません。

SEOのレンダリング戦略

WebアプリがSEOの重要なコンテンツをいつどのようにレンダリングするかについては、間違いなく異なる考え方をする必要があります。それは、ラスが私たちの議論の後半で私たちにもたらした学習です。彼は、サーバー側を構築し、JavaScriptと一緒に最適化されたアプリシェルを出荷して、クローラーがSEOに必要なものを取得し、残りを「ハイドレーション」を使用してクライアント側にレンダリングする方法の例を示しています。

ここで完全な議論を見てください。

フレームワーク

このコンテキストでのアプリケーションプログラミングには、通常、フロントエンドライブラリだけでは不十分です。ユーティリティスクリプトを使用した設定ファイルレイアウトデザインの規則は、ReactまたはVueのフレームワークと呼ばれるものを構成できます。 NextNuxtは、それぞれNodeJSベースのReactフレームワークとVueフレームワークです。

売り上げアップするならホームページ制作で長崎市

フレームワークは、従来の仕様とベストプラクティスに従って、スキャフォールディングプロジェクトファイルとサービスを簡素化します。 Russは、ReactとVueを他のいくつかの人気のあるバックエンドプログラミング言語と統合する方法を示すGitHubプロジェクトへのリンクを提供してくれました。 NodeJSとは異なるランタイムプロセスがバックエンドで必要な場合は、それらを確認してください。

NodeJSを使用したSEOコードスニペット

エンタープライズレベルまたはスタートアップレベルの要件に達すると、フレームワークとのサービスレベル契約が不可能になる場合があります。 Russは、NodeJS(Expressを使用)のみに基づくSEOコードスニペットの使用を開始する手順を説明します。

サンプルのReactプロジェクトとVueプロジェクトの両方の3つの主要なファイルには、分析に必要なコードが含まれています。

  • app.jsファイルは、「ブログ」アプリシェルを管理します。
  • server.jsファイルはExpressライブラリをプルし、SSRのレンダリングメソッドを含むリクエスト処理用に構成します。
  • index.jsファイルは、NodeJSランタイムプロセスのエントリポイントとして機能します。

SEOに優しいReact

ReactのApp.jsの例は、 SPAスタイルの仮想ページビューのフラグメントに依存しないURLへのSEOフレンドリパスのルーティングを示しています。 server.jsでは、「コンテキスト」データオブジェクトは、 ReactDOMServer .renderToString()を呼び出して、URLおよび場合によっては他の基準に基づくコンテキストでアプリシェルをレンダリングするためのリソースの詳細を意味します。

server.jsファイルには、さらに改良するためのデータコンテキストオブジェクトがあります。 Russは、タイトルやその他のメタデータを置き換えて、構築されたアプリシェルのSEOを完成させてから、最終的にブラウザーに送信する方法を示します。

最後に、 index.jsはNodeJSプロセスの開始点として機能し、 ReactDOM.hydrate()は、シェルのロード後に重要性の低い補助コンテンツでアプリを肉付けするために使用されます。

'build'ディレクトリには、SSRテンプレート構築のターゲットファイルとしてindex.htmlが含まれています。他の2つのファイル、コンポーネントHomePostsは、 .js拡張子を使用して保存されます。これは、慣例により暗示されているため、importステートメントで明示的に記述する必要はありません。コンポーネントファイルの分析は、コンポーネントのサブディレクトリに再編成されたコンポーネントファイルを見つけるのが一般的であるということを除いて、適切にスキップします。

Russの例では、コンポーネントファイルを含むすべてのファイルがプロジェクトのベースディレクトリにあります。 Reactファイルのディレクトリツリーは次のようになります。
├──App.js
├──Home.js
├──Posts.js
├──ビルド
│└──index.html
├──index.js
└──server.js

JSX構文に慣れていない場合は、XMLを使用したReactコンポーネントエンコーディング用のJavaScript言語拡張機能であるため、テンプレートファイルにJavaScriptを含めることができます。子コンポーネントはインポートされ、後でXMLテンプレートブロックの命名規則(Home.jsとPosts.jsはそれぞれ<Home /><Posts />にマップされます)によって参照されます。

Russは、 react-router-domライブラリ(NPM経由でインストールする必要がある場合があります)を利用します:ルーターとStaticRouter、スイッチ、およびNavLink。これらのライブラリは、NavLink'to 'ヘルパーを使用してURLパスまたはリソースへのHTMLリンクを生成するなど、一般的なタスクに便利な既製のヘルパーを提供します。これは、 Railの' link_to 'ヘルパーにいくぶん類似しています。

App.jsのスイッチとルーターを介してRussは、URLパスを照合するための構文を示しています。インデックスパスステートメントの「exact」キーワードに注意してください。正確に一致するのは「/」のみである必要があります。一致しない場合は、アプリケーションのすべてのパスに一致します。 「exact」キーワードを使用すると、デフォルトの基準が「/ posts」や「/ posts / hello-world」などに一致する欲張り一致から変更されます。

server.jsでは、 RussはExpressと呼ばれる一般的な外部フレームワークを利用して、ネットワーク上でアプリを提供するために必要なポートリスナーと応答メソッドを使用してアプリケーションをセットアップします。ローカルで作業している場合は、ローカルホスト要求を介して作業する予定の開いているポートと一致するように、ローカル環境変数PORTを確立する必要があります。本番環境では、これは通常、ポート80に設定する必要があります。

Vueフレームワーク

最後に、Vueフレームワークはより親しみやすいリアクティブフレームワークの1つであり、その概念は最初から感じられます。テンプレートファイルは文字通り、ハンドルバースタイルのJavaScript補間を使用したHTMLです。 Vueを使用している場合は、独自のバックエンドを使用している可能性が高くなりますが、そのルートを選択した場合、NuxtはVueの最先端のフレームワークです。

Russは、 Vue SSRのドキュメントを指摘し、彼のコードスニペットは、ブログアプリのVueバージョンの実装と基本的に同じファイル構造とレイアウトを使用して動作します。以下の要点で、ReactとVueの両方のコードを見つけてください。


著者について

Detlef Johnsonは、検索エンジンランドとSMXの開発者エキスパート向けのSEOです。彼はまた、SMXイベントのプログラミングチームのメンバーであり、検索エンジンランドで開発者向けSEOシリーズを執筆しています。 Detlefは、20年以上前にプロのSEO分野を確立した先駆的なウェブマスターの最初のグループの1つです。それ以来、彼は主要な検索エンジンテクノロジープロバイダーで働き、シカゴトリビューンのプログラミングおよびマーケティングチームを管理し、フォーチュン500企業を含む多数の企業のコンサルティングを行ってきました。 Detlefは、テクニカルSEOを深く理解しており、Webプログラミングに情熱を注いでいます。