seo-optimizer

SEO Optimizer Skill

This skill provides SEO optimization suggestions.

Overview

Analyze and optimize web page metadata, structured data, and content from an SEO perspective.

Main Features

• Meta tag optimization: title, description, OG tags
• Structured data: JSON-LD、Schema.org
• Semantic HTML: Proper tag usage
• Performance: Core Web Vitals
• Mobile support: Responsive design
• Internal links: Site structure optimization
• Image optimization: alt, size, format

How to Use

以下のHTMLをSEO最適化：
[HTML]

チェック項目:
- メタタグ
- 構造化データ
- セマンティックHTML

Optimization Examples

Meta tags

Before optimization:

<head>
  <title>Home</title>
</head>

After optimization:

<head>
  <!-- 基本メタタグ -->
  <title>高品質なWebサービス | 会社名 - 信頼できるソリューション</title>
  <meta name="description" content="会社名では、高品質なWebサービスを提供しています。信頼性と使いやすさを兼ね備えた、お客様のビジネスを加速するソリューションです。">
  <meta name="keywords" content="Webサービス, クラウド, SaaS, ビジネスツール">

  <!-- Open Graph (Facebook, LinkedIn) -->
  <meta property="og:title" content="高品質なWebサービス | 会社名">
  <meta property="og:description" content="会社名では、高品質なWebサービスを提供しています。">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <meta property="og:url" content="https://example.com">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="会社名">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="高品質なWebサービス | 会社名">
  <meta name="twitter:description" content="会社名では、高品質なWebサービスを提供しています。">
  <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
  <meta name="twitter:site" content="@company">

  <!-- その他 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://example.com">
</head>

Structured data

Article page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "初心者のためのSEO完全ガイド",
  "description": "SEOの基礎から実践まで、初心者でもわかりやすく解説します。",
  "image": "https://example.com/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "山田太郎"
  },
  "publisher": {
    "@type": "Organization",
    "name": "会社名",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2024-06-15",
  "dateModified": "2024-06-20"
}
</script>

Product page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "高性能ノートPC",
  "image": "https://example.com/laptop.jpg",
  "description": "最新のプロセッサを搭載した高性能ノートパソコン",
  "brand": {
    "@type": "Brand",
    "name": "ブランド名"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/product/laptop",
    "priceCurrency": "JPY",
    "price": "128000",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "24"
  }
}
</script>

Semantic HTML

Before optimization:

<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>

After optimization:

<header>
  <nav aria-label="メインナビゲーション">...</nav>
</header>
<main>
  <article>
    <h1>記事タイトル</h1>
    <p>...</p>
  </article>
</main>
<footer>...</footer>

Heading structure

Before optimization:

<h1>サイト名</h1>
<h3>セクション1</h3>
<h2>セクション2</h2>

After optimization:

<h1>ページタイトル（1ページに1つ）</h1>
<h2>主要セクション1</h2>
  <h3>サブセクション1-1</h3>
  <h3>サブセクション1-2</h3>
<h2>主要セクション2</h2>
  <h3>サブセクション2-1</h3>

Image optimization

Before optimization:

<img src="photo.jpg">

After optimization:

<img
  src="photo-800w.webp"
  srcset="photo-400w.webp 400w,
          photo-800w.webp 800w,
          photo-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 900px) 800px,
         1200px"
  alt="東京タワーの夜景写真"
  width="800"
  height="600"
  loading="lazy">

Checklist

On-Page SEO

• Appropriate title tag (50-60 characters)
• Meta description (150-160 characters)
• H1 tag (one per page)
• Heading hierarchy (H1 → H2 → H3)
• Image alt attributes
• Internal links
• Canonical URL
• Mobile-friendly
• Page speed
• HTTPS

Structured data

• JSON-LD format
• Appropriate schema type
• Required properties
• Passes validation

Content

• Unique and valuable content
• Appropriate keyword density
• Readable text
• Internal links
• External links (reliable sources)

Version Information

• Skill version: 1.0.0
• Last updated: 2025-01-22

---

Usage example:

このページをSEO最適化：
[HTML]

改善項目:
- メタタグ
- 構造化データ
- 画像最適化

SEO-optimized HTML will be generated!