Tak Perlu Capek Lagi, Begini Cara Membuat Live Link Tag Otomatis Dalam Artikel di Blogger

BANG ANCIS - Anda seorang blogger. Pasti. Anda menulis setiap hari. Atau setiap minggu. Lalu, setelah tulisan selesai, ada satu pekerjaan lagi. Pekerjaan yang agak membosankan. Yaitu menaruh link. Satu per satu.

Misalnya, Anda menulis tentang "gadget". Di artikel itu, Anda ingin setiap kata "gadget" menjadi link ke halaman label/tag "gadget". Anda harus melakukannya manual. Cari kata pertama, jadikan link. Cari kata kedua, jadikan link lagi. Capek? Tentu.

Bagaimana kalau pekerjaan itu bisa berjalan sendiri? Otomatis. Anda cukup menulis seperti biasa. Tahu-tahu, semua kata penting di artikel Anda sudah menjadi link. Ajaib? Bukan. Ini teknologi.

Cara Membuat Live Link Tag Otomatis Dalam Artikel di Blogger

Jaring Laba-laba Google

Sebelum ke resepnya, Anda perlu tahu kenapa ini penting. Sangat penting. Google itu seperti laba-laba. Ia merayap dari satu link ke link lainnya. Semakin banyak link internal (link ke artikel lain di blog Anda sendiri), Google semakin paham isi blog Anda. Semakin betah ia di sana.

Blog yang punya banyak link internal yang relevan, biasanya lebih disayang Google. Peringkatnya bisa lebih baik. Pengunjung pun lebih lama tinggal. Karena mereka mudah menemukan tulisan lain yang terkait.

Jadi, ini bukan soal malas. Ini soal strategi. Soal membuat blog kita lebih pintar. Lebih SEO. Dan kita? Punya lebih banyak waktu untuk ngopi.

Jimatnya Cuma Secuil Kode

Rahasia dari semua ini adalah sebaris kode. Namanya JavaScript. Jangan takut dulu mendengar namanya. Anggap saja ini resep masakan. Anda tidak perlu tahu cara menanam padinya. Cukup tahu cara memasaknya.

Kita hanya perlu menempelkan "jimat" ini di tema Blogger kita. Sekali saja. Untuk selamanya. Skrip ini akan bekerja setiap kali ada pengunjung membuka artikel Anda. Ia akan membaca semua tag yang Anda pasang di artikel itu. Lalu, ia akan berburu kata-kata yang sama di dalam tulisan Anda. Ketemu? Langsung diubah jadi link. Cerdas, bukan?

Langkah-Langkahnya, Jangan Sampai Keliru

Ada tiga langkah utama. Pelan-pelan saja. Sambil seruput kopi Anda.

Langkah 1: Cari Tahu "Kandang" Tag Anda

Setiap tema Blogger punya "kandang" untuk menaruh daftar tag/label. Kita harus tahu di mana alamat kandang itu. Caranya:

  1. Buka salah satu artikel Anda yang sudah ada tag-nya.
  2. Arahkan mouse ke area daftar tag itu. Klik kanan, lalu pilih "Inspect".
  3. Lihat kode yang disorot. Cari nama class atau id dari pembungkusnya. Biasanya namanya post-labels, article-tags, atau sejenisnya. Catat nama ini. Misalnya: .post-labels (jangan lupa tanda titik di depannya).

Langkah 2: Cari Tahu "Ruang Tamu" Artikel Anda

Sekarang, kita cari alamat dari isi artikel Anda. Tempat tulisan utama Anda berada.

  1. Masih di halaman yang sama, klik kanan di tengah-tengah paragraf artikel Anda. Pilih "Inspect" lagi.
  2. Lihat kode yang disorot. Cari nama class atau id pembungkus utamanya. Biasanya namanya post-body atau entry-content. Catat nama ini. Misalnya: .post-body.

Langkah 3: Tempelkan "Jimat Sakti"

