# SEO Analytics
> Skill untuk SEO, meta tags, Open Graph, structured data, Google Analytics, dan Core Web Vitals. TRIGGER ketika: user minta optimasi SEO, tambah meta tags, setup analytics/tracking, improve page speed, fix Lighthouse score, setup sitemap, atau robots.txt. Juga trigger saat: og:image, schema.org, GTM, GA4, atau web performance.
- Skill: `edorabma9304/seo-analytics` (Agent Skill)
- Install (CLI): `npx skillmds@latest add edorabma9304/seo-analytics`
- Raw SKILL.md: https://api.skillmd.com/api/skills/edorabma9304/seo-analytics/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: edorabma9304 (https://skillmd.com/u/edorabma9304)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/edorabma9304/seo-analytics
---
# SEO & Analytics Skill
Skill untuk optimasi mesin pencari, meta tags, tracking analytics, dan performa web.
---
## Meta Tags Essentials
### HTML Head Template
```html
{Judul Halaman} | {Nama Brand}
```
### React Helmet / Dynamic Meta
```jsx
// Untuk React SPA — pakai react-helmet-async
import { Helmet } from 'react-helmet-async'
function ProductPage({ product }) {
return (
<>
{product.nama} | Toko Online
{/* ... page content */}
)
}
```
---
## Structured Data (Schema.org)
### Local Business
```json
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Nama Usaha",
"description": "Deskripsi usaha",
"url": "https://example.com",
"telephone": "+6281234567890",
"address": {
"@type": "PostalAddress",
"streetAddress": "Jl. Contoh No.1",
"addressLocality": "Jakarta",
"addressRegion": "DKI Jakarta",
"postalCode": "12345",
"addressCountry": "ID"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": -6.2088,
"longitude": 106.8456
},
"openingHours": "Mo-Sa 08:00-20:00",
"priceRange": "Rp"
}
```
### Product
```json
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Nama Produk",
"description": "Deskripsi produk",
"image": "https://example.com/produk.jpg",
"offers": {
"@type": "Offer",
"price": "150000",
"priceCurrency": "IDR",
"availability": "https://schema.org/InStock"
}
}
```
### Breadcrumb
```json
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
{ "@type": "ListItem", "position": 2, "name": "Katalog", "item": "https://example.com/katalog" },
{ "@type": "ListItem", "position": 3, "name": "Bolu Coklat" }
]
}
```
---
## Sitemap & Robots
### sitemap.xml
```xml
https://example.com/
2024-01-01
daily
1.0
https://example.com/katalog
weekly
0.8
```
### robots.txt
```
User-agent: *
Allow: /
Disallow: /admin
Disallow: /api/
Sitemap: https://example.com/sitemap.xml
```
---
## Google Analytics 4 (GA4)
### Setup
```html
```
### Track Custom Events
```javascript
// Track pembelian
gtag('event', 'purchase', {
transaction_id: pesanan.nomorInvoice,
value: pesanan.total,
currency: 'IDR',
items: pesanan.items.map(i => ({
item_id: i.produkId,
item_name: i.nama,
price: i.harga,
quantity: i.jumlah,
}))
})
// Track add to cart
gtag('event', 'add_to_cart', {
currency: 'IDR',
value: item.harga,
items: [{ item_id: item.id, item_name: item.nama }]
})
// Track search
gtag('event', 'search', { search_term: query })
```
### React SPA — Track Page Views
```javascript
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
function usePageTracking() {
const location = useLocation()
useEffect(() => {
gtag('event', 'page_view', {
page_path: location.pathname,
page_title: document.title,
})
}, [location])
}
```
---
## Core Web Vitals
### 3 Metrik Utama
| Metrik | Apa Itu | Target | Cara Fix |
|--------|---------|--------|----------|
| **LCP** (Largest Contentful Paint) | Waktu load elemen terbesar | < 2.5s | Optimize images, preload fonts, SSR |
| **INP** (Interaction to Next Paint) | Responsivitas interaksi | < 200ms | Reduce JS, defer non-critical, web workers |
| **CLS** (Cumulative Layout Shift) | Stabilitas visual layout | < 0.1 | Set image dimensions, no dynamic inject above fold |
### Optimasi Performa
#### Image Optimization
```html
```
#### Code Splitting (React + Vite)
```javascript
import { lazy, Suspense } from 'react'
const Dashboard = lazy(() => import('./modules/dashboard/Dashboard'))
const Laporan = lazy(() => import('./modules/laporan/Laporan'))
// Dalam routes
}>
```
#### Bundle Analysis
```bash
# Vite
npx vite-bundle-visualizer
# Webpack
npx webpack-bundle-analyzer stats.json
```
---
## Lighthouse Checklist
### Performance (target > 90)
- [ ] Images dalam format WebP/AVIF
- [ ] Lazy load images & iframes
- [ ] Code splitting per route
- [ ] Minify CSS & JS (otomatis di Vite production)
- [ ] Gzip/Brotli compression di server
- [ ] Cache headers untuk static assets
### SEO (target 100)
- [ ] `` unik per halaman
- [ ] `<meta description>` per halaman
- [ ] Heading hierarchy (h1 → h2 → h3)
- [ ] `alt` text pada semua images
- [ ] `<link rel="canonical">`
- [ ] sitemap.xml & robots.txt
- [ ] Structured data (JSON-LD)
### Accessibility (target > 90)
- [ ] Kontras warna ≥ 4.5:1
- [ ] Focus visible pada interactive elements
- [ ] Semantic HTML (`nav`, `main`, `button`)
- [ ] `aria-label` pada icon buttons
- [ ] Skip navigation link
- [ ] Form labels
### Best Practices (target 100)
- [ ] HTTPS
- [ ] No console errors
- [ ] No deprecated APIs
- [ ] Security headers (CSP, X-Frame-Options)