Shopify:如何使用 Liquid 为 SEO 编写动态主题标题和元描述

Shopify Template Liquid - 自定义 SEO 标题和元描述

如果您过去几个月一直在阅读我的文章,您会注意到我分享了更多关于电子商务的内容,尤其是关于电子商务的内容 Shopify. 我的公司一直在建立一个高度定制和集成的 Shopify Plus 客户的网站。 我们没有花费数月和数万美元从头开始构建主题,而是说服客户允许我们使用经过试验和测试的精心构建和支持的主题。 我们和 Wokiee,具有大量功能的多功能 Shopify 主题。

根据市场研究和客户的反馈,它仍然需要数月的开发才能整合我们所需的灵活性。 实施的核心是 Closet52 是一个直接面向消费者的电子商务网站,女性可以在其中轻松地 网上买衣服.

因为 Wokiee 是一个多用途主题,我们高度关注的一个领域是搜索引擎优化。 随着时间的推移,我们相信自然搜索将成为每次购买成本最低和购买意愿最高的购物者。 在我们的研究中,我们发现女性在购买连衣裙时有 5 个关键的决策影响因素:

  • 连衣裙的款式
  • 连衣裙的颜色
  • 连衣裙的价格
  • 免费送货
  • 无忧退货

标题和元描述至关重要 使您的内容编入索引并正确显示。 所以,当然,我们想要一个具有这些关键元素的标题标签和元描述!

  • CSZ 标题标签 在您的页面标题中,对于确保您的页面被正确索引以进行相关搜索至关重要。
  • CSZ 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 发展电子商务方面需要帮助,请 立即联系.