運用サポート(平日10:00~17:30) 06-6485-6485
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

note for shopping連携のためのOGPタグパーツ設置について

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

note for shopping連携のためのOGPタグパーツ設置について

note for shoppingに連携される場合の手順についてご説明いたします。
note for shoppingに対応するため、商品詳細レイアウトについて、OGPタグを変更する必要がございます。

商品情報については、OGPタグに記載された情報を元にnoteの仕様に準じて記載されます。なお、闇市グループに所属する商品の場合、noteに記載されるのはパスワード認証画面になります。

note株式会社ピースオブケイクのサービスです。'note'および'note for shopping'については、株式会社ピースオブケイクへお問い合わせください。

OGPタグの作成と入れ替え

コマースクリエイターの初期状態では、「OGPタグ(フリーパーツ)」が「headタグ共通(PC)/ headタグ共通(スマートフォン)/ headタグ共通(スケルトン)」(いずれもパネルパーツ)に含まれ、全てのページに対してレイアウトの「<head設定>内」に配置されています。

note for shoppingに必要なOGPタグは商品用(「og:type」が「og:product」)となりますので、記載内容が他と異なります。そのため別のフリーパーツにOGPタグを記載して、商品詳細用レイアウトに配置します。

OGPタグ入れ替え手順

コマースクリエイター>パーツ一覧からフリーパーツを追加します。

パーツ名、置換文字を入力し、表示内容に以下を入力し、保存します。

<!-- **OGPタグ(note for shopping・フリーパーツ)↓↓ -->
<meta property="og:title" content="{% page.title %}">
<meta property="og:type" content="og:product">
<meta property="og:url" content="{% page.url %}">
<meta property="og:image" content="{% product.image_thumbnail %}">
<meta property="og:site_name" content="{% shop.name %}">
<meta property="og:description" content="{% page.description %}">
<meta property="product:price:amount" content="{% product.tax_in_price_raw %}">
<meta property="product:price:currency" content="JPY">
<meta property="product:product_link" content="{% page.url %}">
<!-- **OGPタグ(note for shopping・フリーパーツ)↑↑ -->

コマースクリエイター>パーツ一覧からパネルパーツを追加します。

商品詳細のheadタグ用のパネルパーツを追加し、先ほど作成したフリーパーツを加えます。

ほかにheadタグ用に店舗様で独自に追加されているパーツがあれば追加して、パネルパーツを保存します。

コマースクリエイター>テーマ>レイアウト一覧にて商品詳細で使用しているレイアウトを検索し、変更するボタンを押下します。

<head設定>内を変更するボタンを押下します。

すでに設置されているOGPタグが入ったパネルパーツを選択し、パーツを外すを選択します。
OGPタグが入ったパネルパーツに追加されているパーツが、新しく追加するパネルパーツにきちんと追加されているどうか(過不足ないかどうか)確認してください。パネルパーツを入れ替えるので、パーツ内容に過不足があると、ECサイトに影響が出る可能性があります。

画面右側のパーツ検索から、種類「パネルパーツ」で検索し、先ほど作成したパネルパーツをレイアウトに追加します。
プレビューボタンで、レイアウトが有効になっている商品詳細ページを確認して、HTMLソースを確認してOGPタグが反映されていることと、その他画面表示などに影響がないことを確認してください。

確認したら、レイアウトを保存してください。
ほかに商品詳細に適用しているレイアウトがあれば、同様の作業を行ってください。

noteへログインし、投稿画面で商品詳細ページのURLを入力して改行し、商品カードが表示されることを確認してください。

note株式会社ピースオブケイクのサービスです。noteおよびnote for shoppingについては、株式会社ピースオブケイクへお問い合わせください。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。