Shopify:Liquidを使用してSEOの動的テーマタイトルとメタディスクリプションをプログラムする方法

Shopifyテンプレートリキッド-SEOタイトルとメタ説明をカスタマイズする

過去数か月にわたって私の記事を読んでいると、特にeコマースに関して私がもっと多くのことを共有していることに気付くでしょう。 Shopifyサービス。 私の会社は高度にカスタマイズされ統合されたものを構築してきました Shopify プラス クライアントのためのサイト。 テーマをゼロから構築するために数か月と数万ドルを費やすのではなく、私たちはクライアントに話しかけて、試行錯誤された十分に構築されサポートされたテーマを使用できるようにしました。 一緒に行きました ウーキー、たくさんの機能を備えた多目的Shopifyテーマ。

市場調査とクライアントのフィードバックに基づいて必要な柔軟性を組み込むには、まだ数か月の開発が必要でした。 実装の中核は、Closet52が、女性が簡単に利用できる直接販売のeコマースサイトであるということでした。 オンラインでドレスを購入する.

Wokieeは多目的テーマであるため、私たちが非常に重点を置いている分野の5つは、検索エンジン最適化です。 時間の経過とともに、オーガニック検索は獲得あたりのコストが最も低くなり、購入意欲が最も高い買い物客になると考えています。 私たちの調査では、女性がXNUMXつの主要な意思決定の影響力を持つドレスを購入していることを確認しました。

  • ドレスのスタイル
  • ドレスの色
  • ドレスの価格
  • 送料無料
  • 手間のかからない返品

タイトルとメタディスクリプションは重要です コンテンツのインデックスを作成して適切に表示する場合。 したがって、もちろん、これらの重要な要素を持つタイトルタグとメタディスクリプションが必要です。

  • 世界 タイトルタグ ページの見出しは、関連性の検索のためにページが適切にインデックス付けされるようにするために重要です。
  • 世界 メタ記述 検索エンジンの結果ページ(SERP)に表示され、検索ユーザーにクリックスルーを促す追加情報を提供します。

課題は、Shopifyがホーム、コレクション、製品などのさまざまなページテンプレート間でタイトルとメタ説明を共有することが多いことです。そのため、タイトルとメタ説明を適切に動的に入力するためのロジックを作成する必要がありました。

Shopifyページタイトルを最適化する

Shopifyのテーマ言語は 液体 そしてそれはかなり良いです。 構文の詳細については詳しく説明しませんが、ページタイトルを動的に生成するのは非常に簡単です。 ここで注意しなければならないことのXNUMXつは、製品にはバリエーションがあるということです。したがって、ページタイトルにバリエーションを組み込むと、オプションをループして、テンプレートが BOX テンプレート。

これがタイトルの例です チェック柄のセータードレス.

<title>Plaid Sweater Dress on sale today for $78.00 » Multi Knee-Length » Closet52</title>

そして、その結果を生成するコードは次のとおりです。

{%- capture seo_title -%}
    {%- if template == "collection" -%}{{ "Order " }}{%- endif -%}
    {{- page_title -}}
    {%- if template == "collection" -%}{{ " Online" }}{%- endif -%}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}
      {%- if template == 'blog' -%} 
      {{ " Articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | capitalize | remove: "&quot;" -}}{%- endif -%}
      {%- else -%}
      {{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}
      {%- endif -%}
    {%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " only " }}{{ product.variants[0].price | money }}{{ my_separator }}{% for product_option in product.options_with_values %}{% if product_option.name == 'Color' %}{{ product_option.values | join: ', ' }}{% endif %}{% endfor %}{% if product.metafields.my_fields.dress_length != blank %} {{ product.metafields.my_fields.dress_length }}{%- endif -%}{%- endif -%}
    {% if template == "collection" %}{{ my_separator }}Free Shipping, No-Hassle Returns{% endif %}{{ my_separator }}{{ shop.name }}
  {%- endcapture -%}

<title>{{ seo_title | strip_newlines }}</title>

コードは次のように分類されます。

  • ページタイトル –テンプレートに関係なく、最初に実際のページタイトルを組み込みます。
  • タグ –ページに関連付けられたタグを結合してタグを組み込みます。
  • 製品の色 –カラーオプションをループして、コンマ区切りの文字列を作成します。
  • メタフィールド –このShopifyインスタンスには、含めるメタフィールドとしてドレスの長さがあります。
  • 価格 –最初のバリアントの価格を含めます。
  • ショップ名 –タイトルの最後にショップの名前を追加します。
  • セパレータ –セパレータを繰り返すのではなく、文字列の割り当てにして繰り返します。 そうすれば、将来そのシンボルを変更することにした場合、それはXNUMXか所だけになります。

Shopifyページのメタ説明を最適化する

サイトをクロールすると、呼び出されたテーマテンプレートページがホームページのSEO設定を繰り返していることに気付きました。 ページがホームページ、コレクションページ、実際の商品ページのいずれであるかに応じて、異なるメタディスクリプションを追加したかったのです。

テンプレート名がわからない場合は、HTMLメモを追加してください。 テーマ。リキッド ファイルを作成すると、ページのソースを表示して識別できます。

<!-- Template: {{ template }} -->

これにより、サイトのメタディスクリプションを使用したすべてのテンプレートを識別できるようになり、テンプレートに基づいてメタディスクリプションを変更できるようになりました。

上記の製品ページに必要なメタディスクリプションは次のとおりです。

<meta name="description" content="Turn heads in this classic hunter green plaid sweater dress. Modern updates make it a must-have: the stand-up neckline, three-quarter sleeves and the perfect length. On sale today for $78.00! Always FREE 2-day shipping and no-hassle returns at Closet52.">

そのコードは次のとおりです。

  {%- capture seo_metadesc -%}
  	{%- if page_description -%}
  	  {%- if template == 'list-collections' -%}
  			{{ "Find a beautiful dress for your next occasion. Here are all of our beautiful dress collections." | strip }}
      {%- else -%}
          {{- page_description | strip | escape -}} 
          {%- if template == 'blog' -%}
          {{ " Here are our articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | downcase | remove: "&quot;" -}}{%- endif -%}.
          {%- endif -%}
          {%- if template == 'product' -%}
  			{{ " Only " }}{{ product.variants[0].price | money }}!
  		  {%- endif -%}
      {%- endif -%}   	
  	{%- endif -%}
    {%- if template == 'collection' -%}
            {{ "Find a beautiful dress for your next occasion by color, length, or size." | strip }}
    {%- endif -%}
    {{ " Always FREE 2-day shipping and no-hassle returns at " }}{{ shop.name | strip }}.
  {%- endcapture -%}

<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

その結果、あらゆるタイプのテンプレートまたは詳細な製品ページの動的で包括的なタイトルとメタ説明のセットが作成されます。 今後は、caseステートメントを使用してコードをリファクタリングし、もう少し整理します。 しかし今のところ、それは検索エンジンの結果ページではるかに良い存在感を生み出しています。

ちなみに、大幅な割引をご希望の場合は、30%オフのクーポンでサイトをテストして、コードを使用してください。 HIGHBRIDGE チェックアウトするとき。

今すぐドレスを購入する

開示:私はのアフィリエイトです Shopifyサービス 及び Themeforest この記事ではこれらのリンクを使用しています。 Closet52は私の会社のクライアントです。 Highbridge。 Shopifyを使用してeコマースプレゼンスを開発するための支援が必要な場合は、 弊社までお問い合わせください。.