Shopifyテーマ開発Tips〜テーマのSEO対策〜
2024.01.16 2024.01.17

Shopifyテーマの基本的なSEO対策の実装方法

川島 さやか / エンジニア

本記事は私達の会社で作ったShopifyテーマ開発入門書『Hello Shopify Themes Shopifyテーマ開発ガイド』からの抜粋です。

SEO（検索エンジン最適化）も、実務においては欠かせない領域です。
テーマストアでの販売要件にはSEO対応も含まれているので、Dawnやサードパーティ製のテーマを用いる分にはデフォルトのままでも大きな問題はありません。SEOをより詳細に管理できるアプリも販売されているので、そちらの利用を検討しても良いでしょう。
　
オリジナルテーマの開発では、DawnのSEO関連記述を踏襲することをおすすめします。
特に次の点に注目してください。

  • タイトル要素
  • メタディスクリプション要素
  • カノニカルURL
  • 構造化データによるGoogleリッチスニペット表示対応

タイトル要素

Dawnの <title> 要素は次のように記述されています。

<title>
  {{ page_title }}
  {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
  {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%}
  {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}
</title>

{{ page_title }} は、商品・固定ページ・コレクション・ブログ・ブログ記事の管理画面上で設定されたタイトルを出力するLiquidオブジェクトです。ストアのトップページでは、ストア名称を表示します。
加えて、コレクションやブログ一覧ページなどでタグ絞り込みやページ分割が成された場合には、現在のタグとページ数がタイトル内に追加されます。

メタディスクリプション要素

Dawnのメタディスクリプション要素は、 <title> に比べればシンプルな作りです。
Liquidオブジェクト {{ page_description }} は、商品・固定ページ・コレクション・ブログ・ブログ記事の管理画面上で設定された説明文を出力します。ストアのトップページにおける説明文は、「オンラインストア」＞「各種設定」ページから設定可能です。

{% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
{% endif %}

カノニカルURL

{{ canonical_url }} については、「4-4. テーマファイル解説」でも言及しましたね。現在のページの正規URLを自動的に出力するLiquidオブジェクトです。

<link rel="canonical" href="{{ canonical_url }}">

たとえば、バリエーション選択が成された商品ページのURLは、次のようにパラメータが付与されます。

https://nsw-sample-store.myshopify.com/products/dawn-wildflower?variant=42240097157337

このままでは、通常のページ https://nsw-sample-store.myshopify.com/products/dawn-wildflower と、バリエーションパラメータを付与したページ https://nsw-sample-store.myshopify.com/products/dawn-wildflower?variant=42240097157337 、どちらのURLを検索インデックスに登録するべきか、検索エンジンは判断できません。
　
{{ canonical_url }} の記述を加えれば、次のようにカノニカルURLが指定され、検索エンジンに該当ページの正規URLを通知することができます。

<link rel="canonical" href="https://nsw-sample-store.myshopify.com/products/dawn-wildflower">

通常はこれで問題ありませんが、コレクションページなどのフィルタリングにアプリを追加する場合、アプリによってはURL正規化の処理が甘いときがあるので、動作検証時によく確認してください。

構造化データ

Dawnでは、JSON-LD形式の構造化データによって、Googleリッチスニペット表示への対応が成されています。Liquid内の <script type="application/ld+json"> 要素で記述されているのが構造化データなので、カスタマイズの際には誤って削除しないように注意してください。

Dawnでは次のページに構造化データの記述が含まれています。これらのページ以外にも構造化データを追加したければ、Googleの構造化データに関するドキュメントを元に追記を行ってください。

  • 商品ページ
  • ブログ記事ページ
  • サイト全体（Organization、website、SearchAction情報）

robots.txt

Shopifyはデフォルトで robots.txt を生成しています。現在ストアに適用されている robots.txt の内容は、次のURLで確認可能です。

https://ストアドメイン.myshopify.com/robots.txt

デフォルトの robots.txt にカスタマイズを加えるには、 templates/robots.txt.liquid ファイルを利用します。元々テーマには含まれていないファイルなので、自身で作成してください。 robots.txt.liquid はテンプレートファイルですが、OS2.0テーマでもLiquid形式で作成する必要があります。JSON形式には対応していません。
　
具体的な記述例は、公式ドキュメントのサンプルを参照してください。

Customize robots.txt
https://shopify.dev/themes/seo/robots-txt
私達の会社で制作したShopifyテーマ開発入門書のご購入はこちらから。
完売後の増刷予定は現時点ではございません。印刷書籍をご希望の方は、ぜひお早めにお迎えください。

  • 著者：川島さやか
  • 出版：non-standard world, Inc.
  • 判型・ページ数：B5判・248ページ
  • 価格：3,850円（税込）※PDF版同梱、送料無料

特集ページへ

記事カテゴリー