らくうるカートのOGP設定

ＯＧＰとは(Open Graph Protocol オープングラフプロトコル)の略で、
大雑把な説明をするとTwitter,Facebookなどにリンク貼ったときの表示を設定するものです。

カラーミーショップ [PR]やBASEなどは自動でOGPが設定されるようになっていますが、らくうるカートでは手動で設定できます。（設定していなくても一応表示されます。）

自動設定まかせでもいいのですが、表示される画像サイズが小さいままだったりと気になる点もあるので、せっかくなら見栄えの良いようにしておきましょう。

商品OGPの設定項目と意味

商品の新規登録／編集 画面の一番下、「商品ページ表示情報入力」内に設定箇所があります。

og:title  og:type  og:image の３項目です。

og:title

SNSにシェアしたときのタイトル部分です。「（商品名）／（ショップ名）」や、「●●に掲載された（商品名）入荷！！」など自由に設定できます。
設定していない場合は商品名が表示されます。

og:type

「 Product 」(商品)と書きます。

OGPはネットショップに限らずあらゆるサイトで利用できるのでタイプ指定するのですが、らくうるカートはネットショップなのですからProduct以外指定することないだろうと思うのですが、、、なぜこの項目を入れたのか謎です。

og:image

SNSにシェアしたときの画像を指定します。

指定がなければメイン画像が自動的に設定されそうなものですが、たまに表示されていないものもあるようです。念の為にもきちんと設定しておきましょう。

基本的にこれだけでも十分なのですが、もう少し踏み込んで設定しておきます。
特にカテゴリーページなどにはOGP設定がされていないので、その点も追加しておきたいと思います。

適切なOGPを表示するためにhead内を編集

今回はテンプレートNo.「 T14C-01 」を例に使いますが、他のテンプレートでも大きな違いはないはずです。

行番号 11から23辺りがOGPに関する記述です。

<meta property="og:site_name" content="{{ shopName }}">
{% if itemData != null %}<!-- 商品詳細の場合 -->
<meta name="description" content="{{ itemData.metadescription }}">
<meta property="og:image" content="{{ itemData.ogImageUrl }}">
<meta property="og:title" content="{{ itemData.ogTitle }}">
<meta property="og:type" content="{{ itemData.ogType }}">
<meta property="og:url" content="{{ thisUrl }}">
<meta property="og:description" content="{{ itemData.metadescription }}">
{% endif %}
{% if campaignDescription != null %}
<meta name="description" content="{{ campaignDescription }}">
{% endif %}
{% if categoryDescription != null %}
<meta name="description" content="{{ categoryDescription }}">
{% endif %}
{% if freeDescription != null %}
<meta name="description" content="{{ freeDescription }}">
{% endif %}
{% if dsnTopMetadescription is not empty %}
<meta name="description" content="{{ dsnTopMetadescription }}">
{% endif %}

Twitter用に大きな画像を指定

標準のままだとSNSにシェアしたとき画像と一体化したリンクカードになります。

いつものHOGE−Tシャツだとこんな感じです。

大きい画像のほうが視認性やクリック率も向上しますので、最後の endif の次の行に下記を追記

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site:id" content="@Twitterアカウント名" />

これで画像が大きく表示されます。

ちなみに、Twitter上での表示確認はTwitter社標準アプリであるCard validatorでできます。
https://cards-dev.twitter.com/validator

FacebookならOGP　Debugger https://developers.facebook.com/tools/debug/

ついでに、Facebookにシェアしたときサイト名を読み込ませるため

<meta property="og:site_name" content="{{  shopName  }}" />

をさらに追記。

商品詳細のOGP設定をいじります

先ほど書いた通り、OGPタイプはProductしか使わないので直接記述しておきます。
私はOGPタイトルも「（商品名） | （ショップ名）」で統一したかったので、これも編集します。

<meta property="og:title" content="{{ itemData.ogTitle }}">
<meta property="og:type" content="{{ itemData.ogType }}">

の部分を、

<meta property="og:title" content="{{  itemData.itemName }} | {{  shopName  }}" />
<meta property="og:type" content="Product" /> 

に変更。

これで商品データ編集から個別にOGP設定を記述しなくても商品データから勝手に読み込んでくれます。

カテゴリーページ用のOGPを設定する

そもそも今回OGP設定をいじる気になったのは、カテゴリーページをシェアした際に表示されなかったことが理由でした。

カテゴリーページ、キャンペーンページなどは個別に編集する画面もないので、ここで設定しておきます。

{% if categoryDescription != null %}
<meta name="description" content="{{ categoryDescription }}">
{% endif %}

の部分を探してください。

ここを少し編集して

{% if categoryDescription != null %}<!-- category -->
<meta name="description" content="{{ categoryDescription }}" />

<meta property="og:image" content="指定したいときは画像URL" />
<meta property="og:title" content="{{ title2 }} |{{ shopName }}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ thisUrl }}" />
{% endif %}

とします。

全てのカテゴリーページで表示されるので、共通画像を表示させたければ画像のURLを記述します。
不要なら空欄でOKです（カテゴリートップの商品画像が表示されます）

最初に書きましたが、どこか間違っているとショップ自体が表示されなくなってしまいますので、表示がおかしくなったら最初にバックアップしておいた内容を再度貼り付けて元に戻しましょう。