Docslogor

Pengaturan Situs Hugo

Pada bagian ini, kita akan membahas bagaimana cara mengonfigurasi situs Hugo menggunakan file config.toml, menambahkan SEO dasar untuk meningkatkan visibilitas situs di mesin pencari, dan mengatur URL serta permalink untuk struktur URL yang lebih terorganisir.

Mengatur config.toml untuk Konfigurasi Situs

File config.toml adalah file utama yang digunakan untuk mengatur konfigurasi situs Hugo. Di sini, kamu bisa menentukan berbagai pengaturan global seperti nama situs, URL, tema, dan banyak lagi.

Contoh Struktur config.toml:

baseURL = "https://www.mysite.com/"
languageCode = "id-id"
title = "My Hugo Site"
theme = "my-theme"
defaultContentLanguage = "id"
paginate = 10

Penjelasan Konfigurasi Umum:

  • baseURL: URL dasar situs. Ini adalah URL tempat situs kamu dapat diakses.
  • languageCode: Kode bahasa untuk situs (misalnya, id-id untuk Bahasa Indonesia).
  • title: Judul utama situs yang akan ditampilkan di bagian di HTML.
  • theme: Nama theme yang digunakan untuk situs.
  • defaultContentLanguage: Bahasa default untuk konten.
  • paginate: Jumlah postingan per halaman untuk daftar postingan.

Menambahkan SEO Dasar (Title, Meta Description)

SEO (Search Engine Optimization) adalah hal penting untuk meningkatkan peringkat situs di mesin pencari. Kamu bisa menambahkan tag <meta> dan <title> di dalam template untuk meningkatkan SEO dasar situs.

a. Menambahkan Title dan Meta Description di baseof.html

Buka template baseof.html yang berada di folder layouts/_default/, dan tambahkan tag SEO dasar di bagian <head>.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="{{ .Site.Params.description }}">
  <title>{{ .Site.Title }} - {{ .Title }}</title>
  <link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
</head>

Penjelasan

  • {{ .Site.Params.description }}: Mengambil deskripsi yang didefinisikan di config.toml.
  • {{ .Site.Title }}: Mengambil judul situs dari file konfigurasi.
  • {{ .Title }}: Mengambil judul halaman atau konten yang sedang ditampilkan.

b. Menambahkan Deskripsi di config.toml

Tambahkan parameter description di file config.toml untuk menetapkan deskripsi situs yang akan digunakan dalam tag meta.

[params]
  description = "Ini adalah situs pribadi yang dibangun menggunakan Hugo."

Hugo memungkinkan kamu untuk mengonfigurasi URL dan permalink untuk struktur URL yang lebih ramah pengguna dan SEO-friendly. Kamu dapat menentukan format URL untuk halaman individual, kategori, tag, dan lainnya.

a. Mengatur Permalink di config.toml

Kamu bisa mengatur struktur URL di config.toml menggunakan parameter permalinks.

[permalinks]
  posts = "/:year/:month/:day/:slug/"
  pages = "/:slug/"

Penjelasan:

  • posts: Mengonfigurasi struktur URL untuk postingan. Misalnya, URL postingan akan mengikuti format https://www.mysite.com/2024/12/18/nama-postingan/.
  • pages: Mengonfigurasi struktur URL untuk halaman statis.

b. Mengatur Permalink untuk Halaman dan Postingan

Jika ingin mengonfigurasi permalink khusus untuk halaman atau postingan, kamu bisa menambahkan url atau slug di bagian front matter konten Markdown.

---
title: "Judul Postingan"
date: 2024-12-18
slug: "judul-postingan"
url: "/artikel/judul-postingan/"
---
  • slug: Digunakan untuk menentukan bagian dari URL yang digunakan untuk halaman atau postingan.
  • url: Menetapkan URL penuh untuk halaman tertentu, menggantikan format default.

Kesimpulan

Dengan mengonfigurasi config.toml untuk pengaturan dasar situs, menambahkan SEO dasar seperti title dan meta description, serta mengatur URL dan permalink, kamu dapat meningkatkan pengalaman pengguna dan optimasi mesin pencari untuk situs Hugo. Pengaturan ini memastikan situs kamu mudah diakses dan diindeks oleh mesin pencari dengan struktur URL yang jelas dan SEO-friendly. 🚀

Sebelumnya
Menambahkan Fitur Tambahan
Selanjutnya
Optimasi Situs Hugo