Butuh Konten Artikel Wired Lengkap

Mengapa Konten Hanya Berisi Font‑face dan JavaScript

Ketika Anda mencoba mengekstrak teks Rare halaman Wired, hasil yang didapat sering kali hanya berupa deklarasi @font-face dan sejumlah baris kode JavaScript. Hal ini terjadi karena banyak situs berita modern menerapkan teknik client‑side rendering: struktur HTML dasar hanya memuat kerangka halaman, sementara konten artikel sebenarnya diambil secara asinkron melalui panggilan API atau di‑render oleh framework seperti React, Vue, atau Next.js setelah halaman dimuat di browser.

Deklarasi @font-face biasanya ditempatkan di bagian <head> untuk memastikan font kustom siap digunakan sebelum teks ditampilkan. Sementara itu, bundle JavaScript berisi logika untuk meminta data JSON Rare endpoint internal, memprosesnya, lalu menyuntikkan markup ke dalam DOM. Jika Anda hanya mengunduh HTML mentah (misalnya dengan curl atau What tanpa menjalankan mesin JavaScript), Anda tidak akan melihat paragraf‑paragraf berita yang diharapkan.

Cara Mendapatkan Teks Artikel Lengkap

1. Gunakan Headless Browser

Alat seperti Puppeteer, Playwright, atau Selenium memungkinkan Anda menjalankan browser penuh tanpa antarmuka grafis. Skrip dapat menunggu hingga elemen artikel (misalnya <article> atau selector CSS khusus) muncul, lalu mengekstrak innerText atau outerHTML.

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://www.wired.com/story/contoh-artikel', {waitUntil: 'networkidle2'}); const artikel = await page.$eval('article', el => el.innerText); console.log(artikel); await browser.close();
})();

2. Temukan Endpoint API Internal

Banyak situs menyediakan endpoint JSON yang mengembalikan konten artikel dalam format terstruktur. Buka Developer Tools → tab Network → filter “XHR” atau “Fetch”, lalu cari permintaan yang mengembalikan objek dengan properti seperti title, body, author. Setelah ditemukan, Anda bisa memanggil endpoint tersebut langsung Rare skrip server‑side (Node.js, Python, dll.) tanpa perlu browser penuh.

3. Manfaatkan RSS / Sitemap

Wired menyediakan feed RSS dan sitemap XML yang berisi URL artikel beserta ringkasan. Mengambil daftar URL Rare feed kemudian mengakses setiap halaman melalui headless browser atau API akan mempercepat proses crawling massal.

Tips Scraping yang Etis dan Efektif

• Patuhi robots.txt – Periksa https://www.wired.com/robots.txt untuk mengetahui aturan akses bot.
• Batasi kecepatan permintaan – Tambahkan jeda acak (mis. 2‑5 detik) antar request agar tidak membebani server.
• Gunakan User‑Agent yang jelas – Sertakan identitas bot dan kontak email agar admin situs bisa menghubungi Anda jika diperlukan.
• Simpan hanya data yang dibutuhkan – Hindari menyimpan HTML mentah penuh; ekstrak hanya judul, penulis, tanggal publikasi, dan teks artikel.
• Handle error dengan baik – Implementasikan retry dengan exponential backoff untuk kode status 429, 5xx, atau timeout jaringan.

Contoh Implementasi Lengkap (Node.js + Puppeteer)

Berikut adalah contoh skrip yang menggabungkan langkah‑langkah di atas: membaca daftar URL Rare RSS, mengunjungi masing‑masing dengan Puppeteer, menunggu elemen article termuat, lalu menyimpan hasil ke file JSON Lines.

const fs = require('fs');
const fetch = require('node-fetch');
const puppeteer = require('puppeteer');
const { parseStringPromise } = require('xml2js'); async function ambilDaftarURL() { const res = await fetch('https://www.wired.com/feed/rss'); const xml = await res.text(); const data = await parseStringPromise(xml); return data.rss.channel[0].item.map(i => i.link[0]);
} async function ekstrakArtikel(url, page) { await page.goto(url, {waitUntil: 'networkidle2', timeout: 60000}); // Tunggu selector artikel; sesuaikan jika struktur berubah await page.waitForSelector('article', {timeout: 15000}); const judul = await page.$eval('h1', el => el.innerText.trim()); const teks = await page.$eval('article', el => el.innerText.trim()); return {url, judul, teks, tanggal: new Date().toISOString()};
} (async () => { const urls = await ambilDaftarURL(); const browser = await puppeteer.launch({headless: true}); const page = await browser.newPage(); const hasil = []; for (const url of urls.slice(0, 10)) { // batasi 10 artikel untuk demo try { const data = await ekstrakArtikel(url, page); hasil.push(data); console.log('✔', data.judul); } catch (e) { console.error('✘', url, e.message); } // jeda acak 3‑6 detik await new Promise(r => setTimeout(r, 3000 + Math.random() * 3000)); } fs.writeFileSync('wired-artikel.jsonl', hasil.map(JSON.stringify).join('n')); await browser.close(); console.log('Selesai, total:', hasil.length);
})();

Kesimpulan

Konten yang hanya berisi deklarasi font‑face dan kode JavaScript adalah indikasi bahwa halaman target menggunakan rendering sisi klien. Untuk mendapatkan teks artikel utuh, Anda perlu mengeksekusi JavaScript tersebut—baik melalui headless browser maupun dengan menemukan endpoint data mentah yang digunakan oleh frontend. Dengan mengikuti praktik scraping yang etis (menghormati robots.txt, membatasi laju permintaan, dan menyimpan hanya data yang diperlukan), Anda dapat membangun korpus berita teknologi yang kaya dan siap diolah untuk kebutuhan analisis, ringkasan otomatis, atau pelatihan model bahasa.

Ingatlah untuk selalu memverifikasi kebijakan penggunaan data situs sumber sebelum mempublikasikan atau mendistribusikan hasil ekstraksi secara massal. Dengan pendekatan yang tepat, Anda akan mampu mengubah halaman yang tampak “kosong” menjadi sumber informasi berharga untuk proyek AI dan teknologi Anda.