【Angular/SSRでSEO対策】Angular/SSRサイトのURL変更時に役立つ301リダイレクト設定

            1.  **SEO評価の引き継ぎ**:
    検索エンジンは301リダイレクトを「ページの永続的な移動」と認識し、
    古いURLが持っていたSEO上の評価（PageRankやリンクジュースなど）を新しいURLへ引き継ぎます。
    これにより、URL変更による検索順位の低下リスクを最小限に抑えることができます。
2.  **ユーザーエクスペリエンスの向上**:
    古いURLにアクセスしたユーザーを自動的に新しいURLへ誘導するため、
    リンク切れによる不満を防ぎ、スムーズなブラウジング体験を提供します。
3.  **クローラビリティの最適化**:
    検索エンジンのクローラーは、301リダイレクトを検出すると、
    新しいURLをインデックスの対象として認識し、効率的にサイトをクロールできるようになります。

        

            import express from 'express';
const app = express();

//古いパスへのアクセスを新しいパスへ301リダイレクト
app.get('/old-article-path', (req, res) => {
    res.redirect(301, '/new-article-path');
});

//パラメータを含むパスのリダイレクトしたい場合
app.get('/old-category/:id', (req, res) => {
    const id = req.params.id;
    res.redirect(301, `/new-category/${id}`);
});

const PORT = process.env.PORT || 4321;
app.listen(PORT, () => {
    console.log(`Node Express server listening on http://localhost:${PORT}`);
});

        

            import { createNodeRequestHandler } from '@angular/ssr/node';
import express from 'express';
import asyncify from 'express-asyncify';
import { fileURLToPath } from 'node:url';
import { dirname, resolve } from 'node:path';

export function app(): express.Express {
    const server = asyncify(express());
    const serverDistFolder = dirname(fileURLToPath(import.meta.url));
    const browserDistFolder = resolve(serverDistFolder, '../browser');

    /** 👇 ここから301リダイレクトのルールを追加 */

    //1. 古い記事のパスを新しいパスへリダイレクトする例
    server.get('/old-blog-post-1', (req, res) => {
        res.redirect(301, '/new-blog-post-a');
    });

    //2. 正規表現を使ってパターンマッチングでまとめてリダイレクトする例
    //   ... /legacy/ から始まる全てのパスを /archive/ へリダイレクト
    server.get('/legacy/*', (req, res) => {
        const newPath = req.originalUrl.replace('/legacy/', '/archive/');
        res.redirect(301, newPath);
    });

    /** 👆 ここまで */

    //静的ファイル(browserフォルダ以下)を提供
    server.get('**',
        static_(distFolderRaw, {
            maxAge: '1y'
        })
    );

    //SSRエンジンから定義済みルートをレンダリング
    server.get('*', async (req, res, next) => {
        const _req = createWebRequestFromNodeRequest(req);
        const _res = await angularAppEngine.handle(_req);
        if (_res) {
            writeResponseToNodeResponse(_res, res);
        } else {
            next()
        }
    });

    return server;
}

const server = app();
//RequestHandlerをエクスポート
export const reqHandler = createNodeRequestHandler(server);

        

            *   **リダイレクトルールの配置**:
    `server.get('*.*', express.static(...))` のような静的ファイル配信のルーティングや、
    `server.get('*', ...)` のようなAngularアプリケーションのレンダリングを行う
    ルーティングよりも前にリダイレクトルールを記述することが重要です。
    これにより、リダイレクトが優先的に処理され、不要なファイル検索や
    Angularアプリケーションの起動を防ぐことができます。
*   **正規表現の活用**:
    特定のパターンに合致するURLをまとめてリダイレクトしたい場合は、
    Express.jsのルーティングで正規表現を利用すると便利です。
    上記の例では、`/legacy/`から始まる全てのパスを`/archive/`にリダイレクトする例を示しています。
*   **テスト**:
    リダイレクト設定後は、必ずブラウザや`curl`コマンドなどで実際にアクセスしてみて、
    期待通りに301リダイレクトが行われるか、そして新しいURLに正しく遷移するかを確認しましょう。

        

            * CSR(クライアントサイドレンダリング):
    ルート設定(app.routes.tsなど)で、
    redirectToプロパティで指定されたルートへリダイレクト先を指定

* SSR(サーバーサイドレンダリング):
    サーバーサイドのプロセス内(server.tsなど)で、
    標準的なHTTPメソッドからリダイレクト(301/302...)を実行する

* SSG(プリレンダリング):
    プリレンダリングされたHTML内の <meta http-equiv="refresh"> タグを使用した
    「ソフトリダイレクト」を利用する

        

            *   301リダイレクトは、ページの恒久的な移動を検索エンジンに伝え、
    SEO評価を引き継ぐために非常に重要
*   Angular/SSRのサーバーサイドはExpress.jsで構築されているため、
    Express.jsの`res.redirect(301, 'URL')`メソッドを利用
*   `server.ts`ファイル内で、静的ファイル配信やAngularアプリケーションの
    レンダリングを行うルーティングよりも前にリダイレクトルールを記述することで、
    効率的かつ確実にリダイレクトを処理される