Shopify: लिक्विड का उपयोग करके SEO के लिए डायनेमिक थीम टाइटल और मेटा विवरण कैसे प्रोग्राम करें

Shopify टेम्प्लेट लिक्विड - SEO टाइटल और मेटा विवरण कस्टमाइज़ करें

यदि आप पिछले कुछ महीनों से मेरे लेख पढ़ रहे हैं, तो आप देखेंगे कि मैं ई-कॉमर्स के बारे में बहुत कुछ साझा कर रहा हूं, विशेष रूप से इसके संबंध में Shopify. मेरी फर्म अत्यधिक अनुकूलित और एकीकृत का निर्माण कर रही है Shopify प्लस एक ग्राहक के लिए साइट। शुरुआत से एक थीम बनाने पर महीनों और दसियों हज़ार डॉलर खर्च करने के बजाय, हमने क्लाइंट से हमें एक अच्छी तरह से निर्मित और समर्थित थीम का उपयोग करने की अनुमति देने के लिए बात की, जिसे आजमाया और परखा गया। हम साथ गए Wokiee, एक बहुउद्देशीय Shopify थीम जिसमें बहुत सारी क्षमताएं हैं।

बाजार अनुसंधान और हमारे ग्राहकों की प्रतिक्रिया के आधार पर हमें आवश्यक लचीलेपन को शामिल करने के लिए अभी भी महीनों के विकास की आवश्यकता है। कार्यान्वयन के मूल में यह था कि Closet52 एक प्रत्यक्ष-से-उपभोक्ता ईकॉमर्स साइट है जहां महिलाएं आसानी से ऑनलाइन कपड़े खरीदें.

चूंकि वोकी एक बहुउद्देश्यीय विषय है, एक क्षेत्र जिस पर हम अत्यधिक ध्यान केंद्रित कर रहे हैं वह है सर्च इंजन ऑप्टिमाइजेशन। समय के साथ, हम मानते हैं कि जैविक खोज प्रति अधिग्रहण सबसे कम लागत और खरीदारी करने के उच्चतम इरादे वाले खरीदार होंगे। हमारे शोध में, हमने पाया कि महिलाएं 5 प्रमुख निर्णय प्रभावितों के साथ कपड़े खरीदती हैं:

  • कपड़े की शैलियाँ
  • कपड़े के रंग
  • कपड़े की कीमतें
  • मुफ़्त शिपिंग
  • परेशानी मुक्त रिटर्न

शीर्षक और मेटा विवरण महत्वपूर्ण हैं अपनी सामग्री को अनुक्रमित करने और ठीक से प्रदर्शित करने पर। तो, निश्चित रूप से, हम एक शीर्षक टैग और मेटा विवरण चाहते हैं जिसमें वे प्रमुख तत्व हों!

  • RSI शीर्षक टैग यह सुनिश्चित करने के लिए कि प्रासंगिकता की खोजों के लिए आपके पृष्ठ ठीक से अनुक्रमित हैं, आपके पृष्ठ शीर्षक में महत्वपूर्ण है।
  • RSI मेटा विवरण खोज इंजन परिणाम पृष्ठों (एसईआरपी) में प्रदर्शित होता है जो अतिरिक्त जानकारी प्रदान करता है जो खोज उपयोगकर्ता को क्लिक करने के लिए प्रेरित करता है।

चुनौती यह है कि Shopify अक्सर अलग-अलग पेज टेम्प्लेट में शीर्षक और मेटा विवरण साझा करता है - घर, संग्रह, उत्पाद, आदि। इसलिए, मुझे शीर्षक और मेटा विवरणों को गतिशील रूप से ठीक से पॉप्युलेट करने के लिए कुछ तर्क लिखना पड़ा।

अपना Shopify पृष्ठ शीर्षक अनुकूलित करें

