Shopify: Dynaamisten teemaotsikoiden ja metakuvausten ohjelmointi SEO:lle Liquidillä

Shopify Template Liquid - Mukauta SEO otsikkoa ja metakuvausta

Jos olet lukenut artikkeleitani viime kuukausina, huomaat, että olen kertonut paljon enemmän verkkokaupasta, erityisesti mitä tulee Shopify. Yritykseni on rakentanut pitkälle räätälöityä ja integroitua ShopifyPlus sivusto asiakkaalle. Sen sijaan, että käyttäisimme kuukausia ja kymmeniä tuhansia dollareita teeman rakentamiseen tyhjästä, puhuimme asiakasta antamaan meille luvan käyttää hyvin rakennettua ja tuettua teemaa, joka on kokeiltu ja testattu. Menimme mukaan Wokiee, monikäyttöinen Shopify-teema, jolla on paljon ominaisuuksia.

Tarvittiin vielä kuukausien kehitystyötä, jotta saimme markkinatutkimuksen ja asiakkaidemme palautteen perusteella tarvitsemamme joustavuuden. Toteutuksen ytimessä oli, että Closet52 on suoraan kuluttajille suunnattu verkkokauppasivusto, jossa naiset voivat helposti ostaa mekkoja netistä.

Koska Wokiee on monikäyttöinen teema, yksi alue, johon olemme erittäin keskittyneet, on hakukoneoptimointi. Ajan myötä uskomme, että maksuton haku on alhaisin hankintakohtainen hinta ja ostajat, joilla on korkein ostoaiko. Tutkimuksessamme havaitsimme, että naiset ostavat mekkoja viiden tärkeimmän päätöksentekijän kanssa:

  • Mekkotyylejä
  • Mekkojen värit
  • Mekkojen hinnat
  • Ilmainen toimitus
  • Vaivaton palautus

Otsikot ja metakuvaukset ovat tärkeitä jotta sisältösi indeksoidaan ja näytetään oikein. Joten tietysti haluamme otsikkotunnisteen ja metakuvaukset, joissa on nämä keskeiset elementit!

  • - otsikkokoodi sivusi otsikossa on kriittinen sen varmistamiseksi, että sivusi indeksoidaan oikein osuvia hakuja varten.
  • - meta kuvaus näkyy hakukoneen tulossivuilla (SERP), joka tarjoaa lisätietoa, joka houkuttelee haun käyttäjää napsauttamaan.

Haasteena on, että Shopify jakaa usein otsikoita ja metakuvauksia eri sivumalleissa – kotisivuilla, kokoelmissa, tuotteissa jne. Minun piti siis kirjoittaa logiikkaa täyttääkseni otsikot ja metakuvaukset dynaamisesti oikein.

Optimoi Shopify-sivusi otsikko

Shopifyn teemakieli on nestemäistä ja se on melko hyvä. En perehdy kaikkiin syntaksin yksityiskohtiin, mutta voit luoda sivun otsikon dynaamisesti melko helposti. Yksi asia, joka sinun on pidettävä mielessä, on se, että tuotteilla on muunnelmia… joten muunnelmien sisällyttäminen sivusi otsikkoon tarkoittaa, että sinun on selattava vaihtoehtoja ja rakennettava dynaamisesti merkkijono, kun malli on tuote sapluuna.

Tässä on esimerkki nimikkeestä a ruudullinen neulemekko.

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

Ja tässä on koodi, joka tuottaa tuloksen:

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

Koodi hajoaa näin:

  • Sivun otsikko – sisällytä itse sivun otsikko ensin… mallista riippumatta.
  • Tunnisteet – sisällyttää tunnisteet liittämällä sivuun liittyvät tunnisteet.
  • Tuotevärit – Selaa värivaihtoehtoja ja luo pilkuilla erotettu merkkijono.
  • Metakentät – Tämän Shopify-esiintymän mekon pituus on metakenttä, jonka haluamme sisällyttää.
  • Hinta – sisältää ensimmäisen vaihtoehdon hinnan.
  • Kaupan nimi – lisää kaupan nimi otsikon loppuun.
  • separaattori – erottimen toistamisen sijaan teemme siitä merkkijonotehtävän ja toistamme sen. Tällä tavalla, jos päätämme muuttaa tätä symbolia tulevaisuudessa, se on vain yhdessä paikassa.

Optimoi Shopify-sivusi sisällönkuvaus

Kun indeksoimme sivustoa, huomasimme, että mikä tahansa kutsuttu teemamallisivu toisti kotisivun SEO-asetuksia. Halusimme lisätä erilaisen metakuvauksen sen mukaan, oliko sivu kotisivu, kokoelmasivu vai varsinainen tuotesivu.

Jos et ole varma, mikä mallisi nimi on, lisää vain HTML-muistiinpano malliisi theme.liquid tiedosto ja voit tarkastella sivun lähdettä tunnistaaksesi sen.

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

Tämän ansiosta pystyimme tunnistamaan kaikki mallit, jotka käyttivät sivuston metakuvausta, jotta voimme muokata metakuvausta mallin perusteella.

Tässä on metakuvaus, jonka haluamme yllä olevalle tuotesivulle:

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

Tässä se koodi:

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

Tuloksena on dynaaminen, kattava joukko otsikoita ja metakuvauksia kaikentyyppisille malleille tai yksityiskohtaisille tuotesivuille. Jatkossa todennäköisimmin muokkaan koodia tapauslausekkeiden avulla ja järjestän sen hieman paremmin. Mutta toistaiseksi se tuottaa paljon mukavampaa läsnäoloa hakukoneiden tulossivuilla.

Muuten, jos haluat suuren alennuksen… haluaisimme, että testaat sivustoa 30 %:n alennuskupongilla, käytä koodia HIGHBRIDGE uloskirjautumisen yhteydessä.

Osta mekkoja nyt

Ilmoitus: Olen tytäryhtiö Shopify että ThemeForest ja käytän näitä linkkejä tässä artikkelissa. Closet52 on yritykseni asiakas, Highbridge. Jos haluat apua verkkokaupan läsnäolon kehittämisessä Shopifyn avulla, ole hyvä ottaa meihin yhteyttä.