Shopify: כיצד לתכנת כותרות נושאים דינמיים ומטא תיאורים עבור SEO באמצעות Liquid

Shopify Template Liquid - התאמה אישית של כותרת SEO ומטא תיאור

אם קראת את המאמרים שלי במהלך החודשים האחרונים, תשים לב ששיתפתי הרבה יותר על מסחר אלקטרוני, במיוחד לגבי Shopify. המשרד שלי בנה מערכת מותאמת ומשולבת במיוחד Shopify פלוס אתר עבור לקוח. במקום לבזבז חודשים ועשרות אלפי דולרים על בניית ערכת נושא מאפס, שוחחנו את הלקוח לאפשר לנו להשתמש בערכת נושא בנוי היטב ונתמך שנוסה ונבדק. הלכנו עם ווקי, ערכת נושא רב תכליתית של Shopify שיש לה המון יכולות.

עדיין נדרשו חודשים של פיתוח כדי לשלב את הגמישות הדרושה לנו בהתבסס על מחקרי שוק והמשוב של הלקוח שלנו. בליבת היישום היה ש-Closet52 הוא אתר מסחר אלקטרוני ישירות לצרכן שבו נשים יוכלו בקלות לקנות שמלות באינטרנט.

מכיוון ש-Wokiee הוא נושא רב תכליתי, תחום אחד שאנו מתמקדים בו הוא אופטימיזציה למנועי חיפוש. לאורך זמן, אנו מאמינים שחיפוש אורגני יהיה העלות הנמוכה ביותר לרכישה וקונים עם הכוונה הגבוהה ביותר לרכוש. במחקר שלנו, זיהינו שנשים קונות שמלות עם 5 משפיעי החלטות מרכזיים:

  • סגנונות של שמלות
  • צבעים של שמלות
  • מחירי שמלות
  • משלוח חינם
  • החזרות ללא טרחה

כותרות ותיאורי מטא הם קריטיים באינדקס והצגה של התוכן שלך כראוי. אז, כמובן, אנחנו רוצים תג כותרת ומטא תיאורים שיש להם את האלמנטים העיקריים האלה!

  • אל האני תג הכותרת בכותרת הדף שלך הוא קריטי כדי להבטיח שהדפים שלך יוכנסו לאינדקס כראוי עבור החיפושים הרלוונטיים.
  • אל האני תיאור meta מוצג בדפי תוצאות של מנועי חיפוש (SERP) המספקים מידע נוסף שמפתה את משתמש החיפוש ללחוץ.

האתגר הוא ש-Shopify לעתים קרובות משתפת כותרות ומטא תיאורים על פני תבניות עמוד שונות - בית, אוספים, מוצרים וכו'. לכן, הייתי צריך לכתוב קצת היגיון כדי לאכלס באופן דינמי את הכותרות ואת תיאורי המטא.

בצע אופטימיזציה של כותרת הדף שלך ב-Shopify

שפת הנושא של Shopify היא נוזל וזה די טוב. אני לא אכנס לכל הפרטים של התחביר, אבל אתה יכול ליצור באופן דינמי כותרת עמוד די בקלות. דבר אחד שאתה צריך לזכור כאן הוא שלמוצרים יש גרסאות... לכן שילוב גרסאות בכותרת הדף שלך אומר שאתה צריך לעבור בלולאה בין האפשרויות ולבנות באופן דינמי את המחרוזת כאשר התבנית היא מוצר תבנית.

הנה דוגמה לכותרת עבור א שמלת סוודר משובצת.

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

הקוד מתפרק כך:

  • כותרת הדף - שלבו תחילה את כותרת העמוד בפועל... ללא קשר לתבנית.
  • תגים - שלב תגים על ידי צירוף תגים המשויכים לדף.
  • צבעי מוצר - לולאה בין אפשרויות הצבע ובנה מחרוזת מופרדת בפסיקים.
  • מטאפילדים - למופע הזה של 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 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 }}">

התוצאה היא קבוצה דינמית ומקיפה של כותרות ומטא תיאורים עבור כל סוג של תבנית או דף המוצר המפורט. בהמשך, סביר להניח שאשנה את הקוד באמצעות הצהרות מקרה ואארגן אותו קצת יותר טוב. אבל לעת עתה, זה מייצר נוכחות הרבה יותר יפה בדפי תוצאות של מנועי החיפוש.

אגב, אם תרצו הנחה גדולה... נשמח שתבדקו את האתר עם קופון של 30% הנחה, השתמשו בקוד HIGHBRIDGE בעת הצ'ק-אאוט.

קנה שמלות עכשיו

גילוי נאות: אני שותף ל Shopify ו ThemeForest ואני משתמש בקישורים האלה במאמר זה. Closet52 הוא לקוח של המשרד שלי, Highbridge. אם תרצה סיוע בפיתוח נוכחות המסחר האלקטרוני שלך באמצעות Shopify, בבקשה תיצור איתנו קשר.