Shopify. Ինչպես ծրագրավորել դինամիկ թեմաների վերնագրեր և մետա նկարագրություններ SEO-ի համար՝ օգտագործելով Liquid

Shopify Template Liquid - Անհատականացրեք SEO վերնագիրը և մետա նկարագրությունը

Եթե ​​դուք կարդում եք իմ հոդվածները վերջին մի քանի ամիսների ընթացքում, կնկատեք, որ ես շատ ավելին եմ կիսվում էլեկտրոնային առևտրի մասին, հատկապես՝ կապված Shopify. Իմ ընկերությունը կառուցում է խիստ հարմարեցված և ինտեգրված Shopify Plus- ը կայք հաճախորդի համար: Ամիսներ և տասնյակ հազարավոր դոլարներ ծախսելու փոխարեն թեմա զրոյից կառուցելու վրա, մենք հաճախորդին խոսեցինք, որ թույլ տա մեզ օգտագործել լավ կառուցված և աջակցվող թեմա, որը փորձարկվել և փորձարկվել է: Մենք գնացինք հետ Վոկի, բազմաֆունկցիոնալ Shopify թեմա, որն ունի տոննա հնարավորություններ:

Այն դեռևս պահանջում էր ամիսներ զարգացում՝ ներառելու համար մեզ անհրաժեշտ ճկունությունը՝ հիմնված շուկայի ուսումնասիրության և մեր հաճախորդի կարծիքի վրա: Իրականացման հիմքում ընկած էր այն, որ Closet52-ը ուղղակի սպառողների էլեկտրոնային առևտրի կայք է, որտեղ կանայք կկարողանան հեշտությամբ գնել զգեստներ առցանց.

Քանի որ Wokiee-ն բազմաֆունկցիոնալ թեմա է, մի ոլորտ, որի վրա մենք մեծ ուշադրություն ենք դարձնում, որոնման համակարգի օպտիմալացումն է: Ժամանակի ընթացքում մենք հավատում ենք, որ օրգանական որոնումը կլինի ամենացածր արժեքը մեկ ձեռքբերման համար, և գնորդները, ովքեր գնելու ամենաբարձր մտադրություն ունեն: Մեր հետազոտության ընթացքում մենք բացահայտեցինք, որ կանայք զգեստներ են գնում 5 հիմնական որոշումների ազդեցությամբ.

  • Զգեստների ոճեր
  • Զգեստների գույներ
  • Զգեստների գները
  • Անվճար առաքում
  • Առանց դժվարության վերադարձներ

Վերնագրերը և մետա նկարագրությունները կարևոր են ձեր բովանդակությունը ինդեքսավորելու և պատշաճ կերպով ցուցադրելու համար: Այսպիսով, իհարկե, մենք ցանկանում ենք վերնագրի պիտակ և մետա նկարագրություններ, որոնք ունեն այդ հիմնական տարրերը:

  • The վերնագրի տեքստը Ձեր էջի վերնագրում կարևոր է ապահովել, որ ձեր էջերը պատշաճ կերպով ինդեքսավորվեն համապատասխան որոնումների համար:
  • The Meta Description ցուցադրվում է որոնման արդյունքների էջերում (SERPs), որոնք լրացուցիչ տեղեկատվություն են տալիս, որը հրապուրում է որոնման օգտվողին սեղմել:

Խնդիրն այն է, որ Shopify-ը հաճախ կիսում է վերնագրերը և մետա նկարագրությունները տարբեր էջի ձևանմուշների մեջ՝ տուն, հավաքածուներ, ապրանքներ և այլն: Այսպիսով, ես ստիպված էի որոշակի տրամաբանություն գրել վերնագրերն ու մետա նկարագրությունները դինամիկ կերպով պատշաճ կերպով համալրելու համար:

Օպտիմիզացրեք ձեր Shopify էջի վերնագիրը

