Gw Bikin Social Card Dinamis cuma dengan Ngobrol ke Agent

Udah lama banget, tiap link yang gw share dari site ini nampilin hal yang sama: foto profil gw. Kirim homepage ke orang di WhatsApp, share blog post di Telegram — foto selfie yang sama, tiap kali, ga peduli halamannya soal apa. Keliatan males, karena emang iya.

Gw mutusin benerin dengan cara gw benerin kebanyakan hal sekarang: deskripsiin apa yang gw mau ke agent dan review yang balik. Seluruh fitur — desain, code, wiring — kebangun sementara gw mostly cuma nonton. Ini build log-nya, termasuk bagian yang beneran makan waktu gw (spoiler: bukan kodenya).

TODO yang udah nungguin gw

Hal pertama yang agent-nya temuin: gw-yang-dulu udah mulai ini. Ke-kubur di helper metadata ada fungsi namanya buildOgImageUrl — di-comment, dengan catatan: "Disabled — next/og requires Next 14+, project is on 13.5. Re-enable once we upgrade."

Kita udah upgrade ke Next 15 dari lama. Blocker-nya udah ilang; ga ada yang balik buat flip switch-nya. Itu jenis tech debt paling relatable: bukan masalah susah, cuma sesuatu yang jatuh dari list begitu alasan buat nundanya kadaluarsa.

Jadi task-nya bukan "riset gimana cara bikin dynamic OG image." Tapi "selesain yang udah lo mulai, sekarang stack-nya udah sanggup."

Yang gw minta

Pesannya pendek: "tiap halaman share foto statis yang sama buat social preview — bikin dynamic OG image biar tiap halaman dapet card branded sendiri dengan judul dan deskripsinya, dan wire-in ke semua tempat."

Itu seluruh spec-nya. Tanpa nama file, tanpa detail API. Tugas agent-nya ngubah itu jadi rencana dan diff.

Gimana kebangunnya

Yang balik bentuknya jelas:

• Route baru di app/api/og pake ImageResponse dari next/og — yang nge-render gambar dari JSX di edge. Dia ambil title dan subtitle sebagai query param dan ngegambar card 1200×630: background gelap, gradient halus, judul halaman, deskripsinya, nama gw, dan monogram kecil "MF" di pojok.
• Helper buildOgImageUrl lama, diaktifin lagi dan diarahin ke route itu.
• Builder metadata diubah biar setiap halaman fallback ke card yang di-generate secara default — homepage, projects, tiap blog post — kecuali dia secara eksplisit ngasih gambar sendiri.

Bagian enaknya nge-wire di layer metadata: gw ga perlu nyentuh satu halaman pun. Satu perubahan, dan homepage, halaman projects, sama tiap blog post lama dan ke depan semuanya dapet card sendiri otomatis. Gw review diff-nya, render gambarnya sekali buat ngecek mata, terus ship.

Kalau gw kerjain manual, bagian next/og-nya itu persis jenis yang bakal makan sejam buat gw pelajarin ulang — constraint JSX-ke-gambar, edge runtime, urusan font. Gw ga. Gw deskripsiin hasilnya dan cek hasilnya.

Boss fight: cache

Di sini bagian jujurnya. Kodenya jalan di review beneran yang pertama. Yang ngabisin sore gw justru semua yang downstream dari kode.

Gw ship, buka WhatsApp, share homepage buat konfirmasi card baru… dan dapet foto selfie lama. Share di Telegram — sama. Beberapa menit gw yakin deploy-nya belum keluar, atau route-nya rusak.

Ternyata bukan. Production nyajiin card baru yang bener — gw cek meta tag aslinya dan hit route gambarnya langsung; dua-duanya beres. Masalahnya WhatsApp dan Telegram nge-cache link preview secara agresif, di-key sama URL. Apa pun yang udah gw share sebelum perubahan tetep nampilin preview cache-nya — foto lama — dan bakal terus gitu sampai cache-nya expire atau di-refresh.

Tell-nya cakep banget: versi Indonesia homepage preview-nya bener, sementara yang English dan domain polosnya masih nampilin foto. Code sama, meta tag sama. URL /id kebetulan belum pernah di-share, jadi dia di-scrape fresh. Yang udah gw share di masa lalu nyangkut di cache basi.

Fix-nya, buat siapa pun yang kena ini:

• Telegram: kirim URL-nya ke @WebpageBot. Dia re-scrape dan clear preview cache-nya. Instan.
• WhatsApp: ga ada tool refresh resmi. Share pake query param sembarang (?v=2) biar dianggap URL baru, atau tunggu cache-nya menua.
• Facebook / LinkedIn: sharing debugger mereka punya tombol "scrape again".

Ga ada satu pun dari ini di dalam kode. Semuanya justru kerjaan yang sebenernya.

Rasanya build kayak gini

Seluruh fitur — nemu TODO mati, bangun route-nya, wire-in, ship — itu gw drive dari thread chat, mostly dengan bilang "iya" dan "coba liatin." Agent-nya ngerjain bagian yang membosankan-tapi-udah-jelas. Gw ngerjain bagian yang butuh manusia: mutusin ini worth dikerjain, nge-judge apa card-nya keliatan bagus, dan ngenalin kalau "dia nampilin gambar lama" itu masalah caching, bukan masalah code.

Bagian terakhir itu pattern yang terus gw notice. Agent-nya jago bangun benda-nya. Tetep tanggung jawab gw buat ngerti sistemnya cukup dalam biar tau di mana benda-nya bakal beneran rusak — yang, lebih sering daripada nggak, ada di tempat yang kodenya nggak ada.