Shopify: Cara Memprogram Tajuk Tema Dinamik dan Penerangan Meta untuk SEO menggunakan Cecair

Cecair Templat Shopify - Sesuaikan Tajuk SEO dan Penerangan Meta

Jika anda telah membaca artikel saya beberapa bulan lepas, anda akan dapati bahawa saya telah berkongsi lebih banyak lagi tentang e-dagang, terutamanya berkaitan dengan Shopify. Firma saya telah membina yang sangat disesuaikan dan bersepadu ShopifyPlus tapak untuk pelanggan. Daripada menghabiskan berbulan-bulan dan berpuluh-puluh ribu dolar untuk membina tema dari awal, kami bercakap dengan pelanggan untuk membenarkan kami menggunakan tema yang dibina dengan baik dan disokong yang telah dicuba dan diuji. Kami pergi dengan Wookiee, Tema Shopify pelbagai guna yang mempunyai banyak keupayaan.

Ia masih memerlukan pembangunan berbulan-bulan untuk menggabungkan fleksibiliti yang kami perlukan berdasarkan penyelidikan pasaran dan maklum balas pelanggan kami. Inti pelaksanaannya ialah Closet52 ialah tapak e-dagang terus kepada pengguna di mana wanita akan dapat dengan mudah membeli pakaian dalam talian.

Oleh kerana Wokiee ialah tema pelbagai guna, satu bidang yang kami sangat fokuskan ialah pengoptimuman enjin carian. Dari masa ke masa, kami percaya bahawa carian organik akan menjadi kos setiap pemerolehan terendah dan pembeli dengan niat tertinggi untuk membeli. Dalam penyelidikan kami, kami mengenal pasti bahawa wanita membeli-belah untuk pakaian dengan 5 pengaruh utama keputusan:

  • Gaya pakaian
  • Warna pakaian
  • Harga pakaian
  • Penghantaran Percuma
  • Pulangan Tanpa Masalah

Tajuk dan perihalan meta adalah kritikal untuk mendapatkan kandungan anda diindeks dan dipaparkan dengan betul. Jadi, sudah tentu, kami mahukan teg tajuk dan perihalan meta yang mempunyai elemen utama tersebut!

  • . tag tajuk dalam tajuk halaman anda adalah penting untuk memastikan halaman anda diindeks dengan betul untuk carian yang berkaitan.
  • . Penerangan meta dipaparkan dalam halaman hasil enjin carian (SERP) yang menyediakan maklumat tambahan yang menarik pengguna carian untuk mengklik.

Cabarannya ialah Shopify sering berkongsi tajuk dan perihalan meta merentas templat halaman yang berbeza – rumah, koleksi, produk, dll. Jadi, saya terpaksa menulis beberapa logik untuk mengisi tajuk dan perihalan meta secara dinamik dengan betul.

Optimumkan Tajuk Halaman Shopify Anda

Bahasa tema Shopify adalah cair dan ia agak bagus. Saya tidak akan membincangkan semua butiran sintaks, tetapi anda boleh menjana tajuk halaman secara dinamik dengan agak mudah. Satu perkara yang anda perlu ingat di sini ialah produk mempunyai varian ... jadi dengan memasukkan varian ke dalam tajuk halaman anda bermakna anda perlu mengulangi pilihan dan membina rentetan secara dinamik apabila templat adalah produk templat.

Berikut ialah contoh tajuk untuk a baju sejuk kotak-kotak.

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

Dan inilah kod 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>

Kod terpecah seperti ini:

  • Page Title – masukkan tajuk halaman sebenar dahulu… tanpa mengira templat.
  • Tags – menggabungkan teg dengan menyertai teg yang dikaitkan dengan halaman.
  • Warna Produk – gelung melalui pilihan warna dan bina rentetan yang dipisahkan koma.
  • Medan meta – contoh Shopify ini mempunyai panjang pakaian sebagai medan meta yang ingin kami sertakan.
  • Harga – termasuk harga varian pertama.
  • Nama Kedai – tambah nama kedai di hujung tajuk.
  • pemisah – daripada mengulangi pemisah, kami hanya menjadikannya tugasan rentetan dan mengulanginya. Dengan cara itu, jika kita memutuskan untuk menukar simbol itu pada masa hadapan, ia hanya di satu tempat.

Optimumkan Perihalan Meta Halaman Shopify Anda

Apabila kami merangkak tapak, kami mendapati bahawa mana-mana halaman templat tema yang dipanggil mengulangi tetapan SEO halaman utama. Kami ingin menambah perihalan meta yang berbeza bergantung pada sama ada halaman itu adalah halaman utama, halaman koleksi atau halaman produk sebenar.

Jika anda tidak pasti nama templat anda, cuma tambahkan nota HTML dalam anda theme.liquid fail dan anda boleh melihat sumber halaman untuk mengenal pastinya.

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

Ini membolehkan kami mengenal pasti semua templat yang menggunakan perihalan meta tapak supaya kami boleh mengubah suai perihalan meta berdasarkan templat.

Berikut ialah perihalan meta yang kami mahukan 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.">

Inilah kod 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 ialah set tajuk yang dinamik dan komprehensif dan perihalan meta untuk sebarang jenis templat atau halaman produk terperinci. Melangkah ke hadapan, kemungkinan besar saya akan memfaktorkan semula kod menggunakan pernyataan kes dan menyusunnya dengan lebih baik. Tetapi buat masa ini, ia menghasilkan kehadiran yang lebih baik dalam halaman hasil enjin carian.

Ngomong-ngomong, jika anda mahukan diskaun hebat… kami suka anda menguji tapak dengan kupon diskaun 30%, gunakan kod HIGHBRIDGE semasa mendaftar keluar.

Beli Pakaian Sekarang

Pendedahan: Saya ahli gabungan untuk Shopify dan Themeforest dan saya menggunakan pautan tersebut dalam artikel ini. Closet52 ialah pelanggan firma saya, Highbridge. Jika anda ingin bantuan dalam membangunkan kehadiran e-dagang anda menggunakan Shopify, sila hubungi kami.