Cara Menambahkan Author Bio Dinamis di Blog Shopify Pakai Metaobject (Tanpa App)

Jujur aja. Lu pasti selama ini copy-paste author bio ke setiap artikel blog, kan? Atau malah nggak pakai author bio sama sekali karena ribet. Faktanya, kebanyakan toko Shopify memang gitu. Ada yang skip author bio, ada juga yang pasang app tambahan yang harganya 10 dolar per bulan, lalu rusak total pas ganti theme.

Padahal ada cara yang jauh lebih rapi, gratis, dan tahan lama.

Pakai Shopify metaobjects, lu bisa bikin sistem author bio yang reusable, SEO-friendly, punya schema markup, dan nggak bakal hilang walau theme diganti. Ini metode yang gue pakai buat klien-klien besar karena simpel tapi solid.

Di panduan ini, lu bakal bisa:

Bikin metaobject khusus buat data author
Bikin section custom lengkap dengan schema markup
Nampilin author bio otomatis di blog post
Jalan tanpa ngoprek file inti theme

Waktu: 30–45 menit

Level teknis: Pemula, asal bisa copy-paste

Biaya: Nol rupiah

Fase 1: Bikin Metaobject Author

Ini tahap di mana lu ngasih tahu Shopify, “Data author gue isinya apa saja.”

Step 1. Masuk ke Metaobjects

Login ke Shopify Admin
Masuk Settings
Klik Custom data
Pilih Metaobjects
Klik Add definition

Step 2. Konfigurasi Metaobject Author

Name: Author
Type: author

Lalu tambahin field berikut:

Field 1: Name

Type: Single line text
Name: name
Wajib diisi

Field 2: Description

Type: Multi-line text
Name: description
Wajib
Ini isi bio lu

Field 3: Title

Type: Single line text
Name: title
Opsional

Field 4: Image

Type: File
Name: image
Opsional

Field 5: Social Links

Type: URL
Name: social_links
Aktifkan List of values
Opsional

Field 6: Contact

Type: URL
Name: contact
Opsional

Step 3. Akses Storefront

Aktifkan Storefront access
Klik Save

Fase 2: Isi Data Author

Sekarang isi profil author lu.

Masuk Settings → Custom Data → Author
Klik Add entry
Isi nama, bio, foto, title, link sosial
Klik Save

Catat nama entry-nya, nanti dipakai.

Fase 3: Bikin Section Author Bio

Ini bagian inti. Kita bikin section yang ambil data dari metaobject dan nampilin author bio + schema.

Step 1. Masuk Edit Code

Masuk Online Store → Themes
Klik tiga titik di theme aktif
Pilih Edit code

Step 2. Tambah Section Baru

Cari folder Sections
Klik Add a new section
Nama: author-bio-schema
Klik Done

Step 3. Paste Kode Ini

Hapus semua isi file lalu paste kode berikut:

<div class="author-bio-section">
  {% if section.settings.author %}
    {% assign author = section.settings.author %}

    <div class="author-bio-card">

      {% if author.image.value %}
        <div class="author-photo-wrapper">
          <img src="{{ author.image.value | image_url: width: 300 }}" alt="{{ author.name.value | escape }}" class="author-photo">
        </div>
      {% endif %}

      <div class="author-bio-content">
        <h3 class="author-name">{{ author.name.value }}</h3>

        {% if author.title.value != blank %}
          <p class="author-title">{{ author.title.value }}</p>
        {% endif %}

        {% if author.description.value != blank %}
          <p class="author-description">{{ author.description.value }}</p>
        {% endif %}

        {% if author.social_links.value != blank %}
          <div class="author-social">
            {% assign links = author.social_links.value | split: "\\n" %}
            {% for link in links %}
              <a href="{{ link }}" target="_blank" rel="noopener" class="author-social-link">
                {{ link }}
              </a>
            {% endfor %}
          </div>
        {% endif %}

        {% if author.contact.value != blank %}
          <p class="author-contact">
            <a href="{{ author.contact.value }}" target="_blank" rel="noopener" class="author-contact-link">Contact</a>
          </p>
        {% endif %}
      </div>

    </div>

    <script type="application/ld+json">
    {
      "@context": "<https://schema.org>",
      "@type": "Person",
      "name": {{ author.name.value | json }},
      "description": {{ author.description.value | json }}
      {% if author.title.value != blank %},
        "jobTitle": {{ author.title.value | json }}
      {% endif %}
      {% if author.image.value != blank %},
        "image": {{ author.image.value | image_url: width: 600 | json }}
      {% endif %}
      {% if author.contact.value != blank %},
        "url": {{ author.contact.value | json }}
      {% endif %}
      {% if author.social_links.value != blank %},
        "sameAs": {{ author.social_links.value | split: "\\n" | json }}
      {% endif %}
    }
    </script>
  {% endif %}
</div>

Klik Save.

Fase 4: Pasang ke Template Blog

Masuk Online Store → Customize
Pilih template Blog posts
Klik Add section
Cari Author Bio
Taruh di bawah konten artikel
Pilih entry author yang tadi lu buat
Klik Save

Sekarang semua blog post otomatis punya author bio.

Kenapa Cara Ini Lebih Bagus dari App

Gratis selamanya
Nggak rusak pas ganti theme
Lebih cepat karena tanpa app tambahan
Schema markup bantu SEO dan trust
Update bio sekali, semua artikel ikut berubah

FAQ Singkat

Perlu jago coding?

Nggak. Tinggal ikutin langkah dan copy-paste.

Bisa banyak author?

Bisa. Tinggal bikin beberapa entry author.

Kalau mau edit bio?

Edit satu entry metaobject. Semua blog langsung update.

Aman buat theme update?

Aman. Metaobject nggak ikut kehapus.

Penutup

Ini bukan cuma soal tampilan. Author bio dengan schema itu soal trust, authority, dan SEO. Blog lu jadi kelihatan serius, profesional, dan punya identitas jelas.

Kebanyakan toko Shopify nggak pakai ini, atau malah bayar mahal lewat app. Lu sekarang sudah punya solusi yang lebih rapi dan scalable.

Kerjain sekali, manfaatnya jalan terus.