Cara Membuat Safelink Otomatis di Blog Utama (Aman, SEO-Friendly, dan Mudah Diterapkan)

Safelink adalah sebuah halaman peralihan pada situs yang berfungsi untuk memastikan bahwa URL atau tautan tujuan aman dari virus maupun malware, dan yang paling penting, memaksimalkan potensi kunjungan situs. Secara sederhana, safelink bekerja sebagai halaman transisi sebelum pengunjung diarahkan ke halaman tujuan sebenarnya.

Safelink umumnya seringkali menggunakan domain yang berbeda dari situs utama. Namun, metode ini memiliki beberapa kekurangan tertentu. Karena itulah kami menawarkan solusi yang lebih optimal: membuat laman safelink otomatis yang tetap berada di domain utama situs, bekerja secara sempurna dan memberikan peningkatan SEO yang lebih maksimal serta peluang monetisasi tanpa membuat situs baru.

Mengapa Safelink Penting untuk Kesehatan SEO Situs Anda?

Salah satu tantangan terbesar yang dihadapi situs download gratis adalah tingginya rasio pentalan (Bounce Rate⁽¹⁾). Mayoritas pengunjung hanya ingin mengunduh file yang mereka butuhkan, lalu langsung meninggalkan situs. Meski terlihat sepele, kondisi ini berdampak secara signifikan pada performa SEO situs di mata mesin pencari.

Inilah alasan safelink digunakan, dengan Safelink di domain utama, Anda dapat: menahan pengunjung sedikit lebih lama untuk mengurangi Bounce Rate secara signifikan; meningkatkan Pageviews (jumlah halaman yang dilihat) per kunjungan; dan sebagai sarana monetisasi yang efektif.

Bounce rate (rasio pentalan) adalah persentase pengunjung yang meninggalkan situs web setelah hanya melihat satu halaman tanpa berinteraksi lebih lanjut, seperti mengklik tautan, mengisi formulir, atau mengunjungi halaman lain. Angka yang tinggi bisa menandakan konten tidak relevan atau pengalaman pengguna buruk, sebaliknya angka rendah menunjukkan interaksi pengguna yang baik.

Skenario Penggunaan dan Manfaat Safelink di Situs Utama

Cara kerja safelink ini mirip dengan safelink pada umumnya, perbedaannya terletak pada lokasi halaman safelink yang tetap berada di domain utama.

Skenarionya sederhana:
ketika pengunjung mengklik tautan download tertentu, mereka akan diarahkan ke halaman safelink di situs yang sama, sebelum akhirnya diteruskan ke halaman unduhan sebenarnya.

Pendekatan ini memberikan banyak manfaat, di antaranya:

• Hemat Biaya: Tidak perlu membuat situs baru atau membeli domain tambahan.
• Mudah Disesuaikan: Terintegrasi dengan situs utama.
• Optimasi SEO dan Pageviews: Mengurangi Bounce Rate secara signifikan, meningkatkan interaksi dan jumlah pengunjung
• Kemanaan Terjamin: 100% aman karena masih berada dalam satu domain yang sama.

Pembaruan Safelink dengan Fitur yang Lebih Disempurnakan

Panduan ini telah mengalami beberapa kali pembaruan, mulai dari peningkatan performa, penyederhanaan kode, hingga penambahan fitur baru. Pada versi terbaru, Anda kini memiliki kontrol yang jauh lebih fleksibel terhadap cara kerja safelink. Berikut beberapa fitur unggulan yang ditambahkan:

1. Menentukan URL yang Melewati Safelink

Jika sebelumnya semua tautan eksternal dipaksa melewati safelink (kecuali whitelink tertentu), kini logikanya dibalik. Anda memiliki kontrol penuh untuk:

• Bebas menentukan URL mana saja yang harus melewati safelink.
• Mengabaikan tautan yang tidak penting tanpa perlu mendaftarkan pengecualian satu per satu.

2. Multiple Halaman Safelink

Untuk mencegah crawler mesin pencari mendeteksi pola yang sama, Anda kini dapat menggunakan beberapa halaman safelink sekaligus yang akan dipanggil secara acak.

3. Struktur URL yang Lebih Ringkas

Pada versi lawas, URL safelink terlihat panjang karena menyertakan URL asli yang di-encode Base64 (.com/p/safelink.html?url=xxxxxxxxx).

Pada versi terbaru, metode ini diubah, alih-alih menampilkan URL asli di parameter, kini URL tersebut disimpan di sessionStorage⁽²⁾ dengan kunci khusus, sehingga:

• URL safelink lebih pendek
• Lebih bersih dan aman
• Tidak menampilkan URL tujuan secara langsung

4. Kontrol Penuh Waktu Hitung Mundur

Anda kini bebas menentukan berapa lama waktu tunggu (countdown) yang diperlukan pengunjung sebelum dialihkan ke URL tujuan.

5. Opsi Redirect Fleksibel

