🚀 Mengakali Tampilan Tautan dengan Auto Social Media Previewer Multi-Platform

Diterbitkan untuk mempermudah kerjaan para kreator web.

Pernahkah kamu mengirimkan tautan artikel terbaru ke grup obrolan atau timeline medsos, tapi yang terlihat muncul cuma URL mentah tanpa gambar?

Itulah alasan kenapa setiap pembuat konten web dan pegiat media sosial butuh yang namanya alat pembuat preview otomatis. Platform seperti X, Facebook, LinkedIn, WhatsApp, Telegram, Discord, Pinterest, dan Slack akan memindai meta tags tersembunyi (Open Graph & Twitter Cards) yang bersarang di dalam HTML. Jika metadata ini absen atau salah letak, algoritma mereka akan buta.

✨ Uji Coba Langsung — 8+ Platform

Masukkan URL artikel apapun di kolom berikut ini. Skrip akan merender tampilannya menjadi card preview untuk berbagai platform sekaligus.

🔍 URL Inspector & Multi-Platform Share

Tempelkan link, biar skrip yang bekerja. Didukung 8+ platform.

X Facebook LinkedIn WhatsApp Telegram Discord Pinterest Slack Mastodon Tumblr
Gagal memproses data. Pastikan URL valid dan publik. Coba lagi?
âąī¸ Waktu fetch: - msSumber API: -đŸ“Ļ Cache: -🔄 Retry: -

X (Twitter)

Thumbnail X
domain.com
Judul akan muncul di sini
Deskripsi...

Facebook

Thumbnail Facebook
DOMAIN.COM
Judul akan muncul di sini
Deskripsi...

LinkedIn

Thumbnail LinkedIn
domain.com
Judul akan muncul di sini
Deskripsi...

WhatsApp

Thumbnail WhatsApp
domain.com
Judul akan muncul di sini
Deskripsi...

Telegram

Thumbnail Telegram
domain.com
Judul akan muncul di sini
Deskripsi...

Discord

Thumbnail Discord
domain.com
Judul akan muncul di sini
Deskripsi...

Pinterest

Thumbnail Pinterest
domain.com
Judul akan muncul di sini
Deskripsi...

Slack

Thumbnail Slack
domain.com
Judul akan muncul di sini
Deskripsi...

🧠 Kode di Balik Layar

// === ARSITEKTUR MULTI-FALLBACK ===
const API_SOURCES = [
 { name: 'Microlink', url: (u) => `https://api.microlink.io/?url=${u}`, parse: parseMicrolink },
 { name: 'JSONLink', url: (u) => `https://jsonlink.io/api/extract?url=${u}`, parse: parseJSONLink },
 { name: 'AllOrigins', url: (u) => `https://api.allorigins.win/raw?url=${u}`, parse: parseHTMLManual }
];
async function fetchWithFallback(targetUrl) {
 for (const source of API_SOURCES) {
 try {
 const resp = await fetchWithTimeout(source.url(targetUrl), 10000);
 const data = await source.parse(resp);
 if (data.title) return { ...data, _source: source.name };
 } catch (e) { console.warn(`Fallback: ${source.name} gagal`); }
 }
 throw new Error('Semua API gagal');
}

Skrip sederhana ini dibuat dengan kode yang mendukung multiple API fallback. Jika API utama (Microlink) gagal karena rate limit atau masalah CORS, skrip akan secara otomatis beralih ke JSONLink, lalu ke AllOrigins dengan teknik parsing manual pada meta tag dari HTML mentah. Untuk meningkatkan efisiensi dan stabilitas, skrip juga dilengkapi dengan fitur caching otomatis di sessionStorage selama 10 menit, timeout handling*, *loading skeleton*, serta *debug panel untuk inspeksi metadata secara real-time.