Sayudha

48 SEO Metadata, hreflang, robots.txt

Properties2
descriptionMetadata SEO di head theme (title, meta description, canonical), tag hreflang otomatis lewat content_for_header dan kapan ngelola manual, Open Graph dan structured data, metafield seo.hidden, dan ringkasan kustomisasi robots.txt
tagsshopify, theme, fitur

8 menit baca

SEO itu bagian penting biar toko merchant ketemu di Google. Kabar baiknya, Shopify udah ngerjain sebagian besar (sitemap, hreflang, robots.txt bawaan). Tugas theme cuma ngasih data yang bener di tempat yang bener dan gak ngerusak yang udah otomatis.

Search engine optimization (SEO) itu komponen kunci biar pembeli bisa nemuin toko lewat mesin pencari. Tiga hal yang diurus di theme: metadata di <head>, tag hreflang buat multi bahasa (dari 47 Markets Multi Currency, Multi Bahasa, Localization), dan robots.txt (yang udah dibedah lengkap di 25 Template Spesial robots.txt, llms.txt, agents).

Catatan Shopify yang berlaku buat seluruh bab ini: ini panduan umum. Buat masalah SEO spesifik toko, konsultasi ke ahli SEO yang ada di Partner Directory.

Metadata di head

Tiga aspek utama: title tag, meta description, dan canonical URL. Semuanya di <head> di layout/theme.liquid:

