How to Automate SEO with Claude Code (Complete Technical SEO Guide)

技術的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タグが설정されているか

정리

Claude Code를 활용하면 技術的SEOの구현から監査まで효율적으로자동화할 수 있습니다。メタタグの최적화、構造化데이터の구현、サイトマップの생성など、手作業では見落としやすい部分も漏れなく대응할 수 있습니다。SEO監査を定期的に実行するにはフック機能や生産性Tipsを활용するとよいでしょう。

Claude Code의 상세 정보는Anthropic공식 문서를 확인하세요.構造化데이터의 사양은Schema.org를 참고하세요.