Markdown adalah sebuah tools untuk mengubah format atau konversi text ke HTML yang biasa digunakan untuk membuat konten. Dengan menggunakan markdown, Kamu bisa menulis dengan format yang mudah untuk dibaca dan mudah pula untuk ditulis (easy-to-read dan easy-to write). Penggunanaan markdown pada sebuah konten akan memudahkanmu dalam membuat sebuah konten, tanpa perlu repot-repot mempermasalahkan format HTML-nya.

Nah, Hugo sendiri menggunakan markdown sebagai tools pada manajemen kontennya. Sehingga semua konten yang dibuat menggunakan Hugo dibuat dalam format markdown.

Sejak merilis versi 0.60.0, Hugo mengubah jenis markdown untuk content format yang digunakan dari Blackfriday ke Goldmark. Perubahan tersebut mempengaruhi beberapa fungsi pada Blackfriday menjadi tidak berfungsi di markdown versi Goldmark. Salah satunya adalah fungsi modifikasi link external dengan menambahkan rel="nofollow" untuk keperluan SEO. Pada markdown versi Goldmark fungsi untuk mengatur ini tidak ada, sehingga Kamu perlu melakukan modifikasi untuk menmbahkan fungsi rel="nofollow" pada link external.

Sebenarnya Hugo tidak benar-benar menghilangkan Blackfriday sebagai tools pada manajemen kontennya. Kamu bisa saja mengubah markdown pada Hugo milikmu dengan mengubahnya kembali ke Blackfriday, seperti ini.

[markup]
defaultMarkdownHandler = "blackfriday"

[markup.blackFriday]
hrefTargetBlank = false
nofollowLinks = false

Itu adalah cara sederhana untuk membuat external link menjadi nofollow.

Cara diatas memang sederhana, namun jika Kamu ingin tetap menggunakan Goldmark sebagai markdown pada Hugo milikmu. Maka, Kamu bisa mencoba cara yang satu ini. Dimana Kamu bisa melakukan kustomisasi terhadap markdown yang sudah ada pada Hugo lewat Markdown Render Hooks¹.

Untuk melakukan kustomisasi pada default render markdown Hugo, Kamu dapat melakukannya pada direktori ini.

layouts/
`-- _default/
    `-- _markup/
        `-- render-link.html

Pada kasus kali ini, Saya akan mencoba kustomisasi link pada external dengan menambahkan rel="nofollow noopener noreferrer" dan target="_blank". Tujuan utama menambahkan atribut tersebut adalah untuk memberitahu kepada robot pencari agar tidak melakukan crawling pada link tersebut, sesuai rekomendasi SEO dari Google. Selain itu, Saya juga akan menambahkan kustomisasi pada link yang berisi email, lalu diarahkan untuk dibuka lewat javascript agar lebih aman.

Untuk melakukan kustomisasi pada markdown link Hugo, Kamu isi atau buat dulu file render-link.html jika belum ada. Lalu isi dengan kode dibawah ini.

<a 
    {{ if or (strings.HasPrefix .Destination "http") (strings.HasPrefix .Destination "#") (strings.HasPrefix .Destination "/") }} 
        href="{{ .Destination | safeURL }}"
        {{ if strings.HasPrefix .Destination "http" }} 
            target="_blank" rel="nofollow noopener noreferrer" 
        {{ end }} 
    {{ else if strings.HasPrefix .Destination "mailto" }}
        href="mailto:{{ .Text | safeHTML }}" onClick="javascript:window.open('mailto:{{ .Text | safeHTML }}', 'mail'); event.preventDefault()" 
    {{ end }} 
        {{ with .Title}} title="{{ . }}" {{ end }}
>
    {{ .Text | safeHTML}}
</a>

Untuk cara menggunakannya sebagai berikut :

• Untuk external link, gunakan perintah seperti ini.

  [Hugo Docs](https://gohugo.io/documentation/ 'Hugo Documentation')

  Maka hasil rendernya dalam format HTML akan seperti ini nantinya.

  <a href="https://gohugo.io/documentation/" target="_blank" rel="nofollow noopener noreferrer" title="Hugo Documentation">
      Hugo Docs
  </a>

• Untuk internal link, gunakan perintah seperti ini.

  [Cara Membuat Blog Pribadi Menggunakan Hugo](/blog/membuat-blog-pribadi-menggunakan-hugo/ 'Cara Membuat Blog Pribadi Menggunakan Hugo')

  Maka hasil rendernya dalam format HTML akan seperti ini nantinya.

  <a href="http://localhost:1313/blog/membuat-blog-pribadi-menggunakan-hugo/" title="Cara Membuat Blog Pribadi Menggunakan Hugo">
      Cara Membuat Blog Pribadi Menggunakan Hugo
  </a>

• Untuk email url, gunakan perintah seperti ini.

  [saefulrahman.id@gmail.com](mailto:saefulrahman.id@gmail.com 'saefulrahman.id@gmail.com')

  Maka hasil rendernya dalam format HTML akan seperti ini nantinya.

  <a href="mailto:saefulrahman.id@gmail.com" onclick="javascript:window.open('mailto:saefulrahman.id@gmail.com', 'mail'); event.preventDefault()" title="saefulrahman.id@gmail.com">
      saefulrahman.id@gmail.com
  </a>

Itulah tips sederhana untuk kustomisasi markdown link pada Hugo. Walapun sepele, namun cara ini sangat membantu untuk keperluan SEO agar robot mesin pencari mengabaikan crawl pada external link yang ada pada website milikmu. Tentu saja dengan harapan untuk bebas dari SPAM, sehingga website milikmu benar-benar aman.

---

1. Markdown Render Hooks - gohugo.io  ↩︎