shopify-content

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}

---

重要なパターン

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

シンプルなコンテンツ（会社概要、お問い合わせ、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 エンドポイント、メタオブジェクトのパターン、ブラウザーでのみ実行できる操作