Bertindak sebagai Senior Blogger Theme Architect, Technical SEO Engineer,
Core Web Vitals Engineer, Schema.org Engineer, Accessibility Engineer,
Frontend Performance Engineer, dan QA Code Auditor.
TUGAS:
Bangun THEME BLOGGER / BLOGSPOT production-ready dengan fokus utama:
1. Technical SEO
2. Core Web Vitals
3. Semantic HTML
4. Structured Data
5. E-E-A-T signals
6. AI Search / AI Overviews readiness
7. Accessibility
8. Mobile-first
9. Blogger Layout compatibility
10. Lightweight frontend architecture
JANGAN membuat template Blogger generik.
Saya ingin theme yang secara arsitektur memang dirancang dari awal untuk
SEO modern, performance, semantic content, structured data, dan Blogger.
============================================================
A. CORE WEB VITALS 2026 READY
============================================================
Gunakan:
- Vanilla CSS
- Vanilla JavaScript
- tanpa jQuery
- tanpa Bootstrap
- tanpa framework frontend
- tanpa library JS besar
- dependency eksternal seminimal mungkin
Target desain:
- LCP seoptimal mungkin
- INP rendah
- CLS target = 0 atau sedekat mungkin dengan 0
- FCP optimal
- DOM tidak berlebihan
- CSS ringan
- JavaScript ringan
JANGAN menjanjikan skor PageSpeed 95–100 secara absolut.
Sebaliknya, bangun arsitektur yang MEMAKSIMALKAN kemungkinan mencapai
skor tinggi berdasarkan implementasi theme.
Optimalkan:
IMAGE:
- width
- height
- aspect-ratio
- lazy loading
- decoding
- responsive image
- featured image
- thumbnail
- placeholder
- LCP image handling
FONT:
- jangan memuat font eksternal jika tidak diperlukan
- gunakan system font stack sebagai default
- hindari font blocking
- hindari terlalu banyak font weight
CSS:
- minimal
- critical rendering friendly
- CSS variables
- mobile-first
- tidak redundant
- tidak menggunakan !important secara berlebihan
JS:
- vanilla
- defer jika memungkinkan
- event listener minimal
- progressive enhancement
- tidak menjalankan script yang tidak diperlukan
JANGAN lazy-load elemen yang berpotensi menjadi LCP.
============================================================
B. BLOGGER XML ARCHITECTURE
============================================================
Theme WAJIB menggunakan struktur Blogger XML yang benar.
Gunakan:
- b:section
- b:widget
- b:includable
- b:loop
- b:if
- expr:
- Blogger data variables
- conditional tags Blogger
Pastikan:
- valid XML
- dapat diparse Blogger
- dapat di-upload melalui Blogger Theme
- kompatibel dengan Layout / Tata Letak
- widget dapat dipindahkan melalui Layout editor
- section tidak dikunci secara tidak perlu
- widget memiliki ID yang valid
- tidak menggunakan HTML statis yang merusak sistem Blogger
Jangan membuat HTML biasa lalu sekadar membungkusnya sebagai Blogger XML.
============================================================
C. SEMANTIC HTML
============================================================
Gunakan:
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>
Struktur harus berbeda secara logis berdasarkan tipe halaman.
HOMEPAGE:
<body>
<header>
<nav>
<main>
<section>
...
</main>
<aside>
<footer>
ARTICLE:
<header>
<nav>
<main>
<article>
breadcrumbs
title
author
metadata
content
</article>
</main>
<footer>
Pastikan hanya ada satu main content utama.
============================================================
D. HEADING HIERARCHY
============================================================
Ini WAJIB.
HOMEPAGE:
- H1 dinamis untuk identitas/topik utama website
- post card menggunakan H2/H3 sesuai struktur
- jangan membuat semua judul post menjadi H1
SINGLE ARTICLE:
- judul artikel harus menjadi satu-satunya H1 utama
- heading artikel selanjutnya menggunakan H2
- subheading menggunakan H3
Pastikan tidak terjadi:
- multiple H1 yang tidak diperlukan
- heading melompat secara tidak logis
- heading hanya digunakan untuk styling
Buat logic Blogger conditional untuk membedakan:
homepage
post
page
label
search
archive
404
============================================================
E. DYNAMIC TITLE & META
============================================================
Buat sistem dinamis.
HOMEPAGE:
<title>Site Name / Site Description</title>
ARTICLE:
<title>Article Title | Site Name</title>
PAGE:
<title>Page Title | Site Name</title>
LABEL:
<title>Label Name | Site Name</title>
SEARCH:
<title>Search Query | Site Name</title>
404:
<title>Page Not Found | Site Name</title>
Implementasikan:
- meta description
- canonical
- robots
- viewport
- Open Graph
- Twitter/X Card
- theme-color
Jangan membuat duplicate meta tags.
============================================================
F. JSON-LD STRUCTURED DATA
============================================================
Implementasikan JSON-LD dinamis.
Minimum:
1. WebSite
2. BreadcrumbList
3. Article / BlogPosting
Untuk artikel gunakan:
@type:
BlogPosting
Tambahkan jika datanya tersedia:
- headline
- description
- image
- author
- publisher
- datePublished
- dateModified
- mainEntityOfPage
- url
Jangan mengarang data.
Jangan membuat:
- fake review
- fake rating
- fake author
- fake organization
- fake aggregateRating
============================================================
G. WEBSITE SEARCH
============================================================
Implementasikan WebSite structured data dengan SearchAction
HANYA jika implementasi URL pencarian Blogger benar-benar valid.
Jangan memasukkan schema hanya untuk mengejar rich result.
Pahami bahwa structured data tidak menjamin rich snippets atau AI Overview.
Implementasikan data dengan valid dan konsisten.
============================================================
H. BREADCRUMB
============================================================
Buat:
1. Visual breadcrumb
2. JSON-LD BreadcrumbList
Contoh:
Home
>
Category / Label
>
Article
Breadcrumb harus:
- clickable
- accessible
- responsive
- tidak menyebabkan CLS
============================================================
I. E-E-A-T SIGNALS
============================================================
Buat Author Box profesional.
Minimal:
- author name
- author avatar
- author bio
- credentials
- author profile URL jika tersedia
- social profile jika tersedia
- date published
- date modified
Jangan membuat kredensial fiktif.
Jika data author tidak tersedia:
gunakan fallback yang aman.
Tambahkan:
READING TIME
Contoh:
"Estimasi waktu baca: 6 menit"
Reading time dihitung berdasarkan jumlah kata konten,
bukan angka hardcoded.
Gunakan formula sederhana yang efisien.
============================================================
J. SHARE SYSTEM
============================================================
Buat native lightweight share.
Prioritas:
navigator.share()
Fallback:
- copy link
- X
- Telegram jika diperlukan
Jangan menggunakan social sharing library besar.
Jangan membuat script yang memblokir rendering.
============================================================
K. DARK / LIGHT MODE
============================================================
Implementasikan:
- Light mode
- Dark mode
- system preference
- manual toggle
Gunakan CSS variables.
Contoh konsep:
:root {
--bg:
--text:
--muted:
--border:
--primary:
--surface:
}
[data-theme="dark"] {
...
}
Persyaratan:
- tidak menyebabkan flash berlebihan
- tidak menyebabkan layout shift
- preference tersimpan
- gunakan localStorage hanya jika diperlukan
- fallback ke prefers-color-scheme
Toggle harus accessible.
============================================================
L. BLOGGER LAYOUT EDITOR
============================================================
SANGAT PENTING.
Theme harus tetap kompatibel dengan:
Blogger > Layout / Tata Letak
Sediakan section/widget yang dapat diedit:
HEADER
- Logo
- Navigation
MAIN
- Featured Posts
- Blog Posts
SIDEBAR
- About
- Popular Posts
- Labels
- HTML widget
FOOTER
- Footer widgets
Jangan membuat semua bagian sebagai HTML hardcoded.
Gunakan Blogger sections/widgets jika bagian tersebut memang
seharusnya dapat diedit melalui Layout.
============================================================
M. RESPONSIVE DESIGN
============================================================
Mobile-first.
Breakpoints harus sederhana.
Pastikan:
- mobile
- tablet
- desktop
- wide desktop
Tidak ada:
- horizontal overflow
- teks keluar layar
- gambar overflow
- navigation rusak
- button terlalu kecil
Touch target harus nyaman digunakan.
============================================================
N. ACCESSIBILITY
============================================================
Targetkan struktur yang baik untuk accessibility.
Implementasikan:
- semantic HTML
- alt image
- aria-label jika diperlukan
- keyboard navigation
- visible focus
- skip-to-content
- accessible menu
- accessible search
- accessible theme toggle
- color contrast
- reduced motion
Support:
prefers-reduced-motion
Jika user mengaktifkan reduced motion,
kurangi/nonaktifkan animation yang tidak penting.
============================================================
O. PERFORMANCE GUARD
============================================================
Jangan menggunakan:
- jQuery
- Bootstrap
- Font Awesome jika tidak diperlukan
- icon library besar
- slider library
- animation library
- external UI framework
Gunakan SVG inline atau CSS untuk icon sederhana.
Minimalkan:
- external requests
- third-party scripts
- DOM nodes
- CSS rules
- JavaScript execution
============================================================
P. ADS READY
============================================================
Siapkan slot:
- Header ad
- In-content ad
- Sidebar ad
- Footer ad
Tetapi JANGAN memasukkan AdSense script secara default.
Slot harus memiliki ruang/layout yang stabil agar tidak menyebabkan CLS.
============================================================
Q. SEO CONTENT ARCHITECTURE
============================================================
Theme harus mendukung website dengan struktur:
Homepage
│
├── Category / Label
│ ├── Article
│ ├── Article
│ └── Article
│
├── Pillar Content
│ ├── Supporting Content
│ └── Supporting Content
│
└── Informational Content
Implementasikan UI yang mendukung:
- related posts
- previous post
- next post
- breadcrumbs
- internal navigation
Jangan melakukan auto-link keyword secara agresif.
============================================================
R. AI SEARCH / GEO READINESS
============================================================
Struktur HTML harus mudah dipahami mesin pencari dan sistem AI.
Optimalkan:
- clear entity
- author identity
- article identity
- organization identity
- semantic sections
- descriptive headings
- lists
- tables
- definitions
- factual content blocks
Jangan mengklaim theme dapat menjamin:
- masuk AI Overview
- ranking nomor 1
- muncul di ChatGPT
- muncul di Google AI
Theme hanya menyediakan technical foundation.
============================================================
S. SECURITY
============================================================
Audit:
- unsafe inline JS
- unsafe HTML
- XSS risk
- external scripts
- iframe
- widget injection
- URL handling
Jangan memasukkan kode eksternal yang tidak diperlukan.
============================================================
T. SEO ANTI-SPAM
============================================================
WAJIB memastikan tidak ada:
- hidden text
- hidden links
- keyword stuffing
- doorway architecture
- cloaking
- fake schema
- fake review
- fake rating
- fake author
- autogenerated nonsense
- excessive internal links
- manipulative structured data
============================================================
U. FILE PROJECT
============================================================
Buat project dengan minimal:
/theme/
blogger-theme.xml
README.md
SEO-CHECKLIST.md
PERFORMANCE.md
ACCESSIBILITY.md
CUSTOMIZATION.md
CHANGELOG.md
Jika membutuhkan file tambahan, tambahkan sesuai kebutuhan.
============================================================
V. CONFIGURATION
============================================================
Buat bagian konfigurasi yang mudah ditemukan.
Minimal:
SITE_NAME
SITE_DESCRIPTION
SITE_URL
LOGO_URL
DEFAULT_IMAGE
AUTHOR_NAME
AUTHOR_BIO
AUTHOR_AVATAR
AUTHOR_URL
PRIMARY_COLOR
THEME_COLOR
Jangan membuat user harus mencari konfigurasi
di seluruh file XML.
============================================================
W. FALLBACK SYSTEM
============================================================
Theme harus tetap bekerja jika:
- logo kosong
- avatar kosong
- featured image kosong
- description kosong
- author bio kosong
- social profile kosong
- thumbnail gagal
- JS disabled
Jangan sampai satu data kosong menyebabkan layout rusak.
============================================================
X. QA / SELF AUDIT
============================================================
Setelah implementasi selesai:
JANGAN langsung mengatakan "SELESAI".
Lakukan PASS 1:
Implementation Review
Lakukan PASS 2:
Independent Technical Audit
Lakukan PASS 3:
SEO + Performance + Blogger Compatibility Audit
Periksa:
[ ] XML valid
[ ] Blogger syntax valid
[ ] Layout editor compatible
[ ] Widget valid
[ ] Semantic HTML
[ ] Single H1
[ ] Heading hierarchy
[ ] Dynamic title
[ ] Meta description
[ ] Canonical
[ ] Robots
[ ] Open Graph
[ ] Twitter Card
[ ] WebSite schema
[ ] Article schema
[ ] Breadcrumb schema
[ ] SearchAction validity
[ ] Author data
[ ] datePublished
[ ] dateModified
[ ] Reading time
[ ] Native share
[ ] Dark mode
[ ] Light mode
[ ] Mobile responsive
[ ] Accessibility
[ ] Keyboard navigation
[ ] Skip navigation
[ ] CLS protection
[ ] LCP optimization
[ ] INP optimization
[ ] Image optimization
[ ] No jQuery
[ ] No unnecessary dependency
[ ] No duplicate IDs
[ ] No fake schema
[ ] No hidden SEO
[ ] No keyword stuffing
[ ] No horizontal overflow
Jika menemukan bug:
1. Jelaskan bug
2. Cari root cause
3. Fix source code
4. Jalankan audit ulang
5. Pastikan fix tidak menyebabkan regression
============================================================
Y. OUTPUT AKHIR
============================================================
Pada final report tampilkan:
1. Architecture
2. Folder/file structure
3. Implemented features
4. SEO implementation
5. Schema implementation
6. Core Web Vitals strategy
7. Blogger compatibility
8. Accessibility
9. Dark/light mode
10. E-E-A-T implementation
11. Security
12. Testing result
13. Bugs found
14. Bugs fixed
15. Known limitations
16. Installation instructions
17. Customization instructions
Jangan menggunakan klaim absolut seperti:
"100% SEO"
"pasti ranking"
"pasti PageSpeed 100"
"pasti masuk AI Overview"
Gunakan istilah:
"SEO-ready"
"performance-oriented"
"Core Web Vitals optimized"
"structured-data ready"
============================================================
WORKFLOW WAJIB
============================================================
ANALYZE
↓
ARCHITECTURE
↓
IMPLEMENTATION PLAN
↓
CODE
↓
VALIDATE
↓
AUDIT
↓
FIX
↓
REGRESSION CHECK
↓
FINAL REPORT
PENTING:
Jangan melewati ANALYZE dan ARCHITECTURE.
Jangan hanya menghasilkan desain yang terlihat bagus.
Prioritas teknis:
1. Valid Blogger XML
2. Performance
3. Semantic HTML
4. Technical SEO
5. Structured Data
6. Accessibility
7. UX
8. Visual polish
Bangun theme sebagai produk production-ready,
bukan sekadar contoh template.