Shopify: Jak programovat dynamické názvy témat a meta popisy pro SEO pomocí Liquid

Shopify Template Liquid - Přizpůsobte SEO název a meta popis

Pokud čtete mé články v posledních měsících, všimnete si, že toho o elektronickém obchodování sdílím mnohem více, zejména s ohledem na Shopify. Moje firma buduje vysoce přizpůsobené a integrované ShopifyPlus stránky pro klienta. Spíše než utrácet měsíce a desítky tisíc dolarů za vytváření tématu od nuly, přemluvili jsme klienta, aby nám umožnil použít dobře sestavené a podporované téma, které bylo vyzkoušeno a testováno. Šli jsme s Wokiee, víceúčelové téma Shopify, které má spoustu možností.

Stále to vyžadovalo měsíce vývoje, abychom začlenili flexibilitu, kterou jsme potřebovali na základě průzkumu trhu a zpětné vazby od našich klientů. Jádrem implementace bylo, že Closet52 je webová stránka elektronického obchodu přímo pro spotřebitele, kde by ženy mohly snadno koupit šaty online.

Protože Wokiee je víceúčelové téma, jedna oblast, na kterou se velmi zaměřujeme, je optimalizace pro vyhledávače. V průběhu času věříme, že organické vyhledávání bude mít nejnižší cenu za akvizici a nakupující s nejvyšším záměrem nakupovat. V našem výzkumu jsme zjistili, že ženy nakupují šaty s 5 klíčovými faktory ovlivňujícími rozhodování:

  • Styly šatů
  • Barvy šatů
  • Ceny šatů
  • Doprava zdarma
  • Bezproblémové vrácení

Názvy a meta popisy jsou zásadní při správném indexování a zobrazení vašeho obsahu. Takže samozřejmě chceme značku názvu a meta popisy, které mají tyto klíčové prvky!

  • Projekt značka názvu v záhlaví vaší stránky je zásadní pro zajištění správného indexování stránek pro relevantní vyhledávání.
  • Projekt Meta Popis se zobrazuje na stránkách s výsledky vyhledávače (SERP), které poskytují další informace, které uživatele lákají k prokliku.

Problém je v tom, že Shopify často sdílí názvy a meta popisy napříč různými šablonami stránek – domov, kolekce, produkty atd. Musel jsem tedy napsat nějakou logiku, abych dynamicky správně naplnil názvy a meta popisy.

Optimalizujte název stránky Shopify

Tématický jazyk Shopify je tekutý a je docela dobrý. Nebudu zacházet do všech podrobností syntaxe, ale můžete dynamicky vygenerovat název stránky docela snadno. Jedna věc, kterou musíte mít na paměti, je, že produkty mají varianty… takže začlenění variant do názvu stránky znamená, že musíte procházet možnosti a dynamicky vytvářet řetězec, když je šablona produkt šablona.

Zde je příklad názvu pro a kostkované svetrové šaty.

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

A zde je kód, který vytváří tento výsledek:

{%- 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 se rozpadá takto:

  • Název stránky – nejprve zahrňte skutečný název stránky… bez ohledu na šablonu.
  • Tagy – začlenit značky spojením značek spojených se stránkou.
  • Barvy produktu – procházejte možnosti barev a vytvořte řetězec oddělený čárkami.
  • Metapole – tato instance Shopify má délku šatů jako metapole, které chceme zahrnout.
  • Cena – včetně ceny první varianty.
  • Název obchodu – na konec názvu přidejte název obchodu.
  • oddělovač – místo opakování oddělovače z něj prostě uděláme přiřazení řetězce a opakujeme ho. Pokud se tedy v budoucnu rozhodneme tento symbol změnit, bude to pouze na jednom místě.

Optimalizujte svůj meta popis stránky Shopify

Když jsme web procházeli, všimli jsme si, že jakákoli stránka šablony motivu, která byla volána, opakovala nastavení SEO domovské stránky. Chtěli jsme přidat jiný popis metadat podle toho, zda byla stránka domovskou stránkou, stránkou sbírek nebo skutečnou stránkou produktu.

Pokud si nejste jisti, jaký je název vaší šablony, přidejte do ní poznámku HTML theme.liquid a můžete zobrazit zdroj stránky, abyste jej mohli identifikovat.

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

To nám umožnilo identifikovat všechny šablony, které používaly meta popis webu, takže jsme mohli upravit meta popis na základě šablony.

Zde je meta popis, který chceme na výše uvedené produktové stránce:

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

Tady 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ýsledkem je dynamická, komplexní sada názvů a meta popisů pro jakýkoli typ šablony nebo podrobné stránky produktu. Posuneme-li se kupředu, s největší pravděpodobností kód zrefaktoruji pomocí případových příkazů a trochu lépe jej uspořádám. Ale zatím to produkuje mnohem hezčí přítomnost na stránkách s výsledky vyhledávačů.

Mimochodem, pokud byste chtěli skvělou slevu... budeme rádi, když otestujete stránky s kupónem na 30% slevu, použijte kód HIGHBRIDGE při odhlášení.

Kupte si šaty hned teď

Zveřejnění: Jsem pobočkou společnosti Shopify a Themeforest a používám tyto odkazy v tomto článku. Closet52 je klientem mé firmy, Highbridge. Pokud byste chtěli pomoc s rozvojem svého elektronického obchodu pomocí Shopify, prosím kontaktujte nás.