Shopify: Cara Memprogram Judul Tema Dinamis dan Deskripsi Meta untuk SEO menggunakan Liquid

Shopify Template Liquid - Sesuaikan Judul SEO dan Meta Description

Jika Anda telah membaca artikel saya beberapa bulan terakhir, Anda akan melihat bahwa saya telah berbagi lebih banyak tentang e-niaga, terutama yang berkaitan dengan Shopify. Perusahaan saya telah membangun yang sangat disesuaikan dan terintegrasi ShopifyPlus situs untuk klien. Daripada menghabiskan waktu berbulan-bulan dan puluhan ribu dolar untuk membangun tema dari awal, kami membujuk klien untuk mengizinkan kami menggunakan tema yang dibuat dengan baik dan didukung yang telah dicoba dan diuji. Kami pergi dengan Wokiee, Tema Shopify serbaguna yang memiliki banyak kemampuan.

Masih diperlukan berbulan-bulan pengembangan untuk menggabungkan fleksibilitas yang kami butuhkan berdasarkan riset pasar dan umpan balik klien kami. Inti dari implementasinya adalah Closet52 adalah situs ecommerce direct-to-consumer dimana wanita dapat dengan mudah beli gaun online.

Karena Wookiee adalah tema multiguna, satu area yang sangat kami fokuskan adalah pengoptimalan mesin telusur. Seiring waktu, kami percaya bahwa pencarian organik akan menjadi biaya terendah per akuisisi dan pembeli dengan niat tertinggi untuk membeli. Dalam penelitian kami, kami mengidentifikasi bahwa wanita berbelanja gaun dengan 5 influencer keputusan utama:

  • Gaya gaun
  • Warna gaun
  • Harga gaun
  • Gratis Ongkos Kirim
  • Pengembalian Tanpa Repot

Judul dan deskripsi meta sangat penting untuk mendapatkan konten Anda diindeks dan ditampilkan dengan benar. Jadi, tentu saja, kami menginginkan tag judul dan deskripsi meta yang memiliki elemen kunci tersebut!

  • The tag judul dalam judul halaman Anda sangat penting untuk memastikan halaman Anda diindeks dengan benar untuk pencarian yang relevan.
  • The Meta Description ditampilkan di halaman hasil mesin pencari (SERP) yang memberikan informasi tambahan yang menarik pengguna pencarian untuk mengklik.

Tantangannya adalah Shopify sering membagikan judul dan deskripsi meta di berbagai templat halaman – beranda, koleksi, produk, dll. Jadi, saya harus menulis beberapa logika untuk secara dinamis mengisi judul dan deskripsi meta dengan benar.

Optimalkan Judul Halaman Shopify Anda

Bahasa tema Shopify cair dan cukup bagus. Saya tidak akan membahas semua detail sintaks, tetapi Anda dapat membuat judul halaman secara dinamis dengan cukup mudah. Satu hal yang harus Anda ingat di sini adalah bahwa produk memiliki varian … jadi memasukkan varian ke dalam judul halaman Anda berarti Anda harus mengulang opsi dan secara dinamis membangun string saat template adalah produk Template.

Berikut adalah contoh judul untuk a baju sweter kotak-kotak.

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

Dan inilah kode yang menghasilkan hasil itu:

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

Kode rusak seperti ini:

  • Page Title – masukkan judul halaman yang sebenarnya terlebih dahulu… terlepas dari templatenya.
  • Tag – menggabungkan tag dengan menggabungkan tag yang terkait dengan halaman.
  • Warna Produk – ulangi opsi warna dan buat string yang dipisahkan koma.
  • Medan Meta – Instance Shopify ini memiliki panjang gaun sebagai metafield yang ingin kami sertakan.
  • Harga – termasuk harga varian pertama.
  • toko Nama – tambahkan nama toko di akhir judul.
  • alat pemisah – daripada mengulangi pemisah, kami hanya menjadikannya sebagai tugas string dan mengulanginya. Dengan begitu, jika kita memutuskan untuk mengubah simbol itu di masa depan, itu hanya di satu tempat.

Optimalkan Deskripsi Meta Halaman Shopify Anda

Saat kami merayapi situs, kami melihat bahwa halaman template tema apa pun yang dipanggil mengulangi pengaturan SEO halaman beranda. Kami ingin menambahkan deskripsi meta yang berbeda tergantung pada apakah halaman tersebut adalah halaman beranda, halaman koleksi, atau halaman produk yang sebenarnya.

Jika Anda tidak yakin apa nama template Anda, cukup tambahkan catatan HTML di theme.liquid file dan Anda dapat melihat sumber halaman untuk mengidentifikasinya.

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

Ini memungkinkan kami untuk mengidentifikasi semua template yang menggunakan deskripsi meta situs sehingga kami dapat mengubah deskripsi meta berdasarkan template.

Berikut meta description yang kami inginkan pada halaman produk di atas:

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

Berikut kode itu:

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

Hasilnya adalah kumpulan judul dan deskripsi meta yang dinamis dan komprehensif untuk semua jenis templat atau halaman produk terperinci. Ke depan, kemungkinan besar saya akan memperbaiki kode menggunakan pernyataan kasus dan mengaturnya sedikit lebih baik. Tapi untuk saat ini, itu menghasilkan kehadiran yang jauh lebih baik di halaman hasil mesin pencari.

Omong-omong, jika Anda ingin diskon besar… kami ingin Anda menguji situs dengan kupon diskon 30%, gunakan kode HIGHBRIDGE saat check out.

Belanja Gaun Sekarang

Pengungkapan: Saya adalah afiliasi untuk Shopify serta Themeforest dan saya menggunakan tautan tersebut di artikel ini. Closet52 adalah klien perusahaan saya, Highbridge. Jika Anda ingin bantuan dalam mengembangkan kehadiran e-niaga Anda menggunakan Shopify, silakan atau hubungi kami melalui.