あなたがあなたのウェブサイトを動かすためにAngularを使うなら、それはSEOに関しては横断する追加のハードルを持っています。幸いなことに、 Angular Universalを使えば簡単に飛び越えることができます。

「簡単」はここでは相対的な用語です。かなりの技術的な魔法使いが関係しています。

開発チームを巻き込む必要があるでしょう。

しかし完成品が配達されると、あなたのサイトは検索エンジンが容易に見つけ出しインデックスをつける最適化されたページを提供するでしょう。

このガイドでは、Angular Universalと、それがマーケティング担当者にとって重要な理由について説明します。

SEOの問題

Angularは、モジュール式の使いやすいWebアプリケーションを提供するための素晴らしいフレームワークです。残念ながら、それはSEOにとって少し敵対的です。

それは2つの理由によるものです。

まず、Angularはコンテンツを配信するためにスクリプトに大きく依存しています。その結果、一部の検索ボットはユーザーが見るコンテンツを「見る」ことができません。

Angular Universalのドキュメントを見てください。そのページは、当然のことながらAngularでレンダリングされています。

下にスクロールすると、かなりの内容が表示されます。あなたはそれがすべてインデックス可能だと思うでしょう。

必ずしも。ページを右クリックして、表示されるコンテキストメニューから[View page source]を選択します。

100行のソースコードしかありません。そのページのどこにも、通常のページを見たときに見たコンテンツは表示されません。

一言で言えば、それはAngularの問題です。人間の訪問者にはコンテンツが表示されますが、検索ボットにはソースが表示されます 。

そしてソースはコンテンツを持っていません！

もう一つのSEOの問題があります：スピード。 Angularアプリはしばしば速くロードされません。

ホームページを表示する前に、数秒間何も表示されないサイトがあります。せっかちになると、訪問者が保釈される可能性があります。

サイトの速度はモバイルのランク付け要因であるため、サイトがモバイルプラットフォームにすばやく読み込まれない場合はランクが上がります。

しかしグーグルは言う…

グーグルは、そのボットがスクリプト駆動型サイトを索引付けできると主張している。それを裏付ける証拠はたくさんありますが、Angularサイトを最適化するときに余分な1マイルを費やすことを避けられるわけではありません。

初心者にとって、Googleは街で唯一の検索エンジンではありません。 AngularアプリをBingとDuckDuckGoにランク付けするには、それを実現するための対策を講じる必要があります。

次に、グーグルがいくつかの Angularサイトにインデックスを付けることはできるがあなたのサイトにはインデックスをつけることができないかもしれません。すべてのAngularアプリが同じように作成されているわけではありません。あなたのものは、Googleのインデックス作成アルゴリズムの例外かもしれません。

私の経験では、HTMLからAngularに移行するサイトの大半は検索エンジンからの膨大なトラフィックを失いました。実際、私は昨年1年間に3人のクライアントがやってきて、Angularによる低下の後にサイトを修復しなければならなかった。

解決策があります

ホームページ制作 長崎は幸いなことに、AngularサイトをSEOフレンドリーにする方法があります。

より一般的なオプションの1つは、 動的レンダリングを使用することです。それはあなたがWebクローラーがもっと簡単に消費することができる静的なHTMLファイルを生成するためにPuppeteerのようなツールを使うときです。

次に、訪問者が通常のAngularアプリをナビゲートしながら、検索ボットを事前レンダリングされたページに向けるようにWebサーバーを設定します。

売上アップを目指すためにホームページ制作を佐賀でのご依頼は株式会社ハートウエブへ

それはまともな解決策ですが、それでもスピードの問題には対処していません。そのためには、おそらくAngular Universalを使いたいでしょう。

Angular Universalとは何ですか？

Angular Universalは、ブラウザで実行するのではなく、サーバー上でWebアプリケーションを実行します。

それは重要な違いです。通常、Angularアプリはクライアントサイドのアプリケーションです。

検索ボットの問題点は、ブラウザボットがWebページを提供しているときに、ブラウザボットが行うように、クライアントサイドコードを常に「処理」するわけではないことです。そのため、Angular Universalのドキュメントページとそのソースコードの間に食い違いがありました。

Angular Universalはサーバーサイドレンダリング（SSR）を処理します。それは前もってユーザに見せられるHTMLとCSSコンテンツを事前にレンダリングします。

つまり、ユーザーはクライアント側のコードではなく静的なHTMLページを読み込むことになります。その結果、ページの読み込みが早くなります。

また、静的HTMLなので、検索ボットはコンテンツにインデックスを付けることができます。

誰もが勝ちます。

なぜそれが重要なのか

あなたがデジタルマーケティングに興味があるなら、あなたはすでに戦いの大部分がオンラインでの露出を得ることを含むことを知っています。だからこそ、あなたはインフルエンサーに手を差し伸べ、ソーシャルメディアに最新情報を掲載し、そしてあなたのサイトをランク付けするために最適化します。

簡単に言えば、あなたのサイトはインデックスが付けられないとランク付けできません。 Angularがあなたのウェブサイトを動かしているならば、あなたはそのコンテンツが検索エンジンに現れるのを確実にするために追加のステップを踏む必要があります。

それがAngular Universalソリューションを必要とする理由です。

欠点は、もちろん、それはお金がかかるということです。あなたのWebサイトにSSRを追加するには、資格のある開発チームを雇う必要があります。

あなたのサイトがあなたのニッチに関連する重要な検索用語でうまくランク付けされているなら、それは時間の経過とともにそれ自身のために払う以上の費用です。

