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

Shopify Template Liquid - Anpassa SEO-titel och metabeskrivning

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 att Closet52 är en direkt-till-konsument e-handelssida 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!

  • Du har nu möjlighet titel tagg i sidrubriken är avgörande för att säkerställa att dina sidor indexeras korrekt för relevanta sökningar.
  • Du har nu möjlighet 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 alla temamallssidor som anropades upprepade SEO-inställningarna för startsidan. Vi ville lägga till en annan metabeskrivning beroende på om sidan var en startsida, samlingssida eller faktisk produktsida.

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 den detaljerade produktsidan. 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.

Förresten, om du vill ha en bra rabatt... skulle vi älska att du testar sajten med en rabattkupong på 30 %, använd koden HIGHBRIDGE när du checkar ut.

Handla klänningar nu

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