Génération de sitemap avec Claude Code
Découvrez génération de sitemap avec Claude Code. Conseils pratiques et exemples de code inclus.
サイトマップ自動生成でSEO対策を効率化
サイトマップはGoogleなどの検索エンジンにサイト構造を伝える重要なファイルです。ページが増えるたびに手動で更新するのは現実的ではありません。Claude Codeを使えば、ビルド時に自動生成される仕組みを短時間で構築できます。
基本的なサイトマップ生成スクリプト
> XMLサイトマップを自動生成するスクリプトを作成して。
> 全ページのURLを収集し、lastmod・changefreq・priorityを設定して。
// scripts/generate-sitemap.ts
import { globby } from 'globby';
import { writeFileSync } from 'fs';
interface SitemapEntry {
url: string;
lastmod: string;
changefreq: 'daily' | 'weekly' | 'monthly';
priority: number;
}
async function generateSitemap() {
const baseUrl = 'https://example.com';
// ページファイルを収集
const pages = await globby([
'src/pages/**/*.astro',
'src/content/blog/**/*.mdx',
'!src/pages/api/**',
'!src/pages/404.astro',
]);
const entries: SitemapEntry[] = pages.map(page => {
const path = page
.replace('src/pages/', '')
.replace('src/content/blog/', 'blog/')
.replace(/\.(astro|mdx)$/, '')
.replace(/\/index$/, '/');
return {
url: `${baseUrl}/${path}`,
lastmod: new Date().toISOString().split('T')[0],
changefreq: path.includes('blog') ? 'weekly' : 'monthly',
priority: path === '' ? 1.0 : path.includes('blog') ? 0.7 : 0.8,
};
});
const xml = buildXml(entries);
writeFileSync('public/sitemap.xml', xml);
console.log(`✅ サイトマップ生成完了: ${entries.length}ページ`);
}
function buildXml(entries: SitemapEntry[]): string {
return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${entries.map(e => ` <url>
<loc>${e.url}</loc>
<lastmod>${e.lastmod}</lastmod>
<changefreq>${e.changefreq}</changefreq>
<priority>${e.priority}</priority>
</url>`).join('\n')}
</urlset>`;
}
generateSitemap();
動的ルートへの対応
ブログ記事のように動的に生成されるページも、コンテンツディレクトリから自動的に収集できます。
// Astroプロジェクトでの統合例
import { getCollection } from 'astro:content';
export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map(post => ({
params: { slug: post.slug },
props: { post },
}));
}
// サイトマップ用にメタ情報を出力
async function collectBlogEntries(baseUrl: string): Promise<SitemapEntry[]> {
const posts = await getCollection('blog');
return posts
.filter(post => !post.data.draft)
.map(post => ({
url: `${baseUrl}/blog/${post.slug}`,
lastmod: post.data.pubDate.toISOString().split('T')[0],
changefreq: 'weekly' as const,
priority: 0.7,
}));
}
サイトマップインデックスの実装
大規模サイトでは、サイトマップを分割してインデックスファイルで管理します。
function buildSitemapIndex(sitemaps: string[]): string {
const baseUrl = 'https://example.com';
return `<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${sitemaps.map(name => ` <sitemap>
<loc>${baseUrl}/${name}</loc>
<lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
</sitemap>`).join('\n')}
</sitemapindex>`;
}
// 用途別にサイトマップを分割
const sitemapFiles = [
'sitemap-pages.xml',
'sitemap-blog.xml',
'sitemap-categories.xml',
];
writeFileSync('public/sitemap.xml', buildSitemapIndex(sitemapFiles));
ビルドパイプラインへの組み込み
{
"scripts": {
"build": "astro build && tsx scripts/generate-sitemap.ts",
"sitemap": "tsx scripts/generate-sitemap.ts",
"postbuild": "tsx scripts/generate-sitemap.ts && tsx scripts/ping-search-engines.ts"
}
}
robots.txtとの連携
> robots.txtにサイトマップのURLを追加して。
User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml
Google Search Consoleへの通知
// scripts/ping-search-engines.ts
async function pingSearchEngines(sitemapUrl: string) {
const endpoints = [
`https://www.google.com/ping?sitemap=${encodeURIComponent(sitemapUrl)}`,
`https://www.bing.com/ping?sitemap=${encodeURIComponent(sitemapUrl)}`,
];
for (const url of endpoints) {
try {
const res = await fetch(url);
console.log(`Ping ${url}: ${res.status}`);
} catch (error) {
console.error(`Ping失敗: ${url}`, error);
}
}
}
pingSearchEngines('https://example.com/sitemap.xml');
Summary
サイトマップの自動生成は、SEO対策の基本中の基本です。Claude Codeを使えば、動的ルートの収集からビルドパイプラインへの組み込みまで一気に実装できます。CI/CDパイプラインに組み込むことで、デプロイのたびに最新のサイトマップが自動的に生成されます。詳しい仕様はsitemaps.orgを参照してください。
Related Posts
Comment booster vos projets personnels avec Claude Code [Avec exemples]
Apprenez à accélérer considérablement vos projets de développement personnels avec Claude Code. Inclut des exemples concrets et un workflow pratique de l'idée au déploiement.
Comment automatiser le refactoring avec Claude Code
Apprenez à automatiser efficacement le refactoring de code avec Claude Code. Inclut des prompts pratiques et des patterns de refactoring concrets pour des projets réels.
Guide complet de configuration CORS avec Claude Code
Découvrez le guide complet de configuration CORS avec Claude Code. Conseils pratiques et exemples de code inclus.