Angular UniversalでAngularアプリを実行する方法

コードで手を汚すのが好きな人、または開発コストを節約したいのであれば、サーバーサイドアプリケーションを自分でデプロイすることができます。

その前に、Angular、コマンドラインインターフェイス（CLI）、TypeScript、およびWebサーバーについての基本的な知識があるのが一番です。そうでなければ、あなたはたぶん奮闘するでしょう。

Angular Universalアプリをデプロイする手順は次のとおりです。

• 必要な依存関係をインストールする
• Angularアプリを更新する
• CLIを使ってユニバーサルバンドルを作成する
• ユニバーサルバンドルを実行するようにサーバーを設定します。
• サーバー上でアプリを実行する

これら5つのステップにはかなりの部分がありますので、次のセクションで順番に説明します。

依存関係をインストールする

Angularの使用経験がある場合は、 Node.jsについてはすでに知っています。これが、TypeScriptコードをJavaScriptアプリケーションに変換するランタイムです。

Node.jsには、想像力に欠けるNode Package Managerという名前のパッケージマネージャ、または略してnpmが付属しています。これを使って依存関係をインストールします。

コマンドラインウィンドウを起動して、次のコードを実行します。

npm install –save @ angular / platform-server @ nguniversal / module- map – ngfactory -loader ts-loader

すべてをインストールするためにそれを少しの間（または多くの瞬間）与えなさい。

Angularアプリを更新する

次に、ユニバーサル展開用にAngularアプリを準備する必要があります。これには4つのステップがあります。

• ユニバーサルサポートを追加します。ルートモジュール（通常はAppModule）を開き、BrowserModuleインポートにアプリケーションIDを追加します。 @NgModule宣言のすぐ下の「インポート」セクションでそれを行います。
• サーバールートモジュールを作成します。次に、AppServerModuleという名前の新しいモジュールを作成する必要があります。前の手順で追加したプラットフォームとサーバーの依存関係からServerModuleがインポートされることを確認してください。
• メインファイルを作成します 。ユニバーサルバンドル用のメインファイルが必要です。ルート（srcフォルダー内）にそれを作成し、そのファイルからAppServerModuleクラスをエクスポートします。
• 設定ファイルを作成します 。 AppServerModuleクラスには設定ファイルが必要です。 JSON形式で作成してください。これは次のようになります。

新しいビルドターゲットを作成する

Angularのソースディレクトリには、angular.jsonという名前のファイルが含まれているはずです。そのファイルを“ architect”セクションで更新する必要があります。

これは次のようになります。

“建築家”：{
“ビルド”：{…}
“サーバー”：{
“ビルダー”：“ @ angular-devkit / build-angular：サーバー”、
“オプション”：{
“ outputPath”：“ dist / my-project-server”、
“ main”：“ src / main.server.ts”、
“ tsConfig”：“ src / tsconfig.server.json”
}
}
}

4行下の「builder」属性に注意してください。コロンの後の値（“ server”）はサーバーの名前です。別の名前を付けたい場合は、それを更新することができます。

今、あなたはあなたのアプリを構築することができます。 「server」という名前のサーバーをそのまま使用していると仮定し、コマンドラインに進んで次のように入力します。

my-project：serverを実行する

次のような出力が表示されるはずです。

日付：2018-12-12T12：42：09.601Z
ハッシュ：1caced0e9434007fd7ac
時間：4122ミリ秒
チャンク{0} main.js（メイン）9.49 kB [エントリ] [レンダリング済み]
チャンク{1} styles.css（スタイル）0バイト[エントリ] [レンダリング]

サーバーを設定する

次に、バンドルを実行するためにUniversalサーバーをセットアップする必要があります。これが、アプリをシリアル化してブラウザに返す方法です。

これを実現するには、server.tsという新しいファイルを作成します。そのファイル内で、アプリエンジンを定義します。

そのコードの詳細は、このチュートリアルの範囲外です。 Angular Universalのドキュメントの例を見てください。

サーバー上でアプリを実行する

これで、サーバー上でアプリを実行できるようになりました。

これを行うには、前の手順で作成したserver.tsファイルを処理するWebパックを設定します。

設定ファイルにwebpack.server.config.jsという名前を付けます。もう一度、Angular Universalのドキュメントを調べて、ファイルに含まれているコードの正確な種類を確認してください。あなたはあなた自身の命名規則にそのコードを適応させる必要があるかもしれません。

ファイルが完成したら、distフォルダの下にブラウザとサーバーの2つのフォルダができます。

サーバーコードを実行するには、コマンドラインで次のように入力します。

ノードdist / server.js

おめでとうございます。これでサーバーサイドコードが実行されました。

それをまとめる

Angularは開発者が高品質のアプリケーションを迅速に作成することを可能にしますが、それは検索エンジンボットといつもうまくいかない。

幸いなことに、Angular UniversalはAngularアプリケーションページを静的HTMLとして事前レンダリングできるので、それらは発見可能で索引付け可能です。それらはより速くロードするでしょう。

HTMLベースを使用し、Angularを使用してページ上の他の要素を配信することを常に推奨しています。私は2010年以来、JavaScriptに関連するものすべてについてこの勧告をしてきました。Angular Universalのこのプロセスは同じ原則です。 AngularとJavaScriptの再設計が破壊された多くのサイトがあるとは言えません。あなたのものに注意して、いつもそれを発射の前にSEO会社によって吟味するようにしなさい。

---

この記事に記載されている意見はゲストの著者のものであり、必ずしもSearch Engine Landのものではありません。スタッフの作者はここにリストされています 。

---