Panduan Praktis Redirect URL di Netlify untuk Situs Hugo

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.

BACA JUGA

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 Selengkapnya

Saya 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.

1. Buat file netlify.toml

Di root directory, buat file netlify.toml. Anda tak perlu membuat file baru bila sudah punya file ini.

2. 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 .

3. Push atau deploy perubahan ke server

Setelah semua redirect selesai ditulis, simpan perubahan lalu push web Hugo Anda ke server seperti biasa.

4. 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)