Shopify: Како да програмирате динамични наслови на теми и мета описи за оптимизација со помош на Liquid

Течност за шаблон Shopify - приспособете го насловот за оптимизација и мета-описот

Ако ги читавте моите написи во последните неколку месеци, ќе забележите дека споделувам многу повеќе за е-трговија, особено во однос на Shopify. Мојата фирма гради високо приспособена и интегрирана Shopify Плус страница за клиент. Наместо да трошиме месеци и десетици илјади долари за изградба на тема од почеток, ние разговаравме со клиентот да ни дозволи да користиме добро изградена и поддржана тема која е испробана и тестирана. Отидовме со Воки, повеќенаменска тема Shopify која има еден тон способности.

Сè уште беа потребни месеци развој за да се вклучи флексибилноста што ни требаше врз основа на истражување на пазарот и повратни информации од нашите клиенти. Во сржта на имплементацијата беше дека Closet52 е страница за е-трговија директно до потрошувачите каде жените ќе можат лесно да купувајте фустани преку Интернет.

Бидејќи Wokiee е повеќенаменска тема, една област на која сме многу фокусирани е оптимизацијата на пребарувачите. Со текот на времето, веруваме дека органското пребарување ќе биде најниската цена по купување и купувачите со најголема намера за купување. Во нашето истражување, идентификувавме дека жените купуваат фустани со 5 клучни влијателни одлуки:

  • Стилови на фустани
  • Бои на фустани
  • Цени на фустани
  • Бесплатна испорака
  • Враќање без проблеми

Насловите и мета описите се критични со цел вашата содржина да биде индексирана и правилно прикажана. Значи, се разбира, сакаме ознака за наслов и мета описи кои ги имаат тие клучни елементи!

  • на наслов таг во насловот на вашата страница е од клучно значење за да се осигурате дека вашите страници се правилно индексирани за релевантните пребарувања.
  • на мета опис се прикажува на страниците со резултати од пребарувачот (SERPs) што обезбедува дополнителни информации што го мами корисникот на пребарување да кликне.

Предизвикот е што 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

Кога ја ползевме страницата, забележавме дека секоја страница со шаблон за тема што беше повикана ги повторува поставките за оптимизација на почетната страница. Сакавме да додадеме различен мета-опис во зависност од тоа дали страницата е почетна страница, страница со збирки или страница за вистински производ.

Ако не сте сигурни како е името на вашиот шаблон, само додадете 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 }}">

Резултатот е динамичен, сеопфатен сет на наслови и мета описи за секаков вид шаблон или детална страница на производот. Одејќи напред, најверојатно ќе го рефакторирам кодот користејќи изјави за случаи и ќе го организирам малку подобро. Но, засега, тој произведува многу поубаво присуство на страниците со резултати од пребарувачот.

Патем, ако сакате голем попуст… би сакале да ја тестирате страницата со купон со попуст од 30%, користете код HIGHBRIDGE при одјавување.

Купувајте фустани сега

Откривање: Јас сум партнер за Shopify Themeforest и јас ги користам тие врски во оваа статија. Closet52 е клиент на мојата фирма, Highbridge. Ако сакате помош во развојот на вашето присуство во е-трговија користејќи Shopify, ве молиме контактирајте не.