Shopify: Kako programirati dinamičke naslove tema i meta opise za SEO koristeći Liquid

Shopify Template Liquid - Prilagodite SEO naslov i meta opis

Ako ste čitali moje članke posljednjih nekoliko mjeseci, primijetit ćete da sam podijelio puno više o e-trgovini, posebno u vezi s Shopify. Moja tvrtka gradila je vrlo prilagođenu i integriranu ShopifyPlus stranica za klijenta. Umjesto da trošimo mjesece i desetke tisuća dolara na izradu teme od nule, nagovorili smo klijenta da nam dopusti korištenje dobro izgrađene i podržane teme koja je isprobana i testirana. Išli smo sa Wokiee, višenamjenska Shopify tema koja ima mnoštvo mogućnosti.

Još uvijek su bili potrebni mjeseci razvoja kako bismo ugradili fleksibilnost koja nam je bila potrebna na temelju istraživanja tržišta i povratnih informacija naših klijenata. U srži implementacije bilo je to da je Closet52 web-mjesto za e-trgovinu izravno na potrošača na kojem bi žene mogle lako kupiti haljine online.

Budući da je Wokiee višenamjenska tema, jedno područje na koje smo jako usredotočeni je optimizacija za tražilice. S vremenom vjerujemo da će organsko pretraživanje biti najniža cijena po kupnji, a kupci s najvećom namjerom kupnje. U našem istraživanju utvrdili smo da žene kupuju haljine s 5 ključnih utjecaja na odluke:

  • Stilovi haljina
  • Boje haljina
  • Cijene haljina
  • Free Shipping
  • Povratak bez muke

Naslovi i meta opisi su kritični kako bi se vaš sadržaj indeksirao i pravilno prikazao. Dakle, naravno, želimo oznaku naslova i meta opise koji imaju te ključne elemente!

  • Korištenje električnih romobila ističe naslovnu oznaku u naslovu vaše stranice ključno je da osigurate da su vaše stranice ispravno indeksirane za relevantna pretraživanja.
  • Korištenje električnih romobila ističe Meta opis prikazuje se na stranicama s rezultatima tražilice (SERP) koji pruža dodatne informacije koje mame korisnika pretraživanja da klikne.

Izazov je u tome što Shopify često dijeli naslove i meta opise na različitim predlošcima stranica – početnoj stranici, zbirkama, proizvodima itd. Dakle, morao sam napisati neku logiku kako bih pravilno dinamički popunjavao naslove i meta opise.

Optimizirajte naslov svoje stranice Shopify

Shopifyjev jezik tema je tečan i prilično je dobar. Neću ulaziti u sve detalje sintakse, ali možete dinamički generirati naslov stranice prilično jednostavno. Jedna stvar koju ovdje morate imati na umu je da proizvodi imaju varijante... tako da uključivanje varijanti u naslov vaše stranice znači da morate proći kroz opcije i dinamički izgraditi niz kada je predložak proizvoda Predložak.

Evo primjera naslova za a karirana džemper haljina.

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

A evo koda koji daje taj rezultat:

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

Kod se rastavlja ovako:

  • Stranica Naslov – prvo uključite stvarni naslov stranice… bez obzira na predložak.
  • Oznake – ugraditi oznake spajanjem oznaka povezanih sa stranicom.
  • Boje proizvoda – prođite kroz opcije boja i napravite niz odijeljen zarezima.
  • Metapolja – ova Shopify instanca ima duljinu haljine kao metapolje koje želimo uključiti.
  • Cijena – uključuje cijenu prve varijante.
  • Naziv trgovine – na kraju naslova dodajte naziv trgovine.
  • Separator – umjesto da ponavljamo separator, samo ga napravimo zadatkom niza i ponovimo ga. Na taj način, ako odlučimo promijeniti taj simbol u budućnosti, to je samo na jednom mjestu.

Optimizirajte svoju Shopify stranicu Meta opis

Kada smo indeksirali stranicu, primijetili smo da svaka stranica predloška teme koja je pozvana ponavlja SEO postavke početne stranice. Željeli smo dodati drugačiji meta opis ovisno o tome je li stranica početna stranica, stranica zbirki ili stvarna stranica proizvoda.

Ako niste sigurni koji je naziv vašeg predloška, ​​samo dodajte HTML bilješku u svoj theme.liquid datoteku i možete vidjeti izvor stranice kako biste ga identificirali.

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

To nam je omogućilo da identificiramo sve predloške koji su koristili meta opis stranice kako bismo mogli mijenjati meta opis na temelju predloška.

Evo meta opisa koji želimo na gornjoj stranici proizvoda:

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

Evo tog koda:

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

Rezultat je dinamičan, sveobuhvatan skup naslova i meta opisa za bilo koju vrstu predloška ili detaljne stranice proizvoda. Idemo naprijed, najvjerojatnije ću refaktorirati kod koristeći iskaze slučaja i malo bolje ga organizirati. Ali za sada, proizvodi mnogo ljepšu prisutnost na stranicama s rezultatima tražilice.

Usput, ako želite veliki popust... voljeli bismo da isprobate stranicu s kuponom za popust od 30%, upotrijebite kod HIGHBRIDGE prilikom odjave.

Kupite haljine odmah

Otkrivanje podataka: Podružnica sam tvrtke Shopify i Themeforest i koristim te veze u ovom članku. Closet52 je klijent moje firme, Highbridge. Ako želite pomoć u razvoju svoje prisutnosti u e-trgovini koristeći Shopify, molimo kontaktirajte nas.