Vercelデプロイを検索結果に乗せるまで 2 - sitemap.tsの実装 -
tech約3分で読めます・1047文字
はじめに
今回は「Vercelデプロイを検索結果に乗せるまで」の第2回目です。
この記事では、Next.jsプロジェクトにおけるサイトマップの作り方について解説します。
サイトマップとは
検索エンジンやbot等クローラーに対して、このWebサイトがどんなページを持ってるかを示す地図
通常はXMLで出力されますが、Next.jsの場合app/sitemap.tsにWebサイト内のページ情報の配列を返すsitemap関数を記述するだけでOKです。
app/sitemap.tsのテンプレ
import { MetadataRoute } from "next";
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: `${process.env.NEXT_PUBLIC_SITE_URL}`,
lastModified: new Date(),
changeFrequency: "weekly",
priority: 1,
},
];
}
このブログの場合
以下のようになりました。
import { MetadataRoute } from "next";
import { getAllPostData } from "@/lib/post";
import userCategory from "@/user-category.json";
const categories = Object.keys(userCategory);
export const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
const baseUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "http://localhost:3000";
// 記事一覧を取得
const posts = await getAllPostData();
const postEntries = posts.map((post) => ({
url: `${baseUrl}/blog/${post.category}/${post.slug}`,
lastModified: post.updatedAt ?? post.createdAt,
changeFrequency: "weekly" as const,
priority: 0.8,
}));
const categoryEntries = categories.map((category) => ({
url: `${baseUrl}/blog/${category}`,
changeFrequency: "weekly" as const,
priority: 0.8,
}));
return [
{ url: `${baseUrl}`, changeFrequency: "weekly", priority: 1 },
{ url: `${baseUrl}/about`, changeFrequency: "monthly", priority: 0.8 },
...categoryEntries,
...postEntries,
];
};
export default sitemap;
mapの中でだけ、changeFrequencyにas constを付与しています。
これは、mapで定義されたときだけリテラル型ではなくstring型を返してしまうためです。
リテラル型についてはこちらの記事をどうぞ！
※ getAllPostData()は以下のオブジェクトの配列を返します。
export type PostData = {
slug: string;
title: string;
createdAt: string;
category: string;
markdown: string;
published: boolean;
updatedAt?: string;
};
戻り値として、
urlは必須ですが、その他はoptionalです。
というのもGoogle検索エンジンはpriorityとchangeFrequencyは無視しており、lastModifiedは正確である場合のみ読み取るからです
Google Search Consoleにsitemapを送信する
Google Search Consoleにhttps://<your-domain>/sitemap.xmlを送信しましょう。
URLプレフィックスを入力する
URL プレフィックスへhttps://<your-domain>/を入力します。
今回は当ブログのhttps://ryok73.dev/を入力しました。
確認状態をチェックしています。というダイアログが表示された後、所有権の確認に移ります。
所有権の確認
そのWebサイトの所有権を証明する必要があります。
方法は以下の5種類
- HTMLファイルのアップロード
- HTMLタグの埋め込み
- Googleアナリティクスアカウントでの設定
- Googleタグマネージャーでの設定
- DNSレコードの紐づけ
詳しくはSearch Console ヘルプへ
今回は2 HTMLタグの埋め込みで所有権の確認を行います。
Vercelデプロイを検索結果に乗せるまで - metadataの実装 -へのリンクで紹介するmetadataオブジェクトにverificationプロパティを追加します。
export const metadata: Metadata = {
...,
verification: {
google: "<verification code>",
},
};
"<verification code>"はHTMLタグとして画面に表示されるmetaタグのcontent=の文字列です。
<meta name="google-site-verification" content="verification code" />
その後、所有権の確認が完了すると設定ページへ遷移します。
サイトマップの登録
インデックス作成 > サイトマップ
新しいサイトマップの追加にてsitemap.xmlを入力して送信すると、登録完了です。
これで数日すれば、Googleのクローラーがあなたのページを見に来ることでしょう。
おわりに
複雑に見えますが、基本的にテンプレート通りに記述すれば簡単に実装できますね。
テンプレートに使用する関数もブログ構築時に作成してあったため、作業が少なくて済みました。
さて、次回はrobots.tsの設定を行います！
ヾ('ω'⊂ )))Σ≡ｻﾗﾊﾞ!!