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

技術的SEOको Claude Code से Efficient बनाएं

SEO対策は地道な作業の積み重ね है।メタタグのsettings、構造化dataのimplementation、サイトマップのgenerate、performanceのoptimization आदि、Claude Codeに任せる बातで正確かつefficiently実施でき है।

メタタグの一括optimization

> 全pageのメタタグ（title、description、OGP）をoptimizationして。
> titleは30文字以内、descriptionは120文字以内にして。
> OGP画像のpathもsettingsして。

// 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} />
      )}
    </>
  );
}

構造化data（JSON-LD）のimplementation

> ブlog記事pageにArticleの構造化dataをadd करो。
> FAQpageにもFAQPageの構造化dataをadd करो。

// 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) }}
    />
  );
}

サイトマップの自動generate

> Next.jsのApp Routerでサイトマップを自動generateして。
> ブlog記事はCMS सेfetchして動的にgenerateして。

// 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の改善

> performanceを分析して、LCP・FID・CLSを改善する修正を行って。
> 画像のoptimization、fontの読み込み改善、layoutシフトの防止をして。

// 画像のoptimization例
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>
  );
}

// fontのoptimization
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のgenerate

// 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監査のautomation

Claude Codeに定期的なSEO監査を依頼でき है।

> Project全体のSEOを監査して。निम्नलिखितをcheckして：
> - 全pageにtitle/descriptionがあるか
> - h1タグが各pageにएकだけあるか
> - 画像にalt属性があるか
> - 内部linkの切れがないか
> - canonicalタグがsettingsされているか

Summary

Claude Code का उपयोग करके、技術的SEOのimplementation से監査 तकefficientlyautomationでき है।メタタグのoptimization、構造化dataのimplementation、サイトマップのgenerate आदि、手作業では見落としやすい部分も漏れなくsupportでき है।SEO監査を定期的に実行するにはhookfeaturesや生産性Tipsをutilizationするとよい होगा।

Claude Codeके details के लिएAnthropicofficial documentationदेखें。構造化dataの仕様はSchema.orgをदेखें。