Shopify: วิธีตั้งโปรแกรมชื่อธีมแบบไดนามิกและคำอธิบายเมตาสำหรับ SEO โดยใช้ Liquid

Shopify Template Liquid - ปรับแต่งชื่อ SEO และ Meta Description

หากคุณได้อ่านบทความของฉันในช่วงสองสามเดือนที่ผ่านมา คุณจะสังเกตเห็นว่าฉันได้แบ่งปันมากขึ้นเกี่ยวกับอีคอมเมิร์ซ โดยเฉพาะอย่างยิ่งเกี่ยวกับ Shopify. บริษัทของฉันได้สร้างการปรับแต่งและบูรณาการขั้นสูง ShopifyPlus ไซต์สำหรับลูกค้า แทนที่จะใช้เงินหลายเดือนและหลายหมื่นดอลลาร์เพื่อสร้างธีมตั้งแต่เริ่มต้น เราได้พูดคุยกับลูกค้าเพื่อให้เราใช้ธีมที่ได้รับการสนับสนุนและออกแบบมาอย่างดีซึ่งผ่านการทดลองและทดสอบแล้ว เราไปด้วย วอคกี้ธีม Shopify อเนกประสงค์ที่มีความสามารถมากมาย

ยังคงต้องใช้เวลาหลายเดือนในการพัฒนาเพื่อรวมเอาความยืดหยุ่นที่เราต้องการจากการวิจัยตลาดและคำติชมของลูกค้าของเรา หัวใจสำคัญของการดำเนินการคือ Closet52 เป็นไซต์อีคอมเมิร์ซโดยตรงต่อผู้บริโภค ซึ่งผู้หญิงจะสามารถ ซื้อชุดออนไลน์.

เนื่องจาก Wokee เป็นธีมอเนกประสงค์ สิ่งหนึ่งที่เรามุ่งเน้นอย่างมากคือการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา เมื่อเวลาผ่านไป เราเชื่อว่าการค้นหาทั่วไปจะเป็นราคาต่อหนึ่งการกระทำที่ต่ำที่สุด และผู้ซื้อที่มีความตั้งใจสูงสุดในการซื้อ ในการวิจัยของเรา เราพบว่าผู้หญิงเลือกซื้อชุดที่มีผู้มีอิทธิพลในการตัดสินใจที่สำคัญ 5 คน:

  • รูปแบบของชุด
  • สีของเดรส
  • ราคาชุดเดรส
  • จัดส่งฟรี
  • ผลตอบแทนที่ไม่ยุ่งยาก

ชื่อและคำอธิบายเมตามีความสำคัญ ในการจัดทำดัชนีเนื้อหาของคุณและแสดงอย่างถูกต้อง แน่นอน เราต้องการแท็กชื่อและคำอธิบายเมตาที่มีองค์ประกอบหลักเหล่านั้น!

  • พื้นที่ปลูก แท็กชื่อ ในส่วนหัวของหน้าเป็นสิ่งสำคัญเพื่อให้แน่ใจว่าหน้าเว็บของคุณได้รับการจัดทำดัชนีอย่างเหมาะสมสำหรับการค้นหาที่เกี่ยวข้อง
  • พื้นที่ปลูก รายละเอียด Meta จะแสดงในหน้าผลลัพธ์ของเครื่องมือค้นหา (SERP) ที่ให้ข้อมูลเพิ่มเติมที่ดึงดูดให้ผู้ใช้ค้นหาคลิกผ่าน

ความท้าทายคือ 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>

รหัสแบ่งดังนี้:

  • ชื่อหน้า – ใส่ชื่อหน้าจริงก่อน… โดยไม่คำนึงถึงเทมเพลต
  • แท็ก – รวมแท็กโดยการเข้าร่วมแท็กที่เกี่ยวข้องกับหน้า
  • สีของผลิตภัณฑ์ – วนซ้ำตัวเลือกสีและสร้างสตริงที่คั่นด้วยเครื่องหมายจุลภาค
  • Metafields – อินสแตนซ์ Shopify นี้มีความยาวชุดเป็นเมตาฟิลด์ที่เราต้องการรวมไว้
  • ราคา – รวมราคาของตัวแปรแรก
  • ชื่อร้านค้า - ใส่ชื่อร้านต่อท้ายชื่อร้าน
  • เครื่องสกัด – แทนที่จะใช้ตัวคั่นซ้ำ เราเพียงแค่กำหนดให้เป็นการกำหนดสตริงแล้วทำซ้ำ ด้วยวิธีนี้ หากเราตัดสินใจที่จะเปลี่ยนสัญลักษณ์นั้นในอนาคต จะมีที่เดียวเท่านั้น

เพิ่มประสิทธิภาพคำอธิบาย Meta Shopify Page ของคุณ

เมื่อเรารวบรวมข้อมูลเว็บไซต์ เราสังเกตเห็นว่าหน้าเทมเพลตของธีมที่เรียกว่ามีการตั้งค่า SEO ของหน้าแรกซ้ำ เราต้องการเพิ่มคำอธิบายเมตาที่แตกต่างกันขึ้นอยู่กับว่าหน้านั้นเป็นโฮมเพจ หน้าคอลเลกชัน หรือหน้าผลิตภัณฑ์จริง

หากคุณไม่แน่ใจว่าชื่อเทมเพลตของคุณคืออะไร เพียงเพิ่มโน้ต HTML ใน your 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 }}">

ผลลัพธ์ที่ได้คือชุดชื่อและคำอธิบายเมตาที่ครอบคลุมและไดนามิกสำหรับเทมเพลตประเภทใดก็ได้หรือหน้าผลิตภัณฑ์โดยละเอียด ในอนาคต ฉันจะจัดโครงสร้างโค้ดใหม่โดยใช้คำสั่ง case และจัดระเบียบให้ดีขึ้นเล็กน้อย แต่สำหรับตอนนี้ มีการแสดงสถานะที่ดีกว่ามากในหน้าผลลัพธ์ของเครื่องมือค้นหา

อย่างไรก็ตาม หากคุณต้องการส่วนลดมาก... เราอยากให้คุณทดสอบเว็บไซต์ด้วยคูปองส่วนลด 30% ให้ใช้รหัส HIGHBRIDGE เมื่อเช็คเอาท์

เลือกซื้อเดรสเลย

การเปิดเผยข้อมูล: ฉันเป็น บริษัท ในเครือของ Shopify และ Themeforest และฉันกำลังใช้ลิงก์เหล่านั้นในบทความนี้ Closet52 เป็นลูกค้าของบริษัทของฉัน Highbridge. หากคุณต้องการความช่วยเหลือในการพัฒนาสถานะอีคอมเมิร์ซของคุณโดยใช้ Shopify โปรด ติดต่อเรา.