Shopify: hoe u dynamische thematitels en metabeschrijvingen programmeert voor SEO met behulp van Liquid

Shopify Template Liquid - Pas de SEO-titel en metabeschrijving aan

Als je de afgelopen maanden mijn artikelen hebt gelezen, zul je merken dat ik veel meer heb gedeeld over e-commerce, vooral met betrekking tot Shopify. Mijn bedrijf heeft een sterk aangepast en geïntegreerd Shopify Plus website voor een klant. In plaats van maanden en tienduizenden dollars te besteden aan het helemaal opnieuw bouwen van een thema, hebben we de klant overgehaald om ons toe te staan ​​een goed gebouwd en ondersteund thema te gebruiken dat is uitgeprobeerd en getest. We gingen met Wokiee, een multifunctioneel Shopify-thema met een heleboel mogelijkheden.

Het vergde nog maanden van ontwikkeling om de flexibiliteit te integreren die we nodig hadden op basis van marktonderzoek en de feedback van onze klanten. De kern van de implementatie was dat Closet52 een direct-to-consumer e-commercesite is waar vrouwen gemakkelijk jurken online kopen.

Omdat Wokiee een multifunctioneel thema is, richten we ons sterk op zoekmachineoptimalisatie. Na verloop van tijd zijn we van mening dat organisch zoeken de laagste kosten per acquisitie zal zijn en dat kopers met de hoogste koopintentie zullen zijn. In ons onderzoek hebben we vastgesteld dat vrouwen jurken kopen met 5 belangrijke beïnvloeders:

  • Stijlen van jurken
  • Kleuren van jurken
  • Prijzen van jurken
  • Gratis verzending
  • Probleemloos retourneren

Titels en metabeschrijvingen zijn van cruciaal belang om uw inhoud correct te laten indexeren en weergeven. Dus we willen natuurlijk een titeltag en metabeschrijvingen die die sleutelelementen bevatten!

  • Het title-tag in een uw paginakop is van cruciaal belang om ervoor te zorgen dat uw pagina's correct worden geïndexeerd voor de relevante zoekopdrachten.
  • Het meta description wordt weergegeven op pagina's met zoekresultaten van zoekmachines (SERP's) die aanvullende informatie bieden die de zoekgebruiker verleidt om door te klikken.

De uitdaging is dat Shopify vaak titels en metabeschrijvingen deelt over verschillende paginasjablonen - home, collecties, producten, enz. Dus ik moest wat logica schrijven om de titels en metabeschrijvingen dynamisch correct te vullen.

Optimaliseer uw Shopify-paginatitel

De themataal van Shopify is vloeibaar en best goed. Ik zal niet ingaan op alle details van de syntaxis, maar je kunt vrij eenvoudig dynamisch een paginatitel genereren. Een ding dat u hier in gedachten moet houden, is dat producten varianten hebben ... dus het opnemen van varianten in uw paginatitel betekent dat u door de opties moet bladeren en de tekenreeks dynamisch moet opbouwen wanneer de sjabloon een artikel sjabloon.

Hier is een voorbeeld van een titel voor a geruite trui jurk.

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

En hier is de code die dat resultaat oplevert:

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

De code valt als volgt uiteen:

  • Page Title – neem eerst de eigenlijke paginatitel op... ongeacht de sjabloon.
  • Tags – neem tags op door deel te nemen aan tags die aan een pagina zijn gekoppeld.
  • Product Kleuren - loop door de kleuropties en bouw een door komma's gescheiden tekenreeks.
  • Metavelden - deze Shopify-instantie heeft de jurklengte als een metaveld dat we willen opnemen.
  • Prijs – inclusief de prijs van de eerste variant.
  • Winkel naam – voeg de naam van de winkel toe aan het einde van de titel.
  • Separator - in plaats van het scheidingsteken te herhalen, maken we er gewoon een tekenreekstoewijzing van en herhalen het. Op die manier, als we besluiten dat symbool in de toekomst te veranderen, is het maar op één plek.

Optimaliseer de metabeschrijving van uw Shopify-pagina

Toen we de site doorzochten, merkten we dat elke aangeroepen themasjabloonpagina de SEO-instellingen van de startpagina herhaalde. We wilden een andere metabeschrijving toevoegen, afhankelijk van of de pagina een startpagina, een collectiepagina of een daadwerkelijke productpagina was.

Als u niet zeker weet wat uw sjabloonnaam is, voegt u gewoon een HTML-notitie toe aan uw theme.liquid bestand en u kunt de bron van de pagina bekijken om deze te identificeren.

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

Hierdoor konden we alle sjablonen identificeren die de metabeschrijving van de site gebruikten, zodat we de metabeschrijving op basis van de sjabloon konden aanpassen.

Dit is de metabeschrijving die we op de bovenstaande productpagina willen:

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

Hier is die code:

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

Het resultaat is een dynamische, uitgebreide set titels en metabeschrijvingen voor elk type sjabloon of gedetailleerde productpagina. In de toekomst zal ik de code hoogstwaarschijnlijk refactoren met behulp van case-statements en deze een beetje beter organiseren. Maar voor nu produceert het een veel mooiere aanwezigheid op pagina's met zoekresultaten van zoekmachines.

Trouwens, als je een geweldige korting wilt... we zouden het leuk vinden als je de site uitprobeert met een kortingsbon van 30%, gebruik de code HIGHBRIDGE bij afrekenen.

Koop nu jurken

Openbaarmaking: ik ben een partner voor Shopify en Themeforest en ik gebruik die links in dit artikel. Closet52 is een klant van mijn kantoor, Highbridge. Als u hulp wilt bij het ontwikkelen van uw e-commerce-aanwezigheid met Shopify, alstublieft contact.