E-handel och detaljhandelSökmarknadsföring

Shopify: Hur man programmerar dynamiska tematitlar och metabeskrivningar för SEO med hjälp av Liquid

Om du har läst mina artiklar under de senaste månaderna kommer du att märka att jag har delat mycket mer om e-handel, särskilt med avseende på Shopify. Mitt företag har byggt ut en mycket anpassad och integrerad ShopifyPlus webbplats för en kund. Istället för att spendera månader och tiotusentals dollar på att bygga ett tema från grunden, övertalade vi kunden att tillåta oss att använda ett välbyggt och understött tema som var beprövad och testad. Vi åkte med Wokiee, ett mångsidigt Shopify-tema som har massor av möjligheter.

Det krävdes fortfarande månader av utveckling för att införliva den flexibilitet vi behövde baserat på marknadsundersökningar och vår kunds feedback. Kärnan i implementeringen var en modetillverkare som ville bygga ut en direkt-till-konsument e-handelssajt där kvinnor enkelt skulle kunna köpa klänningar online.

Eftersom Wokiee är ett mångsidigt tema är ett område vi fokuserar mycket på sökmotoroptimering. Med tiden tror vi att organisk sökning kommer att vara den lägsta kostnaden per förvärv och köpare med den högsta avsikten att köpa. I vår forskning identifierade vi att kvinnor handlar klänningar med fem viktiga beslutsinfluenser:

  • Stilar av klänningar
  • Färger på klänningar
  • Priser på klänningar
  • Gratis frakt
  • Returer utan krångel

Titlar och metabeskrivningar är avgörande på att få ditt innehåll indexerat och visat på rätt sätt. Så, naturligtvis, vill vi ha en titeltagg och metabeskrivningar som har dessa nyckelelement!

  • Smakämnen titel tagg i din sidrubrik är avgörande för att säkerställa att dina sidor indexeras korrekt för relevanta sökningar.
  • Smakämnen Meta Description visas på sökmotorresultatsidor (SERP) som ger ytterligare information som lockar sökanvändaren att klicka sig vidare.

Utmaningen är att Shopify ofta delar titlar och metabeskrivningar över olika sidmallar – hem, samlingar, produkter, etc. Så jag var tvungen att skriva lite logik för att dynamiskt fylla i titlarna och metabeskrivningarna ordentligt.

Optimera din Shopify-sidatitel

Shopifys temaspråk är flytande och det är ganska bra. Jag kommer inte in på alla detaljer i syntaxen, men du kan dynamiskt generera en sidtitel ganska enkelt. En sak du måste tänka på här är att produkter har varianter ... så att införliva varianter i din sidtitel innebär att du måste gå igenom alternativen och dynamiskt bygga strängen när mallen är en produkt mall.

Här är ett exempel på en titel för en rutig tröja klänning.

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

Och här är koden som ger det resultatet:

{%- capture seo_title -%}
    {%- if template == "collection" -%}{{ "Order " }}{%- endif -%}
    {{- page_title -}}
    {%- if template == "collection" -%}{{ " Online" }}{%- endif -%}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}
      {%- if template == 'blog' -%} 
      {{ " Articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | capitalize | remove: "&quot;" -}}{%- endif -%}
      {%- else -%}
      {{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}
      {%- endif -%}
    {%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " only " }}{{ 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 -%}
    {% if template == "collection" %}{{ my_separator }}Free Shipping, No-Hassle Returns{% endif %}{{ my_separator }}{{ shop.name }}
  {%- endcapture -%}

<title>{{ seo_title | strip_newlines }}</title>

Koden delas upp så här:

  • Page Title – infoga den faktiska sidtiteln först... oavsett mall.
  • Tags – införliva taggar genom att sammanfoga taggar som är kopplade till en sida.
  • produkt~~POS=TRUNC Färger – gå igenom färgalternativen och bygg en kommaseparerad sträng.
  • Metafält – den här Shopify-instansen har klänningslängden som ett metafält som vi vill inkludera.
  • Pris – inkludera den första variantens pris.
  • Shop Namn – lägg till butikens namn i slutet av titeln.
  • Separator – istället för att upprepa separatorn, gör vi det bara till en strängtilldelning och upprepar det. På så sätt, om vi bestämmer oss för att ändra den symbolen i framtiden, finns den bara på ett ställe.

Optimera din Shopify-sidas metabeskrivning

När vi genomsökte webbplatsen märkte vi att varje temamallsida som anropades upprepade startsidans SEO-inställningar. Vi ville lägga till en annan metabeskrivning beroende på om sidan var en startsida, samlingssida eller den faktiska produktsidan.

Om du inte är säker på vad din mall heter, lägg bara till en HTML-anteckning i din theme.liquid fil och du kan se sidans källa för att identifiera den.

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

Detta gjorde det möjligt för oss att identifiera alla mallar som använde webbplatsens metabeskrivning så att vi kunde ändra metabeskrivningen baserat på mallen.

Här är metabeskrivningen vi vill ha på produktsidan ovan:

<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 no-hassle returns at Closet52.">

Här är 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 == 'blog' -%}
          {{ " Here are our articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | downcase | remove: "&quot;" -}}{%- endif -%}.
          {%- endif -%}
          {%- if template == 'product' -%}
  			{{ " Only " }}{{ product.variants[0].price | money }}!
  		  {%- endif -%}
      {%- endif -%}   	
  	{%- endif -%}
    {%- if template == 'collection' -%}
            {{ "Find a beautiful dress for your next occasion by color, length, or size." | strip }}
    {%- endif -%}
    {{ " Always FREE 2-day shipping and no-hassle returns at " }}{{ shop.name | strip }}.
  {%- endcapture -%}

<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

Resultatet är en dynamisk, omfattande uppsättning titlar och metabeskrivningar för alla typer av mallar eller detaljerade produktsidor. Framöver kommer jag troligen att omstrukturera koden med hjälp av fallsatser och organisera den lite bättre. Men för närvarande ger det en mycket trevligare närvaro på sökmotorernas resultatsidor.

Upplysningar: Jag är en filial för Shopify och Themeforest och jag använder de länkarna i den här artikeln. Closet52 var en kund till mitt företag, DK New Media. Om du vill ha hjälp med att utveckla din e-handelsnärvaro med Shopify, vänligen kontakta oss.

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.