Angular & SEO – Making Angular 6 Single-Page Web Apps Search-Engine Friendly

BY admin
|

以下のチュートリアルでは、Angular Universal でサーバーサイドレンダリングを使用することにより、あなたの Angular 6 アプリケーションでその制限を取り除くための、最も簡単なアプローチを見ていきたいと思います。

始めるにあたって、まず、次の手順で新しい Angular アプリケーションをセットアップします。

新しい Angular アプリケーションをセットアップするには、Angular CLI を使用します。 Angular CLIをシステムにインストールするには、Node.NETを使用してください。js Package Manager を使用して、コマンド ラインで次のようにインストールします：

$ npm install -g @angular/cli

Angular CLI を正常にインストールすると、新しいコマンド ng を使用して新しい Angular プロジェクトをゼロからセットアップできるようになります。

$ ng new ngseo --routing

new オプションで、新しい Angular プロジェクトを作成することを指示し、ngseo は新しいプロジェクトの名前、そしてオプション – routing を使用して、基本ルーティング設定もプロジェクトに追加されることを確認しています。

プロジェクトのセットアップに成功したら、新しく作成したプロジェクト フォルダに移動します。

$ cd ngseo

そして、次の方法で Angular CLI を使用して開発 Web サーバーを再度開始します。

How Crawlers See Single-Page Web Apps

Angular アプリケーションが稼働したので、検索エンジンのクローラーが当社のウェブサイトを見ているか調査してみましょう。 コマンド ライン ツールの curl を使用してサイトにアクセスすると、良い印象を受けます：

$ curl localhost:4200

戻ってくる結果は次のようになります。

ここで、ウェブサイトのメイン コンテンツがその HTML 文書の一部ではないことが分かります。 その代わりに、body セクション内にプレースホルダー要素 <app-root> があることがわかります。 これは、サイドのJavaScriptコードが実行されるときに、Angularがウェブサイトのコンテンツを挿入していることを示しています。

Angular Universal For Server-Side Rendering

では、その問題の解決策は何でしょうか。 そう、それはサーバーサイドレンダリング（SSR）です。 サーバー サイド レンダリングが実行されると、Angular アプリケーションの JavaScript コードはすでにサーバー上で実行され、完全な HTML 構造とコンテンツが Web クローラーにも提供されます。

Angular アプリケーションのサーバー サイド レンダリングを可能にするテクノロジーは Angular Universal と呼ばれています。 Angular Universal は、サーバー サイド レンダリングと呼ばれるプロセスを通じて、サーバー上に静的なアプリケーション ページを生成します。

Angular Universal の使用方法の詳細については、https://angular.io/guide/universal に記載されています。 しかし、Angular Universalを非常に簡単に追加できる別の方法があります。それは、@ng-toolkit/universalパッケージを使用することです。

Adding Angular Universal With @ng-toolkit/universal To Make Your Angular Application Search-Engine Friendly

@ng-toolkit/universal パッケージは、次の方法でもう一度 ng コマンドを使用してプロジェクトに追加します：

$ ng add @ng-toolkit/universal

パッケージを追加した後に package.json を開き、依存セクションの webpack-cli パッケージが少なくともバージョン 3 でリストされているかどうか確認することです。1:

"webpack-cli": "^3.1.0"

そうでない場合は、このエントリを適宜変更して、次のコマンドを実行します:

$ npm install

次に、ng serve -o を実行する代わりに、次のコマンドを実行します。

$ npm run build:prod

and

$ npm run server

サーバは localhost:8080 で起動し、ブラウザでその URL にアクセスしていれば、デフォルトの angular アプリケーションのウェブサイトを再び表示できるようになるはずです。

Curl を使用して Web サイトに再度アクセスしてみましょう。

$ curl localhost:8080

出力は、次のスクリーンショットのようになるはずです。

今回は HTML サイトのコンテンツ全体が含まれています。 その理由は、HTML 側が構築プロセス (サーバー側) の一部としてレンダリングされ、クライアント側で JavaScript コードを実行する必要なく利用できるようになったからです。 したがって、検索エンジンのクローラーはサイドのコンテンツを見つけることができ、検索結果に正しく追加されることを確認できます。

Conclusion

デフォルトで Angular はクライアント側レンダリングを使用しますが、これは Web サイトが検索エンジンの結果に表示されるべき場合に問題です。 解決策は、アプリケーションをサーバー側でレンダリングし、検索エンジンのクローラーが容易に解釈できる最終的な HTML 要素を生成することです。 既存の Angular アプリケーションに Angular Universal を追加するには、@ng-toolkit/universal パッケージを使用すると非常に簡単です。

この投稿は CodingTheSmartWay.com に最初に掲載されました。 Angular 6を含む）、そしてAngular.jsの後継で素晴らしいリアクティブなWebアプリケーションを構築する
Go To Course …

免責事項：この投稿にはアフィリエイトリンクが含まれています、つまり、製品リンクの1つをクリックすると、私は小さなコミッションを受け取ります。 これは、このブログをサポートするのに役立ちます！

。