Shopify: Sådan programmeres dynamiske tematitler og metabeskrivelser til SEO ved hjælp af Liquid

Shopify Template Liquid - Tilpas SEO-titel og metabeskrivelse

Hvis du har læst mine artikler de sidste par måneder, vil du bemærke, at jeg har delt meget mere om e-handel, især mht. Shopify. Mit firma har bygget en meget tilpasset og integreret Shopify Plus websted for en kunde. I stedet for at bruge måneder og titusindvis af dollars på at bygge et tema fra bunden, overtalte vi klienten til at give os mulighed for at bruge et velbygget og understøttet tema, som var afprøvet og testet. Vi gik med Wokiee, et multifunktionelt Shopify-tema, der har et væld af muligheder.

Det krævede stadig måneders udvikling at inkorporere den fleksibilitet, vi havde brug for baseret på markedsundersøgelser og vores kunders feedback. Kernen i implementeringen var, at Closet52 er en direkte til forbruger e-handelsside, hvor kvinder nemt ville være i stand til at køb kjoler online.

Fordi Wokiee er et multifunktionelt tema, er et område, vi er meget fokuseret på, søgemaskineoptimering. Over tid mener vi, at organisk søgning vil være den laveste pris pr. anskaffelse og kunder med den højeste intention om at købe. I vores forskning identificerede vi, at kvinder shopper efter kjoler med 5 vigtige beslutningsinfluenser:

  • Stilarter af kjoler
  • Farver på kjoler
  • Priser på kjoler
  • Gratis levering
  • Problemfri returnering

Titler og metabeskrivelser er kritiske på at få dit indhold indekseret og vist korrekt. Så selvfølgelig vil vi have et titeltag og metabeskrivelser, der har disse nøgleelementer!

  • titel tag overskriften på din side er afgørende for at sikre, at dine sider er indekseret korrekt til de relevante søgninger.
  • Meta Description vises på søgemaskineresultatsider (SERP'er), der giver yderligere information, der lokker søgebrugeren til at klikke sig igennem.

Udfordringen er, at Shopify ofte deler titler og metabeskrivelser på tværs af forskellige sideskabeloner – hjem, kollektioner, produkter osv. Så jeg var nødt til at skrive noget logik for dynamisk at udfylde titlerne og metabeskrivelserne korrekt.

Optimer din Shopify-sidetitel

Shopifys temasprog er flydende, og det er ganske godt. Jeg vil ikke komme ind på alle detaljerne i syntaksen, men du kan dynamisk generere en sidetitel ret nemt. En ting du skal huske på her er, at produkter har varianter … så at inkorporere varianter i din sidetitel betyder, at du skal gå gennem mulighederne og dynamisk bygge strengen, når skabelonen er en produkt skabelon.

Her er et eksempel på en titel for en plaid sweater kjole.

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

Og her er koden, der producerer det resultat:

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

Koden opdeles således:

  • Sidetitel – inkorporer den faktiske sidetitel først... uanset skabelonen.
  • Tags – inkorporer tags ved at sammenføje tags knyttet til en side.
  • Produktfarver – gå gennem farvemulighederne og byg en kommasepareret streng.
  • Metafelter – denne Shopify-instans har kjolelængden som et metafelt, som vi ønsker at inkludere.
  • Pris – inkludere den første variants pris.
  • Butikens navn – tilføj butikkens navn i slutningen af ​​titlen.
  • Separator – i stedet for at gentage separatoren, gør vi den bare til en strengtildeling og gentager den. På den måde, hvis vi beslutter at ændre dette symbol i fremtiden, er det kun ét sted.

Optimer din Shopify-side-metabeskrivelse

Da vi crawlede webstedet, bemærkede vi, at enhver temaskabelonside, der blev kaldt, gentog startsidens SEO-indstillinger. Vi ønskede at tilføje en anden metabeskrivelse afhængigt af, om siden var en startside, samlingsside eller faktisk produktside.

Hvis du ikke er sikker på, hvad dit skabelonnavn er, skal du blot tilføje en HTML-note i din theme.liquid fil, og du kan se kilden til siden for at identificere den.

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

Dette gjorde det muligt for os at identificere alle de skabeloner, der brugte webstedets metabeskrivelse, så vi kunne ændre metabeskrivelsen baseret på skabelonen.

Her er den metabeskrivelse, vi ønsker på ovenstående produktside:

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

Her er den kode:

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

Resultatet er et dynamisk, omfattende sæt af titler og metabeskrivelser til enhver form for skabelon eller detaljeret produktside. Fremover vil jeg højst sandsynligt refaktorisere koden ved hjælp af case-udsagn og organisere den lidt bedre. Men indtil videre giver det en meget bedre tilstedeværelse på søgemaskineresultatsider.

Forresten, hvis du gerne vil have en god rabat... vil vi elske, at du tester webstedet med en 30 % rabatkupon, brug koden HIGHBRIDGE når du tjekker ud.

Køb kjoler nu

Offentliggørelse: Jeg er tilknyttet Shopify og ThemeForest og jeg bruger disse links i denne artikel. Closet52 er en kunde hos mit firma, Highbridge. Hvis du gerne vil have hjælp til at udvikle din e-handels-tilstedeværelse ved hjælp af Shopify, bedes du kontakte os.