Shopify: Dinamikus témacímek és metaleírások programozása SEO-hoz a Liquid használatával

Shopify Template Liquid – A SEO cím és meta leírás testreszabása

Ha az elmúlt hónapokban olvasta a cikkeimet, észre fogja venni, hogy sokkal többet osztok meg az e-kereskedelemről, különösen a Shopify. Cégem nagymértékben testreszabott és integrált rendszert épített ki ShopifyPlus webhely egy ügyfél számára. Ahelyett, hogy hónapokat és több tízezer dollárt költenénk egy téma elölről való felépítésére, rábeszéltük az ügyfelet, hogy engedje meg, hogy jól felépített és támogatott témát használjunk, amelyet kipróbáltunk és teszteltünk. mentünk vele Wokiee, egy többcélú Shopify téma, amely rengeteg lehetőséggel rendelkezik.

Még hónapokig tartó fejlesztésre volt szükség ahhoz, hogy a piackutatás és ügyfeleink visszajelzései alapján beépítsük a szükséges rugalmasságot. A megvalósítás lényege az volt, hogy a Closet52 egy közvetlenül a fogyasztóknak szóló e-kereskedelmi webhely, ahol a nők könnyen vásároljon ruhákat online.

Mivel a Wokiee egy többcélú téma, az egyik terület, amelyre nagy hangsúlyt fektetünk, a keresőoptimalizálás. Úgy gondoljuk, hogy idővel az organikus keresés lesz a legalacsonyabb ügyfélszerzésenkénti költség, a vásárlók pedig a legnagyobb vásárlási szándékkal. Kutatásunk során megállapítottuk, hogy a nők 5 kulcsfontosságú döntést befolyásoló tényezővel vásárolnak ruhákat:

  • A ruhák stílusai
  • A ruhák színei
  • A ruhák árai
  • Ingyenes szállítás
  • Problémamentes visszatérés

A címek és a metaleírások kritikusak a tartalom indexeléséhez és megfelelő megjelenítéséhez. Tehát természetesen szeretnénk egy címcímkét és metaleírásokat, amelyek tartalmazzák ezeket a kulcselemeket!

  • A címcímke az oldal fejlécében kulcsfontosságú annak biztosításához, hogy oldalai megfelelően indexelve legyenek a releváns keresésekhez.
  • A Meta Description A keresőmotor eredményoldalain (SERP) jelenik meg, amely további információkat nyújt, amelyek rákattintásra csábítják a keresőt.

A kihívás az, hogy a Shopify gyakran megosztja a címeket és a metaleírásokat a különböző oldalsablonokon – otthon, gyűjtemények, termékek stb. Így hát kellett valami logikát írnom, hogy dinamikusan feltölthessem a címeket és a metaleírásokat.

Optimalizálja Shopify-oldalának címét

A Shopify témanyelve folyékony és egész jó. Nem térek ki a szintaxis minden részletére, de dinamikusan létrehozhat egy oldalcímet. Itt egy dolgot kell szem előtt tartania, hogy a termékeknek változatai vannak… így a változatok beépítése az oldal címébe azt jelenti, hogy végig kell lépnie a lehetőségek között, és dinamikusan fel kell építenie a karakterláncot, amikor a sablon egy termék sablon.

Íme egy példa a címre kockás pulóver ruha.

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

És itt van a kód, amely ezt az eredményt adja:

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

A kód így bomlik:

  • Oldal címe – először a tényleges oldalcímet kell beépíteni… a sablontól függetlenül.
  • Címkék – címkéket építsen be az oldalhoz társított címkék összekapcsolásával.
  • Termék színei – görgessen végig a színlehetőségeken, és építsen fel egy vesszővel elválasztott karakterláncot.
  • Metafields – ennek a Shopify-példánynak a ruha hossza metamezőként szerepel, amelyet bele kívánunk foglalni.
  • Ár – tartalmazza az első változat árát.
  • Üzlet neve – írja be az üzlet nevét a cím végére.
  • szétválasztó – az elválasztó megismétlése helyett csak karakterlánc-hozzárendelést készítünk belőle, és megismételjük. Így, ha úgy döntünk, hogy a jövőben megváltoztatjuk ezt a szimbólumot, az csak egy helyen lesz.

Optimalizálja Shopify oldalának meta leírását

Amikor feltérképeztük a webhelyet, azt vettük észre, hogy minden meghívott témasablonoldal megismétli a kezdőlap SEO beállításait. Más metaleírást szerettünk volna hozzáadni attól függően, hogy az oldal kezdőlap, gyűjteményoldal vagy tényleges termékoldal volt.

Ha nem biztos benne, hogy mi a sablon neve, egyszerűen adjon hozzá egy HTML-jegyzetet theme.liquid fájlt, és megtekintheti az oldal forrását az azonosításhoz.

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

Ez lehetővé tette számunkra, hogy azonosítsuk az összes sablont, amely a webhely meta leírását használta, így a sablon alapján módosítani tudtuk a meta leírást.

Íme a meta leírás, amelyet a fenti termékoldalon szeretnénk:

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

Íme a kód:

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

Az eredmény dinamikus, átfogó cím- és metaleírás-készlet bármilyen típusú sablonhoz vagy részletes termékoldalhoz. A továbbiakban nagy valószínűséggel átfogalmazom a kódot esetleírások segítségével, és egy kicsit jobban rendezem. De egyelőre sokkal szebb jelenlétet biztosít a keresőmotorok eredményoldalain.

Mellesleg, ha szeretnél egy nagy kedvezményt… szeretnénk, ha kipróbálnád az oldalt egy 30%-os kuponnal, használj kódot HIGHBRIDGE kijelentkezéskor.

Vásároljon ruhákat most

Nyilvánosságra hozatala: a Shopify és Themeforest és ezeket a hivatkozásokat használom ebben a cikkben. A Closet52 a cégem ügyfele, Highbridge. Ha segítséget szeretne kérni az e-kereskedelmi jelenlétének Shopify használatával történő fejlesztésében, kérjük kapcsolat.