EC-CUBEのSEO強化のため、タイトルタグをページごとに最適化したいというご要望をよくお聞きします。

例えば、検索結果でトップページが「サイト名/TOPページ」と表示されるので「TOPページ」を取り除きたい等。(一般的にはTOPページにTOPページとはかかないですよね)
タイトルタグはSEOに重要ですし、人目に触れることも多いので、ページごとに細かく調整したいということが多いと思います。

ところがEC-CUBEの標準テンプレートでは、タイトルタグの形式が「登録したショップ名/ページ名」という形式になっており、形式を変更することができません。

そこで今回はテンプレートファイル内でif文を使って切り分け表示する方法をご紹介します。

修正箇所

タイトルタグを自由な形式に書き換えたい時は、app/tempate/(テンプレートコード)/default_frame.twigを修正することで自由に指定することが可能です。
(ec-cube.coでもテンプレートファイルを一度ダウンロードして書き換えてから再アップロードすることで修正ができます)

まず、default_frame.twigでタイトル文を記述してある箇所を探します。次のようになってると思います。

<title>{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}</title>

テンプレートをどう書き換えるか

上の箇所を書き換えるのですが、twigテンプレート上で使える「app.request.attributes.get(‘_route’)」がトップページのルート名であるhomepageと一致するかどうかをif文で記述します。

{% if app.request.attributes.get('_route') == 'homepage' %}
<title>ここにトップページ用の好きなタイトル</title>
{% else %}
<title>{{ BaseInfo.shop_name }}{% if subtitle is defined and subtitle is not empty %} / {{ subtitle }}{% elseif title is defined and title is not empty %} / {{ title }}{% endif %}</title>
{% endif %}

_routeについては少し難しいですが、URLに付けられている名称によって切り分けていると思っていただければ大きく外れていないと思います。

各ページには個別のrouteが存在するため、この方法を応用すれば他のページの<title>も自由な形式で指定が可能です。
EC-CUBEでもSEOにこだわりたい方はぜひ各ページのタイトルタグを細かく調整してみて下さい。

対応バージョン

この方法はEC-CUBE3系でも4系でも利用可能です。
クラウド版(ec-cube.co)の場合はテンプレートを一度ダウンロードして書き換えて再アップロードの手順が必要になります。