EC-CUBE4で、商品詳細ページに合わせたシェアボタンとOGPを設定する方法

EC-CUBE4を使ってネットショップ運用をされているお客様から、シェアボタンとOGPの設定をご相談受けた際に、調べたコードやどこを編集して設置したのか、ご紹介します。
(今回は、諸事情でプラグインが利用できないサイトだったので)手動?で設置した記録を備忘録として書いていきます。

シェアボタンの設置

ファイルの場所(商品詳細ページ):app/template/テンプレートフォルダ名/Product/detail.twig

<a href="http://www.facebook.com/share.php?u={{ app.request.uri }}" rel="nofollow" target="_blank">Facebook</a>
<a href="https://twitter.com/share?url={{ app.request.uri }}&via=TwitterID&related=TwitterID&hashtags=#お好み&text=文章" rel="nofollow" target="_blank">Twitter</a>
<a href="https://social-plugins.line.me/lineit/share?url={{ app.request.uri }}" rel="nofollow" target="_blank">LINE</a>

よく利用されるfacebook・Twitter・LINEを、商品詳細ページのURLで動的に出力してシェアできるようにしました。

OGPの設置

ファイルの場所:app/template/aokikouetudou/default_frame.twig
の<head>~</head>内

<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="{{ Product.description_list }}" />
<meta property="og:site_name" content="{{ Product.name }}" />
<meta property="og:image" content="サイトのURL{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@TwitterID" />

商品詳細ページの
・商品画像の1枚目をOGP画像として出力
・商品説明をメタディスプリクションを出力
・サイト名の部分を商品名出力
と出力されるようにしました。

ぜひお試しください

調べてみても、ピンポイントでこれだ!という情報が見つからなかったので、他のテンプレートファイルなどを見ながら書いたものになります。
もしかしたら仕様変更で利用できなくなるかもしれませんが、同じように実装したい方がいれば、お試しください。
この記事を書いている人
WEBデザイナー 小谷 優歌
WEBデザイナー 小谷 優歌
WEBデザイナーとして20年、中小企業を中心に年間80件近くのサイト制作・改善を行う。サイト制作にとどまらず、商工会でのセミナー講師や、中小企業へIT顧問・専門家として技術アドバイスを提供。 デザイン制作だけでなく「WEBやITを使って問題を解決したい」「結果を重視して取り組みたい方」へのウェブ活用のサポートを専門としている。