web-dev-qa-db-ja.com

Angular2 SEO-angular 2アプリをクロール可能にする方法

Angular-Meteor framework を使用してAngular 2アプリを構築しています。

グーグルや他の検索エンジンによる高速で一貫したインデックス作成を達成し、Facebookの共有者や他のスクレーパーを許可したいJSで生成されたコンテンツのプレビューを生成します。

通常、SPAはPhantomJSを使用してページをサーバー側にレンダリングし、静的HTMLをクライアントに送信します。

もちろん、_escaped_fragment_をインターセプトするとき、またはgoogleまたはスクレーパーのユーザーエージェントを見たときに自分でPhantomJSを生成できますが、大きなトラフィックのあるWebサイトで直接PhantomJSを生成すると、メモリリークと孤立したファントムインスタンスが発生しました（NodeJSと- このモジュール ）。

Angular 1アプリの場合、 Angular-SEO のようなangularモジュールでこれを解決していましたが、そのようなモジュールをangular 2。

このための適切なAngular 2モジュールはまだ見つかりませんでした。私は自分でそれを構築する必要がありますか、今日の時点でこれを達成する他の良い方法はありますか？

node.jsseophantomjsangularangular2-meteor
28
Rayjax

Angular2の素晴らしい点は、起動すると、ルートアプリ要素内のすべてのコンテンツがなくなることです。これは、クローラーが取得したいサーバーから必要なものをそこに入れることができることを意味します。

アプリでコンテンツのサーバーレンダリングバージョンを使用するか、カスタムロジックを使用して、このコンテンツを生成できます。

詳細については、こちらをご覧ください： https://angularu.com/VideoSession/2015sf/angular-2-server-rendering およびこちら： https://github.com/angular/universal

26
jornare

ng2-meta を作成しました。これは、現在のルートに基づいてメタタグを変更できるAngular2モジュールです。


const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      meta: {
        title: 'Home page',
        description: 'Description of the home page'
      }
    }
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {
      meta: {
        title: 'Dashboard',
        description: 'Description of the dashboard page',
        'og:image': 'http://example.com/dashboard-image.png'
      }
    }
  }
];

コンポーネント、サービスなどからメタタグを更新することもできます。


class ProductComponent {
  ...
  constructor(private metaService: MetaService) {}

  ngOnInit() {
    this.product = //HTTP GET for product in catalogue
    metaService.setTitle('Product page for '+this.product.name);
    metaService.setTag('og:image',this.product.imageURL);
  }
}

これはJavascript対応のクローラー（Googleなど）に対応していますが、FacebookやTwitterなどの非Javascriptクローラーにフォールバックメタタグを設定できます。

<head>
    <meta name="title" content="Website Name">
    <meta name="og:title" content="Website Name">
    <meta name="og:image" content="http://example.com/fallback-image.png">
    ...
</head>

サーバー側レンダリングのサポートが進行中です。

8
WeNeigh

サーバーサイドレンダリングは、適切なGoogleランキングの要件ではありません...

Googleサイトマップファイルに約33.000のエントリがあるフォーラムがありました。このWebサイトはasp.net Webフォームを使用して作成されており、Googleからの着信要求がかなり流れていました。このウェブサイトはモバイルの読みやすさが非常に悪かった（グーグルによってペナルティが課せられたもので、実際にグーグルの「検索コンソール」でこれを言及した）

angular（デプロイされたバージョンはangle5）。タイトルとメタサービスを使用してタイトルとメタタグを設定しています。すべてのルートには実際のコンテンツから抽出されたキーワードが含まれています。 [routeLink]属性を持つすべての要素がAタグであり、その上でhref要素も指定していることを確認します（クローラーが探すものです...）そしてもちろん、モバイルの読みやすさに多くの注意を払いました。

結果：実際に以前より多くの着信トラフィックを取得し、検索コンソールで、インデックスページが上がったことをはっきりと確認しました。今、私はインデックスにほぼ25,000ページを持っています。

サーバーサイドレンダリングが無関係であると言っているのではありません。ユニバーサルまたは他の方法を使用すると、ダウンロード時間が短縮され、おそらくスコアが高くなります。しかし、グーグルは間違いなくangular SPA。

編集：いくつかの証拠：「3ds max threadripper」をグーグルで検索すると、実際にインターネット上の最大のハードウェアサイトの1つを上回っていることがわかります。

0
Davy