Sebelum mengambil tanggal, nama penulis, atau informasi produk dari banyak halaman, pastikan aturan ekstraksinya mengambil elemen yang tepat. Satu kolom yang terisi belum membuktikan datanya benar. Selector bisa menangkap tanggal komentar, kartu artikel terkait, atau dua nilai sekaligus.
Kamu bisa menguji aturan itu pada beberapa contoh HTML terlebih dahulu. Hasil yang kita cari adalah hubungan yang jelas antara elemen sumber, jumlah kecocokan, nilai yang diambil, dan status pemeriksaannya. Setelah hubungan itu terbukti pada variasi template yang relevan, barulah pengambilan data diperluas.
Tetapkan satu kontrak untuk setiap kolom
Custom extraction mengambil bagian tertentu dari halaman berdasarkan aturan yang kamu tentukan. Selector CSS memilih elemen lewat pola seperti nama tag, class, atau atribut. XPath merupakan cara lain untuk memilih bagian struktur dokumen.
Mulai dari kebutuhan laporan. Misalnya, editor ingin mengetahui tanggal terbit pertama artikel panduan. “Ambil tanggal halaman” terlalu longgar karena sebuah halaman dapat menampilkan tanggal terbit, tanggal revisi, dan tanggal komentar.
Kontrak contoh ilustratifnya seperti ini:
| Bagian | Keputusan |
|---|---|
| Kolom keluaran | published_date |
| Objek | Artikel utama pada halaman panduan |
| Elemen | time.published di dalam header artikel utama |
| Nilai | Atribut datetime, bukan seluruh teks di sekitarnya |
| Jumlah yang diharapkan | Tepat satu elemen |
| Pemeriksaan lanjutan | Tanggal sesuai isi halaman dan format yang disepakati |
| Bila tidak memenuhi | Simpan status pemeriksaan; jangan mengisi tanggal tebakan |
Kontrak tanggal revisi perlu kolom berbeda. Jangan menggantikan tanggal terbit yang hilang dengan tanggal revisi tanpa memberi tahu pengguna laporan. Untuk keputusan editorialnya, lihat cara mencatat pembaruan artikel secara jujur.
Gunakan contoh kecil yang sengaja memiliki pengganggu
Contoh berikut memakai HTML buatan. Ada tanggal terbit dan tanggal revisi supaya kita dapat melihat apakah selector membedakan keduanya.
<article data-kind="primary">
<header>
<time class="published" datetime="2026-10-01">1 Oktober 2026</time>
<time class="updated" datetime="2026-10-12">12 Oktober 2026</time>
</header>
</article>
<aside>
<time datetime="2026-10-19">Komentar terbaru</time>
</aside>
Selector time terlalu luas: ada tiga elemen yang cocok. Selector article[data-kind="primary"] > header time.published lebih dekat dengan kontrak tadi. Ia menyebut artikel utama, area header, dan peran tanggalnya.
Ini contoh struktur, bukan selector universal untuk semua website. Pada situs lain, tanggal mungkin berada di class atau atribut berbeda. Periksa HTML sebenarnya sebelum menyesuaikannya.
Hindari bergantung pada urutan seperti “elemen ketiga dalam div kelima” bila struktur semantiknya tersedia. Komponen promosi yang disisipkan di atas artikel dapat mengubah urutan tanpa mengubah makna tanggal.
Periksa jumlah kecocokan sebelum mengambil nilai
Latihan berikut dapat dijalankan di Console DevTools pada halaman kosong yang kamu kendalikan. Kode membuat dokumen contoh di memori dan tidak mengubah halaman website.
const contohHTML = `
<article data-kind="primary">
<header>
<time class="published" datetime="2026-10-01">1 Oktober 2026</time>
<time class="updated" datetime="2026-10-12">12 Oktober 2026</time>
</header>
</article>
<aside><time datetime="2026-10-19">Komentar terbaru</time></aside>
`;
function ambilTanggal(html, selector) {
const doc = new DOMParser().parseFromString(html, "text/html");
let elemen;
try {
elemen = doc.querySelectorAll(selector);
} catch {
return { jumlah: null, nilai: null, status: "selector-error" };
}
if (elemen.length !== 1) {
return {
jumlah: elemen.length,
nilai: null,
status: elemen.length === 0 ? "tidak-ditemukan" : "ambigu"
};
}
const nilai = elemen[0].getAttribute("datetime")?.trim();
return {
jumlah: 1,
nilai: nilai || null,
status: nilai ? "terambil" : "atribut-kosong"
};
}
console.table([
ambilTanggal(contohHTML, "time"),
ambilTanggal(
contohHTML,
'article[data-kind="primary"] > header time.published'
)
]);
Baris pertama seharusnya menghasilkan jumlah: 3, nilai: null, dan status: "ambigu". Baris kedua menghasilkan jumlah: 1, nilai: "2026-10-01", dan status: "terambil".
querySelectorAll() mengembalikan semua elemen yang cocok pada saat pemanggilan; selector yang tidak sah dapat menghasilkan error. Karena itu, kode memisahkan error selector dari hasil nol kecocokan. Dokumentasi querySelectorAll.
getAttribute() dapat menghasilkan null jika atribut tidak ada. Dalam latihan ini, atribut yang tidak ada dan atribut kosong masuk kelompok atribut-kosong, karena keduanya memerlukan pemeriksaan sumber. Dokumentasi getAttribute.
Status terambil hanya berarti satu elemen menghasilkan nilai. Kode ini belum memvalidasi kalender, zona waktu, atau kebenaran tanggal terbit. Teks seperti 2026-02-31 masih akan terambil meskipun bukan tanggal kalender yang benar.
Dokumen latihan dibuat dari string HTML dengan DOMParser. Gunakan contoh milik sendiri untuk belajar; fungsi tersebut bukan alat sanitasi HTML untuk ditampilkan kembali kepada pengunjung. Dokumentasi DOMParser.
Uji keadaan gagal, bukan hanya contoh yang berhasil
Buat variasi dari contoh tadi sebelum memakai selector pada laporan. Tabel ini dapat menjadi lembar uji:
| Variasi | Hasil yang diharapkan | Tindak lanjut |
|---|---|---|
| Tanggal terbit dan revisi tersedia | Satu tanggal terbit terambil | Cocokkan dengan halaman |
| Elemen tanggal terbit dihapus | tidak-ditemukan |
Periksa template atau sumber HTML |
Dua elemen memakai class published |
ambigu |
Persempit objek dan periksa duplikasi markup |
Atribut datetime dihapus |
atribut-kosong |
Periksa implementasi atau sumber alternatif |
| Selector salah sintaks | selector-error |
Perbaiki aturan sebelum pengambilan data |
| Nilai tanggal tidak masuk akal | Bisa tetap terambil |
Jalankan validasi nilai dan cek sumber |
Tambahkan contoh dari setiap template yang dipakai situs. Jika halaman berita dan panduan mempunyai struktur berbeda, catat aturan masing-masing. Jangan membuat satu selector sangat luas hanya agar kedua template menghasilkan isi.
Nilai nol juga perlu dipisahkan dari data kosong. Pada ekstraksi jumlah komentar, angka 0 yang benar-benar tertulis berarti ada nilai nol. Elemen yang tidak ditemukan berarti data belum berhasil diambil. Untuk kolom numerik, simpan status pengambilan sebelum melakukan konversi angka.
Samakan keadaan halaman dengan alat pengambilan
Halaman yang terlihat di browser dapat berbeda dari HTML awal yang diterima crawler. Jika tanggal dibuat oleh JavaScript, selector yang berhasil pada halaman setelah render belum tentu berhasil pada respons awal.
Screaming Frog mendukung ekstraksi dari HTML awal atau HTML hasil render sesuai pengaturan. Fitur custom extraction memerlukan lisensi. Dokumentasinya juga memperingatkan bahwa selector hasil salinan browser dapat terlalu terikat pada posisi elemen. Panduan resmi custom extraction.
Untuk pengujian beberapa halaman, pemeriksaan manual lewat browser sudah dapat membantu. Jika kamu memakai crawler, dokumentasikan keadaan HTML, bahasa, dan template yang diamati. Panduan konfigurasi crawl menjelaskan cara menetapkan cakupan dan kondisi pengambilan.
Jika memakai Screaming Frog, buka konfigurasi Custom Extraction, beri nama kolom, tentukan CSSPath atau XPath, lalu pilih nilai yang diambil. Untuk contoh CSS tadi, atribut yang dibutuhkan adalah datetime. Periksa hasil preview sebelum menjalankan daftar URL yang lebih besar. Langkah pengaturan ekstraktor.
Simpan status bersama hasil ekspor
Laporan akhir sebaiknya membawa URL, template, versi aturan, keadaan HTML, jumlah kecocokan, nilai mentah, status pengambilan, dan hasil pemeriksaan nilai. Kamu tidak harus membuat sistem besar; tabel kecil cukup selama maknanya terjaga.
Sebagai contoh ilustratif, 18 dari 20 URL menghasilkan satu tanggal, satu URL tidak ditemukan, dan satu URL ambigu. Laporkan dua pengecualian itu. Jangan mengisi keduanya dengan tanggal hari ini supaya kolom terlihat lengkap, lalu memakai tabel tersebut untuk menentukan umur artikel.
Mulai dari satu kolom yang penting bagi auditmu. Buktikan bahwa aturan berhasil pada contoh normal dan gagal dengan cara yang dapat dikenali pada contoh bermasalah. Sesudah itu, barulah hasil ekstraksi layak dipakai sebagai bahan validasi temuan crawler.
