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

読了時間:約 14分14秒
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行目あたりにある

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

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

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

(区切り線が「 / 」ではなく「 | 」なのは、単なる私の好みです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

 

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

<!--{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】" />

 

商品詳細ページ以外に表示する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フィードをご購読ください。

シェアする

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

関連記事

コメント

お仕事のご依頼について

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

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

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

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

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

各ブログのカスタマイズ

 

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

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

プロフィール

菊地翼

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

詳しくはこちら 

サイト内検索

Facebookページ

Twitter