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

読了時間:約 14分16秒

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

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

今日は、「8.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]

 

商品詳細ページ以外に表示するOGP用の画像は、「ogp.png」というファイル名で、200px × 200px以上の大きさで作成しておきます。

 

EC-CUBE管理画面の「コンテンツ管理>ファイル管理」を開き、

packages の「表示」→ default の「表示」→ img の「表示」→ common の「表示」

とクリックしていき、「ファイルのアップロード」でOGP用の画像(ogp.png)をアップロードします。

 

生成されたOGPに不備がないかどうか、Facebook デバッガーで確認することができます。

 

なお、Twitter Cardsは、metaデータの設置が完了したら、利用申請する必要があります。

 

利用申請のやり方については、こちらのサイトがとても参考になります!→
Twitter カード 7タイプの使い方をカード種別ごとに解説するよ | WWW WATCH

 

 

この記事が、EC-CUBEカスタマイズのお役に立てれば幸いです。

 

次回は「9.商品名で全角カッコなどが半角に変換されるのを無効化する」を解説します!

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加

関連記事

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴18年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索