Tutorial Membuat Blog Statis dengan Eleventy + SEO On-Page Otomatis
Jika kamu ingin membuat blog yang cepat, ringan, dan teroptimasi dengan baik untuk SEO, maka Eleventy (11ty) adalah pilihan yang tepat. Eleventy adalah generator situs statis yang sangat fleksibel dan efisien dalam membuat berbagai jenis website, termasuk blog pribadi, portofolio, dan dokumentasi. Salah satu fitur menarik dari Eleventy adalah kemampuannya untuk mengintegrasikan SEO On-Page secara otomatis.
Pada tutorial ini, kita akan membahas langkah demi langkah cara membuat blog statis dengan Eleventy, serta cara mengatur SEO On-Page otomatis untuk meningkatkan visibilitas di mesin pencari dan memberikan pengalaman pengguna yang lebih baik.
📚 Apa itu Eleventy?
Eleventy adalah static site generator (SSG) yang memudahkan kita dalam membuat situs web statis. SSG seperti Eleventy memungkinkan kita untuk menghasilkan situs web yang hanya terdiri dari HTML, CSS, dan JavaScript—tanpa kebutuhan untuk menjalankan server backend secara langsung. Eleventy mendukung berbagai template dan format data seperti Markdown, HTML, Nunjucks, dan banyak lagi, memberikan fleksibilitas tinggi dalam mengelola konten.
Salah satu alasan mengapa Eleventy sangat cocok untuk blog adalah kemampuannya untuk menghasilkan halaman statis yang sangat cepat. Dengan mengonversi konten menjadi file HTML, Eleventy memungkinkan pengunjung mengakses halaman blog dengan waktu muat yang sangat cepat, yang merupakan faktor penting untuk pengalaman pengguna yang baik dan SEO.
🚀 Langkah-langkah Membuat Blog Statis dengan Eleventy + SEO On-Page Otomatis
Sekarang, mari kita mulai dengan langkah-langkah praktis untuk membuat blog statis menggunakan Eleventy, serta menerapkan SEO On-Page yang efektif.
1. Persiapkan Lingkungan Pengembangan
Sebelum mulai membuat blog, pastikan kamu sudah menginstal Node.js dan npm di komputer kamu. Jika belum, kamu bisa mengunduhnya dari Node.js.
Setelah itu, buat folder baru untuk proyek Eleventy kamu dan buka terminal atau command prompt di dalam folder tersebut. Kemudian, jalankan perintah berikut untuk menginisialisasi proyek Eleventy:
mkdir my-eleventy-blog
cd my-eleventy-blog
npm init -y
npm install --save-dev @11ty/eleventy
Perintah di atas akan menginisialisasi proyek Node.js dan menginstal Eleventy sebagai dependensi pengembangan di proyekmu.
2. Membuat Struktur Folder dan Template Eleventy
Setelah menginstal Eleventy, kita akan membuat struktur folder untuk proyek blog kita. Berikut adalah struktur dasar folder yang perlu dibuat:
my-eleventy-blog/
│
├── src/
│ ├── index.md
│ ├── blog/
│ │ └── first-post.md
│ └── _includes/
│ └── header.njk
│ └── footer.njk
└── .eleventy.js
-
src/index.md: Halaman beranda blog.
-
src/blog/first-post.md: Postingan pertama di blog.
-
src/_includes/: Folder untuk template partials, seperti header dan footer.
-
.eleventy.js: Konfigurasi Eleventy.
Contoh isi file index.md:
---
layout: default
title: "Selamat datang di Blog Saya"
---
# Selamat datang di blog saya!
Ini adalah blog pertama saya menggunakan Eleventy.
Contoh isi file first-post.md:
---
layout: post
title: "Post Pertama"
date: 2025-04-27
tags: [tutorial, eleventy]
---
# Ini adalah Postingan Pertama
Selamat datang di tutorial saya yang pertama di blog Eleventy ini.
3. Menambahkan Template Layout untuk SEO
Setelah menyiapkan konten, kita perlu menambahkan template yang akan digunakan di seluruh halaman blog, baik itu halaman utama maupun postingan individu. Template ini akan memastikan SEO On-Page diatur secara otomatis di setiap halaman.
Membuat file header.njk di folder _includes/:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title | default('Blog Eleventy') }}</title>
<meta name="description" content="{{ description | default('Blog tentang tutorial Eleventy dan SEO') }}">
<meta property="og:type" content="website">
<meta property="og:title" content="{{ title | default('Blog Eleventy') }}">
<meta property="og:description" content="{{ description | default('Blog tentang tutorial Eleventy dan SEO') }}">
<meta property="og:url" content="{{ page.url }}">
<meta property="og:image" content="/path/to/your/image.jpg">
<link rel="stylesheet" href="/styles.css">
</head>
Dalam template header.njk di atas, kita menetapkan beberapa elemen penting untuk SEO, seperti:
-
Title Tag: Menyediakan nama halaman yang akan muncul di hasil pencarian.
-
Meta Description: Memberikan deskripsi singkat tentang halaman untuk hasil pencarian.
-
OG Tags (Open Graph): Memastikan konten kita tampil dengan benar di media sosial.
Membuat file footer.njk di folder _includes/:
<footer>
<p>© 2025 Blog Eleventy. Semua hak dilindungi.</p>
</footer>
4. Membuat Layout untuk Halaman Blog
Sekarang mari kita buat layout untuk halaman utama dan halaman postingan blog. Layout ini akan digunakan oleh Eleventy untuk menghasilkan halaman-halaman HTML.
Membuat file default.njk di folder _includes/:
<!DOCTYPE html>
<html lang="id">
{{> header }}
<body>
<header>
<h1><a href="/">Blog Saya</a></h1>
</header>
<main>
{{ content }}
</main>
{{> footer }}
</body>
</html>
Membuat file post.njk di folder _includes/:
<!DOCTYPE html>
<html lang="id">
{{> header }}
<body>
<header>
<h1><a href="/">Blog Saya</a></h1>
</header>
<main>
<article>
<h2>{{ title }}</h2>
<p><strong>{{ date }}</strong></p>
{{ content }}
</article>
</main>
{{> footer }}
</body>
</html>
5. Mengaktifkan SEO On-Page Otomatis
Dengan Eleventy, kita dapat dengan mudah mengaktifkan SEO On-Page di seluruh halaman website. Eleventy memungkinkan kita untuk menggunakan variabel untuk setiap halaman dan mengatur informasi SEO, seperti title, description, dan tags.
Dengan template dan metadata yang telah disiapkan, setiap halaman akan secara otomatis mendapatkan metadata yang relevan. Halaman utama dan postingan akan mendapatkan title dan deskripsi yang sesuai, serta properti Open Graph untuk berbagi di media sosial.
6. Mengonfigurasi Eleventy untuk Menjalankan Proyek
Selanjutnya, kita akan membuat file konfigurasi Eleventy bernama .eleventy.js untuk menyesuaikan beberapa pengaturan penting, seperti direktori input dan output.
module.exports = function(eleventyConfig) {
// Tentukan direktori input dan output
eleventyConfig.addPassthroughCopy("src/styles.css");
return {
dir: {
input: "src",
output: "_site"
}
};
};
Dengan konfigurasi ini, Eleventy akan membaca folder src untuk konten dan menghasilkan situs statis di folder _site.
7. Menjalankan Eleventy untuk Membuat Blog
Setelah selesai mengatur proyek, jalankan Eleventy untuk menghasilkan situs statis dan melihat hasilnya di browser:
npx eleventy --serve
Situs blog kamu sekarang dapat diakses di http://localhost:8080.
🎉 Kesimpulan
Dengan Eleventy, kamu dapat membuat blog statis yang cepat dan teroptimasi untuk SEO. Dalam tutorial ini, kita telah membahas cara menyiapkan Eleventy, membuat konten, mengonfigurasi template untuk SEO, dan menjalankan situs. Eleventy adalah alat yang sangat kuat dan fleksibel untuk membangun blog dan situs web statis lainnya dengan optimasi SEO otomatis.
Posting Komentar