Shopify: Як запраграмаваць дынамічныя назвы тэм і мета-апісання для SEO з дапамогай Liquid

Shopify Template Liquid - Наладзьце назву SEO і метаапісанне

Калі вы чыталі мае артыкулы ў апошнія некалькі месяцаў, вы заўважыце, што я шмат больш распавядаю пра электронную камерцыю, асабліва ў дачыненні да Shopify. Мая фірма стварала вельмі наладжаную і інтэграваную Shopify Plus сайт для кліента. Замест таго, каб марнаваць месяцы і дзесяткі тысяч долараў на стварэнне тэмы з нуля, мы ўгаварылі кліента дазволіць нам выкарыстоўваць добра створаная і падтрымоўваная тэма, якая была апрабавана. Мы пайшлі з Вікі, шматфункцыянальная тэма Shopify, якая мае масу магчымасцяў.

Для ўключэння патрэбнай нам гнуткасці на аснове даследаванняў рынку і водгукаў нашых кліентаў спатрэбіліся месяцы распрацоўкі. У аснове рэалізацыі было тое, што Closet52 - гэта сайт электроннай камерцыі непасрэдна для спажыўцоў, дзе жанчыны змогуць лёгка купіць сукенкі ў Інтэрнэце.

Паколькі Wokiee з'яўляецца шматфункцыянальнай тэмай, адна з напрамкаў, на якой мы вельмі засяроджаны, - гэта пошукавая аптымізацыя. З часам мы лічым, што арганічны пошук будзе самым нізкім коштам за набыццё, а пакупнікі з найвышэйшым намерам купіць. У нашым даследаванні мы выявілі, што жанчыны купляюць сукенкі з 5 ключавымі фактарамі, якія ўплываюць на прыняцце рашэнняў:

  • Фасоны сукенак
  • Колеру сукенак
  • Цэны на сукенкі
  • бясплатная дастаўка
  • Вяртанне без праблем

Загалоўкі і метаапісанні маюць вырашальнае значэнне на тое, каб ваш кантэнт праіндэксаваны і правільна адлюстроўваўся. Так што, вядома, мы хочам, каб тэг title і мета-апісання мелі гэтыя ключавыя элементы!

  • ,en тэг загалоўка у загалоўку вашай старонкі мае вырашальнае значэнне для таго, каб вашы старонкі індэксавалі належным чынам для пошуку па рэлевантнасці.
  • ,en мета апісанне адлюстроўваецца на старонках вынікаў пошукавых сістэм (SERPs), што дае дадатковую інфармацыю, якая заахвочвае карыстальніка пошуку клікнуць.

Праблема заключаецца ў тым, што Shopify часта падзяляе назвы і мета-апісання ў розных шаблонах старонак - дома, калекцыях, прадуктах і г.д. Такім чынам, мне прыйшлося напісаць логіку, каб дынамічна правільна запаўняць загалоўкі і мета-апісання.

Аптымізуйце назву старонкі Shopify

Мова тэмы Shopify вадкая, і гэта даволі добра. Я не буду ўдавацца ва ўсе дэталі сінтаксісу, але вы можаце даволі лёгка дынамічна генераваць назву старонкі. Адна рэч, якую вы павінны мець на ўвазе, гэта тое, што прадукты маюць варыянты ... таму ўключэнне варыянтаў у назву вашай старонкі азначае, што вам трэба перабіраць параметры і дынамічна будаваць радок, калі шаблон з'яўляецца прадукт шаблон.

Вось прыклад назвы для a сукенка швэдар у клетку.

<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 пры выездзе.

Купляйце сукенкі зараз

Раскрыццё інфармацыі: я з'яўляюся філіялам Shopify і ThemeForest і я выкарыстоўваю гэтыя спасылкі ў гэтым артыкуле. Closet52 - кліент маёй фірмы, Highbridge. Калі вы хочаце дапамагчы ў развіцці вашай прысутнасці электроннай камерцыі з дапамогай Shopify, калі ласка звяжыцеся з намі.