AfterWorks.
  1. トップ
  2. ブログ
  3. 【Nuxt3】sitemap.xmlを自動生成する方法

【Nuxt3】sitemap.xmlを自動生成する方法

投稿日
    • 技術
    • 個人開発
    • Nuxt.js

概要

この記事ではNuxt3で構築した私のポートフォリオサイトにsitemap.xmlを自動生成する機能を実装したので、その方法をまとめます。
Nuxtでは「@nuxtjs/sitemap」などでsitemap.xmlを生成できますが、Nuxt3やSSRに対応しているものがなかったので、今回機能を自作しました。
Nuxtのバージョンは「3.0.0-rc.10」となります。

実装方法

Nuxtでは「/server」ディレクトリ配下にファイルを作成するとAPIを簡単に制作することができます。
今回はこの機能を使うため、まず「/server/routes」に「sitemap.xml.ts」を作成します。
通常、「/server/api」内のファイルには自動的に「/api」というプレフィックスを付けてルーティングが行われます。
プレフィックスが「/api」ではないサーバールートを追加する場合は、代わりに「/server/routes」ディレクトリに置くことができます。
このようにすることで「/sitemap.xml」でアクセスした時に「/server/routes/sitemap.xml.ts」の処理結果が返却されるようになります。

あとは「sitemap.xml.ts」にサイトマップの内容を出力する処理を記述すれば完了となります。

export default defineEventHandler(async (event) => {
  const sitemapInfos: {
    loc: string;
    lastmod: string;
    priority: string;
  }[] = [
    {
      loc: 'https://sample.com/',
      lastmod: '2022-10-05T18:35:28+09:00',
      priority: '1.00',
    },
  ];

  let sitemapString = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  `;

  for (let i = 0, iLength = sitemapInfos.length; i < iLength; i = (i + 1) | 0) {
    const sitemapInfo = sitemapInfos[i];
    sitemapString += `
      <url>
        <loc>${sitemapInfo.loc}</loc>
        <lastmod>${sitemapInfo.lastmod}</lastmod>
        <priority>${sitemapInfo.priority}</priority>
      </url>
    `;
  }

  sitemapString += `</urlset>`;

  event.res.setHeader('content-type', 'text/xml');
  event.res.end(sitemapString);
});

基本的にxmlの内容を文字列として作成した後にそれを返却しています。
ポイントとしては、「event.res.setHeader」でレスポンスヘッダーを設定した後に「event.res.end」でxmlを返却しています。
ソースの詳細はGitHubにあるので参考にしていただければ幸いです。

成果物

Contact

お問い合わせ

「ランディングページを制作してほしい」、「WordPressを使って更新性の高いWebサイトを作りたい」、
「JavaScriptを用いてWebサイトにリッチな表現を取り入れてほしい」などお客様の様々なご要望にお応えいたします。
また、デザインのみ、コーディングのみ行ってほしいといったご依頼にも柔軟に対応できます。
まずはお気軽にお問い合わせください。