Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
Cloudflare
Link

Mengatasi Broken Link dengan Cloudflare

Kupas tuntas Broken Link dan Solusinya

Broken Link adalah tautan yang rusak, artinya tautan yang ada di blog targetnya sudah tidak ada (error 404). Baik tautan di blog sendiri, atau eksternal (ke luar blog)

Dampak Broken Link Terhadap SEO

Tentunya akan sangat berpengaruh dan buruk sekali. Sebagai blogger tentunya tidak hanya dihadapkan kepada mesin, tapi terhadap pengguna (User Experience). Apa yang terjadi ketika beberapa pengguna mengklik tautan dan tautannya tidak ada. Sangat kecil kemungkinan mereka akan kembali lagi ke Blog kita.

Penyebab Broken Link

Diantara penyebab broken link, adalah

  1. Salah menulis / typo
  2. Permalink diganti
  3. URL postingan / file dihapus
  4. Pergantian directori untuk self Hosted
  5. Mengganti domain / Custom domain
  6. dll...

Custom Domain inilah yang sering terjadi di Blogger. ketika melakukan custom domain, banyak Link menggunakan domain blogspot yang tidak dirubah, sehingga memunculkan pengalihan seperti ini

Cara Cek Broken Link

Untuk mengecek apakah di Blog kita ada Broken Link atau tidak, kita bisa menggunakan tool online brokenlinkcheck.com

Solusi

Solusi terbaik tentunya dengan memperbaiki tautan tersebut, akan tetapi ketika terlalu banyak tautan yang memakan waktu editing, kita bisa gunakan dulu CloudFlare

Menggunakan Cloudflare untuk Broken Link

Ada beberapa langkah menggunakan cloudflare (tentunya blog harus sudah menggunakan DNS Cloudflare)

1. Buat Worker > Create a worker, copy script ini (edit yang diblok)

const OLD_URL = "blog.kangismet.net"
const NEW_URL = "kang-ismet.com"

async function handleRequest(req) {
  const res = await fetch(req)
  return rewriter.transform(res)
}

class AttributeRewriter {
  constructor(attributeName) {
    this.attributeName = attributeName
  }
  element(element) {
    const attribute = element.getAttribute(this.attributeName)
    if (attribute) {
      element.setAttribute(
        this.attributeName,
        attribute.replace(OLD_URL, NEW_URL),
      )
    }
  }
}

const rewriter = new HTMLRewriter()
  .on("a", new AttributeRewriter("href"))

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

Kemudian Rename misal 301-mui

