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

OGP設定

×

マニュアル閲覧上の注意

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

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

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

OGPの基本設定を行えます。

「商品詳細ページ」「コマースクリエイター>フリーページを利用して作成した」ページ、「その他のページ」、それぞれに共通のタグを出力できます。

本画面で設定したOGPはコマースクリエイター>レイアウト変更では変更できませんのでご注意ください。

※OGPとは
FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。

本機能を利用せず、各ページに任意のOGP設定を行いたい場合は、特定(任意)のページに任意のOGPを設定する方法をご覧ください。

商品詳細ページ設定

利用設定

「利用する」にチェックすると商品詳細ページにOGP設定を出力します。

出力画像について

出力される画像は、商品のサムネイル画像です。
サイズは、テーマ設定-商品画像サイズ設定で設定した商品画面(メイン)サイズとなります。

また以下の場合は、バリエーションサムネイル画像が表示されます。

  • 商品検索結果一覧に使用し、かつバリエーション検索を行った場合でバリエーション設定された商品画像がある場合
  • お気に入りに使用し、かつバリエーションを選択してお気に入り追加された場合でバリエーション設定された商品画像がある場合

フリーページ設定

利用設定

「利用する」にチェックすると「コマースクリエイター>フリーページを利用して作成した」ページにOGP設定を出力します。

og:type設定

ページの種類を宣言します。

website

article以外はこちらを選択してください。

article

記事ページのみの場合は選択してください。

og:image設定

SNSにて表示されるイメージ画像を設定できます。

出力しない

表示画像を指定しません。各SNSの仕様により適宜画像が出力されます。

URLを指定する

指定した画像を表示できます。
URLを記入してください。(必須)文字数:200字

その他ページ設定

利用設定

「利用する」にチェックすると上記以外の「その他」ページ(TOPページや商品グループページなど)にOGP設定を出力します。

og:image設定

SNSにて表示されるイメージ画像を設定できます。

出力しない

表示画像を指定しません。各SNSの仕様により適宜画像が出力されます。

URLを指定する

指定した画像を表示できます。
URLを記入してください。(必須)文字数:200字

関連情報

特定(任意)のページに任意のOGPを設定する方法

まず本画面で、任意のOGPタグを設定したいページの「利用する」チェックを外してください。(例:商品グループであれば「その他ページ設定」)
チェックしたままですと、OGPタグが二重で出力されてしまいますのでご注意ください。

フリーパーツと置換文字を利用し、OGPタグを準備します。

1.フリーパーツにてOGPタグを作成する

コマースクリエイター>フリーパーツにて[パーツを追加する]ボタンを押下し、OGP用の新規パーツを作成します。
パーツ名(例:商品グループ用OGP)や置換文字は任意に設定してください。

記述するタグの詳細や利用できる置換文字については以下をご覧ください。
スタートアップテーマのパーツ(OGPタグ)

2.出力したいページの<head>内に1.で作成したパーツを配置する

コマースクリエーター>テーマ>(設置したいテーマの)レイアウトより設置したいページを選択し、レイアウト変更画面を開きます。

<head>内に1.で作成したパーツ(例:商品グループ用OGP)を配置します。

配置方法は以下を参考にしてください。
コマースクリエイター>レイアウト変更-レイアウト-headタグとbodyタグ-<head>内を変更する

スタートアップテーマをベースに構築されている場合、すでに<head>内に「headタグ共通」パネルパーツが配置されています。
このパネルパーツ内部にOGPパーツを配置しますと、全ページに共通出力されてしまいますのでご注意ください。

なお、新規のheadタグ用のパネルパーツを準備し、パネルパーツごとレイアウト配置することも可能です。
複数レイアウトに配置するパネルパーツとして管理、運用したい場合におすすめです。
手順は<headタグ用パネルパーツ内部に配置する場合>でご確認ください。

<headタグ用パネルパーツ内部に配置する場合>

まず、1.フリーパーツにてOGPタグを作成するを行い、A.B.の手順へ進んでください。

A.出力したいページの<head>パネルパーツを作成する

コマースクリエーター>パーツより新規パネルパーツを作成します。
パーツ名(例:商品グループ用head)や置換文字は任意に設定してください。

1.で作成したOGPタグ用パーツ(例:商品グループ用OGP)を配置します。
ほかに、headタグ用に店舗様で独自に追加されているパーツがあれば追加してください。
過不足なく追加されているかご確認ください。(パーツ内容に過不足があると、ECサイトに影響が出る可能性があります。)
パネルパーツを保存します。

B.出力したいページの<head>内にA.のパネルパーツを配置する

コマースクリエーター>テーマ>(設置したいテーマの)レイアウトより設置したいページを選択し、レイアウト変更画面を開きます。

<head>内にA.で作成したパネルパーツを配置します。
配置方法は以下を参考にしてください。
コマースクリエイター>レイアウト変更-レイアウト-headタグとbodyタグ-<head>内を変更する

スタートアップテーマをベースに構築されている場合は、すでに配置されている「headタグ共通」を必ず外してください
「パーツを外す」方法は、コマースクリエイター>レイアウト変更-パーツをレイアウトから外すをご覧ください。

note for shopping連携

本設定を利用せずにnote for shoppingに連携される場合は、note for shopping連携のためのOGPタグパーツ設置についてをご覧ください。

項目表示について

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

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

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

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

×

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

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

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