SEO (Search Engine Optimization) adalah fitur core di Sitemas. Kami menggunakan pendekatan “Configuration over Code”, artinya Anda cukup atur config global, dan semua halaman akan otomatis teroptimasi.
v3.0.0 Astro 5.0+Ikhtisar
Fitur SEO di Sitemas menangani 3 hal utama secara otomatis:
- Meta Tags Dasar:
title,description,canonical URL. - Open Graph & Twitter Cards: Tampilan preview saat link dishare di sosmed.
- Sitemap & RSS: Generate otomatis
sitemap-index.xmldanrss.xml.
Pastikan Anda sudah mengubah site di astro.config.mjs ke domain produksi Anda. Sitemap tidak akan valid jika masih menggunakan localhost.
Konfigurasi Global
File konfigurasi utama terletak di src/consts.ts. Ini akan menjadi fallback jika halaman tertentu tidak memiliki metadata spesifik.
- src
- consts.ts
- components
- BaseHead.astro
-
-
- astro.config.mjs
Edit src/consts.ts
// Judul Website Default
export const SITE_TITLE = 'Sitemas';
// Deskripsi Website Default (Max 160 char)
export const SITE_DESCRIPTION = 'Tutorial coding, gadget review, dan tips produktivitas.';
// Social Media Handle (untuk Twitter Card)
export const TWITTER_HANDLE = '@sitemas';Penggunaan di Halaman (Page Level)
Untuk halaman statis .astro, gunakan komponen <BaseHead /> di dalam <head>.
---
import BaseHead from '@/components/BaseHead.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts';
---
<!doctype html>
<html lang="id">
<head>
<BaseHead
title={`Tentang Kami - ${SITE_TITLE}`}
description="Pelajari visi dan misi Sitemas."
/>
</head>
<body>
...
</body>
</html>API Reference: BaseHead Props
Komponen BaseHead menerima props berikut untuk kustomisasi per halaman:
| Prop | Type | Default | Required | Deskripsi |
|---|---|---|---|---|
title | string | SITE_TITLE | ✅ | Judul tab browser (masuk ke <title> dan og:title) |
description | string | SITE_DESCRIPTION | ✅ | Deskripsi meta (masuk ke og:description) |
image | string | /og-placeholder.jpg | ❌ | URL gambar untuk preview sosmed (Open Graph) |
articleDate | Date | - | ❌ | Tanggal publish (khusus artikel blog) |
Fitur Auto-Generated
Robots.txt & Sitemap
Tidak perlu plugin tambahan. Astro Integrasi @astrojs/sitemap sudah terpasang.
Cek hasil generate di: yourdomain.com/sitemap-index.xml setelah build production.
Canonical URL
Canonical URL otomatis digenerate berdasarkan Astro.url. Ini mencegah isu duplicate content jika website Anda bisa diakses dari berbagai URL (misal: dengan/tanpa trailing slash).
Troubleshooting
Gambar Open Graph tidak muncul di WhatsApp/Twitter?
Pastikan path gambar di prop `image` dimulai dengan `/` (root public folder) atau URL absolut lengkap. Dan pastikan dimensi gambar minimal 1200x630 pixels.
Google menampilkan judul yang berbeda dari yang saya set?
Google kadang menulis ulang (rewrite) judul pencarian jika dianggap kurang relevan dengan query user. Pastikan judul Anda < 60 karakter dan mengandung keyword utama di awal.
Changelog SEO
Riwayat Update SEO
1 Rilis- Support otomatis untuk Twitter Card Large Summary
- Perbaikan canonical URL pada halaman paginasi