---
name: seo-web-vitals
description: Search Engine Optimization (SEO), JSON-LD structured data, and Core Web Vitals (LCP, INP, CLS) optimization
---
# SEO Excellence & Core Web Vitals (CWV) Optimization
Skill komprehensif untuk memastikan aplikasi web memiliki indeks search engine maksimal serta skor Google Core Web Vitals di zona hijau (skor Lighthouse/PageSpeed 90+).
Gunakan skill ini setiap kali:
- Merancang struktur halaman web (landing page, blog, e-commerce, dashboard publik)
- Mengonfigurasi metadata, tag OpenGraph, atau structured data (Schema.org)
- Mengoptimasi kecepatan loading aset (gambar, font, script)
- Mengatasi masalah layout shifting (CLS) atau kelambatan interaksi (INP)
---
## 1. Standar Core Web Vitals (Zona Hijau)
Google mengukur pengalaman pengguna berbasis 3 metrik inti:
1. **LCP (Largest Contentful Paint)**: Harus **<= 2.5 detik**
2. **INP (Interaction to Next Paint)**: Harus **<= 200 ms**
3. **CLS (Cumulative Layout Shift)**: Harus **<= 0.1**
---
## 2. Playbook Optimasi LCP (Largest Contentful Paint)
Elemen LCP biasanya berupa gambar hero banner, video cover, atau blok heading teks besar pertama.
### Aturan Wajib untuk Aset LCP:
1. **Gunakan Priority Hint (`fetchpriority="high"`)**:
```html
```
2. **Preload Aset Kritis di ``**:
```html
```
3. **Konversi Gambar ke Format Modern**:
- Gunakan format **AVIF** atau **WebP** (kompresi 30-50% lebih efisien dari PNG/JPEG).
- JANGAN muat gambar mentah berukuran > 200 KB untuk viewport standar.
4. **Hindari Render-Blocking Script**:
- Selalu gunakan atribut `defer` atau `async` pada tag `
```
---
## 6. Crawlability: Sitemap & Robots.txt
1. **`robots.txt`**:
```
User-agent: *
Allow: /
Disallow: /api/
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml
```
2. **`sitemap.xml`**:
- Pastikan sitemap diperbarui secara dinamis saat konten baru terbit.
- Cantumkan tag `` yang akurat (ISO 8601).
---
## 7. Checklist Verifikasi SEO & Web Vitals
- [ ] Apakah gambar utama (LCP) memakai `fetchpriority="high"` dan format modern (WebP/AVIF)?
- [ ] Apakah semua media memiliki ukuran `width` & `height` atau `aspect-ratio` (CLS = 0)?
- [ ] Apakah tag `` (50-60 char) dan `<meta name="description">` (120-155 char) terisi dengan tepat?
- [ ] Apakah tag OpenGraph dan Twitter Card menyertakan gambar 1200x630?
- [ ] Apakah JSON-LD schema valid menurut Schema.org validator?
- [ ] Apakah file `robots.txt` dan `sitemap.xml` dapat diakses dengan benar?
```
2. **Preload Aset Kritis di ``**:
```html
```
3. **Konversi Gambar ke Format Modern**:
- Gunakan format **AVIF** atau **WebP** (kompresi 30-50% lebih efisien dari PNG/JPEG).
- JANGAN muat gambar mentah berukuran > 200 KB untuk viewport standar.
4. **Hindari Render-Blocking Script**:
- Selalu gunakan atribut `defer` atau `async` pada tag `
```
---
## 6. Crawlability: Sitemap & Robots.txt
1. **`robots.txt`**:
```
User-agent: *
Allow: /
Disallow: /api/
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml
```
2. **`sitemap.xml`**:
- Pastikan sitemap diperbarui secara dinamis saat konten baru terbit.
- Cantumkan tag `