Shopify: Hoe om dinamiese tematitels en metabeskrywings vir SEO te programmeer deur gebruik te maak van vloeistof

Shopify Template Liquid - Pas SEO-titel en metabeskrywing aan

As jy my artikels die afgelope paar maande gelees het, sal jy agterkom dat ek baie meer oor e-handel gedeel het, veral t.o.v. Shopify. My firma is besig om 'n hoogs pasgemaakte en geïntegreerde uit te bou ShopifyPlus webwerf vir 'n kliënt. Eerder as om maande en tienduisende dollars te spandeer om 'n tema van nuuts af te bou, het ons die kliënt oorgehaal om ons toe te laat om 'n goedgeboude en ondersteunde tema te gebruik wat beproef en getoets is. Ons het saam gegaan Wokiee, 'n veeldoelige Shopify-tema wat 'n klomp vermoëns het.

Dit het nog maande se ontwikkeling geverg om die buigsaamheid wat ons nodig gehad het, te inkorporeer op grond van marknavorsing en ons kliënte se terugvoer. Die kern van die implementering was dat Closet52 'n direk-na-verbruiker e-handelswerf is waar vroue maklik koop rokke aanlyn.

Omdat Wokiee 'n veeldoelige tema is, is soekenjinoptimalisering een gebied waarop ons baie gefokus is. Met verloop van tyd glo ons dat organiese soektog die laagste koste per verkryging sal wees en kopers met die hoogste voorneme om te koop. In ons navorsing het ons geïdentifiseer dat vroue rokke koop met 5 belangrike besluitbeïnvloeders:

  • Style van rokke
  • Kleure van rokke
  • Pryse van rokke
  • Gratis aflewering
  • Probleemvrye opbrengste

Titels en metabeskrywings is krities om jou inhoud behoorlik te laat indekseer en vertoon. Ons wil dus natuurlik 'n titelmerker en metabeskrywings hê wat daardie sleutelelemente bevat!

  • Die titel tag in 'n jou bladsyopskrif is van kritieke belang om te verseker dat jou bladsye behoorlik geïndekseer word vir die soektogte van relevansie.
  • Die meta beskrywing word in soekenjinresultaatbladsye (SERP's) vertoon wat bykomende inligting verskaf wat die soekgebruiker verlei om deur te klik.

Die uitdaging is dat Shopify dikwels titels en metabeskrywings oor verskillende bladsysjablone deel – huis, versamelings, produkte, ens. So, ek moes logika skryf om die titels en metabeskrywings dinamies behoorlik te vul.

Optimaliseer u Shopify-bladsytitel

Shopify se temataal is vloeibaar en dit is redelik goed. Ek sal nie in al die besonderhede van die sintaksis ingaan nie, maar jy kan 'n bladsytitel redelik maklik dinamies genereer. Een ding wat jy hier in gedagte moet hou, is dat produkte variante het … so die inkorporering van variante in jou bladsytitel beteken dat jy deur die opsies moet loop en die string dinamies moet bou wanneer die sjabloon 'n produk sjabloon.

Hier is 'n voorbeeld van 'n titel vir 'n geruite trui rok.

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

En hier is die kode wat die resultaat lewer:

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

Die kode breek soos volg af:

  • Page titel – sluit eers die werklike bladsytitel in... ongeag die sjabloon.
  • Tags – inkorporeer etikette deur etikette aan te sluit wat met 'n bladsy geassosieer word.
  • Produkkleure – loop deur die kleuropsies en bou 'n komma-geskeide string.
  • Metavelde - hierdie Shopify-instansie het die roklengte as 'n metaveld wat ons wil insluit.
  • Prys – sluit die eerste variant se prys in.
  • Winkelnaam – voeg die winkel se naam aan die einde van die titel by.
  • separator – eerder as om die skeier te herhaal, maak ons ​​dit net 'n string-opdrag en herhaal dit. Op dié manier, as ons besluit om daardie simbool in die toekoms te verander, is dit net op een plek.

Optimaliseer u Shopify-bladsy-metabeskrywing

Toe ons die webwerf deurkruis het, het ons opgemerk dat enige temasjabloonbladsy wat genoem is, die SEO-instellings van die tuisblad herhaal. Ons wou 'n ander metabeskrywing byvoeg, afhangende van of die bladsy 'n tuisblad, versamelingsbladsy of werklike produkbladsy is.

As jy nie seker is wat jou sjabloonnaam is nie, voeg net 'n HTML-nota by jou theme.liquid lêer en jy kan die bron van die bladsy sien om dit te identifiseer.

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

Dit het ons in staat gestel om al die sjablone te identifiseer wat die werf se metabeskrywing gebruik het sodat ons die metabeskrywing op grond van die sjabloon kon verander.

Hier is die metabeskrywing wat ons op die bogenoemde produkbladsy wil hê:

<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 daardie 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 }}">

Die resultaat is 'n dinamiese, omvattende stel titels en metabeskrywings vir enige tipe sjabloon of gedetailleerde produkbladsy. Om vorentoe te beweeg, sal ek heel waarskynlik die kode herfaktoriseer deur gevalstellings te gebruik en dit 'n bietjie beter te organiseer. Maar vir nou lewer dit 'n baie beter teenwoordigheid op soekenjinresultaatbladsye.

Terloops, as jy 'n groot afslag wil hê ... sal ons daarvan hou dat jy die webwerf toets met 'n koepon van 30% afslag, gebruik kode HIGHBRIDGE wanneer u uitklok.

Koop nou vir rokke

Openbaarmaking: Ek is 'n filiaal vir Shopify en Themeforest en ek gebruik daardie skakels in hierdie artikel. Closet52 is 'n kliënt van my firma, Highbridge. As jy hulp wil hê om jou e-handel-teenwoordigheid met Shopify te ontwikkel, asseblief Kontak Ons.