如何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。