Shopify コンテンツ

Shopify ストアのコンテンツ（ページ、ブログ記事、ナビゲーションメニュー、SEO メタデータ）を作成・管理します。Admin API またはブラウザ自動化を通じて、ストア内にライブコンテンツを生成します。

前提条件

• read_content、write_content スコープを持つ Admin API アクセストークン（shopify-setup スキルを使用）
• ナビゲーション用：read_online_store_navigation、write_online_store_navigation スコープ

ワークフロー

ステップ 1：コンテンツタイプを決定

コンテンツタイプ	API サポート	方法
ページ	フル	GraphQL Admin API
ブログ記事	フル	GraphQL Admin API
ナビゲーションメニュー	限定的	ブラウザ自動化推奨
リダイレクト	フル	REST Admin API
SEO メタデータ	リソースごと	リソース上の GraphQL
メタオブジェクト	フル	GraphQL Admin API

ステップ 2a：ページを作成

curl -s https://{store}/admin/api/2025-01/graphql.json \
  -H "Content-Type: application/json" \
  -H "X-Shopify-Access-Token: {token}" \
  -d '{
    "query": "mutation pageCreate($page: PageCreateInput!) { pageCreate(page: $page) { page { id title handle } userErrors { field message } } }",
    "variables": {
      "page": {
        "title": "About Us",
        "handle": "about",
        "body": "<h2>Our Story</h2><p>Content here...</p>",
        "isPublished": true,
        "seo": {
          "title": "About Us | Store Name",
          "description": "Learn about our story and mission."
        }
      }
    }
  }'

ページボディ は HTML を受け入れます。セマンティック構造を保つ：

• 見出しには <h2> から <h6> を使用（ページタイトルは <h1>）
• 本文には <p>、<ul>、<ol> を使用
• リンクには <a href="..."> を使用
• インラインスタイルは避ける — テーマが スタイリングを処理

ステップ 2b：ブログ記事を作成

Shopify ブログは 2 階層構造：ブログ（コンテナ）> 記事（投稿）。

ブログを検索または作成：

{
  blogs(first: 10) {
    edges {
      node { id title handle }
    }
  }
}

ほとんどのストアには「News」というデフォルトブログがあります。その中に記事を作成：

mutation {
  articleCreate(article: {
    blogId: "gid://shopify/Blog/123"
    title: "New Product Launch"
    handle: "new-product-launch"
    contentHtml: "<p>We're excited to announce...</p>"
    author: { name: "Store Team" }
    tags: ["news", "products"]
    isPublished: true
    publishDate: "2026-02-22T00:00:00Z"
    seo: {
      title: "New Product Launch | Store Name"
      description: "Announcing our latest product range."
    }
    image: {
      src: "https://example.com/blog-image.jpg"
      altText: "New product collection"
    }
  }) {
    article { id title handle }
    userErrors { field message }
  }
}

ステップ 2c：ナビゲーションメニューを更新

ナビゲーションメニューは API サポートが限定的です。ブラウザ自動化を使用：

1. https://{store}.myshopify.com/admin/menus に移動
2. 編集するメニュー（通常「Main menu」または「Footer menu」）を選択
3. メニュー項目を追加、並び替え、または削除
4. 変更を保存

または、API バージョンがサポートしている場合は GraphQL menuUpdate ミューテーションを使用：

mutation menuUpdate($id: ID!, $items: [MenuItemInput!]!) {
  menuUpdate(id: $id, items: $items) {
    menu { id title }
    userErrors { field message }
  }
}

ステップ 2d：リダイレクトを作成

URL リダイレクトは REST API を使用：

curl -s https://{store}/admin/api/2025-01/redirects.json \
  -H "Content-Type: application/json" \
  -H "X-Shopify-Access-Token: {token}" \
  -d '{
    "redirect": {
      "path": "/old-page",
      "target": "/new-page"
    }
  }'

ステップ 2e：SEO メタデータを更新

SEO フィールドは各リソース（商品、ページ、記事）にあります。リソースのミューテーションを通じて更新：

mutation {
  pageUpdate(page: {
    id: "gid://shopify/Page/123"
    seo: {
      title: "Updated SEO Title"
      description: "Updated meta description under 160 chars."
    }
  }) {
    page { id title }
    userErrors { field message }
  }
}

ステップ 3：確認

コンテンツを再度クエリして確認：

{
  pages(first: 10, reverse: true) {
    edges {
      node { id title handle isPublished createdAt }
    }
  }
}

ユーザーが確認できるよう管理 URL とライブ URL を提供：

• 管理：https://{store}.myshopify.com/admin/pages
• ライブ：https://{store}.myshopify.com/pages/{handle}

---

重要なパターン

ページ vs メタオブジェクト

シンプルなコンテンツ（About、Contact、FAQ）には ページ を使用します。構造化された繰り返し可能なコンテンツ（チームメンバー、推薦文、拠点）には メタオブジェクト を使用します — これらは型指定されたフィールドを持ち、プログラム的にクエリできます。

ブログ SEO

すべてのブログ記事には以下が必要：

• SEO タイトル：60 字以下、主要キーワード を含む
• メタディスクリプション：160 字以下、説得力のある概要
• ハンドル：キーワード を含むクリーンな URL スラッグ
• 代替テキスト付き画像：ソーシャルシェア及びアクセシビリティ用

コンテンツスケジューリング

記事の publishDate を使用してスケジュール公開します。ページは isPublished: true の場合すぐに公開されます。

一括コンテンツ

多数のページ（例：ロケーションページ、サービスページ）の場合、レート制限を考慮したループを使用：

for page in pages_data:
    create_page(page)
    sleep(0.5)  # Respect rate limits

---

リファレンスファイル

• references/content-types.md — API エンドポイント、メタオブジェクトパターン、ブラウザのみの操作