10 Langkah SEO Hugo Simple dan Mudah Dipahami
Eh, denger-denger nih, SEO Hugo bisa ngebantuin ngundang lebih banyak pengunjung ke situs web, lho! Kalo gitu, mendingan ente pertimbangkan pake Hugo sebagai platform buat ngoptimalkan SEO. Nah, di artikel kali ini, ane bakal bahas cara ngoptimalkan SEO Hugo yang simpel dan gampang dipahami.
Soalnya, sekarang ini dunia digital tuh udah jadi bagian penting buat bisnis dan organisasi. Nah, biar bisa ngelakuin hal-hal keren dan mencapai tujuan yang diimpikan, situs web tuh jadi salah satu faktor penting yang nggak boleh diabaikan. Salah satu cara yang oke banget buat mencapai tujuan itu adalah ngoptimalkan peringkat SEO Hugo.
Langkah Maksimalisasi SEO Hugo
Pertama-tama, ente tahu kan, Hugo tuh dibangun dengan tujuan jadi platform yang SEO-friendly. Nah, Hugo ini udah dilengkapi dengan struktur URL yang ramah banget buat SEO, front matter yang keren, dan juga bikin URL jadi bersih dan gampang dibaca.
Kalo ente pernah mampir ke situs petanikode, itu contoh sukses banget yang pake Hugo Static Site Generator buat bangun situs webnya. Nah, tapi sebelum masuk ke pembahasan yang lebih gokil tentang SEO Hugo, sebaiknya harus paham dulu tentang SEO dan cara mengoptimalkan konten di situs web , ya.
Baca Juga: Mengenal Directory Structure Hugo Sebelum Membangun Situs
Langkah 1: Mengatur Title untuk SEO Hugo
Nah, yang pertama-tama ini judul halaman, yang kadang disebut juga title. Judul halaman ini nggak cuma buat ngingetin pengunjung tentang apa yang ada di halaman itu, tapi juga jadi faktor penting buat mesin pencari nentuin peringkatnya.
Yang perlu ente perhatiin, setiap kata kunci yang ditargetin itu harus ada di dalam judul halaman. Di Hugo, file konfigurasi biasanya di config.toml, dan di situ ada field yang bisa diatur buat judul global web:
title = "Judul situs"
Judul halaman ini penting banget buat SEO Hugo, dan buat pastiin kata kunci yang ditargetin ada di dalamnya, perlu tambahin judul halaman ke front matter.
Caranya, buka file konten Hugo yang ente punya, trus tambahin blok metadata di bagian atas file itu:
title = "Judul halaman"
Terus, buat nunjukin judul yang pas di layout, bisa pake template di Hugo. Template ini ngasih kemudahan buat nunjukin konten situs dengan konsisten dan gampang diatur. Buat nunjukin judul halaman di layout, tambahin kode ini di file template yang relevan:
<title>
{{- if .IsAbout -}}
About | {{ .Site.Title }}
{{- else if .Params.hide_site_title -}}
{{ .Page.Title }}
{{- else if .Page.Title -}}
{{ .Page.Title }} | {{ .Site.Title }}
{{ else }}
{{ .Site.Title }}
{{ end }}
</title>Kalo ente mau bikin judul halaman cuma nunjukin judul halaman doang, tanpa nunjukin judul situs yang ada di config.toml, bisa atur hide site title: true di front matter halaman itu.
Langkah 2: Mengatur Meta Description SEO Hugo
Yang kedua ini tentang deskripsi meta, yang penting banget buat SEO Hugo. Deskripsi meta ini bisa ente atur buat setiap halaman atau postingan, dan jadi faktor yang nggak bisa dianggep remeh buat SEO Hugo. Caranya gimana?
Tambahin deskripsi meta ke front matter file Markdown. Nah, ente bisa pake sintaksis YAML atau TOML di front matter, sesuai dengan preferensi. Buat nunjukin deskripsi meta di halaman atau postingan tertentu, tambahin baris ini di front matter file Markdown-nya:
[params] description = "Deskripsi situs web di sini" Atau YAML --- title: Judul halaman description: Deskripsi halaman --- Konten halaman TOML +++ title = "Judul halaman" description = "Deskripsi halaman" +++ Konten halaman
Nah, abis itu bisa tambahin kode ini ke file layout _default/baseof.html. Kode ini bakal nunjukin deskripsi meta di setiap halaman web. Untuk nunjukin deskripsi meta di file layout _default/baseof.html, tambahin kode ini di bagian head HTML-nya:
{{- if .IsAbout -}}
<meta name="description" content="{{ site.Params.Description }}" />
{{- else -}}
<meta name="description" content="{{ .Params.Description }}" />
{{- end }}
atau
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ .Title }}</title>
<meta name="description" content="{{ .Description }}">
{{- partial "head.html" . -}}
</head>Di kode di atas, tambahin baris <meta name=”description” content=”{{ .Description }}”> buat nunjukin deskripsi meta di setiap halaman. Kalo ada deskripsi meta di front matter halaman, dia bakal nunjukin deskripsi meta itu. Kalo nggak ada, dia nunjukin deskripsi meta di config.toml.
Langkah 3: Mengatur URL Cononical SEO Hugo
Yang ketiga ini tentang URL kanonikal, yang penting banget buat SEO Hugo Dinamis. Kalo mau ngatur URL kanonikal di situs Hugo, ada beberapa cara yang bisa dilakuin. Salah satunya, tambahin tag kanonikal di halaman yang mau diatur.
Tambahin kode ini ke halaman yang mau ente atur:
<link rel="canonical" href="{{ .Permalink }}" />Terus, yang lainnya, bisa tambahin parameter canonical URL di front matter setiap halaman. Parameter ini bisa ente pake buat nunjukin URL yang bakal jadi URL kanonikal buat halaman itu. Contohnya gini:
canonical: www.contoh.com/halaman atau +++ title = "Judul Halaman" date = 2022-03-01T12:00:00Z canonicalURL = "https://www.contoh.com/halaman" +++
Di contoh SEO Hugo ini, canonicalURL diatur jadi “https://www.kumiskiri.com/halaman”. URL ini bakal jadi URL kanonikal buat halaman itu.
Selanjutnya, tambahin kode ini di bagian head HTML di file layout baseof.html:
{{- if isset .Params "canonical" -}}
<link rel="canonical" href="{{ .Params.canonical }}" />
{{- else -}}
<link rel="canonical" href="{{ .Permalink }}" />
{{- end }}
atau
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ .Title }}</title>
<meta name="description" content="{{ .Description }}">
<link rel="canonical" href="{{ .Permalink }}">
{{- partial "head.html" . -}}
</head>Tag kanonikal di tambahin lewat baris <link rel=”canonical” href=”{{ .Permalink }}”>. Nah, .Permalink itu variabel yang berisi URL asli dari setiap halaman.
Langkah 4: Mengatur Meta Tag SEO Hugo
Di SEO Hugo, ente bisa pake tag meta pagination di halaman-halaman yang punya banyak konten. Tag meta pagination di Hugo ini terdiri dari beberapa elemen, kayak rel=”prev”, rel=”next”, dan rel=”canonical”.
Buat nunjukin tag meta pagination di Hugo, perlu ngatur front matter di setiap halaman yang perlu dipaginasi. Ente juga bisa pake konfigurasi pagination di file config.toml. Contohnya gini:
Tambahin front matter ini di halaman yang perlu dipaginasi:
--- title: "Contoh Halaman dengan Pagination" pagination: prev: "/halaman/2/" next: "/halaman/4/" canonical: "/halaman/3/" ---
Terus, tambahin tag meta pagination ini di layout halaman:
{{- if .Paginator -}}
{{- if .Paginator.HasPrev -}}
<link rel="prev" href="{{ .Paginator.Prev.URL | absURL }}" />
{{- end -}}
{{- if .Paginator.HasNext -}}
<link rel="prev" href="{{ .Paginator.Next.URL | absURL }}" />
{{- end -}}
{{- end }}
atau
{{ if .Paginator.HasPrev }}
<link rel="prev" href="{{ .Paginator.Prev.URL }}">
{{ end }}
{{ if .Paginator.HasNext }}
<link rel="next" href="{{ .Paginator.Next.URL }}">
{{ end }}
{{ if .Paginator.HasPrev }}
<link rel="canonical" href="{{ .Paginator.URL }}">
{{ end }}Di contoh di atas, tag meta pagination bakal nunjukin tombol navigasi prev dan next buat halaman sebelumnya dan selanjutnya. Selain itu, tag meta canonical juga dipake buat nunjukin halaman utama atau asli (original page) di situs web ente.
Langkah 5: Mengatur Sitemap SEO Hugo
Nah, yang ini tentang sitemap, yang jadi peta situs web ente. Buat nunjukin sitemap di Hugo, perlu bikin file sitemap.html di folder layouts. Di file ini, bisa tambahin link ke halaman 404 di bagian bawah sitemap. Contohnya gini:
{{- define "main" -}}
<div class="sitemapDiv">
<h1>Sitemap</h1>
<h2>Main pages</h2>
<ul>
<li><a href="{{ site.BaseURL }}">Home</a></li>
<li><a href="{{ site.BaseURL }}about/">About us</li>
<li><a href="{{ site.BaseURL }}privacy/">Privacy policy</a></li>
<li><a href="{{ site.BaseURL }}contact/">Contact us</a></li>
</ul>
<h2>Products</h2>
<ul>
{{- range where site.RegularPages "Type" "articles" -}}
<li><strong><a href="{{ .Permalink }}">{{ .Title | .Page.RenderString }}</a></strong><br />
<span class="description">{{ .Description | .Page.RenderString }}</span></li>
{{- end -}}
</ul>
</div>
{{- end -}}Langkah 6: Membuat pengaturan Halaman Error 404
Halaman 404 (error page) itu tuh bisa muncul kalo pengunjung nyoba buka halaman yang nggak ada di situs. Nah, pas ada situasi kayak gitu, penting banget buat punya halaman 404 yang informatif dan bisa bantu pengunjung buat balik ke web. Nah, ini cara bikin halaman 404 yang kocak pake Hugo:
Pertama, bikin file 404.html di folder layouts. Di file ini, ente bisa tambahin informasi dan link yang bantu pengunjung web ente. Contohnya gini:
Buat file 404.html di dalam folder layouts. dapat menambahkan informasi dan tautan yang membantu pengunjung kembali ke situs web. Contoh kode untuk membuat halaman 404 sederhana:
{{ define "main" }}
<h1>Halaman Tidak Ditemukan</h1>
<p>Mohon maaf, halaman yang cari tidak ditemukan.</p>
<p>Silakan coba navigasi ke halaman lain di situs ini atau kembali ke halaman beranda.</p>
{{ end }}Terus, bikin file baseof.html di folder layouts/_default. File ini bakal jadi layout dasar buat semua halaman situs ente. Di sini, tambahin kondisional if buat ngecek kalo halaman yang dibuka itu halaman 404. Kalo iya, tampilin file 404.html yang udah dibikin sebelumnya. Contohnya gini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ .Title }}</title>
<meta name="description" content="{{ .Description }}">
<link rel="canonical" href="{{ .Permalink }}">
{{ template "_internal/google_analytics_async.html" . }}
</head>
<body>
{{ if eq .Title "Halaman Tidak Ditemukan" }}
{{ template "404" . }}
{{ else }}
{{ template "partials/header.html" . }}
{{ block "main" . }}{{ end }}
{{ template "partials/footer.html" . }}
{{ end }}
</body>
</html>Terakhir, bikin file sitemap.html di folder layouts. Di sini, tambahin link ke halaman 404 di bagian bawah sitemap. Contohnya gini:
{{ define "main" }}
<h1>Site Map</h1>
<ul>
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
<hr>
<p>Jika tidak dapat menemukan halaman yang cari, kunjungi halaman <a href="/404.html">404</a>.</p>
{{ end }}Dengan ngikutin langkah-langkah di atas, bisa bikin halaman 404 yang kocak dan bantu pengunjung balik ke situs ente.
Langkah 7: Web yang Responsif untuk SEO Hugo
Buat bikin situs Hugo responsif, bisa tambahin meta tag viewport di bagian head. Meta tag ini ngasih tahu browser kalo halaman web harus diatur ulang biar cocok sama lebar layar perangkat yang dipake.
Buat tambahin meta tag viewport di head, ente bisa edit file layouts/partials/head.html dan tambahin kode berikut:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta tag ini bakal bikin halaman web diatur ulang sesuai lebar layar perangkat secara otomatis, jadi kontennya keliatan lebih bagus di perangkat seluler.
Selain itu, ente juga bisa ngoptimasi performa situs Hugo biar lebih cepet dimuat di perangkat seluler. Beberapa cara yang bisa dilakuin antara lain:
- Pake gambar dengan ukuran lebih kecil dan format yang lebih efisien, kayak WebP atau JPEG 2000.
- Pake teknik lazy loading buat ngeload gambar dan video cuma pas dibutuhin aja.
- Kurangi jumlah permintaan HTTP dengan nggabungin dan ngeminimalkan file CSS dan JavaScript.
- Aktifin kompresi gzip buat ngurangi ukuran file yang dikirim dari server ke browser.
Langkah 8: Mengatur Social Tag dan Open Graph SEO Hugo
Buat tampilan yang tepat dan menarik pas situs ente dibagikan di platform media sosial kayak Facebook, Twitter, dan LinkedIn, perlu perhatiin tag sosial dan protokol Open Graph. Di Hugo, ente bisa tambahin tag sosial dan protokol Open Graph di front matter setiap halaman pake kode berikut:
# Tag sosial
twitter:
card: summary
site: @username
title: Judul Postingan
description: Deskripsi Postingan
image: /path/to/image.jpg
atau
[params]
Twitter_Image = "/path/to/image.jpg"
Twitter_Site = "@username"
Image = "/path/to/image.jpg"
# Protokol Open Graph
og:
title: Judul Postingan
description: Deskripsi Postingan
image: /path/to/image.jpg
url: https://www.example.com
type: Artikel or Website ( sesuaikan kebutuhan )
atau
featured_image: "/path/to/image.jpg"
author_twitter_handle: "@username" # if desired
og_type: "article"
#Tambahan pada Head / Config.toml
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="{{ site.Params.Twitter_Site }}" />
{{- if .IsHome -}}
<meta name="og:title" content="{{ site.Title }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="{{ site.Params.Description }}" />
<meta property="og:url" content="{{ site.BaseURL }}" />
<meta name="og:image" content="{{ site.Params.Image }}" />
<meta name="twitter:creator" content="{{ .site.Params.Twitter_Site }}" />
<meta name="twitter:title" content="{{ site.Title" />
{{- if isset site.Params.Twitter_Image -}}
<meta name="twitter:image" content="{{ site.Params.Twitter_Image" />
{{- else -}}
<meta name="twitter:image" content="{{ .site.Params.Image }}" />
{{- end -}}
{{- end -}}
{{- else -}}
<meta name="og:title" content="{{ Page.Title }}" />
{{- if isset .Params.og_type -}}
<meta property="og:type" content="{{ .Params.og_type }}" />
{{- else -}}
<meta property="og:type" content="website" />
{{- end -}}
<meta property="og:description" content="{{ .Params.Description }}" />
<meta property="og:url" content="{{ .Page.Permalink }}" />
{{- if isset .Params.Featured_image -}}
<meta name="og:image/" content="{{ .Params.Featured_image }}" />
<meta name="twitter:image" content="{{ .Params.Featured_image }}" />
{{- else -}}
<meta name="og:image" content="{{ .site.Params.Image }}" />
<meta name="twitter:image" content="{{ .site.Params.Image }}" />
{{- end -}}
{{- if isset .Params.Author_twitter_handle -}}
<meta name="twitter:creator" content="{{ .Params.Author_twitter_handle }}" />
{{- else -}}
<meta name="twitter:creator" content="{{ site.Params.Twitter_Site }}" />
{{- end -}}
<meta name="twitter:title" content="{{ .Page.Title }}" />
{{- end }}Pastikan nilai-nilai ini disesuaikan dengan konten sendiri dan tambahin tag sosial dan protokol Open Graph di front matter setiap halaman yang relevan. Ini bakal bantu meningkatkan visibilitas dan daya tarik postingan ente di platform media sosial.
Langkah 9: External Link SEO Hugo
Nah, sekarang ane mau ngebuat link eksternal di situs web Hugo lebih keren dan bikin ngegas. Pertama-tama, buka file layouts/_default/_markup/render-link.html. Nah, di sini bakal bikin kode biar link eksternal lebih keren.
Contohnya, musti punya link kayak gini:
<a href="/Produk/">Produk</a>.
Pertama, pastiin aja link eksternal selalu dimulai dengan https:// atau http://. Kalo nggak, tambahin protokol yang sesuai. Trus, tambahin atribut target=”_blank” biar linknya dibuka di jendela atau tab baru.
Selanjutnya, tambahin atribut rel=”nofollow noopener noreferrer”. Atribut nofollow bakal ngasih tahu mesin pencari buat nggak ngikutin link itu, noopener bakal mencegah link buka jendela baru buat akses data atau skrip dari halaman lama, dan noreferrer bakal mencegah halaman yang terhubung nyadar sumber lalu lintasnya.
Ini contoh kode buat bikin link eksternal yang keren di layouts/_default/_markup/render-link.html:
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="nofollow noopener noreferrer"{{ end }}>{{ .Text | safeHTML }}</a>Bisa juga pake contoh kode berikut:
{{- if not (strings.HasPrefix .Destination "mailto:") -}}
{{- $rel := cond (strings.HasPrefix .Destination "http") "nofollow noopener noreferrer" "" -}}
{{- $target := cond (strings.HasPrefix .Destination "http") "_blank" "" -}}
<a href="{{ .Destination }}" target="{{ $target }}" rel="{{ $rel }}">{{ .Text | safeHTML }}</a>
{{- else -}}
<a href="{{ .Destination }}">{{ .Text | safeHTML }}</a>
{{- end -}}Dengan mengoptimalkan link eksternal ini, situs web Hugo bakal lebih kece dan aman.
Langkah 10: Robots.txt SEO Hugo
Sekarang ane bakal bahas gimana cara make front matter dan konfigurasi file config.toml buat atur penggunaan file robots.txt di situs web pake Hugo.
Front Matter: Buat atur file robots.txt pake front matter, tambahin baris kode berikut di file yang mau ente atur:
#Config.toml enableRobotsTXT = true #Robot.txt User-agent: * atau User-agent: * Disallow: /admin/
Kode-kode itu bakal ngasih tahu mesin pencari kalo mereka boleh nyari dan ngeindex halaman sama tautan di dalamnya.
Tambahan dikit, kalo ente mau ngasih pengecualian buat beberapa halaman yang nggak mau diindex sama ccBot Google, bisa tambahin beberapa baris perintah di bagian head kayak gini:
Noindex: true (kalo ada kondisionalnya)
<meta name="robots" content="noindex"> <meta name="googlebot" content="noindex">
Nggak lupa, file robots.txt harus ditempatin di direktori utama situs web. Kalo belom ada file itu, ente bisa bikin pake teks editor dan simpen dengan nama “robots.txt” di direktori utama situs web.
Baca Juga: Cara Membuat Blog Hugo Static Site Generator
Tips Tambahan mengoptimalkan SEO Hugo
Setelah ngelakuin langkah-langkah teknis yang agak rumit tadi, selanjutnya ente perlu ngoptimalkan SEO Hugo pake tips-tips berikut biar hasilnya makin keren:
Memilih kata kunci yang tepat untuk SEO Hugo
Kata kunci itu penting banget buat SEO, jadi pilih kata kunci yang sesuai banget buat meningkatkan peringkat web Hugo ente di mesin pencari. Buat pilih kata kunci yang tepat, perlu ngelakuin riset kata kunci dan pilih kata kunci yang relevan sama topik.
Menulis konten berkualitas tinggi
Konten adalah raja di dunia SEO, jadi tulis konten yang kocak dan berkualitas, yang relevan dan informatif buat meningkatkan peringkat web Hugo. Pastiin konten ente juga memperhatiin SEO, kayak pake kata kunci yang tepat, struktur header yang jelas, dan internal linking yang bagus.
Mengukur dan melacak performa SEO Hugo
Penting banget buat ngukur dan lacak performa SEO Hugo ente biar tau strategi SEO efektif atau nggak. Pake alat analitik kayak Google Analytics buat ngukur metrik kayak lalu lintas, peringkat kata kunci, dan tingkat konversi.
Mengoptimalkan untuk pencarian lokal
Kalo Hugo ente fokus di daerah tertentu, pastiin buat ngoptimalkan buat pencarian lokal dengan nambahin informasi kayak alamat, nomor telepon, dan jam buka di situs ente. Jangan lupa verifikasi informasi di direktori Google My Business.
Memperbarui strategi SEO Hugo
SEO itu proses yang terus berubah, jadi strategi yang berhasil hari ini belum tentu berhasil besok. Jadi pastiin update terus strategi SEO dengan ngikutin tren terbaru dan beradaptasi sama perubahan algoritma mesin pencari.
Kesimpulan
Dengan menerapkan praktik terbaik SEO Hugo ente, bisa meningkatkan peringkat SEO dan eksposur. Pastiin ngoptimalkan langkah-langkah yang udah dijelasin di atas, dan bikin konten yang relevan dan gampang dibagikan sama pengguna.
Dengan menerapkan strategi SEO hugo yang efektif, bakal lebih terkenal di mesin pencari dan meningkatkan lalu lintas serta konversi. Jangan lupa perhatiin semua elemen penting SEO dan update serta optimalkan strategi ente biar hasilnya maksimal.
Selamat mencoba dan semoga sukses dengan SEO Hugo!
