Kiki/🎮🍉⌨️🍩💻
Blog statis Jekyll tidak punya fitur komentar bawaan — karena memang tidak ada database. Tapi bukan berarti blog Jekyll tidak bisa punya kolom komentar. Solusi paling populer adalah menggunakan Disqus, layanan komentar pihak ketiga yang bisa diintegrasikan ke situs statis mana pun hanya dengan beberapa baris kode JavaScript.
Apa itu Disqus?
Disqus adalah platform komentar berbasis cloud yang sudah digunakan oleh jutaan situs web di seluruh dunia. Disqus menangani semua urusan penyimpanan komentar, moderasi, notifikasi email, dan spam filtering — kamu hanya perlu menyematkan widget-nya.
Kelebihan Disqus
- Setup sangat mudah, hanya butuh shortname
- Fitur moderasi komentar yang lengkap
- Notifikasi email untuk penulis dan pembaca
- Fitur SSO dan login via Google, Facebook, Twitter
- Tersedia di plan gratis
Kekurangan Disqus
- Menambahkan JavaScript pihak ketiga → sedikit memperlambat halaman
- Plan gratis menampilkan iklan di kolom komentar
- Privasi: data komentar tersimpan di server Disqus
Langkah 1: Daftar dan Buat Site di Disqus
- Buka disqus.com dan daftar akun
- Setelah login, klik Get Started
- Pilih I want to install Disqus on my site
- Isi Website Name — ini akan menjadi shortname Disqus kamu (misalnya:
nama-blog) - Pilih kategori dan bahasa
- Pilih plan Basic (gratis) atau pilih plan berbayar jika ingin tanpa iklan
- Di halaman “Select Platform”, pilih Universal Code
Catat shortname Disqus kamu — ini yang akan dipakai di konfigurasi Jekyll.
Langkah 2: Tambahkan Shortname ke _config.yml
Buka _config.yml dan tambahkan konfigurasi Disqus:
disqus: nama-shortname-kamu
Ganti nama-shortname-kamu dengan shortname Disqus yang sudah kamu buat.
Langkah 3: Buat File Include Komentar
Buat file _includes/comments.html dengan kode berikut:
<section id="comments">
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = "https://blog.kiki.my.id/cara-menambahkan-komentar-disqus-di-jekyll/";
this.page.identifier = "/cara-menambahkan-komentar-disqus-di-jekyll/";
this.page.title = "Cara Menambahkan Komentar Disqus di Blog Jekyll";
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://mnfi.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>
Aktifkan JavaScript untuk melihat komentar
<a href="https://disqus.com/?ref_noscript">powered by Disqus.</a>
</noscript>
</section>
Langkah 4: Sisipkan Komentar di Layout Post
Buka file _layouts/post.html dan tambahkan include komentar di akhir konten artikel:
<article>
<h1>Cara Menambahkan Komentar Disqus di Blog Jekyll</h1>
<div class="post-content">
<div class="container">
<div class="jumbotron jumbotron-fluid mb-3 pl-0 pt-0 pb-0 bg-white position-relative">
<div class="h-100 tofront">
<div class="row justify-content-between ">
<div
class=" col-md-6 pr-0 pr-md-4 pt-4 pb-4 align-self-center">
<p class="text-uppercase font-weight-bold">
<span class="catlist">
<a class="sscroll text-danger"
href="/categories.html#tutorial">tutorial</a><span class="sep">, </span>
<a class="sscroll text-danger"
href="/categories.html#seo">seo</a><span class="sep">, </span>
</span>
</p>
<h1 class="display-4 mb-4 article-headline">SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026</h1>
<div class="d-flex align-items-center">
<img class="rounded-circle" src="https://kiki.my.id/assets/images/hero2-clean.jpg" alt="Kiki/🎮🍉⌨️🍩💻" width="70" />
<small class="ml-3"> Kiki/🎮🍉⌨️🍩💻
<span class="text-muted d-block mt-1">Aug 07, 2026 · <span class="reading-time">
9 mins read
</span>
</span>
</small>
</div>
</div>
<div class="col-md-6 pr-0 align-self-center">
<img class="rounded"
src="/assets/images/main/jekyll.png"
alt="SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026">
</div>
</div>
</div>
</div>
</div>
<div class="container-lg pt-4 pb-4">
<div class="row justify-content-center">
<!-- Share -->
<div class="col-lg-2 pr-4 mb-4 col-md-12">
<div class="sticky-top sticky-top-offset text-center">
<div class="text-muted">
Share this
</div>
<div class="share d-inline-block">
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
</div>
</div>
</div>
<div class="col-md-12 col-lg-8">
<!-- Article -->
<article class="article-post">
<p>Punya blog Jekyll yang cepat dan kontennya bagus saja tidak cukup kalau artikel-artikelnya tidak ditemukan di mesin pencari. <strong>SEO On-Page</strong> adalah kumpulan praktik optimasi yang dilakukan langsung di halaman web — mulai dari struktur judul, meta description, hingga internal linking — untuk membantu Google memahami dan meranking konten kamu lebih baik.</p>
<p>Di artikel ini kita bahas praktik SEO on-page yang paling berdampak, khusus untuk blog Jekyll.</p>
<hr />
<h2 id="1-plugin-jekyll-seo-tag--fondasi-seo-di-jekyll">1. Plugin jekyll-seo-tag — Fondasi SEO di Jekyll</h2>
<p>Langkah pertama adalah memastikan kamu menggunakan plugin <strong><code class="language-plaintext highlighter-rouge">jekyll-seo-tag</code></strong>. Plugin ini secara otomatis menghasilkan semua meta tag SEO penting: title, description, Open Graph, Twitter Card, dan structured data.</p>
<h3 id="instalasi">Instalasi</h3>
<p>Tambahkan ke <code class="language-plaintext highlighter-rouge">Gemfile</code>:</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">gem</span> <span class="s2">"jekyll-seo-tag"</span>
</code></pre></div></div>
<p>Tambahkan ke <code class="language-plaintext highlighter-rouge">_config.yml</code>:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">plugins</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll-seo-tag</span>
</code></pre></div></div>
<p>Tambahkan tag di dalam <code class="language-plaintext highlighter-rouge"><head></code> layout utama (<code class="language-plaintext highlighter-rouge">_layouts/default.html</code>):</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><head></span>
...
<span class="c"><!-- Begin Jekyll SEO tag v2.9.0 --></span>
<span class="nt"><title></span>SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026 | Miftakhuddin’s Blog<span class="nt"></title></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"generator"</span> <span class="na">content=</span><span class="s">"Jekyll v4.4.1"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:title"</span> <span class="na">content=</span><span class="s">"SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"author"</span> <span class="na">content=</span><span class="s">"kiki"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:locale"</span> <span class="na">content=</span><span class="s">"en_US"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"description"</span> <span class="na">content=</span><span class="s">"Punya blog Jekyll yang cepat dan kontennya bagus saja tidak cukup kalau artikel-artikelnya tidak ditemukan di mesin pencari. SEO On-Page adalah kumpulan praktik optimasi yang dilakukan langsung di halaman web — mulai dari struktur judul, meta description, hingga internal linking — untuk membantu Google memahami dan meranking konten kamu lebih baik."</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:description"</span> <span class="na">property=</span><span class="s">"og:description"</span> <span class="na">content=</span><span class="s">"Punya blog Jekyll yang cepat dan kontennya bagus saja tidak cukup kalau artikel-artikelnya tidak ditemukan di mesin pencari. SEO On-Page adalah kumpulan praktik optimasi yang dilakukan langsung di halaman web — mulai dari struktur judul, meta description, hingga internal linking — untuk membantu Google memahami dan meranking konten kamu lebih baik."</span> <span class="nt">/></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"canonical"</span> <span class="na">href=</span><span class="s">"https://blog.kiki.my.id/seo-on-page-untuk-blog-jekyll/"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:url"</span> <span class="na">content=</span><span class="s">"https://blog.kiki.my.id/seo-on-page-untuk-blog-jekyll/"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:site_name"</span> <span class="na">content=</span><span class="s">"Miftakhuddin’s Blog"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:image"</span> <span class="na">content=</span><span class="s">"https://blog.kiki.my.id/assets/images/main/jekyll.png"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"og:type"</span> <span class="na">content=</span><span class="s">"article"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:published_time"</span> <span class="na">content=</span><span class="s">"2026-08-07T00:00:00+00:00"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">property=</span><span class="s">"article:modified_time"</span> <span class="na">content=</span><span class="s">"2026-08-07T00:00:00+00:00"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:card"</span> <span class="na">content=</span><span class="s">"summary_large_image"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:image"</span> <span class="na">content=</span><span class="s">"https://blog.kiki.my.id/assets/images/main/jekyll.png"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:title"</span> <span class="na">content=</span><span class="s">"SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:site"</span> <span class="na">content=</span><span class="s">"@kikukeii_"</span> <span class="nt">/></span>
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"twitter:creator"</span> <span class="na">content=</span><span class="s">"@kiki"</span> <span class="nt">/></span>
<span class="nt"><script </span><span class="na">type=</span><span class="s">"application/ld+json"</span><span class="nt">></span>
<span class="p">{</span><span class="dl">"</span><span class="s2">@context</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">https://schema.org</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">@type</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">BlogPosting</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">author</span><span class="dl">"</span><span class="p">:{</span><span class="dl">"</span><span class="s2">@type</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">Person</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">kiki</span><span class="dl">"</span><span class="p">},</span><span class="dl">"</span><span class="s2">dateModified</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">2026-08-07T00:00:00+00:00</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">datePublished</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">2026-08-07T00:00:00+00:00</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">description</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">Punya blog Jekyll yang cepat dan kontennya bagus saja tidak cukup kalau artikel-artikelnya tidak ditemukan di mesin pencari. SEO On-Page adalah kumpulan praktik optimasi yang dilakukan langsung di halaman web — mulai dari struktur judul, meta description, hingga internal linking — untuk membantu Google memahami dan meranking konten kamu lebih baik.</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">headline</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">SEO On-Page untuk Blog Jekyll: Panduan Lengkap 2026</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">image</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">https://blog.kiki.my.id/assets/images/main/jekyll.png</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">mainEntityOfPage</span><span class="dl">"</span><span class="p">:{</span><span class="dl">"</span><span class="s2">@type</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">WebPage</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">@id</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">https://blog.kiki.my.id/seo-on-page-untuk-blog-jekyll/</span><span class="dl">"</span><span class="p">},</span><span class="dl">"</span><span class="s2">publisher</span><span class="dl">"</span><span class="p">:{</span><span class="dl">"</span><span class="s2">@type</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">Organization</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">logo</span><span class="dl">"</span><span class="p">:{</span><span class="dl">"</span><span class="s2">@type</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">ImageObject</span><span class="dl">"</span><span class="p">,</span><span class="dl">"</span><span class="s2">url</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">https://blog.kiki.my.id/assets/images/logo.png</span><span class="dl">"</span><span class="p">},</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">kiki</span><span class="dl">"</span><span class="p">},</span><span class="dl">"</span><span class="s2">url</span><span class="dl">"</span><span class="p">:</span><span class="dl">"</span><span class="s2">https://blog.kiki.my.id/seo-on-page-untuk-blog-jekyll/</span><span class="dl">"</span><span class="p">}</span><span class="nt"></script></span>
<span class="c"><!-- End Jekyll SEO tag --></span>
...
<span class="nt"></head></span>
</code></pre></div></div>
<h3 id="konfigurasi-di-_configyml">Konfigurasi di <code class="language-plaintext highlighter-rouge">_config.yml</code></h3>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Nama</span><span class="nv"> </span><span class="s">Blog</span><span class="nv"> </span><span class="s">Kamu"</span>
<span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Deskripsi</span><span class="nv"> </span><span class="s">singkat</span><span class="nv"> </span><span class="s">blog</span><span class="nv"> </span><span class="s">yang</span><span class="nv"> </span><span class="s">menarik</span><span class="nv"> </span><span class="s">dan</span><span class="nv"> </span><span class="s">informatif."</span>
<span class="na">url</span><span class="pi">:</span> <span class="s2">"</span><span class="s">https://blog.namakamu.com"</span>
<span class="na">author</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Nama</span><span class="nv"> </span><span class="s">Kamu"</span>
<span class="na">twitter</span><span class="pi">:</span> <span class="s2">"</span><span class="s">@username"</span>
<span class="na">twitter</span><span class="pi">:</span>
<span class="na">username</span><span class="pi">:</span> <span class="s">username</span>
<span class="na">card</span><span class="pi">:</span> <span class="s">summary_large_image</span>
<span class="na">social</span><span class="pi">:</span>
<span class="na">name</span><span class="pi">:</span> <span class="s">Nama Kamu</span>
<span class="na">links</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">https://twitter.com/username</span>
<span class="pi">-</span> <span class="s">https://github.com/username</span>
</code></pre></div></div>
<hr />
<h2 id="2-judul-artikel-yang-optimal">2. Judul Artikel yang Optimal</h2>
<p>Judul adalah elemen SEO paling penting. Google menampilkan judul di hasil pencarian, dan pengguna memutuskan untuk klik atau tidak berdasarkan judul.</p>
<h3 id="panduan-menulis-judul-yang-baik">Panduan Menulis Judul yang Baik</h3>
<ul>
<li><strong>Panjang ideal: 50–60 karakter</strong> — lebih dari itu akan terpotong di SERP</li>
<li><strong>Sertakan keyword utama</strong> di bagian awal judul</li>
<li><strong>Buat menarik dan informatif</strong> — hindari judul clickbait yang tidak mencerminkan isi</li>
<li><strong>Unik</strong> — setiap artikel harus punya judul yang berbeda</li>
</ul>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Kurang optimal</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Tutorial</span><span class="nv"> </span><span class="s">Jekyll"</span>
<span class="c1"># Lebih baik</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Cara</span><span class="nv"> </span><span class="s">Install</span><span class="nv"> </span><span class="s">Jekyll</span><span class="nv"> </span><span class="s">di</span><span class="nv"> </span><span class="s">Windows</span><span class="nv"> </span><span class="s">dengan</span><span class="nv"> </span><span class="s">FlyEnv</span><span class="nv"> </span><span class="s">—</span><span class="nv"> </span><span class="s">Panduan</span><span class="nv"> </span><span class="s">2026"</span>
</code></pre></div></div>
<hr />
<h2 id="3-meta-description-yang-mengundang-klik">3. Meta Description yang Mengundang Klik</h2>
<p>Meta description tidak langsung mempengaruhi ranking, tapi sangat mempengaruhi <strong>CTR (Click-Through Rate)</strong> — persentase orang yang klik hasil pencarian kamu.</p>
<p>Tambahkan <code class="language-plaintext highlighter-rouge">description</code> di front matter setiap artikel:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Judul</span><span class="nv"> </span><span class="s">Artikel"</span>
<span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Panduan</span><span class="nv"> </span><span class="s">lengkap</span><span class="nv"> </span><span class="s">cara</span><span class="nv"> </span><span class="s">mengoptimasi</span><span class="nv"> </span><span class="s">gambar</span><span class="nv"> </span><span class="s">untuk</span><span class="nv"> </span><span class="s">blog</span><span class="nv"> </span><span class="s">Jekyll</span><span class="nv"> </span><span class="s">agar</span><span class="nv"> </span><span class="s">loading</span><span class="nv"> </span><span class="s">lebih</span><span class="nv"> </span><span class="s">cepat</span><span class="nv"> </span><span class="s">dan</span><span class="nv"> </span><span class="s">skor</span><span class="nv"> </span><span class="s">PageSpeed</span><span class="nv"> </span><span class="s">meningkat."</span>
<span class="nn">---</span>
</code></pre></div></div>
<h3 id="tips-meta-description">Tips Meta Description</h3>
<ul>
<li><strong>Panjang ideal: 120–160 karakter</strong></li>
<li>Sertakan keyword utama secara natural</li>
<li>Tulis seperti iklan singkat — jelaskan manfaat membaca artikel ini</li>
<li>Gunakan kalimat aktif</li>
</ul>
<hr />
<h2 id="4-struktur-heading-yang-benar-h1-h2-h3">4. Struktur Heading yang Benar (H1, H2, H3)</h2>
<p>Heading membantu Google memahami struktur dan hierarki konten artikel.</p>
<ul>
<li><strong>H1</strong> — hanya satu per halaman, biasanya judul artikel (dihandle otomatis oleh Jekyll dari <code class="language-plaintext highlighter-rouge">page.title</code>)</li>
<li><strong>H2</strong> — sub-topik utama, keyword sekunder bisa dimasukkan di sini</li>
<li><strong>H3</strong> — sub-topik dari H2, penjelasan lebih detail</li>
</ul>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gh"># Judul Artikel (H1 — sudah otomatis dari Jekyll)</span>
<span class="gu">## Sub-topik Utama (H2)</span>
<span class="gu">### Detail dari Sub-topik (H3)</span>
</code></pre></div></div>
<p>Jangan skip level heading — jangan langsung dari H1 ke H3 tanpa H2.</p>
<hr />
<h2 id="5-url-yang-seo-friendly">5. URL yang SEO Friendly</h2>
<p>Jekyll secara default membuat URL dari nama file post. Pastikan nama file (dan otomatis permalink-nya) sudah SEO friendly:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Kurang baik
2026-08-07-post-1.md → /post-1/
# Lebih baik
2026-08-07-seo-on-page-untuk-blog-jekyll.md → /seo-on-page-untuk-blog-jekyll/
</code></pre></div></div>
<p>Di <code class="language-plaintext highlighter-rouge">_config.yml</code>, pastikan permalink menggunakan format tanpa tanggal:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="na">permalink</span><span class="pi">:</span> <span class="s">/:title/</span>
</code></pre></div></div>
<p>Ciri URL yang baik:</p>
<ul>
<li>Mengandung keyword utama</li>
<li>Pendek dan deskriptif</li>
<li>Menggunakan tanda hubung (<code class="language-plaintext highlighter-rouge">-</code>) bukan underscore (<code class="language-plaintext highlighter-rouge">_</code>)</li>
<li>Huruf kecil semua</li>
<li>Tanpa kata-kata tidak penting (a, dan, yang, di, ke)</li>
</ul>
<hr />
<h2 id="6-gambar-dengan-alt-text-yang-deskriptif">6. Gambar dengan Alt Text yang Deskriptif</h2>
<p>Setiap gambar harus punya atribut <code class="language-plaintext highlighter-rouge">alt</code> yang deskriptif. Alt text membantu:</p>
<ul>
<li>Google Image Search mengindeks gambar kamu</li>
<li>Aksesibilitas untuk pengguna dengan screen reader</li>
<li>Tampil sebagai teks pengganti ketika gambar gagal dimuat</li>
</ul>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">![</span><span class="nv">Tampilan dashboard Cloudflare Analytics menampilkan lonjakan traffic bot</span><span class="p">](</span>
<span class="sx">/assets/images/traffic/traffic1.png</span><span class="p">)</span>
</code></pre></div></div>
<p>Hindari alt text generik seperti <code class="language-plaintext highlighter-rouge">image1.png</code> atau hanya <code class="language-plaintext highlighter-rouge">gambar</code>.</p>
<hr />
<h2 id="7-internal-linking">7. Internal Linking</h2>
<p>Internal link adalah tautan dari satu artikel ke artikel lain di blog yang sama. Ini membantu Google menelusuri semua konten blog kamu dan memahami topik mana yang paling penting.</p>
<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Kamu bisa baca panduan lengkapnya di artikel
<span class="p">[</span><span class="nv">Cara Deploy Jekyll ke GitHub Pages</span><span class="p">](</span><span class="sx">/cara-deploy-jekyll-ke-github-pages/</span><span class="p">)</span>.
</code></pre></div></div>
<p>Tips internal linking:</p>
<ul>
<li>Gunakan anchor text yang deskriptif (bukan “klik di sini”)</li>
<li>Link ke artikel yang relevan secara topik</li>
<li>Pastikan tidak ada halaman yang “orphan” (tidak ada yang link ke sana)</li>
<li>2–5 internal link per artikel sudah cukup</li>
</ul>
<hr />
<h2 id="8-open-graph-untuk-tampilan-berbagi-di-media-sosial">8. Open Graph untuk Tampilan Berbagi di Media Sosial</h2>
<p>Open Graph menentukan tampilan preview saat artikel kamu dibagikan di Facebook, Twitter, LinkedIn, WhatsApp, dll.</p>
<p>Dengan <code class="language-plaintext highlighter-rouge">jekyll-seo-tag</code>, tag OG sudah dihasilkan otomatis. Tapi kamu perlu menambahkan <strong>gambar OG</strong> di front matter:</p>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
<span class="na">title</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Judul</span><span class="nv"> </span><span class="s">Artikel"</span>
<span class="na">description</span><span class="pi">:</span> <span class="s2">"</span><span class="s">Deskripsi</span><span class="nv"> </span><span class="s">artikel..."</span>
<span class="na">image</span><span class="pi">:</span> <span class="s">/assets/images/thumbnail-artikel.jpg</span>
<span class="nn">---</span>
</code></pre></div></div>
<p>Ukuran gambar OG yang ideal: <strong>1200×630 piksel</strong>.</p>
<hr />
<h2 id="9-kecepatan-halaman--faktor-ranking-langsung">9. Kecepatan Halaman — Faktor Ranking Langsung</h2>
<p>Google secara resmi menggunakan <strong>Core Web Vitals</strong> sebagai faktor ranking. Blog Jekyll secara inheren sudah cepat karena statis, tapi tetap perlu diperhatikan:</p>
<ul>
<li>Optimalkan gambar (format WebP, kompresi, lazy loading)</li>
<li>Minifikasi CSS dan JS</li>
<li>Gunakan CDN (Cloudflare Pages sudah include CDN otomatis)</li>
<li>Hindari render-blocking resources</li>
</ul>
<p>Cek skor di <a href="https://pagespeed.web.dev/">PageSpeed Insights</a>.</p>
<hr />
<h2 id="10-sitemap-dan-robotstxt">10. Sitemap dan Robots.txt</h2>
<p>Pastikan sitemap tergenerate otomatis menggunakan plugin <code class="language-plaintext highlighter-rouge">jekyll-sitemap</code>:</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Gemfile</span>
<span class="n">gem</span> <span class="s2">"jekyll-sitemap"</span>
</code></pre></div></div>
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># _config.yml</span>
<span class="na">plugins</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">jekyll-sitemap</span>
</code></pre></div></div>
<p>Plugin ini akan menghasilkan <code class="language-plaintext highlighter-rouge">/sitemap.xml</code> secara otomatis.</p>
<p>Submit sitemap ke <strong>Google Search Console</strong> agar artikel-artikel baru cepat diindeks:</p>
<ol>
<li>Buka <a href="https://search.google.com/search-console">search.google.com/search-console</a></li>
<li>Tambahkan property domain kamu</li>
<li>Klik <strong>Sitemaps</strong> → submit URL sitemap</li>
</ol>
<hr />
<h2 id="kesimpulan">Kesimpulan</h2>
<p>SEO on-page untuk blog Jekyll tidak harus rumit. Dengan plugin <code class="language-plaintext highlighter-rouge">jekyll-seo-tag</code> sebagai fondasi, penulisan judul dan deskripsi yang tepat, struktur heading yang benar, dan perhatian pada kecepatan halaman — blog kamu sudah punya pondasi SEO yang kuat.</p>
<p>Konsistensi jauh lebih penting dari kesempurnaan teknis. Artikel yang ditulis secara rutin dengan praktik SEO dasar yang benar akan memberikan hasil yang jauh lebih baik dari satu artikel sempurna yang ditulis setahun sekali.</p>
</article>
<!-- Tags -->
<div class="mb-4">
<span class="taglist">
<a class="sscroll btn btn-light btn-sm font-weight-bold"
href="/tags.html#featured">featured</a>
<a class="sscroll btn btn-light btn-sm font-weight-bold"
href="/tags.html#jekyll">jekyll</a>
<a class="sscroll btn btn-light btn-sm font-weight-bold"
href="/tags.html#ruby">ruby</a>
<a class="sscroll btn btn-light btn-sm font-weight-bold"
href="/tags.html#static-site">static-site</a>
</span>
</div>
<!-- Mailchimp Subscribe Form -->
<!-- Author Box -->
<div class="row mt-5">
<div class="col-md-2 align-self-center">
<img class="rounded-circle" src="https://kiki.my.id/assets/images/hero2-clean.jpg" alt="Kiki/🎮🍉⌨️🍩💻" width="90" />
</div>
<div class="col-md-10">
<h5 class="font-weight-bold">Written by Kiki/🎮🍉⌨️🍩💻 </h5>
hello I'm friend K.
</div>
</div>
<!-- Comments -->
<!-- Don't edit anything here. Set your disqus id in _config.yml -->
<div id="comments" class="mt-5">
<div id="disqus_thread">
</div>
<script type="text/javascript">
var disqus_shortname = 'mnfi';
var disqus_developer = 0;
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = window.location.protocol + '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</div>
</div>
</div>
</div>
<!-- Aletbar Prev/Next -->
<div class="alertbar">
<div class="container">
<div class="row prevnextlinks small font-weight-bold">
<div class="col-md-6 rightborder pl-0">
<a class="text-dark" href="/cara-membuat-halaman-kategori-di-jekyll/"> <img
height="30px" class="mr-1"
src="/assets/images/main/jekyll.png">
Cara Membuat Halaman Kategori di Jekyll Tanpa Plugin</a>
</div>
<div class="col-md-6 text-right pr-0">
<a class="text-dark" href="/cara-menambahkan-komentar-disqus-di-jekyll/"> Cara Menambahkan Komentar Disqus di Blog Jekyll <img height="30px" class="ml-1"
src="/assets/images/main/jekyll.png">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Komentar Disqus -->
<!-- Don't edit anything here. Set your disqus id in _config.yml -->
<div id="comments" class="mt-5">
<div id="disqus_thread">
</div>
<script type="text/javascript">
var disqus_shortname = 'mnfi';
var disqus_developer = 0;
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = window.location.protocol + '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>
Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
</div>
</article>
Langkah 5: Kontrol Komentar per Artikel
Kamu bisa menonaktifkan komentar untuk artikel tertentu melalui front matter:
---
title: "Judul Artikel"
comments: false
---
Dan mengaktifkannya secara default di semua post lewat _config.yml:
defaults:
- scope:
path: "_posts"
values:
comments: true
Menampilkan Jumlah Komentar
Disqus juga menyediakan JavaScript untuk menampilkan jumlah komentar di daftar artikel. Tambahkan ini sebelum tag </body>:
<script id="dsq-count-scr" src="//mnfi.disqus.com/count.js" async></script>
Lalu di setiap link artikel, tambahkan #disqus_thread sebagai fragment:
<a href="#disqus_thread">
Komentar
</a>
Disqus akan otomatis mengganti teks “Komentar” dengan jumlah komentar yang sebenarnya.
Alternatif Disqus
Jika kamu tidak ingin menggunakan Disqus karena alasan privasi atau iklan, ada beberapa alternatif yang bisa dipertimbangkan:
| Platform | Deskripsi | Harga |
|---|---|---|
| Giscus | Berbasis GitHub Discussions, open source, tanpa iklan | Gratis |
| Utterances | Berbasis GitHub Issues, ringan, developer-friendly | Gratis |
| Commento | Self-hosted atau cloud, privacy-focused | Gratis/Berbayar |
| Cusdis | Open source, ringan, bisa self-hosted | Gratis/Berbayar |
Giscus — Rekomendasi untuk Developer
Giscus adalah pilihan terbaik jika pembaca blog kamu mayoritas developer yang punya akun GitHub. Setup-nya mirip Disqus tapi komentar tersimpan di GitHub Discussions repositori kamu — tidak ada data yang dikirim ke pihak ketiga.
Konfigurasi di giscus.app dan dapatkan script embed yang tinggal ditempel.
Troubleshooting
Widget Disqus tidak muncul:
- Pastikan
site.disqussudah diisi di_config.yml - Cek di browser bahwa tidak ada adblocker yang memblokir Disqus
- Disqus tidak berfungsi di
localhost— harus di domain yang sudah diregistrasi ke Disqus
Komentar berbeda di tiap halaman padahal artikel sama:
Pastikan page.url konsisten dan sudah menggunakan absolute_url. Ini terjadi jika kamu pernah mengakses artikel dengan URL berbeda (dengan/tanpa trailing slash).
Kesimpulan
Menambahkan Disqus ke blog Jekyll sangat mudah — cukup daftar, dapatkan shortname, tambahkan satu baris di _config.yml, dan buat file include. Dalam 10 menit kolom komentar sudah aktif di semua artikel.
Jika kamu lebih peduli pada privasi dan developer-friendly experience, pertimbangkan Giscus sebagai alternatif yang lebih modern.