Shopify की थीम भाषा लिक्विड है और यह काफी अच्छी है। मैं वाक्य रचना के सभी विवरणों में नहीं जाऊंगा, लेकिन आप गतिशील रूप से एक पृष्ठ शीर्षक को बहुत आसान बना सकते हैं। यहां आपको एक बात ध्यान में रखनी है कि उत्पादों में विविधताएं होती हैं ... इसलिए अपने पृष्ठ शीर्षक में विविधताओं को शामिल करने का मतलब है कि आपको विकल्पों के माध्यम से लूप करना होगा और टेम्पलेट के एक होने पर गतिशील रूप से स्ट्रिंग का निर्माण करना होगा। उत्पाद टेम्पलेट।

यहाँ a . के शीर्षक का एक उदाहरण दिया गया है प्लेड स्वेटर ड्रेस.

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

और यहां वह कोड है जो उस परिणाम को उत्पन्न करता है:

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

कोड इस तरह टूट जाता है:

  • पृष्ठ शीर्षक – पहले वास्तविक पृष्ठ शीर्षक शामिल करें… टेम्पलेट की परवाह किए बिना।
  • टैग - किसी पेज से जुड़े टैग्स को जोड़कर टैग्स को शामिल करें।
  • उत्पाद रंग - रंग विकल्पों के माध्यम से लूप करें और अल्पविराम से अलग स्ट्रिंग बनाएं।
  • मेटाफ़ील्ड - इस Shopify उदाहरण में पोशाक की लंबाई एक मेटाफ़ील्ड के रूप में है जिसे हम शामिल करना चाहते हैं।
  • मूल्य - पहले वेरिएंट की कीमत शामिल करें।
  • दुकान का नाम - शीर्षक के अंत में दुकान का नाम जोड़ें।
  • विभाजक - विभाजक को दोहराने के बजाय, हम इसे केवल एक स्ट्रिंग असाइनमेंट बनाते हैं और इसे दोहराते हैं। इस तरह, यदि हम भविष्य में उस प्रतीक को बदलने का निर्णय लेते हैं, तो यह केवल एक ही स्थान पर है।

अपने Shopify पेज मेटा विवरण को ऑप्टिमाइज़ करें

जब हमने साइट को क्रॉल किया, तो हमने देखा कि कोई भी थीम टेम्प्लेट पेज जिसे कॉल किया गया था, वह होम पेज SEO सेटिंग्स को दोहरा रहा था। हम इस पर निर्भर करते हुए एक अलग मेटा विवरण जोड़ना चाहते थे कि यह पेज एक होम पेज था, कलेक्शन पेज था या वास्तविक उत्पाद पेज था।

यदि आप सुनिश्चित नहीं हैं कि आपका टेम्पलेट नाम क्या है, तो बस अपने में एक HTML नोट जोड़ें theme.liquid फ़ाइल और आप इसे पहचानने के लिए पृष्ठ के स्रोत को देख सकते हैं।

<!-- 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 hassle-free 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 == '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 }}">

परिणाम किसी भी प्रकार के टेम्पलेट या विस्तृत उत्पाद पृष्ठ के लिए शीर्षक और मेटा विवरण का एक गतिशील, व्यापक सेट है। आगे बढ़ते हुए, मैं केस स्टेटमेंट का उपयोग करके कोड को दोबारा सुधार दूंगा और इसे थोड़ा बेहतर तरीके से व्यवस्थित कर दूंगा। लेकिन अभी के लिए, यह खोज इंजन परिणाम पृष्ठों में बहुत अच्छी उपस्थिति दे रहा है।

वैसे, यदि आप एक बड़ी छूट चाहते हैं ... हम चाहते हैं कि आप 30% छूट वाले कूपन के साथ साइट का परीक्षण करें, कोड का उपयोग करें HIGHBRIDGE चेक आउट करते समय।

कपड़े के लिए अभी खरीदारी करें

प्रकटीकरण: मैं एक सहबद्ध हूँ Shopify और ThemeForest और मैं इस लेख में उन कड़ियों का उपयोग कर रहा हूं। Closet52 मेरी फर्म का ग्राहक है, Highbridge. यदि आप Shopify का उपयोग करके अपनी ई-कॉमर्स उपस्थिति विकसित करने में सहायता चाहते हैं, तो कृपया हमसे संपर्क करें.