The playground

More information here

Angular Universal:SEOのために知っておくべきこと

刻々と変化する検索マーケティングの風景の私たちの毎日の要約にサインアップしてください。注:このフォームを送信することにより、Third Door Mediaの規約に同意するものとします。 注:このフォームを送信することに […]

刻々と変化する検索マーケティングの風景の私たちの毎日の要約にサインアップしてください。注:このフォームを送信することにより、Third Door Mediaの規約に同意するものとします。

注:このフォームを送信することにより、Third Door Mediaの規約 私たちはあなたのプライバシーを尊重します。

John E Lincoln on February1,2019at9:53am

  • Categories:All Things SEO Column,Channel:SEO
  • Angularを使用してwebサイトに電力を供給する場合、SEOに関しては余分なハードルがあります。 幸いなことに、Angular Universalはそれを簡単に飛び越えることができます。ここでは、”easy”は相対的な用語であることに注意してください。

    かなりの技術的な魔法が関与しています。ほとんどの場合、開発チームを関与させる必要があります。

    しかし完成品が渡されれば、あなたの場所は調査エンジンが容易に見つけ、指示する最大限に活用されたページを役立つ。このガイドでは、Angular Universalと、それがマーケティング担当者にとって重要な理由について説明します。

    SEOの問題

    Angularは、モジュラーでユーザーフレンドリーなwebアプリを提供するための素晴らしいフレームワークです。 残念ながら、それはSEOに少し敵対的です。

    それは2つの理由があります。

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

    Angular Universalのドキュメントを見てみましょう。 そのページは、当然のことながら、角度でレンダリングされます。

    下にスクロールすると、かなりのコンテンツが表示されます。 あなたはそれがすべて索引可能だと思うでしょう。

    必ずしもそうではありません。

    ページを右クリックし、表示されるコンテキストメニューから”ページソースの表示”を選択します。

    ソースコードは100行しかありません。 ページを正常に表示したときに表示されたコンテンツはどこにも表示されません。それは、一言で言えば、Angularの問題です。 人間の訪問者にはコンテンツが表示されますが、検索ボットにはソースが表示されます。

    そして、ソースにはコンテンツがありません!別のSEOの問題があります:速度。 Angularアプリは、多くの場合、すぐにロードされません。

    一部のサイトでは、ホームページを表示する前に数秒間空白の画面が表示されます。 それは彼らがせっかちになるように訪問者が保釈する可能性があります。

    サイトの速度はモバイルランキングの要因であるため、サイトがモバイルプラットフォーム上ですぐにロードされない場合、ランクはヒットします。しかし、Googleは言う…

    Googleは、そのボットがスクリプト駆動型サイトをインデックス化できると主張しています。 それを裏付ける証拠はたくさんありますが、角度のあるサイトを最適化するときに余分なマイルを避けることができるわけではありません。まず第一に、Googleは町の唯一の検索エンジンではありません。

    AngularアプリをBingとDuckDuckGoにランク付けしたい場合は、それを実現するための手順を実行する必要があります。次に、GoogleはいくつかのAngularサイトにインデックスを付けることができますが、あなたのサイトにはインデックスを付けることはできません。 すべてのAngularアプリが同じように作成されるわけではありません。 あなたはGoogleのインデックスアルゴリズムの例外かもしれません。

    私の経験では、HTMLから角度に移動するサイトは、検索エンジンからの大部分の時間を失います。 実際、私は昨年、Angularのためにサイトを修正しなければならなかった3人のクライアントに来てもらいました。幸いなことに、AngularサイトのSEOを友好的にする方法があります。

    より一般的なオプションの一つは、動的レンダリングを使用することです。 これは、Puppeteerのようなツールを使用して、webクローラーがより簡単に消費できる静的なHTMLファイルを生成するときです。次に、人間の訪問者が通常のAngularアプリをナビゲートしながら、検索ボットを事前にレンダリングされたページに誘導するようにwebサーバーを構成します。それはまともな解決策ですが、それでも速度の問題には対処しません。

    これは適切な解決策ですが、まだ速度の問題には対処していません。 そのためには、おそらくAngular Universalを使用することをお勧めします。

    アンギュラーユニバーサルとは何ですか?Angular Universalは、ブラウザで実行するのではなく、サーバー上でwebアプリを実行します。それは重要な違いです。

    それは重要な違いです。

    通常、Angularアプリはクライアント側のアプリケーションです。

    検索ボットの問題は、ブラウザがwebページを提供するときのように、クライアント側のコードを常に”処理”しないということです。 そのため、Angular Universal documentationページとそのソースコードの間に不一致がありました。

    Angular Universalはサーバー側レンダリング(SSR)を処理します。 これは、事前にユーザーに表示されるHTMLとCSSのコンテンツを事前にレンダリングします。

    これは、ユーザーがクライアント側のコードの代わりに静的なHTMLページをロードすることを意味します。 その結果、ページはより迅速に読み込まれます。また、静的HTMLであるため、検索ボットはコンテンツのインデックスを作成できます。

    誰もが勝ちます。

    なぜそれが重要なのか

    あなたがデジタルマーケティングに興味があるなら、あなたはすでに戦いの多くがオンラインで露出を得るこ そのため、インフルエンサーに手を差し伸べ、ソーシャルメディアに更新を投稿し、サイトを最適化してランク付けします。簡単に言えば、あなたのサイトはインデックスを取得できない場合にランク付けできません。

    簡単に言えば、あなたのサイトはランク付けできません。 Angularがwebサイトに電力を供給している場合は、追加の手順を実行して、そのコンテンツが検索エンジンに表示されることを確認する必要があります。そのため、角度のある普遍的な解決策が必要です。

    欠点は、もちろん、それはお金がかかるだろうということです。

    SSRをwebサイトに追加するには、資格のある開発チームを雇う必要があります。

    それはあなたの場所があなたのニッチと関連している主調査の言葉のためによくランク付けすればそれ自身のそのうちに支払うより多くべき

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

    コードで手を汚すのが好きな人、または開発コストを節約したい人は、サーバー側のアプリを自分でデプロイその前に、Angular、コマンドラインインターフェイス(CLI)、TypeScript、およびwebサーバーの基本的な理解があることをお勧めします。 そうでなければ、あなたはおそらく苦労します。

    Angularユニバーサルアプリをデプロイする手順は次のとおりです:

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

    これらの五つのステップではかなり進行しているので、以下のセクションでそれぞれを順番にカバーします。依存関係をインストールする

    Angularの経験がある場合は、すでにNodeについて知っています。js”を発表した。 これは、TypeScriptコードをJavaScriptアプリに変換するランタイムです。

    ノード。jsには、想像を絶する名前のNode Package Managerまたはnpmというパッケージマネージャーが付属しています。 これを使用して依存関係をインストールします。コマンドラインウィンドウを起動し、次のコードを実行します。

    npm install–[email protected]/[email protected]/module-map-ngfactory-loader ts-loader

    すべてをインストールするには、いくつかの瞬間(または多くの瞬間)を与えてください。

    Angularアプリを更新する

    次に、普遍的な展開のためにAngularアプリを準備する必要があります。 それは四つのステップを含みます:

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

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

    Angularソースディレクトリには、angularという名前のファイルを含json。 「Architect」セクションでそのファイルを更新する必要があります。これは次のようになります。

    “architect”:{“build”:{…}
    “server”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“builder”:{“: “@angular-devkit/build-angular:server”,
    “options”:{
    “outputPath”:”dist/my-project-server”,
    “main”:”src/main.サーバー。ts”,
    “tsConfig”:”src/tsconfig.サーバー。json”
    }
    }
    }

    “builder”属性を四行下に注意してください。 コロン(“server”)の後の値は、サーバーの名前です。 他の名前を付けたい場合は、それを更新することができます。これで、アプリをビルドできます。

    “Server”という名前のサーバーを保持していると仮定すると、コマンドラインに移動して次のように入力します:次のような出力が表示されるはずです。

    日付:2018-12-12T12:42:09.601Z
    ハッシュ:1caced0e9434007fd7ac
    時間:4122ms
    チャンク{0}メイン。js(メイン)9.49kB
    チャンク{1}スタイル。css(styles)0bytes

    サーバーのセットアップ

    次に、バンドルを実行するためにユニバーサルサーバーをセットアップする必要があります。 これが、アプリをシリアル化してブラウザに返す方法です。これを実現するには、serverという新しいファイルを作成します。ts。 そのファイル内で、app engineを定義します。

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

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

    それがすべて終わった後、最終的にサーバー上でアプリを実行できるようになりました。これを行うには、サーバーを処理するwebpackを設定します。前の手順で作成したtsファイル。

    設定ファイルにwebpackという名前を付けます。サーバー。設定。js”を発表した。 もう一度、ファイルに属する正確な種類のコードについては、Angular Universal docsをチェックしてください。 そのコードを独自の命名規則に適合させる必要がある場合があります。ファイルの処理が完了すると、distフォルダの下にbrowserとserverという2つのフォルダがあります。

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

    node dist/server。js

    おめでとう! これで、サーバー側のコードを実行しています。

    ラップアップ

    Angularは開発者が高品質のアプリケーションを迅速に生成することを可能にしますが、検索エンジンのボットでは常にうまく幸いなことに、Angular UniversalはAngularアプリページを静的HTMLとして事前にレンダリングすることができるため、検出可能で索引付け可能です。 彼らはまた、より速くロードされます。HTMLベースを持ち、Angularを使用してページ上の他の要素を配信することは、常に私の推奨事項でした。 私は2010年以来、JavaScript関連のものについてこの勧告を行ってきました。 角度普遍のこのプロセスは同じ主である。 私はあなたがAngularとJavaScriptの再設計が破壊した多くのサイトを持っていることを伝えることはできません。 あなたに注意して、常にそれが打ち上げ前にSEOの会社によって審査を取得します。

    刻々と変化する検索マーケティングの風景の私たちの毎日の要約にサインアップしてください。注:このフォームを送信することにより、Third Door Mediaの規約に同意するものとします。

    注:このフォームを送信することにより、Third Door Mediaの規約 私たちはあなたのプライバシーを尊重します。

    著者について

    ジョンEリンカーン

    ジョンリンカーンはIgnite Visibility、デジタルマーケティングエージェンシーと株式会社の最高経営責任者(CEO)です。 5000社 リンカーンは一貫して業界でトップのマーケティングの専門家の一人に選ばれています。 彼はずっと米国の#1SEOのコンサルタントによって示されるサーチエンジンの土地”年の調査のMarketer”賞の受け手であるClutch.co、最も賞賛CEOと40の下で40。 リンカーンは、デジタルマーケティングに関する二つの本(予測法とデジタルインフルエンサー)を書いており、二つの映画(SEO:映画とソーシャルメディアマーケティング:映画)

    コメントを残す

    メールアドレスが公開されることはありません。