Shopify: Ako programovať názvy dynamických tém a meta popisy pre SEO pomocou Liquid

Shopify Template Liquid – Prispôsobte si názov SEO a meta popis

Ak čítate moje články za posledných pár mesiacov, všimnete si, že o elektronickom obchode hovorím oveľa viac, najmä pokiaľ ide o Shopify. Moja firma buduje vysoko prispôsobené a integrované ShopifyPlus stránky pre klienta. Namiesto toho, aby sme míňali mesiace a desiatky tisíc dolárov na vytvorenie témy od začiatku, prehovorili sme klienta, aby nám umožnil použiť dobre zostavenú a podporovanú tému, ktorá bola vyskúšaná a testovaná. Išli sme s Wokiee, viacúčelová téma Shopify, ktorá má množstvo možností.

Stále si to vyžadovalo mesiace vývoja, aby sme začlenili flexibilitu, ktorú sme potrebovali na základe prieskumu trhu a spätnej väzby od našich klientov. Základom implementácie bolo, že Closet52 je webová stránka elektronického obchodu priamo pre spotrebiteľov, kde by ženy mohli jednoducho kúpiť šaty online.

Pretože Wokiee je viacúčelová téma, jednou z oblastí, na ktorú sa veľmi zameriavame, je optimalizácia pre vyhľadávače. V priebehu času veríme, že organické vyhľadávanie bude mať najnižšiu cenu za akvizíciu a kupujúci s najvyšším úmyslom nakupovať. V našom výskume sme zistili, že ženy nakupujú šaty s 5 kľúčovými faktormi ovplyvňujúcimi rozhodovanie:

  • Štýly šiat
  • Farby šiat
  • Ceny šiat
  • Doprava zdarma
  • Bezproblémové vrátenie tovaru

Názvy a meta popisy sú kritické pri správnom indexovaní a zobrazovaní vášho obsahu. Takže, samozrejme, chceme značku názvu a meta popisy, ktoré majú tieto kľúčové prvky!

  • و značka názvu v nadpise vašej stránky je rozhodujúce, aby ste sa uistili, že vaše stránky sú správne indexované pre relevantné vyhľadávania.
  • و Meta Popis sa zobrazuje na stránkach s výsledkami vyhľadávacieho nástroja (SERP), ktoré poskytujú dodatočné informácie, ktoré lákajú používateľa vyhľadávania na prekliknutie.

Výzvou je, že Shopify často zdieľa názvy a metapopisy v rôznych šablónach stránok – domov, kolekcie, produkty atď. Musel som teda napísať nejakú logiku, aby som názvy a metapopisy správne dynamicky naplnil.

Optimalizujte názov svojej stránky Shopify

Jazyk tém Shopify je tekutý a je celkom dobrý. Nebudem sa zaoberať všetkými podrobnosťami syntaxe, ale názov stránky môžete dynamicky vygenerovať celkom jednoducho. Jedna vec, ktorú musíte mať na pamäti, je, že produkty majú varianty... takže začlenenie variantov do názvu stránky znamená, že musíte prechádzať možnosťami a dynamicky zostavovať reťazec, keď je šablóna produkt šablóna.

Tu je príklad názvu pre a kárované svetrové šaty.

<title>Plaid Sweater Dress on sale today for $78.00 » Multi Knee-Length » Closet52</title>

A tu je kód, ktorý produkuje tento výsledok:

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

Kód sa rozpadá takto:

  • Názov stránky – najprv začleňte skutočný názov stránky... bez ohľadu na šablónu.
  • Tagy – začleniť značky spojením značiek spojených so stránkou.
  • Farby produktu – prezrite si farebné možnosti a vytvorte reťazec oddelený čiarkami.
  • Metapolia – táto inštancia Shopify má dĺžku šiat ako metapole, ktoré chceme zahrnúť.
  • Cena – vrátane ceny prvého variantu.
  • Názov obchodu – pridajte názov obchodu na koniec nadpisu.
  • oddeľovač – namiesto opakovania oddeľovača z neho urobíme priradenie reťazca a zopakujeme ho. Ak sa teda v budúcnosti rozhodneme zmeniť tento symbol, bude to len na jednom mieste.

Optimalizujte svoj meta popis stránky Shopify

Keď sme prehľadávali web, všimli sme si, že každá stránka so šablónou témy, ktorá sa volala, opakovala nastavenia SEO domovskej stránky. Chceli sme pridať iný meta popis v závislosti od toho, či bola stránka domovskou stránkou, stránkou kolekcií alebo skutočnou stránkou produktu.

Ak si nie ste istý, aký je názov vašej šablóny, pridajte do nej poznámku HTML theme.liquid súbor a môžete zobraziť zdroj stránky, aby ste ho identifikovali.

<!-- Template: {{ template }} -->

To nám umožnilo identifikovať všetky šablóny, ktoré používali meta popis stránky, aby sme mohli upraviť meta popis na základe šablóny.

Tu je meta popis, ktorý chceme na stránke produktu vyššie:

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

Tu je ten kód:

{%- 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 }}">

Výsledkom je dynamický, komplexný súbor názvov a meta popisov pre akýkoľvek typ šablóny alebo podrobnú produktovú stránku. V budúcnosti kód s najväčšou pravdepodobnosťou zrefaktorujem pomocou prípadových slov a trochu lepšie ho usporiadam. Momentálne však vytvára oveľa krajšiu prítomnosť na stránkach s výsledkami vyhľadávacích nástrojov.

Mimochodom, ak by ste chceli skvelú zľavu... budeme radi, ak otestujete stránku s kupónom na zľavu 30 %, použite kód HIGHBRIDGE pri odhlasovaní.

Kúpte si šaty

Zverejnenie: Som pridruženou spoločnosťou pre Shopify a Themeforest a používam tieto odkazy v tomto článku. Closet52 je klientom mojej firmy, Highbridge. Ak by ste potrebovali pomoc pri rozvoji svojej prítomnosti v elektronickom obchode pomocou Shopify, prosím KONTAKTUJTE NÁS.