EC-CUBEのSEO対策 実装ガイド

EC-CUBE4系(以下EC-CUBE)でSEOを強化するなら、テンプレート構造の理解が必須です。実際のコードを交えながら、titleタグ・meta設定・構造化データ・sitemapなどSEO対策を解説します。

共通

titleタグ

SEOでは基本的に重要なキーワードは文頭に配置すると良いとされていますが、初期状態のテンプレートでは「ショップ名 / サブタイトル(商品名など)」となっており最適化されていません。 ショップ名を文末にする修正を行います。

src/Eccube/Resource/template/default/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>

このコードをこの以下のように修正してください。

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

ただし、認知が十分に取れているブランド名やショップ名であれば、先頭に置くことでクリック率が上がる可能性があります。細かく制御し管理ができるのであれば、以下のように店名を消して、subtitle、titleで制御した方が良いです。

<title>{% if subtitle is defined and subtitle is not empty %}{{ subtitle }}{% elseif title is defined and title is not empty %}{{ title }}</title>

subtitle と title について

titleには「コンテンツ管理 -> ページ管理 -> ページ名」の値がセットされています。 subtitleは商品一覧、商品詳細ページなどで商品名などをプログラム側(Controller)で制御して設定されています。 各ページのテンプレートでsubtitleやtitleは以下のように上書きすることが可能ですので必要であれば調整を試みてください。

{% extends 'default_frame.twig' %}
{% set subtitle = '任意のタイトル' %}

より一歩進んだ方法

テンプレートを都度調整するのは大変では？と追われる方も多いと思います。 SEO対策では検索結果の順位やインデックスの登録状況からタイトルを調整し、よりよい方法を探していきますが、毎回テンプレートを修正するのは大変です。 管理画面から任意のタイトルを設定できる仕組みをカスタマイズして実装し、効率よくSEOを対策ができる環境を整えた方が良いと考えます。

トップページ

h1タグ

全ページ、ロゴ(ショップ名)がh1タグになっており構造に問題があります。 トップページに限りショップのロゴ(ショップ名)をh1で囲い、下層ページはh1タグを外す設定が良いと考えます。 なお、トップページにh1タグで囲むべき要素があるようでしたら、分岐せずにh1を外すようにしても良いです。

修正ファイル

ec-cube/src/Eccube/Resource/template/default/Block/logo.twig

修正前

                <h1>
                    <a href="{{ url('homepage') }}">
                        {{ BaseInfo.shop_name }}
                    </a>
                </h1>

修正後

                { if request. eq '/' }
                    <h1>
                        <a href="{{ url('homepage') }}">
                            {{ BaseInfo.shop_name }}
                        </a>
                    </h1>
                { else }
                    <a href="{{ url('homepage') }}">
                        {{ BaseInfo.shop_name }}
                    </a>
                {% endif %}

titleタグ

トップページのtitleタグは「設定 -> 店舗設定 -> 基本設定 -> 店名」で設定した値が表示されるようになっています。 ここで設定した店名はメールや納品書などで使われているため、店名以外の「○○専門店」「○○公式サイト」のような装飾となるような単語をいれずらく、トップページ用のtileを別途設定した方がSEOの効果があがります。

titleの修正は「コンテンツ管理 -> ページ管理 -> トップページ」

{% extends 'default_frame.twig' %}
{% set subtitle = '【公式】○○○○○ストア △△△専門店' %}

meta description

コンテンツ管理 -> ページ管理 -> トップページ

descriptionを120文字程度で設定してください。

商品一覧/カテゴリーページ

canonical

canonical(一意のURL)を設定することにより、重複ページの除去やクロールバジェットの節約になります。 また、次ページ以降はインデックスさせないようにして(サイトの状況や議論がある内容ですので、ご自身でご判断いただき、実施可否を決めていただければと思います。)

修正ファイル

src/Eccube/Resource/template/default/meta.twig

修正内容

• 2ページ目以降はインデックスをしない、ただしリンクの評価はさせる
• canonicalは1ページ目だけを指定する(pagenoパラメーターを外す)

