Shopify: Как да програмирате динамични заглавия на теми и мета описания за SEO с помощта на Liquid

Shopify Template Liquid - Персонализирайте SEO заглавие и мета описание

Ако сте чели статиите ми през последните няколко месеца, ще забележите, че споделям много повече за електронната търговия, особено по отношение на Shopify. Моята фирма изгражда силно персонализирана и интегрирана ShopifyPlus сайт за клиент. Вместо да харчим месеци и десетки хиляди долари за изграждане на тема от нулата, ние уговорихме клиента да ни позволи да използваме добре изградена и поддържана тема, която беше изпробвана и тествана. Отидохме с Уоки, многофункционална Shopify тема, която има много възможности.

Все още бяха необходими месеци на разработка, за да включим гъвкавостта, от която се нуждаехме, въз основа на пазарни проучвания и обратна връзка на нашите клиенти. В основата на внедряването беше, че Closet52 е сайт за електронна търговия директно към потребителите, където жените биха могли лесно да купувайте рокли онлайн.

Тъй като Wokiee е многофункционална тема, една област, върху която сме силно фокусирани, е оптимизацията за търсачки. С течение на времето вярваме, че органичното търсене ще бъде най-ниската цена на придобиване и купувачите с най-голямо намерение за покупка. В нашето изследване установихме, че жените пазаруват рокли с 5 ключови фактори, влияещи върху решенията:

  • Стилове на рокли
  • Цветове на рокли
  • Цени на рокли
  • БЕЗПЛАТНА ДОСТАВКА ПРИ
  • Безпроблемно връщане

Заглавията и мета описанията са критични при индексиране и показване на съдържанието ви правилно. Така че, разбира се, искаме заглавен маркер и мета описания, които имат тези ключови елементи!

  • Най- етикет на заглавието в заглавието на вашата страница е от решаващо значение, за да гарантирате, че страниците ви са индексирани правилно за търсенията, които са уместни.
  • Най- Мета Описание се показва в страниците с резултати от търсачките (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>

Кодът се разгражда по следния начин:

  • Page 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 }}">

Резултатът е динамичен, изчерпателен набор от заглавия и мета описания за всякакъв тип шаблон или подробна продуктова страница. Продължавайки напред, най-вероятно ще преструктурирам кода, използвайки изявления за случаи и ще го организирам малко по-добре. Но засега той произвежда много по-приятно присъствие в страниците с резултати от търсачките.

Между другото, ако искате страхотна отстъпка... ще се радваме да изпробвате сайта с 30% отстъпка от купон, използвайте код HIGHBRIDGE при плащане.

Пазарувайте рокли сега

Разкриване: Аз съм филиал на Shopify и Themeforest и използвам тези връзки в тази статия. Closet52 е клиент на моята фирма, Highbridge. Ако искате да съдействате за развитието на вашето присъствие в електронната търговия с помощта на Shopify, моля !.