Shopify: Kako programirati dinamične naslove tem in meta opise za SEO z uporabo Liquid

Shopify Template Liquid - prilagodite naslov SEO in meta opis

Če ste v zadnjih nekaj mesecih brali moje članke, boste opazili, da sem veliko več delil o e-trgovini, zlasti v zvezi z Shopify. Moje podjetje je gradilo zelo prilagojeno in integrirano ShopifyPlus spletno mesto za stranko. Namesto da bi porabili mesece in desetine tisoč dolarjev za ustvarjanje teme iz nič, smo stranko prepričali, naj nam dovoli uporabo dobro izdelane in podprte teme, ki je bila preizkušena. Šli smo z Wokiee, večnamenska tema Shopify, ki ima ogromno zmogljivosti.

Še vedno so bili potrebni meseci razvoja, da smo vključili prilagodljivost, ki smo jo potrebovali na podlagi tržnih raziskav in povratnih informacij naših strank. Bistvo implementacije je bilo, da je Closet52 spletno mesto za e-trgovino neposredno do potrošnikov, kjer bi ženske lahko preprosto kupite obleke na spletu.

Ker je Wokiee večnamenska tema, je eno področje, na katerega smo zelo osredotočeni, optimizacija iskalnikov. Sčasoma verjamemo, da bo organsko iskanje najnižji strošek na nakup in da bodo kupci z največjim namenom nakupa. V naši raziskavi smo ugotovili, da ženske kupujejo obleke s 5 ključnimi dejavniki, ki vplivajo na odločitve:

  • Stili oblek
  • Barve oblek
  • Cene oblek
  • Brezplačna dostava
  • Vračila brez težav

Naslovi in ​​meta opisi so kritični da se vaša vsebina indeksira in pravilno prikaže. Zato seveda želimo oznako naslova in meta opise, ki imajo te ključne elemente!

  • O naslovna oznaka v naslovu vaše strani je ključnega pomena za zagotovitev, da so vaše strani pravilno indeksirane za iskanja, ki so pomembna.
  • O Meta Description je prikazan na straneh z rezultati iskalnika (SERP), ki zagotavljajo dodatne informacije, ki privabijo uporabnika iskanja, da klikne.

Izziv je v tem, da Shopify pogosto deli naslove in meta opise v različnih predlogah strani – domača stran, zbirke, izdelki itd. Zato sem moral napisati nekaj logike za pravilno dinamično zapolnitev naslovov in meta opisov.

Optimizirajte naslov strani Shopify

Jezik teme Shopify je tekočina in je kar dobro. Ne bom se spuščal v vse podrobnosti sintakse, vendar lahko zelo enostavno dinamično ustvarite naslov strani. Ena stvar, ki jo morate imeti v mislih, je, da imajo izdelki različice ... zato vključitev različic v naslov vaše strani pomeni, da se morate pomikati po možnostih in dinamično graditi niz, ko je predloga izdelek predlogo.

Tukaj je primer naslova za a karirasta pulover obleka.

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

In tukaj je koda, ki ustvari ta 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>

Koda je razčlenjena takole:

  • Naslov strani – najprej vključite dejanski naslov strani ... ne glede na predlogo.
  • oznake – vključite oznake tako, da združite oznake, povezane s stranjo.
  • Barve izdelka – prelistajte barvne možnosti in sestavite niz, ločen z vejico.
  • Metapolja – ta primerek Shopify ima dolžino obleke kot metapolje, ki ga želimo vključiti.
  • Cena – vključuje ceno prve variante.
  • Ime trgovine – na koncu naslova dodajte ime trgovine.
  • separator – namesto da bi ponavljali ločilo, ga naredimo kot dodelitev niza in ga ponovimo. Tako, če se v prihodnosti odločimo spremeniti ta simbol, je le na enem mestu.

Optimizirajte meta opis strani Shopify

Ko smo preiskali spletno mesto, smo opazili, da katera koli stran s predlogo teme, ki je bila poklicana, ponavlja nastavitve SEO domače strani. Želeli smo dodati drugačen meta opis glede na to, ali je bila stran domača stran, stran zbirk ali dejanska stran izdelka.

Če niste prepričani, kakšno je ime vaše predloge, samo dodajte opombo HTML v svoj theme.liquid datoteko in si lahko ogledate izvor strani, da ga prepoznate.

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

To nam je omogočilo, da smo identificirali vse predloge, ki so uporabljale meta opis spletnega mesta, tako da smo lahko spremenili meta opis na podlagi predloge.

Tukaj je meta opis, ki ga želimo na zgornji strani izdelka:

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

Tukaj je ta 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čen, obsežen nabor naslovov in meta opisov za katero koli vrsto predloge ali podrobne strani izdelka. Za naprej bom najverjetneje preoblikoval kodo z uporabo stavkov velikih in malih črk in jo malo bolje organiziral. Toda za zdaj ustvarja veliko lepšo prisotnost na straneh z rezultati iskalnikov.

Mimogrede, če želite odličen popust ... bi radi, da preizkusite spletno mesto s 30 % popustom, uporabite kodo HIGHBRIDGE pri odjavi.

Kupite obleke zdaj

Razkritje: Sem podružnica podjetja Shopify in themeforest in te povezave uporabljam v tem članku. Closet52 je stranka mojega podjetja, Highbridge. Če želite pomoč pri razvoju vaše prisotnosti v e-trgovini z uporabo Shopifyja, prosim kontaktiraj nas.