Ini bagian intinya. Anda harus masuk ke "dapur" tema Blogger Anda.

  1. Masuk ke Dasbor Blogger → Tema → klik tombol Sesuaikan → Edit HTML.
  2. PENTING! Klik "Cadangkan" atau "Backup" dulu. Simpan tema asli Anda. Ini sabuk pengaman Anda.
  3. Tekan Ctrl + F, lalu cari kode </body>.
  4. Salin (copy) semua kode di bawah ini, lalu tempelkan (paste) TEPAT SEBELUM kode </body> itu.
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  // --- KONFIGURASI ---
  // 1. Ganti '.post-body' dengan selector BODY ARTIKEL Anda dari Langkah 2
  const postBodySelector = '.post-body';

  // 2. Ganti '.post-labels' dengan selector DAFTAR TAG Anda dari Langkah 1
  const postLabelsContainerSelector = '.post-labels';

  // 3. Setel ke `false` jika Anda ingin mengubah SEMUA kata yang cocok menjadi link.
  //    Sangat disarankan untuk tetap `true`.
  const linkOncePerTag = true;
  // --- AKHIR KONFIGURASI ---

  const labelsContainer = document.querySelector(postLabelsContainerSelector);
  const articleBody = document.querySelector(postBodySelector);

  if (!labelsContainer || !articleBody) {
    return; // Hentikan jika salah satu elemen tidak ditemukan
  }

  // Mengambil semua nama tag dari link yang ada di dalam container
  const labels = Array.from(labelsContainer.getElementsByTagName('a')).map(link => link.textContent.trim()).filter(label => label);
  
  if (labels.length === 0) {
    return;
  }

  const linkedTags = new Set();

  function walkAndReplace(node) {
    if (node.nodeType === 3) { // Hanya proses text nodes
      let textContent = node.textContent;
      const parentTag = node.parentNode.tagName;

      if (parentTag !== 'A' && parentTag !== 'SCRIPT' && parentTag !== 'STYLE' && parentTag !== 'H1' && parentTag !== 'H2' && parentTag !== 'H3') {
        let newHtml = textContent;
        
        labels.forEach(label => {
          if (linkOncePerTag && linkedTags.has(label.toLowerCase())) {
            return;
          }
          
          const regex = new RegExp('\\b(' + label.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')\\b', 'gi');
          
          if (regex.test(newHtml)) {
            const tagUrl = '/search/label/' + encodeURIComponent(label);
            newHtml = newHtml.replace(regex, `<a href="${tagUrl}">$1</a>`);
            
            if (linkOncePerTag) {
              linkedTags.add(label.toLowerCase());
            }
          }
        });

        if (newHtml !== textContent) {
          const newNode = document.createElement('span');
          newNode.innerHTML = newHtml;
          node.parentNode.replaceChild(newNode, node);
        }
      }
    } else {
      for (let i = 0; i < node.childNodes.length; i++) {
        walkAndReplace(node.childNodes[i]);
      }
    }
  }

  walkAndReplace(articleBody);
});
//]]>
</script>

Jangan Lupa Disetel!

Lihat bagian --- KONFIGURASI --- di dalam kode tadi? Hanya itu yang perlu Anda sentuh. Ganti nilai '.post-body' dan '.post-labels' dengan nama selector yang sudah Anda catat di Langkah 1 dan 2.

Satu lagi. Lihat tulisan linkOncePerTag = true;? Biarkan saja begitu. Artinya, skrip ini hanya akan mengubah satu kata saja per tag. Misalnya ada lima kata "gadget" di artikel Anda, hanya kata "gadget" yang pertama kali ditemukan yang akan jadi link. Kenapa? Agar tidak terlihat spam. Google suka yang alami.

Sudah? Klik tombol Simpan.

Sekarang, coba buka salah satu artikel Anda. Lihat keajaibannya. Blog Anda kini punya senjata baru. Senjata untuk membuat Google lebih cinta, dan pembaca lebih betah.

Anda? Silakan nikmati kopi Anda. Pekerjaan membosankan itu sudah ada yang mengerjakan.

Selamat mencoba!

Belanja Celana Boxer Cowok dan Cewek
LihatTutupKomentar
Cancel

Berita dari Gejolak

Memuat artikel...