Shopify: Slik programmerer du dynamiske tematitler og metabeskrivelser for SEO ved hjelp av Liquid

Shopify Template Liquid - Tilpass SEO-tittel og metabeskrivelse

Hvis du har lest artiklene mine de siste månedene, vil du legge merke til at jeg har delt mye mer om e-handel, spesielt mht. Shopify. Firmaet mitt har bygget ut en svært tilpasset og integrert ShopifyPlus nettsted for en klient. I stedet for å bruke måneder og titusenvis av dollar på å bygge et tema fra bunnen av, overtalte vi klienten til å la oss bruke et godt bygget og støttet tema som var utprøvd og testet. Vi gikk med Wokiee, et flerbruks Shopify-tema som har massevis av muligheter.

Det krevde fortsatt måneder med utvikling for å innlemme fleksibiliteten vi trengte basert på markedsundersøkelser og tilbakemeldinger fra våre kunder. I kjernen av implementeringen var at Closet52 er en direkte til forbruker e-handelsside hvor kvinner enkelt kan kjøp kjoler på nett.

Fordi Wokiee er et flerbrukstema, er søkemotoroptimalisering et område vi er sterkt fokusert på. Over tid tror vi at organisk søk ​​vil være den laveste kostnaden per kjøp og kunder med høyest intensjon om å kjøpe. I vår forskning identifiserte vi at kvinner handler kjoler med 5 viktige beslutningspåvirkere:

  • Stiler av kjoler
  • Farger på kjoler
  • Priser på kjoler
  • Gratis levering
  • Problemfri retur

Titler og metabeskrivelser er kritiske på å få innholdet ditt indeksert og vist på riktig måte. Så selvfølgelig vil vi ha en tittelkode og metabeskrivelser som har disse nøkkelelementene!

  • De tittel tag i en sideoverskrift er avgjørende for å sikre at sidene dine er riktig indeksert for relevante søk.
  • De meta beskrivelse vises på søkemotorresultatsider (SERPs) som gir tilleggsinformasjon som lokker søkebrukeren til å klikke seg gjennom.

Utfordringen er at Shopify ofte deler titler og metabeskrivelser på tvers av forskjellige sidemaler – hjem, samlinger, produkter osv. Så jeg måtte skrive litt logikk for å dynamisk fylle ut titlene og metabeskrivelsene riktig.

Optimaliser Shopify-sidetittelen din

Shopifys temaspråk er flytende og det er ganske bra. Jeg vil ikke komme inn på alle detaljene i syntaksen, men du kan dynamisk generere en sidetittel ganske enkelt. En ting du må huske på her er at produkter har varianter … så å inkludere varianter i sidetittelen betyr at du må gå gjennom alternativene og dynamisk bygge strengen når malen er en produkt mal.

Her er et eksempel på en tittel for en rutete genser kjole.

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

Og her er koden som gir det resultatet:

{%- 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 deler seg slik:

  • Sidetittel – inkorporer den faktiske sidetittelen først... uavhengig av malen.
  • Tags – inkorporer tagger ved å slå sammen tagger knyttet til en side.
  • produkt~~POS=TRUNC Farger – gå gjennom fargealternativene og bygg en kommadelt streng.
  • Metafelt – denne Shopify-forekomsten har kjolelengden som et metafelt som vi ønsker å inkludere.
  • Pris – inkluderer den første variantens pris.
  • Butikknavn – legg til butikkens navn på slutten av tittelen.
  • separator – i stedet for å gjenta skilletegnet, gjør vi det bare til en strengtilordning og gjentar det. På den måten, hvis vi bestemmer oss for å endre det symbolet i fremtiden, er det bare på ett sted.

Optimaliser Shopify-sidens metabeskrivelse

Da vi gjennomsøkte nettstedet, la vi merke til at enhver temamalside som ble kalt gjentok SEO-innstillingene for hjemmesiden. Vi ønsket å legge til en annen metabeskrivelse avhengig av om siden var en hjemmeside, samlingsside eller faktisk produktside.

Hvis du ikke er sikker på hva malnavnet ditt er, legg til et HTML-notat i din theme.liquid fil, og du kan se kilden til siden for å identifisere den.

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

Dette tillot oss å identifisere alle malene som brukte nettstedets metabeskrivelse, slik at vi kunne endre metabeskrivelsen basert på malen.

Her er metabeskrivelsen vi ønsker på produktsiden ovenfor:

<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 koden:

{%- 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 sett med titler og metabeskrivelser for enhver type mal eller detaljert produktside. Fremover vil jeg mest sannsynlig refaktorere koden ved å bruke kasussetninger og organisere den litt bedre. Men foreløpig gir det en mye bedre tilstedeværelse på søkemotorresultatsider.

Forresten, hvis du vil ha en god rabatt... vil vi gjerne at du tester ut siden med en 30 % rabattkupong, bruk koden HIGHBRIDGE når du sjekker ut.

Kjøp kjoler nå

Offentliggjøring: Jeg er tilknyttet Shopify og Themeforest og jeg bruker disse koblingene i denne artikkelen. Closet52 er en kunde av firmaet mitt, Highbridge. Hvis du vil ha hjelp til å utvikle din e-handels tilstedeværelse ved å bruke Shopify, vennligst kontakt oss.