Shopify: كيفية برمجة عناوين السمات الديناميكية والأوصاف التعريفية لكبار المسئولين الاقتصاديين باستخدام السائل

Shopify Template Liquid - تخصيص عنوان SEO ووصف Meta

إذا كنت تقرأ مقالاتي في الأشهر القليلة الماضية ، فستلاحظ أنني كنت أشارك الكثير حول التجارة الإلكترونية ، لا سيما فيما يتعلق Shopify. تقوم شركتي ببناء نموذج متكامل ومخصص للغاية Shopify Plus موقع للعميل. بدلاً من إنفاق شهور وعشرات الآلاف من الدولارات على إنشاء موضوع من البداية ، تحدثنا مع العميل للسماح لنا باستخدام سمة جيدة الإنشاء ومدعومة تم تجربتها واختبارها. ذهبنا مع Wokiee، موضوع Shopify متعدد الأغراض يحتوي على الكثير من القدرات.

لا يزال الأمر يتطلب شهورًا من التطوير لدمج المرونة التي نحتاجها بناءً على أبحاث السوق وتعليقات عملائنا. كان جوهر التنفيذ هو أن Closet52 هو موقع تجارة إلكترونية مباشر للمستهلك حيث يمكن للمرأة بسهولة شراء الفساتين عبر الإنترنت.

نظرًا لأن Wokiee هو موضوع متعدد الأغراض ، فإن أحد المجالات التي نركز عليها بشدة هو تحسين محرك البحث. بمرور الوقت ، نعتقد أن البحث المجاني سيكون أقل تكلفة للاكتساب والمتسوقين الذين لديهم نية أعلى للشراء. في بحثنا ، حددنا أن النساء يتسوقن لفساتين مع 5 من المؤثرين الرئيسيين في اتخاذ القرار:

  • أنماط الفساتين
  • ألوان الفساتين
  • أسعار الفساتين
  • الشحن مجاني
  • إرجاع خالية من المتاعب

العناوين والأوصاف التعريفية مهمة في فهرسة المحتوى الخاص بك وعرضه بشكل صحيح. لذلك ، بالطبع ، نريد علامة عنوان وأوصاف تعريفية تحتوي على تلك العناصر الأساسية!

  • يوفر علامة العنوان في عنوان صفحتك أمر بالغ الأهمية لضمان فهرسة صفحاتك بشكل صحيح لعمليات البحث ذات الصلة.
  • يوفر وصف ميتا يتم عرضه في صفحات نتائج محرك البحث (SERPs) التي توفر معلومات إضافية تغري مستخدم البحث للنقر عليها.

التحدي هو أن Shopify غالبًا ما تشارك العناوين والأوصاف التعريفية عبر قوالب صفحات مختلفة - الصفحة الرئيسية ، المجموعات ، المنتجات ، إلخ. لذلك ، كان علي أن أكتب بعض المنطق لملء العناوين وأوصاف التعريف بشكل ديناميكي بشكل صحيح.

تحسين عنوان الصفحة الخاص بك Shopify

لغة موضوع Shopify سائلة وهي جيدة جدًا. لن أخوض في جميع تفاصيل بناء الجملة ، ولكن يمكنك إنشاء عنوان صفحة ديناميكيًا بسهولة تامة. هناك شيء واحد يجب أن تضعه في اعتبارك هنا هو أن المنتجات بها متغيرات ... لذا فإن دمج المتغيرات في عنوان صفحتك يعني أنه يتعين عليك تكرار الخيارات وإنشاء السلسلة ديناميكيًا عندما يكون القالب المنتج قالب.

فيما يلي مثال على عنوان ملف فستان سترة منقوشة.

<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 له طول الفستان كحقل metafield الذي نرغب في تضمينه.
  • السعر - تضمين سعر البديل الأول.
  • اسم المتجر - إضافة اسم المحل في نهاية العنوان.
  • الفاصل - بدلاً من تكرار الفاصل ، نجعله مجرد تعيين سلسلة ونكرره. بهذه الطريقة ، إذا قررنا تغيير هذا الرمز في المستقبل ، فسيكون في مكان واحد فقط.

تحسين وصف التعريف الخاص بصفحة Shopify

عندما قمنا بالزحف إلى الموقع ، لاحظنا أن أي صفحة قالب سمة تم استدعاؤها كانت تكرر إعدادات تحسين محركات البحث للصفحة الرئيسية. أردنا إضافة وصف تعريف مختلف اعتمادًا على ما إذا كانت الصفحة صفحة رئيسية أو صفحة مجموعات أو صفحة منتج فعلية.

إذا لم تكن متأكدًا من اسم النموذج الخاص بك ، فما عليك سوى إضافة ملاحظة 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 ، من فضلك اتصل بنا.