テクニカルSEO

<!-- 良い商品タイトルの例 -->
<title>【公式】iPhone 15 Pro 128GB ナチュラルチタニウム | Apple Store</title>

<!-- 悪い例 -->
<title>商品詳細 - iPhone</title>

<!-- 最適化のポイント -->
<!-- 1. ブランド名を含める -->
<!-- 2. 主要な仕様を記載 -->
<!-- 3. 検索されやすいキーワードを自然に配置 -->
<!-- 4. 70文字以内に収める -->

<!-- 商品説明の例 -->
<div class="product-description">
  <h1>プレミアム革製ビジネスバッグ - 本革 A4対応</h1>
  
  <div class="description-content">
    <p>
      高品質な本革を使用したビジネスバッグです。A4サイズの書類がすっぽり入る
      大容量設計で、ビジネスシーンから出張まで幅広く活用できます。
    </AutoGlossaryParagraph>
    
    <h3>主な特徴</h3>
    <ul>
      <AutoGlossaryListItem>最高級牛革使用で長期間愛用可能</AutoGlossaryListItem>
      <AutoGlossaryListItem>15インチノートPC対応の専用ポケット</AutoGlossaryListItem>
      <AutoGlossaryListItem>撥水加工で雨の日も安心</AutoGlossaryListItem>
      <AutoGlossaryListItem>職人による手作りの上質な仕上がり</AutoGlossaryListItem>
    </ul>
    
    <h3>サイズ・仕様</h3>
    <p>幅40cm × 高さ30cm × マチ12cm / 重量: 約1.2kg</AutoGlossaryParagraph>
  </div>
</div>

<!-- 商品画像の最適化例 -->
<div class="product-images">
  <img src="premium-leather-bag-main.webp" 
       alt="プレミアム革製ビジネスバッグ メイン画像"
       width="800" 
       height="600">
       
  <img src="premium-leather-bag-side.webp"
       alt="プレミアム革製ビジネスバッグ サイド画像"
       width="800"
       height="600">
       
  <img src="premium-leather-bag-interior.webp"
       alt="プレミアム革製ビジネスバッグ 内装画像"
       width="800"
       height="600">
</div>

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "プレミアム革製ビジネスバッグ",
  "image": [
    "https://example.com/bag-main.jpg",
    "https://example.com/bag-side.jpg"
  ],
  "description": "高品質な本革を使用したビジネスバッグ。A4対応の大容量設計。",
  "sku": "BAG-001",
  "mpn": "PremiumBag001",
  "brand": {
    "@type": "Brand",
    "name": "PremiumLeather"
  },
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "4.8",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "田中太郎"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "124"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/premium-bag",
    "priceCurrency": "JPY",
    "price": "29800",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "ファッションストア"
    },
    "shippingDetails": {
      "@type": "OfferShippingDetails",
      "shippingRate": {
        "@type": "MonetaryAmount",
        "value": "0",
        "currency": "JPY"
      },
      "deliveryTime": {
        "@type": "ShippingDeliveryTime",
        "minValue": 1,
        "maxValue": 3,
        "unitCode": "DAY"
      }
    }
  }
}

<!-- レビューセクションの構造例 -->
<section class="product-reviews" id="reviews">
  <h2>お客様レビュー (124件)</h2>
  
  <div class="rating-summary">
    <div class="average-rating">
      <span class="rating-score">4.7</span>
      <div class="stars">★★★★☆</div>
      <span class="review-count">124件のレビュー</span>
    </div>
    
    <div class="rating-breakdown">
      <div class="rating-bar">
        <span>5★</span>
        <div class="bar"><div class="fill" style="width: 78%"></div></div>
        <span>97件</span>
      </div>
      <div class="rating-bar">
        <span>4★</span>
        <div class="bar"><div class="fill" style="width: 15%"></div></div>
        <span>19件</span>
      </div>
      <!-- 他の星評価も同様 -->
    </div>
  </div>
  
  <div class="review-list">
    <article class="review-item">
      <div class="reviewer-info">
        <span class="reviewer-name">田中太郎さん</span>
        <div class="rating">★★★★★</div>
        <time datetime="2024-12-15">2024年12月15日</time>
      </div>
      <div class="review-content">
        <h3>期待以上の品質でした</h3>
        <p>
          思っていたより軽くて、収納力もあります。
          革の質感も良く、長く使えそうです。
          ビジネスシーンで使っていますが、
          同僚からも好評です。
        </AutoGlossaryParagraph>
        <div class="review-images">
          <img src="review-photo-1.jpg" alt="レビュー写真">
        </div>
      </div>
    </article>
  </div>
</section>

<!-- 在庫切れ商品ページの例 -->
<div class="product-availability out-of-stock">
  <h2>プレミアム革製ビジネスバッグ</h2>
  
  <div class="stock-status">
    <span class="status-label out-of-stock">在庫切れ</span>
    <p>現在この商品は在庫切れとなっております。</AutoGlossaryParagraph>
  </div>
  
  <div class="restock-notification">
    <h3>再入荷お知らせ</h3>
    <p>再入荷時にメールでお知らせします。</AutoGlossaryParagraph>
    <form>
      <input type="email" placeholder="メールアドレス">
      <button type="submit">登録する</button>
    </form>
  </div>
  
  <div class="related-products">
    <h3>おすすめの類似商品</h3>
    <!-- 関連商品リスト -->
  </div>
</div>

<!-- フィルタリングページのcanonical例 -->
<!-- 元のカテゴリページ -->
<link rel="canonical" href="https://example.com/bags/leather/">

<!-- 価格フィルタ適用ページ -->
<link rel="canonical" href="https://example.com/bags/leather/">

<!-- ソート適用ページ -->
<link rel="canonical" href="https://example.com/bags/leather/">

<!-- パラメータ付きURL -->
<!-- https://example.com/bags/leather/?price=10000-30000&sort=popular -->
<!-- ↓ canonicalで正規化 ↓ -->
<link rel="canonical" href="https://example.com/bags/leather/">