Heading menamakan section dan menunjukkan hubungan idea. Ia membantu reader scan, assistive technology navigate, table of contents dan search system memahami page. Nilainya datang daripada outline yang jujur—bukan keyword berulang atau setiap bold line dijadikan heading.
Browser dan Google boleh memproses markup yang tidak sempurna; multiple H1 bukan automatic penalty. Namun panduan MDN semasa mengesyorkan satu H1 yang menerangkan page, diikuti H2–H6 yang nested secara logik. Ini memberi satu main title yang reliable untuk design, accessibility dan QA.
Jawapan ringkas: satu tugas untuk setiap level
| Level | Tugas | Use biasa |
|---|---|---|
| H1 | Nama main topic atau task | Satu page title jelas |
| H2 | Major section di bawah page topic | Scope, process, price, evidence, FAQ |
| H3 | Subsection berkaitan dalam H2 | Step group, option atau sub-question |
| H4 | Subsection sebenar dalam H3 | Detailed method/example |
| H5–H6 | Dokumen luar biasa mendalam | Technical specification/standard |
| CSS class | Visual treatment sahaja | Size, weight, colour, spacing |
Heading menerangkan struktur, bukan saiz font
Pilih level berdasarkan hubungan section. Gunakan CSS untuk jadikan H2 kecil atau paragraph besar. Bold sentence bukan automatik heading.
W3C mengesyorkan nesting mengikut rank dan elak skipped level semasa membuka subsection. Kembali dari H4 ke H2 adalah betul apabila subsection tamat; membuka H4 terus bawah H2 biasanya mengelirukan.
| Intent | Gunakan | Jangan |
|---|---|---|
| Nama page | H1 | Large styled paragraph |
| Major section | H2 | H3 kerana nampak kecil |
| Subsection | H3 bawah H2 | Bold text tanpa semantic |
| Short label | p/span + CSS | Heading untuk typography |
| Navigation group | Landmark + optional heading | Level ikut article depth secara tidak sengaja |
Kenapa satu H1 ialah operating convention terbaik
Satu H1 menjadikan primary title jelas untuk CMS, design system, screen-reader heading list dan automated check. Ia convention untuk clarity dan maintainability, bukan ranking secret.
Jika page mempunyai multiple H1, inspect punca dahulu. Logo, modal, embedded article atau reusable component mungkin menghasilkannya. Baiki model, bukan tukar semua kepada H2 secara buta.
| Finding | Maksud mungkin | Response |
|---|---|---|
| Satu descriptive H1 | Primary topic jelas | Keep dan verify unique |
| Tiada H1 | Visual title salah element/data tiada | Tambah visible page title |
| Dua competing H1 | Main title ambiguous | Pilih satu, restructure satu lagi |
| Logo/site name H1 setiap page | Global header ambil document title | Brand link bukan heading; content own H1 |
| Multiple H1 dalam widget | Component semantics tidak coordinated | Level ikut containing page |
Selaraskan title element, visual title dan H1
<title> menamakan document dalam browser/search; H1 menamakan visible page. Wording boleh berbeza tetapi promise topic dan task mesti sama.
Google boleh menggunakan title, heading dan prominent text untuk title link. Jika beberapa large heading bersaing, yang pertama mungkin dipilih. Rujuk workflow title tag.
| Elemen | Surface | Hubungan baik |
|---|---|---|
<title> | Browser/search source | Page identity + optional brand |
| H1 | Visible main title | Purpose sama, readable |
| Hero eyebrow | Category/context | Short label, bukan competing title |
| Hero subheading | Audience/outcome | Support H1 |
og:title | Social preview | Same destination promise |
Bina outline sebelum menulis section
Mulakan dengan page job, kemudian list question atau decision user. Group related item sebagai H2 dan tambah H3 hanya apabila H2 benar-benar ada subsection.
- Tulis single page purpose sebagai draft H1.
- List primary question, decision atau stage.
- Group overlap dan buang section yang tidak support job.
- Jadikan major group descriptive H2.
- Tambah H3 hanya untuk real subsection.
- Baca H1–H3 sahaja seperti table of contents.
- Pastikan order ikut user journey, bukan keyword list.
Tulis heading yang jelas tanpa context
Screen-reader user boleh membuka heading list atau jump antara heading. “Why it matters” yang berulang tidak jelas. Namakan topic, result atau decision sebenar.
WCAG 2.2 menetapkan heading dan label yang digunakan mesti menerangkan topic atau purpose. Ia tidak perlu panjang.
| Lemah | Lebih jelas | Sebab |
|---|---|---|
| Why it matters | Why internal links improve discovery | Nama subject |
| Our solution | SEO Teknikal audit and implementation | Explain work |
| More information | Website maintenance response times | Predict section |
| Step 3 | Validate redirects before launch | Tambah task |
| Amazing results | Organic leads after the migration | Evidence, bukan hype |
| FAQ | FAQ about backlink services | Useful jika banyak group |
Map heading mengikut page type
| Page | H1 job | H2 pattern |
|---|---|---|
| Laman Utamapage | Primary offer/value | Perkhidmatan, proof, work, insights, contact |
| Service | Service outcome + audience | Best fit, scope, process, deliverables, pricing, FAQ |
| Artikel | Answer query / promise task | Definition, decision, workflow, example, mistake, FAQ |
| Hub/category | Collection + learning purpose | Start here, subtopics, resources, updates |
| Product/tool | Product + primary use | Use case, feature, setup, limit, price, support |
| Case study | Project + relevant outcome | Context, challenge, approach, work, result, lesson |
| Hubungi | Hubungi/enquiry task | Ways, preparation, response expectation |
| FAQ page | Support scope | Topic groups + questions |
Card perlukan heading hanya jika real section
Card title boleh menjadi heading jika card ialah meaningful subsection seperti service, article atau project. Statistic, badge, button dan small label biasanya bukan heading.
Repeated card ikut level container. Grid bawah H2 biasanya menggunakan H3. Reusable component mungkin perlukan configurable level, bukan hard-coded H2.
| Component | Decision | Check |
|---|---|---|
| Service card | Heading jika ada own content | Level ikut grid |
| Blog card | Artikel title sebagai heading | Linked heading describe destination |
| Image-only portfolio | Accessible link label mungkin cukup | Tiada hidden keyword heading |
| Statistic | Plain text | Value/label associated |
| Pricing package | Heading jika distinct option | Features dalam section package |
| CTA panel | Heading jika real section | Button bukan heading |
Urus accordion, tabs, modal dan menu
Interactive control perlukan accessible name, role dan state. Accordion question boleh menjadi heading jika ia juga section title, tetapi button masih perlukan expanded state dan keyboard behaviour.
Tab content mesti connected kepada control. Dialog heading melabel dialog, bukan second page H1.
| Component | Structure | Accessibility |
|---|---|---|
| Accordion | Question mungkin H3 bawah FAQ H2 | Button name + aria-expanded |
| Tabs | Panel title ikut hierarchy | Tab/panel relationship |
| Modal | Descriptive dialog title | Label + focus management |
| Mega menu | Navigation group/label | Tidak distort article outline |
| Carousel | Heading hanya untuk real section | Hidden slides tidak confuse |
| Tooltip | Bukan document section | Control description |
Fixed region mesti konsisten antara template
Navigation, sidebar dan footer boleh ada heading serta landmark sendiri. W3C menyatakan fixed region patut kekalkan rank konsisten dan tidak berubah mengikut heading terdalam dalam article.
Gunakan <nav>, <main>, <aside> dan <footer> dengan tepat.
- Main content ada satu H1.
- Header logo bukan H1 setiap route.
- Navigation label konsisten.
- Sidebar tidak copy H1.
- Footer heading untuk real group.
- Mobile/desktop nav duplicate tidak exposed.
- Popup/cookie banner tiada H1.
- Combined outline masih logik.
Stable heading ID untuk table of contents
Long page boleh menggunakan TOC. Generate unique stable ID daripada controlled slug atau stored identifier supaya wording change tidak semestinya memecahkan shared deep link.
Jika sticky header menutup target, gunakan scroll-margin-top. Test focus, history, translation dan duplicate heading.
| Risiko | Contoh | Control |
|---|---|---|
| Duplicate ID | Dua “Examples” | Unique stored ID |
| Broken deep link | Heading wording berubah | Preserve ID jika purpose sama |
| Covered target | Sticky header | Tatal offset + focus test |
| Non-Latin slug | Encoded fragment susah share | Stable readable convention |
| Collapsed section | Anchor dalam accordion tutup | Reveal target state |
| Empty TOC | Script terlalu awal | Generate daripada final headings |
Localize meaning, bukan heading text sahaja
Setiap language page perlukan natural outline. Jangan tinggalkan English heading dalam Malay/Chinese content dan jangan paksa word order sama. Hierarchy dan page job perlu equivalent.
Google mengesyorkan prominent text sepadan dengan language dan writing system page.
- H1 localized dan unique.
- Title/H1 describe purpose sama.
- Tiada mixed-language fallback.
- Equivalent translation kekalkan level.
- Heading describe following section.
- TOC/fragment work setiap language.
- Text expansion tidak break mobile.
- Hreflang/canonical aligned.
Cegah CMS dan page-builder noise
Template sering menyebabkan lebih banyak masalah daripada writer. Logo widget, reusable block, card, hidden responsive copy dan empty field boleh menghasilkan headings di banyak URL.
Fix source component dahulu. Sample beberapa page type kerana level card boleh berubah ikut placement.
| Pattern | Source | Fix |
|---|---|---|
| H1 sama setiap page | Global template/logo | Bind page title; tukar brand markup |
| Empty H2/H3 | Optional field render tag | Render jika content wujud |
| H2 terus H4 | Visual-size dropdown | Pisah semantic/style |
| Terlalu banyak H2 cards | Hard-coded component | Contextual level/plain text |
| Duplicate mobile heading | Dua layouts exposed | One semantic source/hide correctly |
| Icon-only heading | Decorative widget | Remove/proper accessible label |
| Semua FAQ H2 | Component ignore hierarchy | H3 bawah FAQ H2 |
Gabung crawl dengan manual outline review
Crawler boleh cari missing, empty, duplicate, multiple H1 dan rank jump. Ia tidak boleh menentukan sama ada “Overview” jelas atau mobile order bercerita dengan betul.
Gunakan automated finding sebagai review queue dan fix shared causes dahulu.
| Finding | Apa dibuktikan | Manual question |
|---|---|---|
| Missing H1 | Tiada H1 parsed | Adakah visual title salah element? |
| Multiple H1 | Lebih satu H1 | Competing atau separate context? |
| Duplicate H1 | Text repeat | Duplicate page atau valid name? |
| Skipped rank | Numeric jump | Open subsection atau close previous? |
| Long heading | Lebih threshold | Tidak jelas atau specific? |
| Empty heading | Tiada accessible text | Icon/CSS sembunyikan isu? |
Audit daripada page ke template
- Export indexable URL dengan title, H1 dan counts.
- Group ikut template dan business importance.
- Check desktop/mobile setiap core template.
- Identify visible main title sebagai satu H1.
- Banding title, H1 dan opening answer.
- Baca outline H1–H6 tanpa paragraph.
- Mark vague, empty, decorative, duplicate dan wrong rank.
- Test cards, accordion, tabs, dialog, menu dan hidden content.
- Test keyboard/screen-reader heading navigation.
- Review semua language.
- Fix reusable component dahulu.
- Re-crawl dan record QA.
Ukur clarity tanpa ranking claim palsu
Heading cleanup boleh bantu navigation dan comprehension, tetapi ranking change tidak boleh dikaitkan dengan heading order sahaja. Intent, content, links, competition dan eligibility juga terlibat.
Ukur page task: guide melalui TOC/section engagement/next step; service page melalui qualified enquiry, bukan scroll depth sahaja.
| Objective | Evidence | Guardrail |
|---|---|---|
| Cari section | TOC use, navigation test, observation | More click bukan automatik baik |
| Faham promise | Task test, kurang confusion | Title/H1/content align |
| Accessibility | Screen-reader + WCAG | Automation incomplete |
| Kurang template defect | Missing/empty/competing H1 turun | Clean report bukan proof wording |
| Cari understanding | Stable relevance/performance | Tiada heading-only promise |
| Conversion path | CTA progress/qualified enquiry | Account simultaneous changes |
Kesilapan heading
- Level untuk font size.
- Setiap bold/card label jadi heading.
- Exact keyword dalam semua heading.
- Logo sebagai H1 setiap page.
- Dua equally prominent title.
- H2 terus H4 untuk subsection.
- Fix multiple H1 tanpa context.
- Hard-coded card heading.
- Repeated vague “Learn more”.
- Empty heading daripada optional field.
- Duplicate exposed mobile/desktop heading.
- Anggap perfect outline boleh rank weak content.
Soalan lazim
Semua page perlu H1?
Most meaningful indexable page patut ada satu visible H1. Utility interface masih perlukan accessible title/label.
Boleh multiple H1?
Browser dan Google boleh proses, jadi bukan automatic penalty. Satu descriptive H1 tetap convention paling reliable.
Title dan H1 mesti sama?
Tidak. Wording boleh berbeza tetapi page purpose mesti sama.
Boleh H2 terus H4?
Elak semasa membuka subsection. Kembali H4 ke new H2 betul apabila nested section tamat.
Perlu exact-match keyword?
Tidak. Gunakan wording yang reader perlukan.
Berapa banyak H2?
Tiada fixed number; ikut major section yang page task perlukan.
Semua card title heading?
Hanya meaningful section. Label/stat/button biasanya bukan heading.
FAQ H2 atau H3?
Ikut container; jika FAQ group H2, questions biasanya H3.
Heading effect ranking?
Ia bantu structure, tetapi tiada guaranteed lift daripada level change.
Tool boleh fix automatik?
Tool cari pattern; manusia perlu judge relationship, wording dan component context.
Rujukan rasmi
- Google Cari Essentials
- Google SEO Starter Guide
- Google Cari Central: Influencing title links
- MDN: HTML heading elements
- W3C WAI: Headings
- W3C WAI: Headings and Labels
- W3C: Web Content Accessibility Guidelines 2.2
- W3C WAI: Easy heading checks
- WHATWG: HTML headings and sections
- Ahrefs: H1 tag best practices
- Semrush: Heading tags and SEO
Kongsikan representative templates atau crawl export. Jack boleh map H1–H6, buang page-builder noise dan utamakan reusable fixes.
Evolusi Ranking Google: Daripada PageRank ke Modern Cari Systems2 September 2026
Kandungan AI dan SEO Google: Apa Dibenarkan, Apa Dianggap Spam dan Cara Publish2 September 2026
Google Florida Update 2003: Fakta, Teori dan Lesson SEO2 September 2026