Схопифи: Како програмирати динамичке наслове тема и мета описе за СЕО користећи Ликуид

Схопифи Темплате Ликуид - Прилагодите СЕО наслов и мета опис

Ако сте читали моје чланке последњих неколико месеци, приметићете да сам поделио много више о е-трговини, посебно у вези са Схопифи. Моја фирма је градила веома прилагођено и интегрисано Схопифи Плус сајт за клијента. Уместо да трошимо месеце и десетине хиљада долара на прављење теме од нуле, наговорили смо клијента да нам дозволи да користимо добро изграђену и подржану тему која је испробана и тестирана. Ишли смо са Вокиее, вишенаменска Схопифи тема која има мноштво могућности.

И даље су били потребни месеци развоја да бисмо уградили флексибилност која нам је била потребна на основу истраживања тржишта и повратних информација наших клијената. У основи имплементације било је то што је Цлосет52 сајт за е-трговину директно за потрошаче где би жене могле лако да купити хаљине на мрежи.

Пошто је Вокиее вишенаменска тема, једна област на коју смо веома фокусирани је оптимизација претраживача. Временом, верујемо да ће органска претрага бити најнижа цена по куповини, а купци са највећом намером да купе. У нашем истраживању смо идентификовали да жене купују хаљине са 5 кључних фактора који утичу на доношење одлука:

  • Стилови хаљина
  • Боје хаљина
  • Цене хаљина
  • Бесплатна достава
  • Без муке повратак

Наслови и мета описи су критични да се ваш садржај индексира и правилно прикаже. Дакле, наравно, желимо ознаку наслова и мета описе који имају те кључне елементе!

  • титле таг у заглављу ваше странице је кључно да бисте осигурали да су ваше странице исправно индексиране за релевантне претраге.
  • Мета опис се приказује на страницама резултата претраживача (СЕРП) који пружа додатне информације које подстичу корисника претраге да кликне на њих.

Изазов је у томе што Схопифи често дели наслове и мета описе у различитим шаблонима страница – почетној страници, колекцијама, производима итд. Дакле, морао сам да напишем неку логику да бих динамички правилно попуњавао наслове и мета описе.

Оптимизујте свој Схопифи наслов странице

Схопифи-јев језик тема је течан и прилично је добар. Нећу улазити у све детаље синтаксе, али можете динамички генерисати наслов странице прилично лако. Једна ствар коју овде морате имати на уму је да производи имају варијанте … тако да укључивање варијанти у наслов ваше странице значи да морате да прођете кроз опције и динамички изградите стринг када је шаблон производ темплате.

Ево примера наслова за а карирана џемпер хаљина.

<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>

Код се рашчлањује овако:

  • Наслов странице – прво укључите стварни наслов странице… без обзира на шаблон.
  • Ознаке – уградити ознаке спајањем ознака повезаних са страницом.
  • Боје производа – прођите кроз опције боја и направите низ раздвојен зарезима.
  • Метафиелдс – ова Схопифи инстанца има дужину хаљине као метапоље које желимо да укључимо.
  • Цена – укључује цену прве варијанте.
  • Назив продавнице – додајте назив радње на крају наслова.
  • сепаратор – уместо да понављамо сепаратор, само га правимо као низ низова и понављамо га. На тај начин, ако одлучимо да променимо тај симбол у будућности, то је само на једном месту.

Оптимизујте свој мета опис Схопифи странице

Када смо индексирали сајт, приметили смо да било која страница шаблона теме која је била позвана понавља СЕО подешавања почетне странице. Желели смо да додамо другачији мета опис у зависности од тога да ли је страница била почетна страница, страница колекција или стварна страница производа.

Ако нисте сигурни које је име вашег шаблона, само додајте ХТМЛ напомену у свој тхеме.ликуид датотеку и можете погледати извор странице да бисте је идентификовали.

<!-- 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 приликом одјављивања.

Купите хаљине одмах

Откривање података: Ја сам придружени члан Схопифи Тхемефорест и користим те везе у овом чланку. Цлосет52 је клијент моје фирме, Highbridge. Ако желите помоћ у развоју вашег присуства у е-трговини користећи Схопифи, молимо вас Контактирајте нас.