Buat Route > Add a route
Gunakan *namadomain.tld/* ganti dengan nama domain Anda, worker nya yang sudah dibuat ex: 301-mui

Video

Untuk lebih memahami prosesnya, silahkan tonton video ini

Semoga bermanfaat...

#Cloudflare #Link

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

29 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Ini kan redirect domain lama ke baru ya kang? Ini memang perlu karena memang belum ada fasilitasnya di blogger.

    Kalau broken link dari url post gimana kang? Memang sudah ada fasilitasnya di blogger, tapi harus satu-satu.

    Adakah caranya seperti ini?
    1. susah kayaknya kang, soalnya yang direplace beda2.. tapi kalau replacenya sama bisa aja, kaya misal di WP asalnya https://kang-ismet.com/post/bla... jadi https://kang-ismet.com/blog/blabla...
      const base = "https://kang-ismet.com";
      const statusCode = 301;
      async function handleRequest(request) {
      const url = new URL(request.url);
      let { pathname, search, hash } = url;
      if(pathname.indexOf("/post") != 0) {
      return fetch(request);
      }
      pathname = pathname.replace("/post/", "/blog/");
      const destinationURL = base + pathname + search + hash;
      return Response.redirect(destinationURL, statusCode)
      }
      addEventListener("fetch", async event => {
      event.respondWith(handleRequest(event.request))
      })
    2. routenya gimana kang? terus apa bisa mengganti search/label/?
    3. untuk route *kang-ismet.com/post* kalau replace search/label dengan kode ini malah 404 nantinya
    4. ok makasih kang
    5. itu script worker ya kang, apa itu untuk wp? kalau untuk blogger caranya bagaimana ya kang
  2. hjls nya ngak diterapin di postingan blognya lagi kang?
    1. variatif aja.. kadang pake kadang ngga hehe
  3. apa cara ini juga bisa di terapkan untuk mencari dan mereplace url?
    1. kalau ingin bulk rewrite url nya bagaimana ya mas pada bagian ini const OLD_URL =?
    2. kalau untuk bulk saya belum explore lagi, untuk replace coba gunakan worker yang dibawah... saya sudah tulis menjawab kang Adhy
    3. saya menanyakan soal bulk rewrite untuk mengubah domain gambar custom di blogger yang semula 1.bp.blogspot.com, 2.bp.blogspot.com, 3.bp.blogspot.com, 4.bp.blogspot.com, menjadi seperti ini https://www.kang-ismet.com/image. yang sudah di buatkan tutorialnya di blog marwanto606
    4. berarti tinggal modifikasi saja script Membuat CDN Image dari blog Marwanto
    5. atau ujicoba script ini dengan domain yang sama misal tambah /p jadi /page
    6. yang tutorial dari marwanto606 tidak perlu dimodifikasi. hanya membuat workers lagi sama seperti tutorial kang ismet pada postingan ini dan routenya juga sama. namun berhubung pengaturan route-nya di cloudflare hanya boleh satu tidak boleh ada duplikat route untuk redirect 301 punya mas mungkin tidak perlu digunakan lagi
    7. kalau untuk redirect untuk kasus /p/ ke /page/ atau /search/label/ ke /category/ sepertinya tidak bisa saat ini selalu terjadi error 404
    8. script rewrite gambar blogger sama seperti tutorial yang kang ismet buat hanya ada perubahan seperti

      const OLD_URL = "1.bp.blogspot.com"
      const NEW_URL = "kang-ismet.com/image"

      dan pada bagian const rewriter = new HTMLRewriter(), diubah seperti ini

      const rewriter = new HTMLRewriter()
      .on("a", new AttributeRewriter("href"))
      on("link", new AttributeRewriter("href"))
      .on("img", new AttributeRewriter("src"))
      .on("a", new AttributeRewriter("style"))
      .on("a", new AttributeRewriter("src"))
      .on("meta", new AttributeRewriter("content"))
    9. apa cara bulk domainnya seperti ini ya kang ?

      const OLD_URL = "1.bp.blogspot.com , 2.bp.blogspot.com , 3.bp.blogspot.com , 4.bp.blogspot.com"
  4. oh ada yang salah kang pada bagian, const rewriter = new HTMLRewriter()

    seharusnya itu seperti ini

    .on("a , link", new AttributeRewriter("href"))
    .on("img", new AttributeRewriter("src"))
    .on("a", new AttributeRewriter("style"))
    .on("a", new AttributeRewriter("src"))
    .on("meta", new AttributeRewriter("content"))
    1. kalau sistem rewrite seperti ini asset harus ada, natinya malah 404
    2. itu semua ada dalam website saya mungkin untuk pengguna amp kang ismet bisa menambahkannya
  5. bermanfaat banget mas, selain blog ada cara membedakan iphone xs asli dan palsu yang bisa di pelajari juga
  6. Salam kenal kang ismet
  7. Waah, happy banget saya ketemu sama Kang Ismet lagi 😂😂 gilaaa, blog Kang Ismet udah saya ikutin dari zaman saya kuliah di sekitar 2012-2013, kemudian sepertinya sempet vakum ya Kang?

    Dan sekarang gak kerasa saya udah kerja dan punya anak :") malem ini lagi mulai otak-atik blog lagi, dan tetiba inget Kang Ismet. Eh, blog Kang Ismet reborn ternyata!!!

    Mantapp, lanjutkan, Kang! Stay safe & stay healthy!
  8. ini kang, saya sudah temukan kode custom permalink dan rewrite canonicalnya juga. untuk routenya hanya seperti ini https://www.domain.com/test-page

    addEventListener("fetch", event => {
    const request = event.request
    event.respondWith(handleRequest(event))
    })
    const OLD_URL = "https://www.domain.com/p/test.html";
    const NEW_URL = "https://www.domain.com/test-page";
    class AttributeRewriter {
    constructor(attributeName) {
    this.attributeName = attributeName
    }
    element(element) {
    const attribute = element.getAttribute(this.attributeName)
    if (attribute) {
    element.setAttribute(
    this.attributeName,
    attribute.replace(OLD_URL, NEW_URL)
    )
    }
    }
    }
    async function handleRequest(req) {
    const url = 'https://www.domain.com/p/test.html'
    const res = await fetch(url)

    return new HTMLRewriter()
    .on("link", new AttributeRewriter("href"))
    .on("meta", new AttributeRewriter("content"))
    .transform(res)
    }
    1. hi mate,

      https://www.marwanto606.com/page/contact

      Do you have the cloudflare workers code running on your page?
  9. Assalamualaikum, halo kang/mas ismet, kenapa di home page website ada thumbnail, tapi pas saya klik kok tidak ada. Itu bagaimana tolong di beritahu :)
  10. Bisa hbungi email sya kang? Ada bbrp hal penting yg perlu sya tanyakan
    [email protected]
    1. Contact saya aja via Form https://tutorial.kang-ismet.com/contact.html
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.