ウェブサイトでリッチピンを有効にする

リッチピンは、あなたのウェブサイトから詳細情報をピンに追加します。現在は、プロダクト、リーディング、アプリ、レシピの 4 種類のリッチピンがあります。


サイトにリッチピンを追加する:

  1. ご自身のウェブサイトで META タグ、または oEmbed endpoint の準備をします。この操作は専門知識を要するため、場合によっては、サイトを構築した技術者に連絡することをおすすめします。以下で、各種リッチピンについての簡単な手順をご覧ください。
  2. リッチピンをテストします。
  3. 掲載するために Pinterest に申請します。

リッチピンのデベロッパードキュメント全文は Pinterest デベロッパー向けサイトをご覧ください


ピンの種類

リッチピンの申請の際は、ピンの種類に応じてウェブサイトをマークアップしてください。例えば、サイトにレシピを掲載している場合は、リーディングピンではなく、レシピピンのマークアップを追加します。
 

Product Pins Product Pins
プロダクトピンは、あなたのウェブサイトからのピンに価格、在庫ステータス、商品説明を表示します。
 
サイトにプロダクトピンを追加する方法

1. Open Graph または Schema.org のマークアップを、プロダクトのリッチピンを有効にする各ページの、 HTML コードの <head> と </head> との間に追加します。Shopify をお使いの場合は、以下の Shopify サイト専用の手順をご確認ください。各種マークアップのリッチピンの必須フィールドは以下のとおりです。強調表示されているフィールドを編集して、商品が反映されるようにします。

Open Graph のマークアップ:
<meta property="og:title" content="de Young Copper Bookmark />
<meta property="og:type" content="product" />
<meta property="og:price:amount" content="15.00"/>
<meta property="og:price:currency" content="USD" />
 

Schema.org のマークアップ:

<div itemscope itemtype="https://schema.org/Product">

<meta itemprop="name" content="de Young Copper Bookmark" />
<meta itemprop="url" content="https://shop.famsf.org/do/product/BK5160" />
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">.00</span>
<meta itemprop="priceCurrency" content="USD” />
<meta itemprop="availability" itemtype="https://schema.org/ItemAvailability"
</div>
 

2. リッチピン検証ツールを使用して、リッチピンデータを見られるようにします。

3. 正しく表示されている場合は、[今すぐ申請] をクリックします。申請の際には、正しいマークアップを選択しているか確認してください。

実際にその商品を購入できるサイトからのみ、プロダクトピンを追加しています。ご自身のウェブサイトから購入可能ですが、他のサイトからは購入することはできません。
 
以下のサービスにウェブサイトがホストされている場合は、マークアップの追加は必要ありません。
  1. Shopfy:リッチピン検証ツールのページで製品へのリンクを貼り付けて、末尾に「.oembed」を追加すると製品にリッチピンの情報が表示されます。このページからリッチピンを申請することができます(申請の際、Shopfy を選択してください)。
  2. Etsy、Teachers Pay Teachers、eBay:これらのサイトからの新しいピンは 24 時間以内に製品の情報が表示されます。

詳細は Pinterest デベロッパー向けサイトをご覧ください。

Article Pins Article Pins
リーディングピンは、記事やブログの見出し、タイトル、説明や著者を表示します。
 
サイトにリーディングピンを追加する方法

1. Open Graph または Schema.org のマークアップを、リーディングのリッチピンを有効にする各ページの、 HTML コードの <head> と </head> との間に追加します。各種マークアップのリッチピンの必須フィールドは以下のとおりです。強調表示されているフィールドを編集して、記事が反映されるようにします。

Open Graph のマークアップ:
<meta property="og:title" content="記事のタイトル"/>
<meta property="og:description" content="記事の説明" />
<meta property="og:type" content="article" />
 
Schema.org のマークアップ:
<meta property="og:site_name" content="サイト例” />
<div itemscope itemtype="https://schema.org/Article">
    <meta itemprop="url" content="https://www.example.com/2013/10/article.html" />
    <span itemprop="name" content="記事のタイトル” /> 著者: <span itemprop="author" content="Johh Doe” />
    <span itemprop="description">記事の説明やまとめ。</span>
    </div>
  1. リッチピン検証ツールを使ってリッチピンデータが表示されるか確認します。
  2. 正しく表示されている場合は、[今すぐ申請] をクリックします。申請の際には HTML タグを選択してください。
記事とは文章を含むページのことで、ニュース記事やブログの投稿などを指します。Pinterest ではリスト記事(まとめサイト)や、画像がほとんどで文章がわずかしかないページは記事とは見なしていません。
 
詳細は Pinterest デベロッパー向けサイトをご覧ください。
 

App Install Pins App Install Pins
アプリピンの特長は、iOS ユーザーが App Store にアクセスしてアプリをダウンロードできる [インストール] ボタンです。
 
アプリピンを作成する
  1. ボードを表示して [ピンを追加] を選択し、お使いのコンピュータかデバイスからピン画像をアップロードします。
  2. アプリの高解像度画像をアップロードします。
  3. ピンを編集して、App Store ページのウェブサイトを変更します。
アプリピンの活用例は Pinterest で App Store のボード をご覧ください。現時点ではアプリピンの対象は米国のアプリのみですのでご注意ください。現時点では、アプリピンは米国のアプリにのみ利用可能で、iOS デバイスでのみ表示可能です。

