Situs ini
Monokrom, dua bahasa, dan cukup ter-prerender supaya preview tautan menampilkan halaman yang benar.
Situs ini
Ringkasan
Situs yang sedang kamu baca. React 18 di atas Vite 7 dengan Tailwind v4, di-deploy ke Cloudflare Pages. Dua bahasa di prefix URL terpisah dengan hreflang alternates, skala tipe yang disusun tangan alih-alih hasil rasio, dan overlay grain yang mengerjakan tugas yang biasanya diambil warna. Sitemap di-generate saat build dan sengaja mengecualikan apa pun yang belum selesai. Langkah pasca-build me-prerender setiap rute — head dan body — supaya preview tautan di WhatsApp dan LinkedIn menampilkan judul dan gambar yang benar, dan crawler yang tidak menjalankan JavaScript tetap membaca halaman utuh.
Masalahnya
Aplikasi satu halaman menyajikan satu kerangka HTML untuk semua URL. Google merender JavaScript dan bisa mengatasinya, tapi crawler sosial tidak: tiap tautan yang dibagikan menampilkan kartu preview generik yang sama, dan dengan dua prefix bahasa tiba-tiba ada enam URL yang semuanya mengembalikan HTML identik ke apa pun yang tak bisa mengeksekusi JS.
Yang saya kerjakan
Alih-alih memakai plugin prerender — yang biasa disarankan terakhir dirilis tahun 2022 — saya menulis skrip pasca-build yang membaca HTML hasil build lalu menulis satu salinan per rute dengan judul, meta, tag Open Graph, canonical, hreflang, dan JSON-LD rute itu sudah tertanam. Skrip itu mengimpor file terjemahan langsung, jadi judul punya tepat satu sumber kebenaran. Body-nya berasal dari build SSR bawaan Vite atas pohon rute yang sama, dirender sekali per URL lalu di-hydrate di browser. Nol dependensi baru.
Isi pengerjaannya
- Dua bahasa di prefix URL terpisah dengan hreflang dan canonical
- Skala tipe susun tangan: 13 / 15 / 17 / 21 / 28 / 44 / 76
- Overlay grain dan garis hairline menggantikan shadow
- Sitemap di-generate saat build, karya belum selesai dikecualikan
- Setiap rute di-prerender, head dan body, lalu di-hydrate
- Structured data JSON-LD tervalidasi di Search Console
- Docker lokal yang setara dengan aturan Cloudflare