Shopify: Paano Mag-program ng Mga Pamagat ng Dynamic na Tema at Paglalarawan ng Meta para sa SEO gamit ang Liquid

Shopify Template Liquid - I-customize ang Pamagat ng SEO at Paglalarawan ng Meta

Kung binabasa mo ang aking mga artikulo sa nakalipas na ilang buwan, mapapansin mo na marami pa akong ibinabahagi tungkol sa ecommerce, lalo na tungkol sa Shopify. Ang aking kumpanya ay nagtatayo ng isang lubos na na-customize at pinagsama-sama ShopifyPlus site para sa isang kliyente. Sa halip na gumugol ng mga buwan at sampu-sampung libong dolyar sa pagbuo ng isang tema mula sa simula, nakipag-usap kami sa kliyente na payagan kaming gumamit ng isang mahusay na binuo at suportadong tema na sinubukan at nasubok. Sumama kami Wookiee, isang Multipurpose Shopify Theme na may napakaraming kakayahan.

Nangangailangan pa rin ito ng mga buwan ng pag-unlad upang maisama ang flexibility na kailangan namin batay sa pananaliksik sa merkado at feedback ng aming kliyente. Sa ubod ng pagpapatupad ay ang Closet52 ay isang direktang-sa-consumer na ecommerce na site kung saan ang mga kababaihan ay madaling bumili ng mga damit online.

Dahil ang Wokiee ay isang multipurpose na tema, isang lugar na lubos naming pinagtutuunan ng pansin ay ang pag-optimize ng search engine. Sa paglipas ng panahon, naniniwala kami na ang organic na paghahanap ang magiging pinakamababang cost per acquisition at mga mamimili na may pinakamataas na layuning bumili. Sa aming pananaliksik, natukoy namin na ang mga kababaihan ay namimili ng mga damit na may 5 pangunahing tagaimpluwensya ng desisyon:

  • Mga istilo ng damit
  • Mga kulay ng damit
  • Mga presyo ng mga damit
  • Libreng Pagpapadala
  • Walang gulo na Pagbabalik

Ang mga pamagat at paglalarawan ng meta ay kritikal sa pagkuha ng iyong nilalaman na na-index at naipakita nang maayos. Kaya, siyempre, gusto namin ng tag ng pamagat at mga paglalarawan ng meta na mayroong mga pangunahing elementong iyon!

  • Ang tag ng pamagat sa iyong page heading ay mahalaga upang matiyak na ang iyong mga pahina ay nai-index nang maayos para sa mga paghahanap na may kaugnayan.
  • Ang paglalarawan ng meta ay ipinapakita sa mga pahina ng resulta ng search engine (SERPs) na nagbibigay ng karagdagang impormasyon na humihikayat sa user ng paghahanap na mag-click.

Ang hamon ay madalas na nagbabahagi ang Shopify ng mga pamagat at paglalarawan ng meta sa iba't ibang mga template ng pahina - tahanan, mga koleksyon, mga produkto, atbp. Kaya, kinailangan kong magsulat ng ilang lohika upang dynamic na mapuno ang mga pamagat at paglalarawan ng meta nang maayos.

I-optimize ang Pamagat ng Iyong Shopify Page

Ang wika ng tema ng Shopify ay likido at ito ay medyo mabuti. Hindi ko papasok sa lahat ng mga detalye ng syntax, ngunit maaari mong dynamic na bumuo ng isang pamagat ng pahina nang medyo madali. Ang isang bagay na dapat mong tandaan dito ay ang mga produkto ay may mga variant ... kaya ang pagsasama ng mga variant sa pamagat ng iyong pahina ay nangangahulugan na kailangan mong i-loop ang mga opsyon at dynamic na buuin ang string kapag ang template ay isang produkto template.

Narito ang isang halimbawa ng isang pamagat para sa a plaid sweater na damit.

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

At narito ang code na gumagawa ng resultang iyon:

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

Ang code ay nasira tulad nito:

  • Pamagat ng Pahina – isama muna ang aktwal na pamagat ng pahina... anuman ang template.
  • Mga tag – isama ang mga tag sa pamamagitan ng pagsali sa mga tag na nauugnay sa isang pahina.
  • Mga Kulay ng Produkto – pag-ikot sa mga pagpipilian sa kulay at bumuo ng isang string na pinaghihiwalay ng kuwit.
  • Mga Metafield – ang Shopify instance na ito ay may haba ng damit bilang metafield na gusto naming isama.
  • presyo – isama ang presyo ng unang variant.
  • Pangalan ng Shop – idagdag ang pangalan ng tindahan sa dulo ng pamagat.
  • panghiwalay – sa halip na ulitin ang separator, ginagawa lang namin itong string assignment at inuulit ito. Sa ganoong paraan, kung magpasya kaming baguhin ang simbolo na iyon sa hinaharap, ito ay nasa isang lugar lamang.

I-optimize ang Iyong Shopify Page Meta Description

Nang i-crawl namin ang site, napansin namin na ang anumang page ng template ng tema na tinawag ay umuulit sa mga setting ng SEO ng home page. Nais naming magdagdag ng ibang paglalarawan ng meta depende sa kung ang pahina ay isang home page, pahina ng mga koleksyon, o aktwal na pahina ng produkto.

Kung hindi ka sigurado kung ano ang pangalan ng iyong template, magdagdag lang ng HTML note sa iyong tema.liquid file at maaari mong tingnan ang pinagmulan ng pahina upang makilala ito.

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

Nagbigay-daan ito sa amin na tukuyin ang lahat ng mga template na gumamit ng meta description ng site upang mabago namin ang meta description batay sa template.

Narito ang paglalarawan ng meta na gusto namin sa pahina ng produkto sa itaas:

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

Narito ang code na iyon:

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

Ang resulta ay isang pabago-bago, komprehensibong hanay ng mga pamagat at paglalarawan ng meta para sa anumang uri ng template o ang detalyadong pahina ng produkto. Sa pasulong, malamang na refactor ko ang code gamit ang mga case statement at ayusin ito nang mas mahusay. Ngunit sa ngayon, gumagawa ito ng mas magandang presensya sa mga pahina ng resulta ng search engine.

Oo nga pala, kung gusto mo ng magandang diskwento… gusto naming subukan mo ang site na may 30% diskwento na kupon, gumamit ng code HIGHBRIDGE kapag nagcheck-out.

Mamili na ng mga Dress

Pagbubunyag: Ako ay isang kaakibat para sa Shopify at Themeforest at ginagamit ko ang mga link na iyon sa artikulong ito. Ang Closet52 ay isang kliyente ng aking kompanya, Highbridge. Kung gusto mo ng tulong sa pagbuo ng iyong presensya sa ecommerce gamit ang Shopify, mangyaring Makipag-ugnayan sa amin.