Mengatasi Broken Link dengan Cloudflare
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
- Salah menulis / typo
- Permalink diganti
- URL postingan / file dihapus
- Pergantian directori untuk self Hosted
- Mengganti domain / Custom domain
- 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...
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?
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))
})
routenya gimana kang? terus apa bisa mengganti search/label/?
untuk route *kang-ismet.com/post* kalau replace search/label dengan kode ini malah 404 nantinya
ok makasih kang
itu script worker ya kang, apa itu untuk wp? kalau untuk blogger caranya bagaimana ya kang
hjls nya ngak diterapin di postingan blognya lagi kang?
variatif aja.. kadang pake kadang ngga hehe
apa cara ini juga bisa di terapkan untuk mencari dan mereplace url?
kalau ingin bulk rewrite url nya bagaimana ya mas pada bagian ini const OLD_URL =?
kalau untuk bulk saya belum explore lagi, untuk replace coba gunakan worker yang dibawah... saya sudah tulis menjawab kang Adhy
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
berarti tinggal modifikasi saja script Membuat CDN Image dari blog Marwanto
atau ujicoba script ini dengan domain yang sama misal tambah /p jadi /page
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
kalau untuk redirect untuk kasus /p/ ke /page/ atau /search/label/ ke /category/ sepertinya tidak bisa saat ini selalu terjadi error 404
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"))
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"
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"))
kalau sistem rewrite seperti ini asset harus ada, natinya malah 404
itu semua ada dalam website saya mungkin untuk pengguna amp kang ismet bisa menambahkannya
bermanfaat banget mas, selain blog ada cara membedakan iphone xs asli dan palsu yang bisa di pelajari juga
Salam kenal kang ismet
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!
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)
}
hi mate,
https://www.marwanto606.com/page/contact
Do you have the cloudflare workers code running on your page?
Assalamualaikum, halo kang/mas ismet, kenapa di home page website ada thumbnail, tapi pas saya klik kok tidak ada. Itu bagaimana tolong di beritahu :)
Bisa hbungi email sya kang? Ada bbrp hal penting yg perlu sya tanyakan
[email protected]
Contact saya aja via Form https://tutorial.kang-ismet.com/contact.html