AngularJSアプリのSEO対策：もう迷わない！徹底解説とサンプルコード

2024-04-02

AngularJSアプリケーションと検索エンジンの関係

検索エンジンにとっての課題

従来のWebページは、HTMLソースコードにコンテンツが記述されており、検索エンジンはソースコードを解析することで内容を理解できます。一方、SPAはJavaScriptを用いて動的にコンテンツを生成するため、検索エンジンが直接内容を認識できない可能性があります。

具体的には、以下のような課題が生じます。

コンテンツの非同期読み込み: SPAでは、ユーザーの操作に応じて必要なコンテンツが非同期的に読み込まれます。検索エンジンはJavaScriptを実行できないため、読み込まれたコンテンツを認識できない場合があります。
状態管理: SPAは、ユーザーの操作履歴や現在の状態をJavaScriptで管理します。検索エンジンはこれらの状態を認識できないため、ページ全体のコンテンツを理解できない場合があります。
URLの非静的: SPAでは、ページ遷移してもURLが変化しない場合があります。検索エンジンはURLを基にページの内容を判断するため、URLの変化がないと異なるページとして認識できない場合があります。

検索エンジン対策

これらの課題を克服するために、AngularJSアプリケーション開発においては、検索エンジン対策（SEO）が重要になります。

サーバーサイドレンダリング (SSR)

SSRは、サーバー側でHTMLを生成し、クライアントに送信する技術です。これにより、検索エンジンはJavaScriptを実行することなく、ページの内容を認識できます。

プリレンダリングは、事前にすべてのページのHTMLを生成し、静的なファイルとして保存する技術です。これにより、検索エンジンはすべてのページを効率的にインデックス化できます。

ルーティング設定

SPAでは、URLとコンテンツの関連性を明確にするために、適切なルーティング設定が必要です。

メタデータには、ページのタイトル、概要、キーワードなどを記述します。これらの情報は、検索エンジンがページの内容を理解するのに役立ちます。

サイトマップは、Webサイトの構造を検索エンジンに伝えるためのファイルです。サイトマップを提出することで、検索エンジンは効率的にすべてのページをクロールできます。

AngularJSアプリケーションと検索エンジンの関係は複雑ですが、適切なSEO対策を行うことで、検索結果に表示されやすくなります。上記の対策を参考に、検索エンジンに優しいAngularJSアプリケーション開発を心がけましょう。

サーバーサイドレンダリング (SSR)

// サーバー側で実行されるコード
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const renderedHtml = renderToString(App);
  res.send(renderedHtml);
});

app.listen(3000);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="app.js"></script>

<div ng-app="myApp">
  <h1>Hello, AngularJS!</h1>
</div>

プリレンダリング

// プリレンダリングを行うスクリプト
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('http://localhost:3000');

  const content = await page.content();

  // 生成されたHTMLをファイルに保存
  fs.writeFile('index.html', content, (err) => {
    if (err) throw err;
    console.log('The file has been saved!');
  });

  await browser.close();
})();