Optimizacion SEO con Claude Code

技術的SEOをClaude Codeで効率化する

SEO対策は地道な作業の積み重ねです。メタタグの設定、構造化データの実装、サイトマップの生成、パフォーマンスの最適化など、Claude Codeに任せることで正確かつ効率的に実施できます。

メタタグの一括最適化

> 全ページのメタタグ（title、description、OGP）を最適化して。
> titleは30文字以内、descriptionは120文字以内にして。
> OGP画像のパスも設定して。

// components/SEO.tsx
interface SEOProps {
  title: string;
  description: string;
  path: string;
  image?: string;
  type?: 'website' | 'article';
  publishedAt?: string;
}

export function SEO({ title, description, path, image, type = 'website', publishedAt }: SEOProps) {
  const siteUrl = 'https://example.com';
  const fullUrl = `${siteUrl}${path}`;
  const ogImage = image || `${siteUrl}/og-default.png`;

  return (
    <>
      <title>{title} | マイサイト</title>
      <meta name="description" content={description} />
      <link rel="canonical" href={fullUrl} />

      {/* Open Graph */}
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={fullUrl} />
      <meta property="og:image" content={ogImage} />
      <meta property="og:type" content={type} />
      <meta property="og:locale" content="en_US" />

      {/* Twitter Card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={ogImage} />

      {/* Article */}
      {type === 'article' && publishedAt && (
        <meta property="article:published_time" content={publishedAt} />
      )}
    </>
  );
}

構造化データ（JSON-LD）の実装

> ブログ記事ページにArticleの構造化データを追加して。
> FAQページにもFAQPageの構造化データを追加して。

// components/StructuredData.tsx
interface ArticleData {
  title: string;
  description: string;
  author: string;
  publishedAt: string;
  updatedAt?: string;
  image: string;
  url: string;
}

export function ArticleStructuredData({ data }: { data: ArticleData }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: data.title,
    description: data.description,
    author: {
      '@type': 'Person',
      name: data.author,
    },
    datePublished: data.publishedAt,
    dateModified: data.updatedAt || data.publishedAt,
    image: data.image,
    url: data.url,
    publisher: {
      '@type': 'Organization',
      name: 'マイサイト',
      logo: {
        '@type': 'ImageObject',
        url: 'https://example.com/logo.png',
      },
    },
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

interface FAQItem {
  question: string;
  answer: string;
}

export function FAQStructuredData({ items }: { items: FAQItem[] }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: items.map(item => ({
      '@type': 'Question',
      name: item.question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: item.answer,
      },
    })),
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

サイトマップの自動生成

> Next.jsのApp Routerでサイトマップを自動生成して。
> ブログ記事はCMSから取得して動的に生成して。

// app/sitemap.ts
import { MetadataRoute } from 'next';
import { getAllPosts } from '@/lib/posts';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://example.com';

  // Static pages
  const staticPages = [
    { url: baseUrl, lastModified: new Date(), changeFrequency: 'daily' as const, priority: 1.0 },
    { url: `${baseUrl}/about`, lastModified: new Date(), changeFrequency: 'monthly' as const, priority: 0.8 },
    { url: `${baseUrl}/contact`, lastModified: new Date(), changeFrequency: 'monthly' as const, priority: 0.5 },
  ];

  // Blog posts
  const posts = await getAllPosts();
  const postPages = posts.map(post => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }));

  return [...staticPages, ...postPages];
}

Core Web Vitalsの改善

> パフォーマンスを分析して、LCP・FID・CLSを改善する修正を行って。
> 画像の最適化、フォントの読み込み改善、レイアウトシフトの防止をして。

// 画像の最適化例
import Image from 'next/image';

function OptimizedHero() {
  return (
    <div className="relative h-[400px] w-full">
      <Image
        src="/hero.jpg"
        alt="ヒーロー画像"
        fill
        priority  // LCP要素にはpriorityを指定
        sizes="100vw"
        className="object-cover"
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
      />
    </div>
  );
}

// フォントの最適化
import { Noto_Sans_JP } from 'next/font/google';

const notoSansJP = Noto_Sans_JP({
  subsets: ['latin'],
  weight: ['400', '700'],
  display: 'swap',  // CLSを防ぐ
  preload: true,
});

robots.txtの生成

// app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/api/', '/admin/', '/private/'],
      },
    ],
    sitemap: 'https://example.com/sitemap.xml',
  };
}

SEO監査の自動化

Claude Codeに定期的なSEO監査を依頼できます。

> プロジェクト全体のSEOを監査して。以下をチェックして：
> - 全ページにtitle/descriptionがあるか
> - h1タグが各ページに1つだけあるか
> - 画像にalt属性があるか
> - 内部リンクの切れがないか
> - canonicalタグが設定されているか

Summary

Claude Codeを使えば、技術的SEOの実装から監査まで効率的に自動化できます。メタタグの最適化、構造化データの実装、サイトマップの生成など、手作業では見落としやすい部分も漏れなく対応できます。SEO監査を定期的に実行するにはフック機能や生産性Tipsを活用するとよいでしょう。

Claude Codeの詳細はAnthropic公式ドキュメントをご覧ください。構造化データの仕様はSchema.orgを参照してください。