Halaman tidak ditemukan atau “404 Not Found” adalah hal biasa di belantara internet. Itu karena sama seperti segala sesuatu di dunia, halaman web juga berubah, datang, dan pergi. Sebagai bloger, kita tak perlu melakukan apa-apa apabila terdapat “404 Not Found” di blog kita karena -katakanlah- halaman tersebut memang telah dihapus.
Namun, Google dalam “Google Search Central” mengatakan bahwa “404 Not Found” yang terlalu banyak juga mengindikasikan bahwa ada masalah dengan blog kita . Untuk itulah diperlukan redirect URL.
Redirect URL berfungsi untuk mengalihkan sebuah halaman web/blog ke halaman lainnya. Redirect tak hanya mengalihkan pengunjung manusia, tetapi juga mengalihkan atau memberi tahu crawler mesin pencari
bahwa halaman lama telah dialihkan ke halaman baru dengan memberikan HTTP server code 301 moved permanently
atau 302 found
.
Lalu, bagaimana caranya?
Web-web dinamis seperti WordPress dan Blogspot memiliki fitur redirect di platform mereka. Blogspot memiliki fitur built in, sedangkan di WordPress kita bisa menggunakan plugin. Tetapi bagaimana bila Anda, sama seperti saya, menggunakan Hugo?
Sebagai Static-Site Generator (SSG), Hugo memang tidak memiliki kemampuan untuk campur tangan di sisi server. Meskipun begitu, kita masih bisa menggunakan redirect URL menggunakan 3 metode.
3 Metode Redirect URL di Hugo
Ada 3 metode yang bisa kita gunakan untuk mengalihkan URL di Hugo. Ketiganya punya kelebihan dan kekurangan masing-masing. Oh ya, redirect URL berbeda dengan [permalinks]
yang ada di config.toml
. Bila Anda terbiasa menggunakan WordPress
, fitur [permalinks]
di Hugo mirip dengan setting permalinks di WordPress.
1. Hugo Aliases
Hugo aliases merupakan salah satu page method yang difasilitasi oleh Hugo. Metode ini menggunakan client-side redirect atau meta refresh. Artinya, bila pengunjung mengakses URL lama, pengunjung akan tetap bisa mengaksesnya, sepersekian detik kemudian dialihkan ke URL baru.
10 Web Hosting Gratis untuk Web Statis
Salah satu kelebihan paling signifikan dari Static-Site Generator (SSG) adalah banyaknya platform yang menyediakan layanan web hosting gratis untuk …
Baca SelengkapnyaSaya pribadi tidak merekomendasikan metode Hugo aliases karena beberapa alasan:
- Google lebih merekomendasikan agar kita menggunakan server-side redirect karena lebih mudah diidentifikasi oleh mesin pencari.
- Ada sepersekian detik delay sehingga kurang bagus untuk pengalaman pengguna.
- Karena Hugo aliases ditulis di front matter masing-masing halaman, sulit untuk mengelolanya. Kita harus membuka satu per satu halaman, belum lagi kalau kita tidak ingat halaman mana saja yang akan dialihkan.
- Kemampuannya terbatas.
2. _redirects
Berbeda dengan metode pertama, metode _redirects
dilakukan di sisi server, dalam hal ini di server Netlify. Karena redirect dilakukan di sisi server (server-side redirect), maka ketika ada pengunjung yang mengakses URL lama, akan langsung dialihkan ke URL baru tanpa menunggu. File _redirects
diletakkan di folder public.
Contoh sintaks:
# Redirects from what the browser requests to what we serve
/home /
/blog/my-post.php /blog/my-post
/news /blog
/cuties https://www.petsofnetlify.com
/authors/c%C3%A9line /authors/about-c%C3%A9line
3. Netlify Configuration File
Metode ketiga adalah menggunakan Netlify configuration file. Metode ini juga sama-sama server-side redirect, yang berbeda hanyalah nama file, peletakan file untuk redirect, sintaks, dan keleluasaan. Termasuk apabila kita ingin mengalihkan subdomain Netlify ke domain TLD kita.
File netlify.toml
diletakkan di root directory sehingga mudah dibuat, dicari, dan dikelola. Berikut contoh sintaksnya.
[[redirects]]
from = "https://somenetlifysite.netlify.app"
to = "https://mycustomdomain.com"
status = 301
force = true
[[redirects]]
from = "/old-path"
to = "/new-path"
status = 301
force = false
query = {path = ":path"} # apply this rule for /old-path?path=example
conditions = {Language = ["en","es"], Country = ["US"]}
[[redirects]]
from = "/news"
to = "/blog"
Kelebihan metode Netlify configuration file:
Saya akan menggunakan metode netlify.toml
. Berikut beberapa pertimbangan jika dibandingkan dengan dua metode lainnya:
- Server-side redirect sehingga lebih bagus untuk SEO dan direkomendasikan oleh Google.
- Semua redirect ditulis dalam satu file sehingga lebih mudah dikelola.
- Kompatibel untuk force redirect.
- Format penulisan sintaks lebih terstruktur sehingga mudah dibaca dan ditulis.
- Karena tidak diletakkan di folder public, mengurangi konflik dengan SSG Hugo yang saya gunakan.
Kekurangan metode Netlify configuration file:
- Tidak bisa dicek di local host.
- Karena ini hanya khusus untuk Netlify, semua redirect bisa jadi tidak berfungsi apabila kita berpindah server.
Cara Redirect URL di Netlify Menggunakan Netlify Configuration File
Cara membuat redirect URL di Netlify cukup sederhana. Anda bisa menggunakannya pada saat first commit atau pertama kali deploy web, bisa juga dilakukan setelah deploy.
- Buat file netlify.toml
Di root directory, buat file netlify.toml
. Anda tak perlu membuat file baru bila sudah punya file ini.
- Tulis redirect
Tulis dan tambahkan semua URL yang diperlukan seperti contoh di bawah.
# Blog Tags
[[redirects]]
from = "/tags/art-supply"
to = "/blog/tags/art-supply"
status = 301
# Single Post
[[redirects]]
from = "/7-tip-optimasi-seo-untuk-blogger"
to = "/tips-seo-untuk-blogger"
status = 301
[[redirects]]
from = "/apa-yang-akan-terjadi-pada-blog-ini-bila-saya-mati"
to = "/"
status = 302
force = true
Oh ya, ada beberapa catatan ketika menulis redirect di netlify.toml
:
- Gunakan relative URL contoh:
/url-lama
. Bukan absolute URL, contoh:https://www.example.com/url-lama
- Trailing slash (/) di belakang URL tidak diperlukan, dengan atau tanpa trailing slash, URL akan dialihkan ke halaman yang sama.
- Apabila URL lama yang ingin kita alihkan memang ada (bukan 404), kita bisa “memaksanya” untuk dialihkan ke URL baru dengan
force
seperti pada contoh ketiga. - File
netlify.toml
dibaca dan dieksekusi dari atas ke bawah. Jadi, URL yang spesifik diletakkan paling atas, kemudian URL yang lebih umum di bawahnya. - By default, status HTTP server code redirect di Netlify adalah
301
sehingga tidak masalah bila tidak dituliskan pun.
Untuk penulisan yang lebih detail, Anda bisa melihat di dokumentasi Netlify tentang redirect .
- Push atau deploy perubahan ke server
Setelah semua redirect selesai ditulis, simpan perubahan lalu push web Hugo Anda ke server seperti biasa.
- Cek HTTP header
Untuk mengecek apakah redirect sudah berhasil atau belum, coba akses URL lama di browser. Jika berhasil, URL akan langsung dialihkan. Agar lebih yakin, coba cek HTTP headernya apakah server sudah memberikan server code yang benar yaitu 301
seperti yang kita tuliskan.
Untuk mengecek HTTP header, kita bisa menggunakan HTTP header checker online yang banyak bertebaran di internet. Bisa juga menggunakan curl
di terminal. Ketikkan perintah di terminal atau Git Bash:
curl -I https://example.com/url-lama/
Demikian cara redirect URL di Netlify untuk web Hugo. Semoga membantu. (eL)
Langit Amaravati
Web developer, graphic designer, techno blogger.
Aktivis ngoding barbar yang punya love-hate relationship dengan JavaScript. Hobi mendengarkan lagu dangdut koplo dan lagu campursari. Jika tidak sedang ngoding dan melayout buku, biasanya Langit melukis, belajar bahasa pemrograman baru, atau meracau di Twitter.