EC-CUBEで最初にやっておきたい10のカスタマイズ・８「titleのカスタマイズと、OGPの設定をする」

WEB・IT技術

EC-CUBE

読了時間：約 14分16秒

EC-CUBEで最初にやっておきたい10のカスタマイズ・８「titleのカスタマイズと、OGPの設定をする」

引き続き、EC-CUBEを使ってECサイトを構築するときに、ぜひともやっておきたいカスタマイズをご紹介します。

今日は、「８．titleのカスタマイズと、OGPの設定をする」です。

今やWEBサイトに、Facebookやgoogle+、gree、mixiなどで使われるOGPの設定は欠かせないものになってきました。

titleを最適化するついでに、OGPと、最近HOTなTwitter Cardsも、まとめて設定しちゃいましょう！

titleをカスタマイズしよう

EC-CUBEのtitleは、デフォルトでは

「ショップ名 / ページのサブタイトルまたはタイトル」

という表示です。

ECサイトに限らずブログなどでもそうですが、titleはキーワードから先に書き、ショップ名（サイト名）は後ろに持ってくるほうが自然ですし、SEOにも有利です。

ということで、

「サブタイトルまたはタイトル | ショップ名」

という形に直します。

（EC-CUBEのバージョンは、2.12.5で動作確認済みです。）

data/Smarty/templates/default/site_frame.tpl

を開き、42行目あたりにある

[html]<title><!–{$arrSiteInfo.shop_name|h}–><!–{if $tpl_subtitle|strlen >= 1}–> / <!–{$tpl_subtitle|h}–><!–{elseif $tpl_title|strlen >= 1}–> / <!–{$tpl_title|h}–><!–{/if}–></title>[/html]

を、下記のように修正します。

[html]
<title><!–{if $tpl_subtitle|strlen >= 1}–><!–{$tpl_subtitle|h}–> | <!–{elseif $tpl_title|strlen >= 1}–><!–{$tpl_title|h}–> | <!–{/if}–><!–{$arrSiteInfo.shop_name|h}–></title>
[/html]

（区切り線が「 / 」ではなく「 | 」なのは、単なる私の好みですw）

OGPを設定しよう

FacebookやGoogle+などが採用しているOGPと、Twitter Cards用のmetaタグをhead内に記載します。

titleを編集したのと同じファイル

data/Smarty/templates/default/site_frame.tpl

のheadの中に、下記のソースを追記します。

EC-CUBEのバージョンは、2.12.5で動作確認済みです。

（参考サイト：EC-CUBE2.12：Facebook（OGPタグ設定）やTwitterなどのソーシャルブックマークの表示 | ITOBEN STYLE Blog）

ハイライトした行については、【　】の部分をご自分の情報に書き換えてください。

[html highlight=”21,27,29″]
<!–{assign var=detail value="`$smarty.const.ROOT_URLPATH`products/detail.php"}–>
<!–{assign var=list value="`$smarty.const.ROOT_URLPATH`products/list.php"}–>
<!–{if $smarty.server.PHP_SELF==$detail}–>
<meta property="og:image" content="<!–{$smarty.const.HTTP_URL}–>upload/save_image/<!–{if $arrProduct.main_large_image !=""}–><!–{$arrProduct.main_large_image}–><!–{else}–><!–{$arrProduct.main_image}–><!–{/if}–>" />
<meta property="og:site_name" content="<!–{$arrProduct.name|h}–> | <!–{$tpl_title|h}–>" />
<meta property="og:description" content="<!–{$arrProduct.main_list_comment}–>" />
<!–{elseif $smarty.server.PHP_SELF==$list}–>
<meta property="og:image" content="http://<!–{$smarty.server.SERVER_NAME}–><!–{$TPL_URLPATH}–>img/common/ogp.png" />
<meta property="og:site_name" content="<!–{$tpl_subtitle|h}–> | <!–{$tpl_title|h}–>" />
<!–{if $arrPageLayout.description|strlen >= 1}–>
<meta property="og:description" content="<!–{$arrPageLayout.description|h}–>" />
<!–{else}–>
<meta property="og:description" content="<!–{if $tpl_subtitle|strlen >= 1}–><!–{$tpl_subtitle|h}–> | <!–{elseif $tpl_title|strlen >= 1}–><!–{$tpl_title|h}–> | <!–{/if}–><!–{$arrSiteInfo.shop_name|h}–>" />
<!–{/if}–>
<!–{else}–>
<meta property="og:image" content="http://<!–{$smarty.server.SERVER_NAME}–><!–{$TPL_URLPATH}–>img/common/ogp.png" />
<meta property="og:site_name" content="<!–{$arrSiteInfo.shop_name|h}–>" />
<!–{if $arrPageLayout.description|strlen >= 1}–>
<meta property="og:description" content="<!–{$arrPageLayout.description|h}–>" />
<!–{else}–>
<meta property="og:description" content="【管理画面の「基本情報管理＞SEO管理」でDiscriptionを入力していないときに表示する文言】" />
<!–{/if}–>
<!–{/if}–>
<meta property="og:title" content="<!–{if $tpl_subtitle|strlen >= 1}–><!–{$tpl_subtitle|h}–> | <!–{elseif $tpl_title|strlen >= 1}–><!–{$tpl_title|h}–> | <!–{/if}–><!–{$arrSiteInfo.shop_name|h}–>" />
<meta property="og:url" content="http://<!–{$smarty.server.SERVER_NAME}–><!–{$smarty.server.REQUEST_URI|h}–>" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="【サイトのFacebookアプリID】" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@【サイトのTwitter ID】" />
[/html]