Bikin SEO dinamis di Hugo

Bagaimana memaikan SEO pada Hugo? SEO alias Search engine optimization pada website tentu sangat penting kalau kamu mau website kamu mudah ditemukan o...

cover Bikin SEO dinamis di Hugo

SEO alias Search engine optimization pada website tentu sangat penting kalau kamu mau website kamu mudah ditemukan oleh orang. Tenang Hugo tidak ketinggalan tentang hal SEO, kita bisa dengan mudah mengaturnya.

SEO untuk title tag

Ingat template partial/baseof.html yang bisa kita selipkan di mana saja? Kalau isi file kamu seperti ini

<!DOCTYPE html>
<html>
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <div id="content">
        {{- block "main" . }}{{- end }}
        </div>
        {{- partial "footer.html" . -}}
    </body>
</html>

Di situ kita lihat ada partial head.html yang bisa berisi head tagnya.

Kita pindah ke /partials/head.html dan mengisi head tagnya.

<head>
    <title>{{.Title}}</title>
</head>

Dengan menambahk 3 baris di atas saja, sekarang semua halaman kamu secara automatis mengambil judul masing-masing (dinamis) yang bisa kamu lihat di tab browser kamu atau saat "view page source" ada tag headnya di sana.

SEO description HomePage

Kamu bisa menambahkan di bawah tag titlenya

<meta name="description" content="{{ .Site.Params.Description }}"/>

Tapi tugas kita belum selesai, kamu perlu mengatur deskripsinya di halaman masing-masing.

Deskripsi Homepage masukkan di file config.toml kamu

[params]
  Description = "Belajar Koding di sini"

di params ini kamu bisa memasukkan apa saja yang kamu butuhkan seperti meta tag untuk twitter, facebook atau lainnya, cara mengambilnya cukup ganti di .SIte.Params.NamaKeynya

SEO description halaman single page

Masalahnya saat kamu ke halaman lain, semua deskripsinya sama, tentu kita ngga mau ini, kita perlu bikin meta descriptionnya menjadi dinamis.

Pertama pastikan memberikan di front matter konte kamu, sebuah deskripsi, contoh

---
title: "Second"
date: 2020-08-19T16:55:42+08:00
draft: false
description: "im second description here!"
---

Untuk menampilkannya, sekarang ubah meta description kita menjadi

<meta name="description" content="{{ if .Description }} {{ .Description }} {{ else }} {{ .Site.Params.Description }} {{end}} "/>

Di atas kita menguji jika punya .Description maka akan langsung ditampilkan (yang punya ini hanya halaman konten saja), homepage tidak punya, karena itu dia akan mengintip bagian "else" nya, yaitu kode kita sebelumnya.

Untuk halaman lainnya

Karena Hugo cukup fleksibel, kita bisa punya halaman kategori, taxonomi dan lain-lainnya. Kita bisa memanfaatkan pengujian if-else ditambahkan variabel .Kind

Sebagai contoh untuk menguji apakah ini "section" (nama folder kamu membuat konten).

{{ if eq .Kind "section" }}
<meta name="description" content="ini deskripsi halaman section"/>
{{ else }}
...
{{ end }}

Kamu juga bisa menguji .Kind dari

home, page, section, taxonomy dan term.

Tapi ingat, halaman "section" kita pun bisa banyak, bagaimana membuatnya dinamis? Karena kalau harus melakukan semua if else di sana, tentu jadi tidak rapi.

Untuk mengambil nama sectionnya bisa menggunakan variabel .Section

<meta name="description" content="ini adalah section {{.Section}}"/>

SEO untuk halaman section

Di atas sudah lumayan dinamis, tapi bagaimana dengan deskripsi yang jauh berbeda di setiap halaman section kita?

Ada tips menarik. Di setiap folder "section" kita bisa diberi file _index.md yang berisi front matter, tentang setiap section ini. Contoh di file blog/_index.md akan saya masukkan data berikut

---
title: "Blog Banget"
summary: "Ini adalah halaman blog"
---

Nah sekarang, untuk deskripsinya, tinggal ditamahkan

<meta name="description" content="{{.Summary}}"/>

Kenapa ini lebih dinamis?

karena setiap folder section kita, tinggal ditambahkan file _index.md tersebut dan memberi judul dan meta lain apapun yang kita butuhkan

Catatan:

  1. Di atas baru dibuat untuk description, gimana yah untuk meta meta lainnya? ayo coba sendiri..
  2. Ada banyak cara, ide lain kamu memainkan template partial nya, dengan if else yang sama dengan di atas, kamu menguji apakah ini "homepage" misalnya, maka kamu bisa memanggil partial yang lain yang berbeda dari partial seciton, taxonomy dan lainnya
avatar hilmanski
@hilmanski

2665 Kontribusi 2131 Poin

Diperbarui 3 tahun yang lalu

Bagian dari artikel seri

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban