1. Top
  2. ブログ一覧
  3. 【Shopify Tips】テーマにSEOメタデータを追加したい
Eコマース

【Shopify Tips】テーマにSEOメタデータを追加したい

公開日

2024.12.04

【Shopify Tips】テーマにSEOメタデータを追加したいのサムネイル

ShopifyのECサイトを運営している中で、「SEOを強化したい」という要望を持つ方は多いでしょう。特に、Shopifyのテーマに検索エンジン最適化（SEO）のメタデータを組み込むことで、検索結果におけるストアの可視性を向上させることができます。 そのためには、以下の3つの主要な要素を考慮する必要があります。

  1. タイトルタグ
  2. メタディスクリプション
  3. 正規URL（Canonical URL）

これらのSEOメタデータは、HTMLの<head>要素内に含める必要があります。

ユースケース

  • カスタムテーマの開発：独自のShopifyテーマを開発する際に、SEOメタデータを適切に設定することで、検索エンジンでの表示順位を向上させることができます。
  • 既存テーマのSEO強化：既存のテーマにSEOメタデータを追加または修正し、検索エンジンでのパフォーマンスを改善することができます。
  • 重複コンテンツの回避：正規URLを設定することで、同一コンテンツが複数のURLで存在する場合のSEOペナルティを防ぐことができます。

利用API・関数

解説

ShopifyのテーマにSEOメタデータを追加することで、検索エンジンがページの内容を正確に理解し、適切にインデックスすることが可能になります。
これにより、検索結果での表示順位が向上し、潜在的な顧客からのアクセス増加が期待できます。以下に、各要素の実装方法を詳しく解説します。

タイトルタグ

<title>タグは、検索エンジンがページのタイトルを読み取るために使用されます。
多くのページでは、管理画面でタイトルを設定でき、Liquidのpage_titleオブジェクトを使用してこのタイトルにアクセスできます。

<title>{{ page_title }}</title>

メタディスクリプション

<meta>タグを使用して、検索エンジンがページの説明を読み取ることができます。
多くのページでは、管理画面で説明を設定でき、Liquidのpage_descriptionオブジェクトを使用してこの説明にアクセスできます。

<meta name="description" content="{{ page_description }}">

正規URL（Canonical URL）

正規URLを指定することで、検索エンジンに対して特定のページの正しいURLを示すことができます。
これにより、重複コンテンツの問題を防ぐことができます。Liquidのcanonical_urlオブジェクトを使用して、正規URLを指定します。

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

サンプルコード

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

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

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

注意事項

  • 動的ページの対応：コレクションやブログ記事など、動的に生成されるページでは、適切なメタデータが表示されるように、各テンプレートでpage_titleやpage_descriptionが正しく設定されていることを確認してください。
  • デフォルト値の設定：一部のページでメタデータが設定されていない場合に備えて、デフォルトのタイトルや説明を設定することを検討してください。
  • Liquidの使用：Liquidテンプレートエンジンを使用しているため、変数やオブジェクトが正しく呼び出されていることを確認し、エラーを防止してください。

参考文献