• ECオープンプラットフォームEC-CUBE

※この記事は上級者向きの記事です。
※この記事のカスタマイズはECCUBE4.0.2で実装確認したものです。

今回はEC-CUBE4でOGP設定を設定するカスタマイズ方法をお伝えいたします。
ここではtwigというテンプレートファイルを変更して対応します。
以下の通りに行えば超簡単です。

• 変更するファイルの場所
• 設置するogタグのサンプル
• ogタグ各項目の説明
• さらにTwitterのOGP設定も設定しておこう

変更するファイルの場所

EC-CUBE4の場合、以下のtwigファイルの中へ設置します。

※プラグイン導入やカスタマイズされている場合は違うかも。

設置するogタグのサンプル

設置するタグは以下の通り。
titleタグの下あたりでよいかと思います。
そのままコピペでＯＫ！

<meta property="og:url" content="{{ app.request.uri }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}" />
<meta property="og:description" content="{{ Page.description }}" />
<meta property="og:site_name" content="{{ BaseInfo.shop_name }}" />
<meta property="og:image" content="画像のURL" />

ogタグ各項目の説明

EC-CUBE4の場合、基本的な項目は上記のままで設定されます。
画像のURLのみサイトのメイン画像などのURLを書き足してください。

各項目については以下の通りです。
サイトにあわせて変更しましょう。

og:url

ページのURL(絶対パス)を指定します。
EC-CUBE4の場合は以下の記述で自動設定されます。

og:type

上記タグはWebサイトのTOPページをイメージしています。

website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページ

og:title

ページのタイトルを指定します。
EC-CUBE4では以下の記述で自動設定されます。

og:description

ページの説明文を指定します。
EC-CUBE4では以下の記述で自動設定されます。

og:site_name

ページのサイト名を記述します。
EC-CUBE4では以下の記述で自動設定されます。

og:image

サイトのメイン画像などのURLを書き足してください。

TwitterのOGPも設定しよう

Twitterでは上記に加えて２つあればよいです。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitterのユーザー名" />

twitter:card

カード種類
Twitterでタイプを指定するタグです。ここでは「summary」を設定します。

summary：タイトル、説明、およびサムネイル。
summary_large_image：summary cardと同じ形で、画像の大きさがそれより大きいもの。
app：アプリ配布用の表示カード。
player：ビデオやオーディオなどのメディアを表示できるカード

twitter:site

@twitterユーザー名を書き入れましょう。

• ECオープンプラットフォームEC-CUBE

 
最後までお読みいただきありがとうございます。