Shopify:如何使用 Liquid 為 SEO 編寫動態主題標題和元描述

Shopify Template Liquid - 自定義 SEO 標題和元描述

如果您過去幾個月一直在閱讀我的文章,您會注意到我分享了更多關於電子商務的內容,尤其是關於電子商務的內容 Shopify. 我的公司一直在建立一個高度定制和集成的 Shopify 加 客戶的網站。 我們沒有花費數月和數万美元從頭開始構建主題,而是說服客戶允許我們使用經過嘗試和測試的精心構建和支持的主題。 我們和 沃基,具有大量功能的多功能 Shopify 主題。

根據市場研究和客戶的反饋,它仍然需要數月的開發才能整合我們所需的靈活性。 實施的核心是 Closet52 是一個直接面向消費者的電子商務網站,女性可以在其中輕鬆地 網上買衣服.

因為 Wokiee 是一個多用途主題,我們高度關注的一個領域是搜索引擎優化。 隨著時間的推移,我們相信自然搜索將成為每次購買成本最低和購買意願最高的購物者。 在我們的研究中,我們發現女性在購買連衣裙時有 5 個關鍵的決策影響因素:

  • 連衣裙的款式
  • 連衣裙的顏色
  • 連衣裙的價格
  • 免運費
  • 無憂退貨

標題和元描述至關重要 使您的內容編入索引並正確顯示。 所以,當然,我們想要一個具有這些關鍵元素的標題標籤和元描述!

  • 標題標籤 在您的頁面標題中,對於確保您的頁面被正確索引以進行相關搜索至關重要。
  • meta描述 顯示在搜索引擎結果頁面 (SERP) 中,該頁面提供了吸引搜索用戶點擊的附加信息。

挑戰在於 Shopify 經常在不同的頁面模板(主頁、系列、產品等)之間共享標題和元描述。因此,我必須編寫一些邏輯來正確地動態填充標題和元描述。

優化您的 Shopify 頁面標題

Shopify 的主題語言很流暢,而且相當不錯。 我不會深入了解語法的所有細節,但您可以非常輕鬆地動態生成頁面標題。 在此您必須記住的一件事是產品具有變體……因此將變體合併到您的頁面標題中意味著您必須遍歷選項並在模板為 產品 模板。

這是一個標題的示例 格紋毛衣連衣裙.

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

這是產生該結果的代碼:

{%- capture seo_title -%}
  {{- page_title -}}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}{{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}{%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " on sale today for " }}{{ 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 -%}{{ my_separator }}{{ shop.name }}
{%- endcapture -%}
  
<title>{{ seo_title | strip_newlines }}</title>

代碼分解如下:

  • 頁面標題 – 首先合併實際的頁面標題……無論模板如何。
  • 標籤 – 通過加入與頁面關聯的標籤來合併標籤。
  • 產品顏色 – 遍歷顏色選項並構建一個以逗號分隔的字符串。
  • 元字段 – 此 Shopify 實例將著裝長度作為我們希望包含的元字段。
  • 價錢 – 包括第一個變體的價格。
  • 店鋪名稱 – 在標題末尾添加商店名稱。
  • 分離器 – 而不是重複分隔符,我們只是將其作為一個字符串賦值並重複它。 這樣,如果我們決定將來更改該符號,它只會在一個地方。

優化您的 Shopify 頁面元描述

當我們抓取網站時,我們注意到任何被調用的主題模板頁面都在重複主頁 SEO 設置。 我們想根據頁面是主頁、收藏頁面還是實際產品頁面添加不同的元描述。

如果您不確定您的模板名稱是什麼,只需在您的模板中添加一個 HTML 註釋 theme.liquid 文件,您可以查看頁面的來源以識別它。

<!-- 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 hassle-free 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 == 'product' -%}
        {{ " On sale today for " }}{{ product.variants[0].price | money }}!
      {%- endif -%}
   {%- endif -%}
  {%- endif -%}
  {{ " Always FREE 2-day shipping and hassle-free returns at " }}{{ shop.name | strip }}.
{%- endcapture -%}
  
<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

結果是任何類型的模板或詳細產品頁面的動態、全面的標題和元描述集。 展望未來,我很可能會使用 case 語句重構代碼並更好地組織它。 但就目前而言,它在搜索引擎結果頁面中的表現要好得多。

順便說一句,如果你想要一個很大的折扣......我們希望你用 30% 的優惠券來測試這個網站,使用代碼 HIGHBRIDGE 退房時。

立即選購連衣裙

披露:我是的會員 ShopifyThemeforest 我在本文中使用了這些鏈接。 Closet52 是我公司的一個客戶, Highbridge. 如果您在使用 Shopify 發展電子商務方面需要幫助,請 請點擊這裡,聯繫我們 (contact us).