{% if app.request.get('_route') == 'product_detail' %}
    {% set meta_og_type = "og:product" %}
    {% set meta_description = Product.description_list | default(Product.description_detail) | default(Page.description) %}
    {% set meta_canonical = url('product_detail', {'id': Product.id}) %}
    <meta property="og:title" content="{{ Product.name }}" />
    <meta property="og:image" content="{{ absolute_url(asset(Product.main_list_image|no_image_product, 'save_image')) }}" />
    <meta property="product:price:amount" content="{{ Product.getPrice02IncTaxMin }}"/>
    <meta property="product:price:currency" content="{{ eccube_config.currency }}"/>
    <meta property="product:product_link" content="{{ url('product_detail', {'id': Product.id}) }}"/>
    <meta property="product:retailer_title" content="{{ BaseInfo.shop_name }}"/>
    {% if not Product.stock_find %}
        <meta name="robots" content="noindex">
    {% endif %}
{% elseif app.request.get('_route') == 'product_list' %}
    {% set meta_canonical = url('product_list', {'category_id': Category.id|default(null)}) %}
    {# 2ページ目以降はnoindex #}
    {% if pagination is defined and pagination.paginationData is defined and pagination.paginationData.current > 1 %}
        <meta name="robots" content="noindex, follow">
    {% endif %}
{% elseif app.request.get('_route') == 'homepage' %}
    {% set meta_og_type = 'website' %}
    {% set meta_canonical = url('homepage') %}
{% elseif Page is defined and Page.edit_type == 0 and Page.url is defined %}
    {% set meta_canonical = url(eccube_config.eccube_user_data_route, {'route': Page.url}) %}
{% endif %}

<meta property="og:type" content="{{ meta_og_type|default('article') }}"/>
<meta property="og:site_name" content="{{ BaseInfo.shop_name }}"/>

{% set meta_description = meta_description | default(Page.description) %}
{% if meta_description %}
    <meta name="description" content="{{ meta_description|striptags|slice(0,120) }}">
    <meta property="og:description" content="{{ meta_description|striptags|slice(0,120) }}"/>
{% endif %}

{% if meta_canonical|default() %}
    {# canonical url #}
    {% if Category is defined and Category %}
        <meta property="og:url" content="{{ meta_canonical }}"/>
        <link rel="canonical" href="{{ meta_canonical }}" />
        {# rel="next" と rel="prev"は任意で残す #}
        {% if pagination is defined and pagination.paginationData is defined and pagination.paginationData.pageCount > 1 %}
            {% if pagination.paginationData.current < pagination.paginationData.last %}
                <link rel="next" href="{{ meta_canonical }}&pageno={{ pagination.paginationData.next }}">
            {% endif %}
            {% if pagination.paginationData.current > 1 %}
                <link rel="prev" href="{{ meta_canonical }}&pageno={{ pagination.paginationData.previous }}">
            {% endif %}
        {% endif %}
    {% else %}
        <meta property="og:url" content="{{ meta_canonical }}"/>
        <link rel="canonical" href="{{ meta_canonical }}" />
    {% endif %}
{% endif %}

description

カテゴリー毎に設定出来る機能はなく、テンプレートだけで設定することも難しいため、プラグインまたはカスタマイズして対応する必要があります。

他にやった方が良い施策

カテゴリーの説明やカテゴリー画像の表示

カテゴリーページの情報量を増やすことで、SEO効果を高めることができます。 ただし、標準の状態ではこういった情報を表示する機能はないため、カテゴリー毎に情報を登録できる機能をカスタマイズして追加する必要があります。

他の施策アイデア

• カテゴリー内の人気商品ランキング
• 特集ページなどへのリンク追加
• カテゴリーが多い場合には、他の類似のカテゴリーへのリンクを表示
• よくある質問と回答の追加(リッチリザルト用構造化データ)

商品詳細

h1タグ

商品名にhタグが指定されていないため修正します。

その他の対策

画像の最適化

ECサイトは画像が多く、画像の最適化を行うことで、効率よくSEO効果を高められます。

• 画像のフォーマットをwebpにする
• 画像サイズを適切なサイズに変更する
• キャッシュをさせて無駄な再読み込みをさせないようにする

当社は自動で画像フォーマットの変換やサイズ変更などを行うソリューションも提供していますのでご相談ください。

sitemap

sitemapは検索エンジンに「どのページをクロール・インデックスしてほしいか」を伝えるものです。 新たに追加されたページや新商品などが早く検索に反映されたり、隠れたページも発見されやすくなる効果があります。

https://ホスト名/sitemap.xml https://ホスト名/sitemap_page.xml https://ホスト名/sitemap_category.xml https://ホスト名/sitemap_product_1.xml

robots.txt

robots.txtは検索エンジンのクローラーにインデックスさせたくない場所を伝えるファイルです。 なお、インデックスを禁止する指示ではなく、クロールを禁止する指示なので注意が必要です。

なお、管理画面のURLも追加した方が良いと思われるかもしれませんが、管理画面のURLを第三者に知られてしまうことになるので、書かない方が良いです。

修正ファイル

EC-CUBEインストールディレクトリ/robots.txt

User-agent: *
Disallow: /*.csv$
Disallow: /mypage/*
Disallow: /cart
Disallow: /shopping/*
Disallow: /entry

Sitemap: https://ホスト名/sitemap.xml

Google Search Console

Google Search Consoleとは Googleが無料で提供している、サイトの検索パフォーマンスを管理・改善するツールです。

PageSpeed Insights

PageSpeed Insightsとは、Googleが提供する、Webページの表示速度やパフォーマンスを分析・採点する無料ツールです。

https://pagespeed.web.dev/

各項目のスコアが90点以上になるように調整するようにしてください。 なお、共有レンタルサーバーなどでEC-CUBEを運用されている場合は、サーバーの応答スピードが上がらないことが多いので、クラウドなどの環境に移設することも検討するのも良いと思います。