Pilih opsi redirect yang paling sesuai:

• Otomatis: Pengguna langsung di-redirect ke URL asli setelah hitung mundur selesai.
• Dengan Tombol: Mengharuskan pengguna untuk mengklik tombol yang muncul setelah hitung mundur selesai. Opsi ini memberikan interaksi lebih dengan pengguna dan lebih disukai untuk penempatan iklan.

Kekurangan Safelink

sessionStorage menawarkan solusi yang sangat ideal dan masuk akal untuk meningkatkan pengalaman pengguna sambil tetap menjaga fungsi monetisasi dan pageview situs.

Namun bagaimanapun, penting untuk menyadari bahwa sessionStorage menciptakan keterbatasan tertentu yang mungkin tidak bisa ditoleransi oleh beberapa pengguna. Berikut beberapa kekurangan dari versi ini yang bisa Anda pertimbangkan:

1. Pembatasan Sesi (Cross-Tab/Window Incompatibility)

Mengacu pada sifat dasar sessionStorage yang hanya menyimpan data secara lokal dan terikat pada satu sesi browser atau tab tertentu, itu berarti:

• Data Hilang saat Tab Ditutup: Jika pengguna menutup tab Safelink, atau jika tautan di Safari/Firefox secara otomatis membuka tab baru dan tab lama ditutup, data URL yang tersimpan di sessionStorage akan terhapus.
• Tidak Berfungsi pada Jendela Baru: Jika pengguna mengklik kanan tautan Safelink dan memilih "Open link in new window" atau "Open link in new private/incognito window", sessionStorage dari sesi tab asal tidak akan ditransfer ke jendela baru tersebut, sehingga proses redirect gagal.

  Dalam skenario ini, meskipun pengguna berhasil diarahkan ke laman Safelink (/p/safelink.html?key=xxxx), kode tidak akan menemukan URL asli yang tersimpan di storage, dan proses redirect akan gagal.

2. Tidak Cocok untuk Sesi Jangka Panjang

sessionStorage didesain untuk sesi sementara. Jika Anda membutuhkan tautan Safelink yang tetap valid meskipun pengguna menutup browser dan membukanya kembali, metode ini tidaklah ideal.

Solusi yang lebih baik adalah localStorage atau menggunakan parameter URL Base64 meskipun hanya merupakan encoding standar.

Cara Memasang Safelink di Situs/Blog Utama

Setelah memahami manfaat safelink, kini saatnya menerapkan safelink ke blog Anda. Panduan ini dibagi menjadi dua langkah yang disusun secara detail agar mudah untuk diikuti, bahkan oleh pemula.

Langkah 1: Membuat Halaman Safelink

Langkah pertama adalah membuat halaman yang akan digunakan sebagai halaman peralihan (safelink) di mana proses countdown dan redirect terjadi. Halaman ini tidak harus berupa halaman statis; Postingan biasa juga bisa digunakan.

1. Buat Laman Baru: Dari dashboard Blogger, klik menu Halaman (atau Postingan) kemudian klik tombol + Halaman Baru.
2. Tulis Konten: Tulis judul dan isi postingan seperti biasa. Anda bebas menulis topik apapun karena halaman ini akan tampil seperti artikel normal.
   Catatan: timer countdown tidak akan muncul jika halaman diakses tanpa kunci safelink.
3. Sisipkan Blok Wajib: Tambahkan blog HTML di bawah ini pada awal postingan Anda (pastikan menggunakan mode tampilan HTML saat menyisipkan):

   <div id='safelink' hidden></div>

   Penting: kode ini adalah bagian krusial. Bertindak sebagai target (ID utama) yang akan dipanggil oleh kode JavaScript untuk menjalankan fungsi safelink.

4. Simpan dan Salin URL: Simpan laman tersebut, lalu salin URL halaman safelink yang baru dibuat. Sebagai contoh, pada panduan ini kami menggunakan URL:

   https://www.your_domain.com/p/safelink.html

5. Optimasi SEO: Agar halaman safelink lebih cepat terindeks di mesin pencari, tambahkan Deskripsi Penelusuran (Meta Description) yang bisa ditemukan pada sisi kanan bawah editor postingan. Pelajari cara membuat Meta Tag terbaik untuk membuat laman safelink ini lebih SEO-Friendly.

Langkah 2: Menyisipkan Kode JavaScript dan CSS Safelink

Kode safelink ini harus disisipkan di tema Anda agar semua outbound link (tautan eksternal) terdeteksi dan diarahkan ke laman safelink.

Cara Mengedit HTML Tema Blogger:

1. Dari dashboard Blogger, klik Tema.
2. Klik ikon tepat di samping tombol SESUAIKAN.
3. Menu dropdown akan muncul, pilih Edit HTML untuk membuka editor tema.
4. Tempatkan kode JavaScript Safelink ini di bagian bawah kode HTML tema Anda:

