E-trgovina i maloprodajaPretraživanje marketinga

Shopify: Kako programirati dinamičke naslove tema i meta opise za SEO pomoću Liquida

Ako ste čitali moje članke u posljednjih nekoliko mjeseci, primijetit ćete da sam dijelio 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.

I dalje su bili potrebni mjeseci razvoja da bismo uključili fleksibilnost koja nam je bila potrebna na temelju istraživanja tržišta i povratnih informacija naših klijenata. U središtu implementacije bio je proizvođač modnih proizvoda koji je želio izgraditi web mjesto za e-trgovinu izravno potrošaču na kojem bi žene mogle jednostavno kupovati 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
  • Povrat bez problema

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 zaglavlju vaše stranice ključno je kako biste osigurali da su vaše stranice pravilno indeksirane za relevantna pretraživanja.
  • Korištenje električnih romobila ističe Meta opis prikazuje se na stranicama s rezultatima tražilice (SERP) koje pružaju dodatne informacije koje potiču korisnika pretraživanja da klikne.

Izazov je u tome što Shopify često dijeli naslove i meta opise na različitim predlošcima stranica – dom, kolekcije, proizvodi itd. Dakle, morao sam napisati neku logiku da dinamički pravilno popunim naslove i meta opise.

Optimizirajte naslov svoje stranice Shopify

Shopifyjev jezik teme je tekućina i dosta je dobro. Neću ulaziti u sve pojedinosti sintakse, ali možete vrlo jednostavno dinamički generirati naslov stranice. Ovdje morate imati na umu da proizvodi imaju varijante... tako da uključivanje varijanti u naslov vaše stranice znači da morate prolaziti kroz opcije i dinamički graditi 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 -%}
    {%- 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>

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

Kad smo indeksirali web mjesto, primijetili smo da svaka pozvana stranica predloška teme ponavlja SEO postavke početne stranice. Htjeli smo dodati drugačiji meta opis ovisno o tome je li stranica bila početna stranica, stranica sa zbirkama 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 no-hassle 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 == '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 }}">

Rezultat je dinamičan, opsežan skup naslova i meta opisa za bilo koju vrstu predloška ili detaljne stranice proizvoda. Krećući se naprijed, najvjerojatnije ću refaktorirati kod pomoću naredbi case i organizirati ga malo bolje. Ali za sada, stvara puno ljepšu prisutnost na stranicama s rezultatima tražilice.

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

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.