Shopify-ի թեմայի լեզուն է հեղուկ և դա բավականին լավ է: Ես չեմ անդրադառնա շարահյուսության բոլոր մանրամասներին, բայց դուք կարող եք դինամիկ կերպով ստեղծել էջի վերնագիր բավականին հեշտությամբ: Մի բան, որ դուք պետք է հիշեք այստեղ, այն է, որ ապրանքներն ունեն տարբերակներ… այնպես որ ձեր էջի վերնագրում տարբերակներ ներառելը նշանակում է, որ դուք պետք է շրջեք ընտրանքների միջով և դինամիկ կերպով կառուցեք տողը, երբ ձևանմուշը նման է: արտադրանք շաբլոն

Ահա մի վերնագրի օրինակ a վանդակավոր սվիտեր զգեստ.

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

Եվ ահա կոդը, որն առաջացնում է այդ արդյունքը.

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

Կոդը բաժանվում է այսպես.

  • Page Title – նախ ներառեք էջի իրական անվանումը… անկախ ձևանմուշից:
  • հատկորոշիչները – ներառել պիտակներ՝ միացնելով էջի հետ կապված պիտակները:
  • Ապրանքի գույները – շրջանցեք գունային տարբերակները և կառուցեք ստորակետերով բաժանված տող:
  • Metafields – Shopify-ի այս օրինակն ունի զգեստի երկարությունը որպես մետադաշտ, որը մենք ցանկանում ենք ներառել:
  • Գին – ներառում է առաջին տարբերակի գինը:
  • Խանութի անունը – վերնագրի վերջում ավելացրեք խանութի անվանումը:
  • Բաժանիչ – բաժանարարը կրկնելու փոխարեն, մենք այն պարզապես դարձնում ենք լարային հանձնարարություն և կրկնում ենք այն: Այդ կերպ, եթե մենք որոշենք փոխել այդ խորհրդանիշը ապագայում, այն միայն մեկ տեղում է։

Օպտիմիզացրեք ձեր Shopify էջի մետա նկարագրությունը

Երբ մենք սողացինք կայքը, մենք նկատեցինք, որ ցանկացած թեմայի ձևանմուշ էջ, որը կանչվել է, կրկնում է գլխավոր էջի SEO-ի կարգավորումները: Մենք ցանկանում էինք ավելացնել այլ մետա նկարագրություն՝ կախված նրանից, թե էջը գլխավոր էջ է, հավաքածուների էջ, թե իրական արտադրանքի էջ:

Եթե ​​վստահ չեք, թե որն է ձեր կաղապարի անունը, պարզապես ավելացրեք ձեր HTML նշումը թեման.հեղեղ ֆայլ, և դուք կարող եք դիտել էջի աղբյուրը՝ այն բացահայտելու համար:

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

Սա թույլ տվեց մեզ բացահայտել բոլոր կաղապարները, որոնք օգտագործում էին կայքի մետա նկարագրությունը, որպեսզի մենք կարողանանք փոփոխել մետա նկարագրությունը՝ հիմնվելով կաղապարի վրա:

Ահա մետա նկարագրությունը, որը մենք ցանկանում ենք վերը նշված ապրանքի էջում.

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

Ահա այդ կոդը.

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

Արդյունքը վերնագրերի և մետա նկարագրությունների դինամիկ, համապարփակ հավաքածու է ցանկացած տեսակի ձևանմուշի կամ մանրամասն արտադրանքի էջի համար: Շարժվելով առաջ՝ ես, ամենայն հավանականությամբ, կվերափոխեմ կոդը՝ օգտագործելով case հայտարարությունները և մի փոքր ավելի լավ կկազմակերպեմ այն: Բայց առայժմ այն ​​շատ ավելի լավ ներկայություն է առաջացնում որոնման արդյունքների էջերում:

Ի դեպ, եթե ցանկանում եք մեծ զեղչ… մենք կցանկանայինք, որ փորձարկեք կայքը 30% զեղչի կտրոնով, օգտագործեք կոդը: HIGHBRIDGE դուրսգրման ժամանակ:

Գնեք զգեստներ հիմա

Բացահայտում. Ես դուստր ձեռնարկություն եմ Shopify և themeforest և ես օգտագործում եմ այս հոդվածում նշված հղումները: Closet52-ը իմ ընկերության հաճախորդն է, Highbridge. Եթե ​​ցանկանում եք օգնություն զարգացնելու ձեր էլեկտրոնային առևտրի ներկայությունը Shopify-ի միջոցով, խնդրում ենք դիմեք մեզ.