<head>
  <title>
    {{ page_title -}}
    {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
    {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
    {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
  </title>
  {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}" />
  {% endif %}
  <link rel="canonical" href="{{ canonical_url }}" />
</head>

Object-nya dari 13 Objects Global > Object SEO dan Halaman.

1. Title

<title> dibaca mesin pencari sebagai judul halaman. Judulnya diatur merchant di admin (field “Page title” di bagian SEO tiap produk, koleksi, halaman) dan diakses lewat page_title. Contoh di atas ngerakit judul yang unik per halaman:

  1. page_title sebagai dasar.
  2. Kalau lagi filter tag (current_tags), tambahin “tagged …”, biar /collections/all/sale punya judul beda dari /collections/all.
  3. Kalau di halaman 2+ (current_page), tambahin nomor halaman, biar halaman paginasi gak dianggap duplikat.
  4. Tambahin nama toko kecuali page_title udah mengandungnya (halaman depan biasanya judulnya udah nama toko).

Whitespace control - dari 09 Dasar Liquid > Whitespace Control dipakai biar <title> gak berisi baris kosong.

❌ semua halaman paginasi dan filter punya judul sama, dianggap duplikat

<title>{{ page_title }}</title>

✅ unik per halaman

<title>{{ page_title }}{% if current_page != 1 %} &ndash; Page {{ current_page }}{% endif %}</title>

2. Meta Description

<meta name="description"> dibaca sebagai deskripsi halaman di hasil pencarian. Diatur merchant di admin, diakses lewat page_description. Dua hal: cek dulu ada atau gak (halaman tanpa deskripsi lebih baik gak punya tag daripada tag kosong), dan escape karena deskripsi bisa berisi tanda kutip yang ngerusak atribut.

3. Canonical URL

<link rel="canonical"> ngasih tau mesin pencari URL resmi halaman ini, biar variasi URL (?variant=123, /collections/sale/products/x vs /products/x, parameter tracking) gak dianggap halaman berbeda. Nilainya dari canonical_url, yang udah ngurus semua kasus itu. Jangan bikin sendiri dari request.path.

Contoh lengkap Dawn di layout/theme.liquid.

Open Graph dan Media Sosial

Bukan SEO dalam arti sempit, tapi tinggal di <head> yang sama: tag Open Graph buat preview waktu link dibagiin di media sosial. Object page_image ngasih gambar yang tepat (gambar unggulan produk/koleksi/artikel, atau social sharing image toko). Dan kalau theme gak nyediain og:image, Shopify otomatis bikinin og:image, og:image:secure_url, og:image:width, og:image:height.

Kalau mau bikin sendiri (misalnya buat nyertain sampai tiga media produk kaya di 40 Produk Media > 2. Gambar Open Graph):

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:title" content="{{ page_title | escape }}">
<meta property="og:type" content="{% if template.name == 'product' %}product{% elsif template.name == 'article' %}article{% else %}website{% endif %}">
<meta property="og:description" content="{{ page_description | escape }}">
{% if page_image %}
  <meta property="og:image" content="http:{{ page_image | image_url: width: 1200 }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url: width: 1200 }}">
{% endif %}
{% if template.name == 'product' %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ cart.currency.iso_code }}">
{% endif %}
<meta name="twitter:card" content="summary_large_image">

Perhatiin og:price:currency dari cart.currency, bukan shop.currency, alasan yang sama dengan structured data di bawah.

Structured Data

Structured data (JSON-LD schema.org) bikin Google bisa nampilin rich result: harga, ketersediaan, rating di hasil pencarian. Filter structured_data dari 19 Filters HTML, URL, Media, Color, dan Font > 5. structured_data ngasilinnya buat produk dan artikel:

{% if template.name == 'product' %}
  <script type="application/ld+json">
    {{ product | structured_data }}
  </script>
{% endif %}

Kalau kamu nulis structured data sendiri, aturan dari bab Markets: priceCurrency harus dari cart.currency.iso_code, bukan mata uang toko, biar pembeli di market lain lihat harga dalam mata uang mereka di Google:

priceCurrency: {{ cart.currency.iso_code }},

hreflang

Mesin pencari pakai tag hreflang buat nyajiin versi bahasa atau wilayah yang tepat dari sebuah halaman ke tiap pengunjung. Tanpa itu, pembeli Prancis bisa dapat halaman Inggris di hasil pencarian padahal versi Prancisnya ada.

1. Otomatis dari Shopify

Kalau toko pakai Shopify Markets, Shopify nambahin tag hreflang otomatis lewat content_for_header yang theme render di <head>. Tag-nya:

  1. Mencerminkan bahasa dan wilayah tiap market: market spesifik negara ngasilin tag berkualifikasi wilayah kaya fr-ca atau en-us, market yang lebih luas ngasilin tag bahasa aja kaya fr.
  2. Update otomatis waktu merchant nambah, ngehapus, atau ngubah domain atau bahasa market.
  3. Sinkron sama canonical URL tiap halaman, jadi mesin pencari nganggap URL terlokalisasi sebagai versi terkait dari halaman yang sama.

Peringatan keras: nambahin tag hreflang sendiri di atas yang otomatis ngasilin anotasi duplikat atau bertentangan, yang bisa ngerusak ranking toko. Jadi kalau content_for_header ada (dan wajib ada), jangan nambahin hreflang manual.

❌ dobel, bertentangan sama yang otomatis

{{ content_for_header }}
<link rel="alternate" hreflang="fr" href="https://shop.com/fr">

✅ biarin Shopify

{{ content_for_header }}

2. Kapan Ngelola Manual

Otomatis udah nyakup kebanyakan toko, termasuk market spesifik wilayah. Tapi ada dua kasus buat ngelola sendiri:

  1. Theme atau app pihak ketiga udah ngeluarin hreflang. Matiin yang otomatis biar cuma satu sumber.
  2. Setup yang Markets gak bisa koordinasiin, misalnya ngehubungin versi alternatif halaman antar toko Shopify terpisah di domain berbeda (toko shop.com dan shop.de yang beda akun).

Cara matiin: Online store > Preferences, bagian Social sharing and SEO, matiin Automatic hreflang tags.

Kalau kamu nambahin tag sendiri di layout/theme.liquid, dua aturan:

  1. Bangun dinamis dari object localization (available_languages dengan root_url, available_countries), biar mencerminkan market dan bahasa aktif. Jangan hardcode domain atau handle sumber daya: handle produk/koleksi bisa beda tiap bahasa (terjemahan handle), dan <head> di theme.liquid dirender di semua halaman, jadi handle yang di-hardcode bakal salah di mana-mana.
  2. Tiap URL terlokalisasi harus ngerujuk dirinya sendiri sebagai canonical.

Sintaks dan praktik terbaiknya di dokumentasi Google.

Nyembunyiin Halaman: seo.hidden

Buat ngecualiin produk, koleksi, halaman, artikel, atau blog tertentu dari mesin pencari dan sitemap, merchant (atau app) ngeset metafield seo.hidden bernilai 1 di sumber daya itu. Efeknya: Shopify nambahin <meta name="robots" content="noindex"> dan ngehapusnya dari sitemap. Dan dari 38 Search dan Predictive Search > 7. Batasan Lain, ini juga satu-satunya cara ngecualiin produk dari predictive search.

Theme gak perlu ngapa-ngapain buat ini, tapi berguna tau kalau ada produk yang “hilang” dari pencarian, cek metafield ini dulu.

robots.txt

File robots.txt ngasih tau mesin pencari halaman mana yang boleh dan gak boleh di-crawl. Shopify ngasilin default yang cocok buat kebanyakan toko, dan default-nya diperbarui rutin biar praktik SEO terbaik selalu diterapin. Kalau butuh kustomisasi, bikin template robots.txt.liquid yang cuma punya akses ke object robots, group, rule, user_agent, sitemap, dan request.

Semua polanya udah dibahas tuntas di 25 Template Spesial robots.txt, llms.txt, agents > robots.txt.liquid: nambah aturan ke grup yang ada, aturan per domain lewat request.host (buat market dengan domain beda), ngehapus aturan default, dan aturan kustom di luar grup (blokir/izinin crawler tertentu, sitemap tambahan). Yang perlu diingat di konteks SEO:

  1. Jangan ganti seluruh template dengan teks polos. Pakai object Liquid-nya biar default yang diperbarui Shopify tetap ikut.
  2. Aturan per domain cuma kalau kamu pakai Markets dengan domain/subdomain berbeda yang butuh perilaku crawl berbeda, misalnya blokir /en/ di example.fr.
  3. Ngeblokir ?q= (hasil pencarian internal) itu kustomisasi umum biar Google gak ngindeks ribuan halaman pencarian.

Checklist SEO Theme

Ngerangkum apa yang harus ada di theme yang sehat secara SEO:

  1. <title> unik per halaman dari page_title + tag + nomor halaman + nama toko.
  2. <meta name="description"> dari page_description (kalau ada), di-escape.
  3. <link rel="canonical"> dari canonical_url.
  4. {{ content_for_header }} di <head>, tanpa hreflang manual.
  5. Open Graph dari page_title, page_description, page_image, canonical_url.
  6. Structured data product | structured_data dan article | structured_data, priceCurrency dari cart.currency.
  7. <html lang="{{ request.locale.iso_code }}"> biar bahasa halaman jelas.
  8. Heading semantik (<h1> satu per halaman), alt di gambar (dari image.alt lewat image_tag), link internal pakai object.url.
  9. Performa, karena Core Web Vitals itu faktor ranking, dibahas di 57 Performance Dasar, Metrik, dan Cara Ngukur.
  10. robots.txt.liquid cuma kalau beneran butuh, dan tetap pakai object default.

Ringkasan

  1. Tiga metadata di <head>: <title> dari page_title (plus current_tags, current_page, shop.name biar unik), <meta name="description"> dari page_description dengan escape, <link rel="canonical"> dari canonical_url.
  2. Open Graph: page_image buat gambar, Shopify otomatis bikin og:image kalau theme gak nyediain, harga pakai cart.currency.
  3. Structured data lewat filter structured_data, priceCurrency dari cart.currency.iso_code.
  4. hreflang otomatis lewat content_for_header, mencerminkan market (fr-ca atau fr), sinkron sama canonical, update sendiri. Jangan nambahin manual kecuali otomatisnya dimatiin di Online store > Preferences.
  5. Manual cuma kalau app/theme udah ngeluarin hreflang atau buat lintas toko terpisah, dan harus dinamis dari localization tanpa hardcode domain/handle, tiap URL canonical ke dirinya sendiri.
  6. seo.hidden nyembunyiin sumber daya dari mesin pencari, sitemap, dan predictive search.
  7. robots.txt default Shopify udah bagus dan diperbarui rutin, kustomisasi lewat robots.txt.liquid dengan object Liquid-nya (detail di bab 25), aturan per domain cuma buat Markets multi domain.

Bab selanjutnya kita bahas fitur pengiriman: nampilin ketersediaan ambil di toko (local pickup) per varian dan per lokasi lewat object store_availability, dengan Section Rendering API biar update waktu varian berganti.

Tampilan Grafik

Tautan Balik