const config = {
    safeID = 'safelink',
    safeURL: ['/p/safelink.html'],
    processURL: ['drive.google.com', 'mega.nz'],
    timer: 15,
    redirect: true,
    text: {
        wait: 'The link will appear in 0 second',
        direct: 'You’ll be redirected to the download link in 0 second',
        shifted: 'Redirecting... [link] if you’re not redirected automatically.',
        click: 'Click here',
        btn: 'Direct to link.'
    }
};
(() => {
    const randomURL = url => url[Math.floor(Math.random() * url.length)];
    const randomKey = () => Math.random().toString(36).slice(2, 6);
    const getURL = () => JSON.parse(sessionStorage.getItem('safelink') || '[]');
    const setURL = data => sessionStorage.setItem('safelink', JSON.stringify(data));
    const clearURL = () => sessionStorage.removeItem('safelink');
    const safeLink = () => config.safeURL.some(link => location.pathname.endsWith(link));
    const safeMessage = (text, time) => {
        const [start, end] = text.split('0');
        return `<p>${start} <span>${time} ${end}</span>.</p>`;
    };
    const outboundLinks = () => {
        clearURL();
        const storage = [];
        document.querySelectorAll('a[href]').forEach(anchor => {
            if (!config.processURL.some(url => anchor.href.includes(url))) return;
            const key = randomKey();
            storage.push({key, url: btoa(anchor.href)});
            Object.assign(anchor, {
                href: `${location.origin}${randomURL(config.safeURL)}?key=${key}`,
                target: '_self'
            })
        });
        if (storage.length) setURL(storage)
    };
    const handleLink = () => {
        const params = new URLSearchParams(location.search);
        const key = params.get('key');
        if (!key) return;
        params.delete('key');
        history.replaceState({}, '', location.pathname + (params.toString() ? '?' + params : ''));
        const storage = getURL();
        const entry = storage.find(item => item.key === key);
        if (!entry) return;
        let counter = config.timer;
        const link = atob(entry.url);
        const label = config.redirect ? config.text.direct : config.text.wait;
        const box = document.getElementById(config.safeID);
        if (!box) return;
        box.removeAttribute('hidden');
        box.innerHTML = safeMessage(label, counter);
        const countdown = setInterval(() => {
            counter--;
            box.innerHTML = safeMessage(label, counter);
            if (counter > 0) return;
            clearInterval(countdown);
            const clearKey = () => setURL(storage.filter(e => e.key !== key));
            if (config.redirect) {
                box.innerHTML = `<p>${config.text.shifted.replace('[link]', `<a href='${link}' target='_blank' rel='nofollow noopener noreferrer'>${config.text.click}</a>`)}</p>`;
                clearKey();
                location.href = link;
            } else {
                box.innerHTML = '';
                const btn = document.createElement('a');
                //btn.className = 'btn';
                btn.href = link;
                btn.target = '_blank';
                btn.rel = 'nofollow noopener noreferrer';
                btn.innerHTML = `<span>${config.text.btn}</span>`;
                btn.addEventlinkener('click', clearKey);
                box.appendChild(btn);
            }
        }, 1000)
    };
    safeLink() ? handleLink() : outboundLinks();
})();

Kode JavaScript ini ditulis tanpa kompresi. Variable dan Fungsi-fungsinya disusun untuk mudah dibaca dan dipelajari, bagaimanapun Anda bisa mengoptimalkannya dengan tool online yang tersedia untuk mengurangi ukuran dan peningkatan performa.

Penyesuaian dan Konfigurasi Kode Safelink

Sebelum menyimpan hasil pengeditan, sesuaikan bagian-bagian yang ditandai pada kode di atas dengan setelan situs Anda.

Setelah menyimpan hasil pengeditan, lakukan pengujian langsung dengan mengklik tautan yang ada dalam daftar processURL pada situs Anda untuk memastikan fungsi safelink berjalan dengan sempurna.

Menambahkan Kode CSS (Opsional)

Secara fungsional, kode Safelink Anda sudah berjalan dengan baik. Penambahan CSS ini bersifat opsional hanya untuk memberikan sentuhan visual seperti mengubah ukuran font, warna dan jarak konten dengan blok safelink.

#safelink {
    display: flex;
    justify-content: center;
    min-height: 45dvh;
    padding-block-start: 11dvh
}
.safelink p {
    margin: 0;
    font-weight: 500;
    font-size: clamp(1.45rem, 1.1855rem + 0.6612vw, 1.75rem);
    text-align: center;
    text-wrap: balance
}

Anda dapat mengabaikan bagian ini jika hanya fokus pada fungsi, atau Anda dapat membuat style CSS sendiri sesuai dengan tema blog Anda. Kode di atas tidak menyertakan gaya khusus untuk tombol redirect karena setiap tema biasanya sudah memiliki gaya tombol bawaan.

safeLink() ? handleLink() : outboundLinks();