Recipe Pins Recipe Pins
レシピピンは、料理名、レシピの評価、レシピの人数、調理時間、材料を、あなたのウェブサイトから表示することができます。また、パレオ、ベジタリアン、ビーガン、グルテンフリーの表記も可能です。
 
サイトにレシピピンを追加する方法

1. Schema.org または hRecipe のマークアップを、レシピのリッチピンを有効にする各ページの HTML コードの <head> と </head> との間に追加します。各種マークアップのリッチピン必須フィールドは以下のとおりです。強調表示されているフィールドを編集し、レシピを反映します。ただし、「Ratings」(評価)が使えるのは Schema.org マークアップを使用した場合のみで、現在のところは iOS デバイスと Android デバイスでしか表示されません。

Schema.org のマークアップ:
<div itemscope itemtype="https://schema.org/Recipe">
    <span itemprop="name">
    オレンジとパイナップルと人参のスムージー</span>
   <span itemprop="description">
    レシピの説明。</span>
  <span itemprop="aggregateRating">
  総合評価はここに表示されます</span>
    <meta itemprop="url"
    <span itemprop="recipeYield">Serves 1</span>
    材料:
        <span itemprop="ingredients">材料 1</span>,
        <span itemprop="ingredients">材料 2</span>,
        <span itemprop="ingredients">材料 3</span>,
        <span itemprop="ingredients">
   必要に応じて材料タグを追加します</span>.
    作り方:
    <span itemprop="recipeInstructions">
  パイナップル、氷、オレンジジュース、人参、
  バナナをミキサーに入れ、なめらかになるまでミキサーにかけます。</span>
</div>
 
hRecipe タグ:
<article class="h-recipe">
  <h1 class="p-name">ベーグル</h1>
  <ul>
    <li class="p-ingredient">小麦粉</li>
    <li class="p-ingredient">砂糖</li>
    <li class="p-ingredient">イースト</li>
  </ul>
  <p>所要時間:<time class="dt-duration" datetime="1H">1 時間</time>、
     分量:<data class="p-yield" value="4">4 人分</data></p>
  <div class="e-instructions">
    <ol>
      <li>まず、すべての材料を混ぜます。</li>
    </ol>
  </div>
</article>
 

2. リッチピン検証ツールを使用して、リッチピンデータを見られるようにします。

3. 正しく表示されている場合は、[今すぐ申請] をクリックします。申請の際には HTML タグを選択してください。

詳細は Pinterest デベロッパー向けサイトをご覧ください。


Shopify ストアにリッチピンを追加する

  1. Shopify サイトで特定の商品の URL を取得します([Buy] ボタンや [Add to Bag] ボタンのあるページ)。
  2. この商品 URL をリッチピン検証ツールにコピー&ペーストして、商品 URL の末尾に「.oembed」と入力します。
  3. [検証する] をクリックします。
  4. プレビューが表示されたら、[申請] をクリックします。ウェブサイトから申請する必要がある商品 URL は 1 つのみです。
  5. 24 時間でプロダクトピンがリッチピンになります。

よくある質問

サイトのリッチピンを無効にするには
すべてのページをマークアップする必要がありますか?
それぞれのページ毎に申請する必要がありますか?
ピンがリッチピンとして表示されるタイミング
リッチピンの申請時にエラーメッセージが表示される
レシピがリッチピンとして表示されない理由

自分のサイトからのピンに詳細情報を追加しないためには、次のタグを HTML の <head> セクションに追加します。

<meta name="pinterest-rich-pin" content="false" />

リッチピンとして表示するには、そのページにリッチピンの META タグを追加してください。リッチピンは具体的な製品の説明、記事、あるいはレシピに関するページを対象としています。ホームページやカテゴリページはマークアップできません。正しくマークアップされた 1 ページをバリデーションし、META タグを追加したページのリッチピンを有効にしてください。


いいえ、サイトから 1 ページのみ申請します。申請が承認されると、サイト全体でリッチピンが有効になります。

リッチピンの申請が承認されると、あなたのウェブサイトから新たに追加されたピンにプロダクト、リーディング、レシピのタグが正しく付けられている場合は、リッチピンとして表示されます。
 
古いピンの場合は、リッチピンとして表示されるまでに数週間かかる場合があります。

指定された URL からデータを取得できませんでした」というメッセージが表示されるのは、サイトのピンを作成する前に Pinterest がタイムアウトした可能性があります。サイトの表示に時間がかかるときによく起きるエラーで、Pinterest 側では修正できません。また、サイトで Amazon Web Service(AWS)のリクエストをブロックしているときにも発生します。リッチピンの申請前にこのブロックを解除してください。

指定された URL には必要な情報が含まれていないようです」というメッセージが表示された場合、リッチピンタグに必要な情報が抜けています。Pinterest デベロッパー向けサイトで追加するタグについての詳細をご覧ください。

Pinterest では最近 hrecipe マイクロフォーマット v1 のサポートを終了したため、レシピのリッチピンでサポートされるのは マイクロフォーマット v2 のみとなりました。新しいマイクロフォーマットの詳細については http://microformats.org/wiki/h-recipe をご覧ください。
 
サイトのレシピのリッチピンをサポートするには、マイクロフォーマット v2 または Schema.org タグへの移行をおすすめします。


※2017年1月をもってプレイスとムービーのリッチピンは対応を終了しました。すでにご利用中のプレイスピンやムービーピンは、通常のピンとして引き続き表示されます。