Semantic HTML untuk SEO

TL;DR — Semantic HTML berarti menggunakan tags itu describe what konten adalah — <article>, <nav>, <main>, <header> — alih-alih wrapping everything di plain <div>s. ini helps mesin pencari dan screen readers memahami Anda halaman, tetapi ini adalah not sebuah peringkat factor. menggunakan <article> won’t membuat Anda peringkat higher. yang sama aturan applies past landmarks too: <a href> untuk tautan, <button> untuk tindakan, <table> untuk tabular data, nyata teks alt pada images. gunakan right tag untuk job dan Anda’re sebagian besar dari cara there.

What semantic HTML adalah

setiap bagian dari sebuah halaman web adalah dibangun dari HTML elements. Semantic HTML hanya berarti picking element itu matches what konten actually adalah, alih-alih menggunakan sebuah generic wrapper untuk everything.

Compare ini two versi dari yang sama halaman structure:

<!-- Non-semantic: "div soup" -->
<div class="top"> ... </div>
<div class="menu"> ... </div>
<div class="content"> ... </div>
<div class="sidebar"> ... </div>
<div class="bottom"> ... </div>

<!-- Semantic: the tags describe the roles -->
<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<aside> ... </aside>
<footer> ... </footer>

Both dapat look identical pada screen — CSS handles styling. difference adalah itu kedua versi tells sebuah machine (sebuah mesin pencari, sebuah screen reader, sebuah AI crawler) which bagian adalah navigation, which adalah main konten, dan which adalah sebuah sidebar. pertama versi membuat everyone guess.

elements Anda’ll actually gunakan

• <header> — introductory konten di top dari halaman (atau top dari sebuah bagian).
• <nav> — sebuah block dari navigation tautan.
• <main> — primary, unique konten dari halaman. One per halaman.
• <article> — sebuah self-berisi piece itu dapat stand pada -nya own (sebuah blog post, sebuah product card, sebuah comment).
• <section> — sebuah thematic grouping dari konten itu memiliki -nya own heading.
• <aside> — konten itu’s tangential untuk main konten (sebuah sidebar, sebuah callout).
• <footer> — closing konten (copyright, secondary tautan).

yang sama “use the right tag” (terjemahan) “gunakan right tag” idea applies below halaman-layout tingkat too: <a href> untuk tautan, <button> untuk pada-halaman tindakan, <table> untuk actual tabular data, dan purpose-based alt text pada images. Fake tautan dibangun dari styled <div>s adalah single sebagian besar umum accessibility miss — see Advanced tab untuk full list.

thing sebagian besar people get wrong

Wrapping Anda konten di <article> melakukan not boost Anda rankings. Google’s John Mueller memiliki said <article> element memiliki “no particular effect” (terjemahan) “no particular effect” di Google Search, dan itu semantic HTML adalah “not a magical multiplier.” (terjemahan) “not sebuah magical multiplier.” Semantic HTML helps mesin pencari memahami Anda halaman — ini hanya isn’t sebuah lever Anda pull untuk peringkat higher.

nilai adalah nyata, ini adalah hanya not “ranking points.” (terjemahan) “peringkat poin.” Clean semantic markup membuat ini easier untuk mesin pencari untuk tell Anda main konten apart dari boilerplate (menus, footers, ads), ini membuat Anda halaman berfungsi properly untuk people menggunakan screen readers, dan ini adalah easier untuk AI alat untuk read. itu adalah semua baik alasan untuk melakukan ini — none dari them adalah “it’s a ranking factor.” (terjemahan) “ini adalah sebuah peringkat factor.”

One more trap: Semantic HTML adalah not yang sama sebagai “Semantic SEO.” (terjemahan) “Semantic SEO.” Semantic HTML adalah tentang markup structure. Semantic SEO adalah tentang topics dan entities di Anda konten. sama kata, totally berbeda thing.

ingin full picture — what setiap element signals, what Google dan Bing actually say, how ini fits main-konten extraction, dan sebuah retrofit checklist? Switch untuk Advanced tab.

TL;DR — Semantic HTML menggunakan elements untuk mereka intended structural meaning (<main>, <article>, <section>, <nav>, <header>, <aside>) so markup communicates what konten adalah, not how ini looks. ini adalah not sebuah peringkat factor — Mueller: “not a magical multiplier,” (terjemahan) “not sebuah magical multiplier,” dan <article> memiliki “no particular effect.” (terjemahan) “no particular effect.” What ini melakukan adalah reduce ambiguity: Google’s centerpiece annotation separates main konten dari boilerplate via NLP whether atau not Anda markup adalah semantic, tetapi clean semantics membuat itu job more reliable. Bing’s Fabrice Canel frames ini more strongly (“an advantage in SEO” (terjemahan) “sebuah advantage di SEO”) — I note itu gap honestly alih-alih harmonizing ini away. Google’s own Starter Guide says sebagian besar dari web isn’t valid HTML, so ini rarely depends pada spec semantics. Correct usage beats presence: one <main>, <article> untuk self-berisi konten, <section> untuk sebuah themed group dengan sebuah heading — not sebuah <div> substitute. yang sama test extends untuk <a href> vs. <button> (navigate vs. act), nyata <table>s untuk tabular data, purpose-based image teks alt, dan <details>/<summary> untuk disclosure widgets — dan don’t rely pada <section> nesting untuk imply sebuah heading tingkat; itu “document outline algorithm” (terjemahan) “document outline algorithm” adalah tidak pernah implemented dan spec no longer defines outlines itu cara. Don’t confuse semantic HTML dengan Semantic SEO.

What semantic HTML actually adalah

Semantic HTML adalah practice dari choosing HTML elements untuk structural meaning mereka adalah designed untuk convey, alih-alih reaching untuk <div> dan <span> untuk everything. <article>, <section>, <nav>, <header>, <main>, <aside>, dan <footer> setiap declare sebuah role. markup describes what sebuah chunk dari halaman adalah; CSS decides how ini looks. Google’s own developer style guide puts aturan sebagai simply sebagai ini gets: “Use HTML elements for the purposes that they were designed for.” (terjemahan) “gunakan HTML elements untuk purposes itu mereka adalah designed untuk.”

One thing itu trips people up: sebuah class name doesn’t buat semantics. Naming sebuah <div> class="article" atau class="main-nav" doesn’t give ini <article> element’s konten model atau <nav> element’s implicit navigation role — ini adalah masih sebuah generic <div> sebagai far sebagai sebuah browser, screen reader, atau crawler adalah concerned. Semantics live di element Anda choose, not di how Anda style atau label ini.

ini artikel adalah tentang semantic elements specifically. broader “how Google parses your HTML, heading hierarchy, validity” (terjemahan) “how Google parses Anda HTML, heading hierarchy, validity” picture belongs untuk HTML SEO hub ini halaman sits di bawah — I’ll cross-reference ini alih-alih re-litigate ini here.

melakukan semantic HTML actually help SEO?

pendek jawaban: ini helps understanding, ini isn’t sebuah peringkat factor, dan two mesin frame ini sebuah little differently. Here’s honest versi.

What Google says

Google’s line, repeated oleh John Mueller, adalah itu semantic HTML adalah worth doing tetapi isn’t sebuah peringkat lever. sebagai mesin pencari Journal reported, Mueller said “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher,” (terjemahan) “Semantic HTML melakukan help untuk memahami sebuah halaman. However, ini adalah not sebuah magical multiplier untuk membuat sebuah situs web peringkat higher,” dan separately: “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” (terjemahan) “Please gunakan semantic HTML. ini adalah not sebuah peringkat factor, tetapi ini dapat help kami sistem untuk memahami Anda konten better.”

pada <article> element specifically — one everyone menanyakan tentang — Mueller adalah blunt di sebuah Office Hours session: <article> element “does not have any particular effect in Google Search,” (terjemahan) “melakukan not memiliki apa pun particular effect di Google Search,” dan he ditambahkan alasan untuk gunakan ini anyway: “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.” (terjemahan) “Sometimes ada accessibility atau semantic alasan untuk gunakan spesifik jenis dari markup, so don’t hanya focus pada SEO.”

Google juga explicitly says ini doesn’t depend pada perfect semantics. -nya SEO Starter Guide notes itu “Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “Having Anda heading di semantic order adalah fantastic untuk screen readers, tetapi dari Google Search perspective, ini doesn’t penting jika Anda’re menggunakan them out dari order. web di umum adalah not valid HTML, so Google Search dapat rarely depend pada semantic meanings hidden di HTML specification.” itu’s sebuah penting nuance, not sebuah contradiction: semantic HTML helps di margins, ini doesn’t memerlukan perfection, dan ini isn’t sebuah scored signal.

How ini fits Google finding Anda main konten

Here’s mechanism itu membuat semantic HTML berguna bahkan though ini isn’t sebuah peringkat factor. Google memiliki untuk separate main konten dari sebuah halaman dari boilerplate (nav, header, footer, sidebars, ads) sebelum ini dapat decide what sebuah halaman adalah tentang. Martin Splitt memiliki described machinery: “We have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content.” (terjemahan) “kami memiliki sebuah thing called Centerpiece Annotation, misalnya, dan there’s sebuah few lainnya annotations itu kami memiliki where kami lihat semantic konten.” cara Google figures out topic adalah natural language processing di atas konten, not tag names: “This looks like from all the natural language processing that we did on this entire text content here that we got, it looks like this is primarily about topic A, dog food.” (terjemahan) “ini looks like dari semua natural language processing itu kami melakukan pada ini entire text konten here itu kami got, ini looks like ini adalah primarily tentang topic sebuah, dog food.” dan ini down-weights rest: “We figure out what looks like boilerplate and then, that gets weighted differently as well.” (terjemahan) “kami figure out what looks like boilerplate dan lalu, itu gets weighted differently sebagai well.”

key poin: itu extraction berfungsi whether atau not Anda markup adalah semantic. Google dapat untangle sebuah halaman dibangun entirely dari <div>s. tetapi ditanyakan directly whether semantic HTML5 helps, Splitt’s jawaban adalah “It does help us, but it’s not the only thing that we look for. Yes.” (terjemahan) “ini melakukan help us, tetapi ini adalah not satu-satunya thing itu kami cari. Yes.” So semantic HTML doesn’t score Anda higher — ini reduces guesswork di sebuah langkah Google sudah melakukan, which adalah exactly why ini adalah sebuah confidence dan efficiency signal rather daripada sebuah peringkat one. untuk menjadi precise tentang what ini doesn’t melakukan: correct semantic markup melakukan not guarantee apa pun spesifik search presentation either — ini adalah sebuah separate layer dari eligibility aturan itu govern rich hasil (more pada itu below).

What Bing says (dan why ini differs)

Bing frames ini more strongly daripada Google, dan I’m going untuk leave itu difference intact alih-alih paper di atas ini. Microsoft’s Fabrice Canel memiliki said itu halaman dengan correctly implemented semantic HTML5 memiliki “an advantage in SEO” (terjemahan) “sebuah advantage di SEO” di atas itu itu don’t. itu’s sebuah stronger claim daripada Google’s “helps us understand” (terjemahan) “helps us memahami” — Bing ties semantic HTML5 directly untuk sebuah SEO advantage. Both mesin converge pada “it helps mechanically,” (terjemahan) “ini helps mechanically,” tetapi mereka don’t gunakan yang sama kata, dan Anda harus know itu when Anda read competing guidance. Neither, untuk menjadi jelas, describes ini sebagai sebuah scored peringkat factor cara tautan atau relevance adalah.

core semantic elements dan cara gunakan them correctly

Presence isn’t poin — correct usage adalah. paling umum failure mode adalah sprinkling semantic tags sekitar like decoration, atau swapping <div> untuk <section> dengan no thought tentang what setiap element berarti.

<header> dan <footer>

<header> holds introductory konten dan <footer> holds closing konten — dan both adalah contextual. di document tingkat, <header> adalah Anda situs banner dan <footer> adalah Anda situs footer. tetapi mereka dapat juga nest inside sebuah <article> atau <section> untuk mark itu block’s own intro dan outro (sebuah artikel’s judul/byline di sebuah <header>, -nya tags di sebuah <footer>). Anda dapat memiliki banyak dari them; hanya pastikan setiap one wraps intro atau closing konten untuk -nya context, not arbitrary boxes.

<nav>

<nav> adalah untuk major blocks dari navigation tautan — Anda primary menu, breadcrumb trail, atau di-halaman table dari contents. ini adalah not untuk setiap group dari tautan pada halaman (sebuah list dari related posts di body doesn’t perlu untuk menjadi sebuah <nav>). Wrapping setiap tautan cluster di <nav> dilutes signal; reserve ini untuk genuine navigation.

<main>

<main> wraps halaman’s primary, unique konten — bagian itu isn’t repeated di seluruh situs. aturan itu trips people up: there seharusnya menjadi exactly one <main> per halaman, dan ini seharusnya not menjadi nested inside <article>, <aside>, <header>, <footer>, atau <nav>. ini adalah single clearest signal Anda dapat give tentang “this is the content that matters here.” (terjemahan) “ini adalah konten itu penting here.”

<article> vs <section> ( one everyone gets wrong)

ini adalah distinction untuk get right:

• <article> adalah untuk self-berisi, independently distributable konten — something itu akan masih membuat sense pulled out dari halaman dan dropped ke sebuah feed. sebuah blog post, sebuah news story, sebuah product card, sebuah forum post, sebuah single pengguna comment. jika ini dapat syndicate pada -nya own, ini adalah sebuah <article>.
• <section> adalah sebuah thematic grouping dari konten itu seharusnya memiliki -nya own heading. sebuah “Reviews” (terjemahan) “Reviews” block, sebuah “Specifications” (terjemahan) “Specifications” block, sebuah chapter. test: jika konten doesn’t membuat sense dengan sebuah heading, ini adalah probably not sebuah <section> — dan jika Anda’re hanya menggunakan ini untuk hang beberapa CSS pada, ini seharusnya menjadi sebuah <div>.

<section> adalah not sebuah generic wrapper. When Anda perlu sebuah styling hook dengan no semantic meaning, gunakan <div> — itu’s exactly what ini adalah untuk. Reaching untuk <section> because ini “feels more modern” (terjemahan) “feels more modern” adalah single sebagian besar umum misuse.

<aside>

<aside> marks konten itu’s tangential untuk surrounding konten — sebuah sidebar, sebuah pull quote, sebuah related-tautan box, sebuah set dari ads. ini signals “this is related but not the main thread,” (terjemahan) “ini adalah related tetapi not main thread,” which adalah precisely boilerplate-vs-main-konten distinction Google adalah trying untuk draw anyway. Don’t gunakan ini hanya because something sits visually untuk side; gunakan ini when konten adalah genuinely secondary.

Getting landmark roles right (dan outline myth)

setiap landmark element maps untuk sebuah spesifik implicit ARIA role itu assistive tech reads directly — ini adalah yang sama computed structure sebuah non-visual pengguna navigates oleh, dan ini adalah worth knowing actual mapping alih-alih assuming:

One piece dari folklore worth retiring: nesting sebuah <section> melakukan not give -nya heading sebuah implicit lower peringkat. Early HTML5 defined sebuah document outline algorithm itu akan memiliki computed sebuah heading’s effective tingkat dari how deeply ini adalah nested inside sectioning elements — so sebuah nested <h1> dapat theoretically “act like” (terjemahan) “act like” sebuah <h2>. No browser atau screen reader ever implemented itu algorithm, dan WHATWG spec memiliki since dropped ini di favor dari sebuah much simpler definition: outline adalah hanya semua heading di document, di tree order. Write Anda <h1>–<h6> tingkat explicitly dan di order Anda actually ingin read — nesting depth doesn’t melakukan itu berfungsi untuk Anda.

tautan vs. buttons — tindakan-versus-navigation test

ini one isn’t sebuah landmark element, tetapi ini adalah paling umum semantic mistake pada web: menggunakan sebuah styled <div> atau <span> (atau sebuah <button>) where sebuah <a href> belongs, atau vice versa. WHATWG spec adalah spesifik — <a> dengan sebuah href attribute adalah native hyperlink mechanism, dan <button> element adalah sebuah labeled interactive control untuk triggering sebuah tindakan. test adalah sederhana: melakukan ini take pengguna untuk something (sebuah baru URL, sebuah baru halaman, sebuah fragment)? gunakan <a href>. melakukan ini melakukan something pada saat ini halaman (submit sebuah form, open sebuah modal, toggle sebuah setting)? gunakan <button>. Styling one untuk look like lainnya doesn’t perubahan what ini natively adalah — sebuah <div> dengan sebuah click handler gets neither native keyboard activation nor correct accessible role unless Anda rebuild semua dari itu yourself dengan role, tabindex, dan key handlers. hanya gunakan right element.

Tables adalah untuk tabular data, not layout

jika konten genuinely memiliki rows dan columns — sebuah comparison table, sebuah pricing grid, sebuah data set — gunakan actual <table>, not sebuah grid dari styled <div>s. WHATWG tables spec defines sebuah nyata data model: <caption> names table, dan <th> header cells (dengan scope) establish row/column relationships itu let assistive tech announce “price, $49” (terjemahan) “price, 49 USD” alih-alih hanya sebuah wall dari angka. sebuah visually table-like grid dibangun dari <div>s doesn’t carry apa pun dari itu relationship data — ini looks right, ini doesn’t read right. Don’t gunakan <table> untuk halaman layout, either; itu’s older misuse ini practice replaced.

teks alt depends pada what image adalah untuk

<img> perlu sebuah alt attribute, tetapi WHATWG spec’s requirements adalah purpose-dependent, not one-size-fits-semua: sebuah product photo perlu sebuah deskripsi dari what’s ditampilkan; sebuah image itu’s purely decorative seharusnya get alt="" (empty, not missing) so assistive tech skips ini alih-alih announcing sebuah filename; sebuah image itu’s juga sebuah tautan perlu teks alt describing tautan’s destination atau tindakan, not hanya picture. Don’t default untuk keyword-stuffed teks alt pada setiap image “for SEO” (terjemahan) “untuk SEO” — itu’s wrong test. right test adalah: what melakukan sebuah screen reader pengguna perlu untuk know itu mereka’d otherwise miss?

Native disclosure widgets: <details> dan <summary>

untuk “click to expand” (terjemahan) “click untuk expand” konten — FAQs, spec sheets, spoiler text — <details>/<summary> pair adalah sebuah native disclosure widget: <summary> adalah selalu-terlihat label, dan konten inside <details> menampilkan atau hides berdasarkan element’s open state, without apa pun JavaScript. ini comes dengan dibangun-di keyboard mendukung dan right accessible semantics untuk free — reaching untuk sebuah custom <div>-plus-JavaScript accordion berarti re-implementing perilaku browser sudah gives Anda. Test ini di Anda actual target browser dan screen readers sebelum shipping, though — rendering dan accessibility-tree exposure untuk <details>/<summary> memiliki historically varied oleh browser dan assistive-tech combination, so don’t assume parity Anda haven’t diperiksa.

umum myths tentang semantic HTML dan SEO

1. “Wrapping content in <article> boosts rankings.” (terjemahan) “Wrapping konten di undefined boosts rankings.” No — Mueller: <article> element “does not have any particular effect in Google Search.” (terjemahan) “melakukan not memiliki apa pun particular effect di Google Search.”
2. “Semantic HTML is a ranking factor.” (terjemahan) “Semantic HTML adalah sebuah peringkat factor.” No — “not a magical multiplier” (terjemahan) “not sebuah magical multiplier” dan “It’s not a ranking factor, but it can help our systems to understand your content better.” (terjemahan) “ini adalah not sebuah peringkat factor, tetapi ini dapat help kami sistem untuk memahami Anda konten better.”
3. “Google requires valid/strict semantic HTML.” (terjemahan) “Google memerlukan valid/strict semantic HTML.” No — per Starter Guide, sebagian besar dari web isn’t valid HTML dan Google “can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “dapat rarely depend pada semantic meanings hidden di HTML specification.”
4. “Heading order has to be perfect for SEO.” (terjemahan) “heading order memiliki untuk menjadi perfect untuk SEO.” Screen readers care; Google peringkat doesn’t (sama Starter Guide line). deeper heading-hierarchy treatment belongs untuk HTML SEO hub — ini adalah hanya brief versi.
5. “Semantic HTML and Semantic SEO are the same thing.” (terjemahan) “Semantic HTML dan Semantic SEO adalah yang sama thing.” No — one adalah markup structure, lainnya adalah topical/entity konten strategy. Conflating them adalah why so banyak search hasil untuk “semantic” (terjemahan) “semantic” kueri adalah tentang wrong topic.
6. “Structured data makes semantic HTML unnecessary.” (terjemahan) “data terstruktur membuat semantic HTML unnecessary.” No — mereka’re complementary. Semantic HTML gives Anda data terstruktur sebuah more trustworthy foundation; ini doesn’t replace ini, dan JSON-LD doesn’t fix div soup. dan neither one guarantees sebuah outcome: Google’s own structured-data intro adalah explicit itu menggunakan didukung markup doesn’t guarantee sebuah rich hasil — eligibility untuk sebuah spesifik search fitur adalah sebuah separate set dari aturan dari whether Anda markup (semantic HTML atau JSON-LD) adalah technically valid.
7. “Nesting a <section> gives its headings an implicit lower rank — you don’t need to drop from <h1> to <h2> inside a nested section.” (terjemahan) “Nesting sebuah undefined gives -nya heading sebuah implicit lower peringkat — Anda tidak perlu untuk drop dari undefined untuk undefined inside sebuah nested bagian.” No — ini adalah sebuah leftover dari HTML5’s old document outline algorithm, which akan memiliki computed sebuah implicit heading peringkat dari sectioning-element nesting. No browser atau screen reader ever implemented ini, dan WHATWG HTML spec no longer defines outline computation itu cara — outline today adalah hanya “all headings in the document, in tree order.” (terjemahan) “semua heading di document, di tree order.” gunakan explicit, correctly-ordered <h1>–<h6> regardless dari how deep Anda <section>/<article> nesting goes; don’t rely pada nesting untuk melakukan heading-tingkat berfungsi untuk Anda.

Semantic HTML vs. Semantic SEO — don’t confuse them

Because mereka share sebuah kata, ini get mixed up constantly, dan ini pollutes search hasil untuk both:

• Semantic HTML = markup — which elements Anda gunakan untuk structure sebuah halaman.
• Semantic SEO = sebuah konten strategy — membangun topical authority sekitar entities dan related concepts ( jenis dari thing itu lives di bawah AI Search dan konten pillars, not here).

jika Anda landed here dari sebuah “semantic SEO” (terjemahan) “semantic SEO” kueri expecting topic modeling, itu’s sebuah berbeda artikel. ini one adalah strictly tentang elements.

Semantic HTML dan AI/LLM crawler

ini adalah where semantic HTML adalah quietly getting more relevant, dan I’ll flag ini sebagai industry opinion alih-alih sebuah mesin statement. banyak LLM crawler dan AI jawaban mesin don’t render JavaScript — mereka parse HTML mereka’re disajikan. Clean semantic markup adalah far easier untuk them untuk berfungsi dengan daripada deeply nested <div> soup. sebagai Barry Adams puts ini, “It’s much simpler for ChatGPT to parse a few dozen semantic HTML tags rather than several hundred (or even thousand) nested <div> tags,” (terjemahan) “ini adalah much simpler untuk ChatGPT untuk parse sebuah few dozen semantic HTML tags alih-alih several hundred (atau bahkan thousand) nested undefined tags,” dan more broadly, “Semantic HTML markup on your webpages can help machine systems better understand your content and its value.” (terjemahan) “Semantic HTML markup pada Anda webpages dapat help machine sistem better memahami Anda konten dan -nya nilai.” Jono Alderson membuat yang sama forward-looking case — itu sebuah situs adalah “an interface. An API. A dataset,” (terjemahan) “sebuah interface. sebuah API. sebuah dataset,” not hanya sebuah visual experience — dan his one-liner adalah whole argument untuk correct usage: “If everything is a <div> or a <span>, then nothing is meaningful.” (terjemahan) “jika everything adalah sebuah undefined atau sebuah undefined, lalu nothing adalah meaningful.” Treat semua dari ini sebagai sebuah baik directional alasan untuk pertahankan markup clean, not sebagai sebuah promise dari Google atau Bing.

cara audit dan retrofit existing halaman

sebagian besar nyata situs adalah sudah div soup, dan Anda tidak rebuild them overnight. sebuah pragmatic retrofit order:

• Establish landmarks pertama. pastikan there’s exactly one <main>, sebuah document <header>, <footer>, dan sebuah <nav> untuk primary menu. ini landmark elements melakukan paling berfungsi untuk both main-konten extraction dan accessibility.
• Convert self-berisi blocks untuk <article>. Blog posts, product cards, comments — anything itu dapat stand alone di sebuah feed.
• Convert genuine themed groups untuk <section> — tetapi hanya where there’s sebuah nyata heading. jika there isn’t one, leave ini sebuah <div>.
• Move sidebars dan related-konten boxes ke <aside>.
• Fix fake tautan dan fake buttons. sebuah styled <div> dengan sebuah click handler seharusnya become sebuah <a href> (jika ini navigates) atau sebuah <button> (jika ini acts pada halaman) — ini adalah biasanya highest-nilai single fix untuk keyboard dan screen reader pengguna.
• Convert table-like grids dari <div>s untuk nyata <table>s where konten adalah genuinely tabular, dengan <caption> dan <th> untuk header cells.
• Don’t di atas-convert. sebuah <div> digunakan purely sebagai sebuah styling/layout hook adalah correct. Not everything perlu sebuah semantic element; forcing one adalah -nya own mistake.
• Verify, don’t assume. periksa accessibility tree di Anda browser’s DevTools — ini exposes landmark roles Anda markup produces, which adalah yang sama structure machines read.

How ini fits ke HTML SEO hub

ini artikel adalah one deep dive di bawah parent HTML SEO hub, which covers wider pertanyaan dari how mesin pencari parse dan gunakan Anda HTML — heading hierarchy, HTML validity, dan how forgiving parsers handle messy markup. I’ve deliberately dipertahankan ini halaman scoped untuk semantic elements themselves dan left itu topics untuk hub dan -nya sibling artikel. Semantic HTML juga pairs directly dengan data terstruktur: markup gives Anda schema sebuah trustworthy foundation, dan two melakukan complementary jobs.

FAQs

melakukan semantic HTML help SEO atau adalah ini hanya untuk accessibility? Both — ini helps search mesin identify Anda main konten dan ini adalah essential untuk accessibility. tetapi ini adalah not sebuah peringkat factor.

melakukan menggunakan <article> tag meningkatkan rankings? No. Mueller: ini “does not have any particular effect in Google Search.” (terjemahan) “melakukan not memiliki apa pun particular effect di Google Search.”

What’s difference antara <article> dan <section>? <article> adalah self-berisi konten itu dapat stand alone di sebuah feed; <section> adalah sebuah themed grouping dengan -nya own heading. Neither adalah sebuah <div> replacement.

dapat I memiliki more daripada one <main> element pada sebuah halaman? No — one <main> per halaman.

melakukan Google memerlukan valid HTML untuk peringkat sebuah halaman? No — sebagian besar dari web isn’t valid HTML, dan Google “can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “dapat rarely depend pada semantic meanings hidden di HTML specification.”

adalah semantic HTML yang sama sebagai semantic SEO? No — one adalah markup, lainnya adalah topical/entity konten strategy.

seharusnya I gunakan <a> atau <button> untuk sebuah clickable element? Depends what ini melakukan. jika ini navigates untuk sebuah URL atau fragment, gunakan <a href>. jika ini performs sebuah tindakan pada saat ini halaman (submit, toggle, open sebuah modal), gunakan <button>. Don’t fake one dengan sebuah styled <div> dan sebuah click handler.

melakukan nesting <section> perubahan what heading tingkat I seharusnya gunakan? No. HTML5’s old document outline algorithm — which akan memiliki computed sebuah implicit heading peringkat dari sectioning nesting — adalah tidak pernah implemented oleh apa pun browser atau screen reader, dan saat ini spec doesn’t define outlines itu cara. gunakan explicit, correctly-ordered <h1>–<h6> regardless dari nesting depth.

melakukan correct semantic HTML atau data terstruktur guarantee sebuah rich hasil? No. Google’s own structured-data documentation says didukung markup doesn’t guarantee sebuah spesifik search presentation — eligibility untuk sebuah fitur adalah separate dari whether Anda markup adalah technically valid.

AI summary

sebuah condensed take pada Advanced versi:

• Semantic HTML = menggunakan elements untuk mereka intended meaning (<main>, <article>, <section>, <nav>, <header>, <aside>, <footer>) so markup says what konten adalah. CSS handles looks.
• Not sebuah peringkat factor. Mueller: “not a magical multiplier” (terjemahan) “not sebuah magical multiplier”; <article> element memiliki “no particular effect” (terjemahan) “no particular effect” di Google Search. gunakan ini untuk accessibility/clarity, not peringkat poin.
• ini helps main-konten extraction. Google’s centerpiece annotation separates main konten dari boilerplate via NLP regardless dari markup (Splitt), so ini berfungsi pada div soup too — tetapi semantic markup reduces guesswork. Splitt: “It does help us, but it’s not the only thing that we look for.” (terjemahan) “ini melakukan help us, tetapi ini adalah not satu-satunya thing itu kami cari.”
• Google doesn’t memerlukan valid HTML. Starter Guide: sebagian besar dari web isn’t valid, so Google “can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “dapat rarely depend pada semantic meanings hidden di HTML specification.”
• Bing frames ini more strongly. Fabrice Canel: semantic HTML5 gives “an advantage in SEO.” (terjemahan) “sebuah advantage di SEO.” Note gap honestly — Bing’s wording adalah stronger daripada Google’s; neither panggilan ini sebuah scored peringkat factor.
• Correct usage beats presence: one <main>; <article> = self-berisi; <section> = themed group dengan sebuah heading, not sebuah <div> substitute; <nav> = major navigation hanya; <aside> = tangential konten.
• Landmark elements map untuk spesifik implicit ARIA roles (<header>→banner, <nav>→navigation, <main>→main, <aside>→complementary, <footer>→contentinfo — hanya di document tingkat; nested inside sebuah bagian mereka’re not landmarks). <section> adalah hanya sebuah landmark (region) jika ini memiliki sebuah accessible name; <article> isn’t sebuah landmark di semua.
• ** document outline algorithm myth:** nesting sebuah <section> melakukan not give -nya heading sebuah implicit lower peringkat. itu algorithm adalah tidak pernah implemented oleh apa pun browser atau screen reader dan WHATWG spec no longer defines outlines itu cara — write explicit <h1>–<h6> tingkat.
• Beyond landmarks: gunakan <a href> untuk navigation vs. <button> untuk pada-halaman tindakan; nyata <table>s (dengan <caption>/<th>) untuk tabular data, not <div> grids; purpose-based alt text pada images (alt="" untuk decorative); <details>/<summary> untuk native disclosure widgets — test browser/di rendering sebelum shipping.
• AI/LLM angle (industry opinion): LLM crawler sering don’t render JS, so clean semantic HTML adalah easier untuk parse daripada nested <div>s (Adams, Alderson).
• Don’t confuse ini dengan Semantic SEO (entity/topic strategy) — sama kata, berbeda thing. data terstruktur complements semantic HTML, ini doesn’t replace ini, dan neither guarantees sebuah rich hasil atau sebuah peringkat gain.

Official documentation

Primary-source documentation dan style guidance dari mesin pencari dan standards bodies.

Google

• SEO Starter Guide — “things you shouldn’t focus on” (terjemahan) “things Anda shouldn’t focus pada” bagian, including heading-order / semantic-meanings caveat.
• Google Developer Documentation Style Guide — HTML dan semantic tagging — “Use HTML elements for the purposes that they were designed for.” (terjemahan) “gunakan HTML elements untuk purposes itu mereka adalah designed untuk.”
• web.dev — Learn HTML: Semantic HTML — Google’s own learning module pada landmark elements dan mereka accessibility roles.

Standards / reference

• MDN — Semantics (glossary) — canonical definition dari semantic elements vs. non-semantic wrappers.
• WHATWG HTML Living Standard — bagian — <article>, <section>, <nav>, <aside>, <header>, <footer> definitions, konten models, dan saat ini (non-algorithmic) definition dari sebuah document’s outline.
• WHATWG HTML Living Standard — tautan — <a> element dan hyperlink semantics.
• WHATWG HTML Living Standard — button element — native interactive-control semantics.
• WHATWG HTML Living Standard — Tabular data — <table>, <caption>, header-cell dan data-relationship semantics.
• WHATWG HTML Living Standard — Images — <img> alternative-text requirements oleh purpose/context.
• WHATWG HTML Living Standard — detail dan summary elements — native disclosure widget.
• MDN — ARIA roles reference — implicit landmark role mappings untuk sectioning elements.
• W3C WAI — halaman Structure Tutorial — how native regions dan heading mendukung assistive-technology navigation.

Bing / Microsoft

• Kalicube — HTML5 Semantic Tags (Fabrice Canel) — source untuk Canel’s “advantage in SEO” (terjemahan) “advantage di SEO” position pada semantic HTML5.

Quotes dari source

pada—record statements dari Google dan Bing. Where source halaman mendukung ini, setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage.

Google — not sebuah peringkat factor (John Mueller)

• “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher.” (terjemahan) “Semantic HTML melakukan help untuk memahami sebuah halaman. However, ini adalah not sebuah magical multiplier untuk membuat sebuah situs web peringkat higher.” — John Mueller, Google, via mesin pencari Journal. Read coverage
• “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” (terjemahan) “Please gunakan semantic HTML. ini adalah not sebuah peringkat factor, tetapi ini dapat help kami sistem untuk memahami Anda konten better.” — John Mueller, Google, sama source. Read coverage

Google — <article> element specifically (John Mueller)

• “The <article> HTML element does not have any particular effect in Google Search.” (terjemahan) “ undefined HTML element melakukan not memiliki apa pun particular effect di Google Search.” — John Mueller, Google SEO Office Hours, via mesin pencari Journal. Read coverage
• “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.” (terjemahan) “Sometimes ada accessibility atau semantic alasan untuk gunakan spesifik jenis dari markup, so don’t hanya focus pada SEO.” — John Mueller, Google SEO Office Hours, sama source. Read coverage

Google — main-konten extraction (Martin Splitt)

• “We have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content.” (terjemahan) “kami memiliki sebuah thing called Centerpiece Annotation, misalnya, dan there’s sebuah few lainnya annotations itu kami memiliki where kami lihat semantic konten.” — Martin Splitt, Google, via mesin pencari Journal. Read coverage
• “We figure out what looks like boilerplate and then, that gets weighted differently as well.” (terjemahan) “kami figure out what looks like boilerplate dan lalu, itu gets weighted differently sebagai well.” — Martin Splitt, sama source. Read coverage
• “It does help us, but it’s not the only thing that we look for. Yes.” (terjemahan) “ini melakukan help us, tetapi ini adalah not satu-satunya thing itu kami cari. Yes.” — Martin Splitt, answering directly whether semantic HTML5 helps Google. Jump untuk quote

Google — doesn’t depend pada valid/spec semantics (SEO Starter Guide)

• “Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “Having Anda heading di semantic order adalah fantastic untuk screen readers, tetapi dari Google Search perspective, ini doesn’t penting jika Anda’re menggunakan them out dari order. web di umum adalah not valid HTML, so Google Search dapat rarely depend pada semantic meanings hidden di HTML specification.” — Google SEO Starter Guide. Jump untuk quote

Google — gunakan elements untuk mereka purpose (Style Guide)

• “Use HTML elements for the purposes that they were designed for.” (terjemahan) “gunakan HTML elements untuk purposes itu mereka adalah designed untuk.” — Google Developer Documentation Style Guide. Read source

Bing / Microsoft (Fabrice Canel)

• Fabrice Canel dari Microsoft Bing memiliki said itu halaman dengan correctly implemented semantic HTML5 memiliki sebuah advantage di SEO di atas itu itu don’t — Bing’s framing adalah stronger daripada Google’s “helps understanding,” (terjemahan) “helps understanding,” though ini masih isn’t described sebagai sebuah scored peringkat factor. Paraphrased, not quoted verbatim: ini adalah reached via sebuah secondary citation (Kalicube), not sebuah fetched Bing primary source — confirm exact wording terhadap original sebelum treating ini sebagai sebuah direct quote. Read source

Which element melakukan ini block perlu?

artikel-vs-bagian-vs-div pertanyaan (dan rest dari landmark choices) adalah sebuah genuine branch, not sebuah style preference. jawaban honestly di setiap langkah — test adalah selalu “what does this content actually do,” (terjemahan) “what melakukan ini konten actually melakukan,” not “what looks more modern.” (terjemahan) “what looks more modern.”

What not untuk melakukan

ini adalah actual mistakes myths above poin di — setiap dengan why ini adalah wrong dan what untuk melakukan instead.

• Wrapping konten di <article> expecting sebuah peringkat boost. Why ini adalah wrong: Mueller memiliki said element “does not have any particular effect in Google Search.” (terjemahan) “melakukan not memiliki apa pun particular effect di Google Search.” What untuk melakukan instead: gunakan <article> when konten adalah genuinely self-berisi (dapat stand alone di sebuah feed), untuk accessibility dan clarity — not sebagai sebuah SEO lever.

• Treating semantic HTML umumnya sebagai sebuah scored peringkat factor. Why ini adalah wrong: ini adalah “not a magical multiplier” (terjemahan) “not sebuah magical multiplier” dan there’s no scored signal untuk chase. What untuk melakukan instead: budget berfungsi sebagai sebuah understanding/accessibility investment dengan sebuah nyata (jika unmeasurable-sebagai-peringkat) payoff, not sebuah rankings project dengan sebuah expected lift.

• Obsessing di atas perfect heading order atau strict validity untuk Google’s sake. Why ini adalah wrong: Google’s own Starter Guide says “the web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (terjemahan) “ web di umum adalah not valid HTML, so Google Search dapat rarely depend pada semantic meanings hidden di HTML specification.” What untuk melakukan instead: fix heading order dan validity untuk screen readers dan pengguna — itu’s where ini actually penting — not because Google adalah scoring ini.

• menggunakan <section> sebagai sebuah <div> replacement because ini “feels more modern.” (terjemahan) “feels more modern.” Why ini adalah wrong: <section> without sebuah heading isn’t sebuah themed grouping, ini adalah decoration — ini adalah single sebagian besar umum misuse dari element. What untuk melakukan instead: jika block doesn’t membuat sense dengan -nya own heading, gunakan <div>.

• Confusing Semantic HTML dengan Semantic SEO. Why ini adalah wrong: one adalah markup structure, lainnya adalah topical/entity konten strategy — conflating them berarti optimizing wrong thing untuk goal Anda actually memiliki. What untuk melakukan instead: pertahankan two separate; ini artikel adalah hanya tentang elements.

• Skipping semantic HTML because data terstruktur sudah exists. Why ini adalah wrong: JSON-LD doesn’t fix div soup, dan data terstruktur isn’t sebuah substitute untuk markup structure. What untuk melakukan instead: gunakan both — data terstruktur sits pada top dari sebuah semantic foundation, ini doesn’t replace ini. Neither one guarantees sebuah rich hasil, either — itu’s sebuah separate eligibility pertanyaan dari markup validity.

• Nesting <section> elements untuk membuat heading “act like” (terjemahan) “act like” sebuah lower tingkat. Why ini adalah wrong: ini relies pada HTML5’s old document outline algorithm, which no browser atau screen reader ever implemented dan which saat ini WHATWG spec no longer defines itu cara. What untuk melakukan instead: write explicit, correctly-ordered <h1>–<h6> tingkat — don’t let nesting depth stand di untuk heading peringkat Anda actually berarti.

• menggunakan sebuah <div> dengan sebuah click handler alih-alih <a href> atau <button>. Why ini adalah wrong: Anda lose native keyboard activation dan correct accessible role unless Anda manually rebuild both dengan role, tabindex, dan key handlers. What untuk melakukan instead: gunakan <a href> when tindakan navigates somewhere, <button> when ini melakukan something pada saat ini halaman — dan get native perilaku untuk free.

Landmark elements di sebuah glance

seven elements ini artikel covers, what setiap adalah actually untuk, dan misuse pattern untuk hindari.

Quick aturan dari thumb: jika sebuah block dapat syndicate pada -nya own, ini adalah <article>; jika ini perlu sebuah heading untuk membuat sense, ini adalah <section>; jika ini adalah neither, ini adalah sebuah <div>.

Beyond landmarks: interactive dan data elements

Prompts untuk retrofitting HTML

Ready-untuk-copy prompts untuk spesifik task ini artikel covers: finding div soup dan converting ini untuk correct semantic markup. Paste Anda halaman’s HTML (view-source, not rendered DOM) ke sebuah AI assistant dengan one dari ini.

Flag div soup dan suggest replacements

Here is the HTML for one of my pages. Identify every <div> or <span> that is standing
in for a semantic landmark, and suggest the correct replacement element from this list:
header, nav, main, article, section, aside, footer. For each suggestion, explain which
test it passes (e.g. "this could stand alone in a feed, so it's an <article>" or "this
has its own heading and one theme, so it's a <section>"). Flag any block that should
stay a <div> because it's purely a styling/layout hook.

[paste HTML here]

periksa untuk landmark structural errors

Review this page's HTML for these specific structural mistakes: more than one <main>
element, a <main> nested inside <article>/<aside>/<header>/<footer>/<nav>, a <nav>
wrapping something that isn't major navigation, or a <section> with no heading. List
each problem found with the line/snippet and the fix.

[paste HTML here]

Prioritize sebuah retrofit order

Given this page's HTML, tell me which landmark to fix first for the biggest
accessibility and main-content-extraction benefit: establishing <main>/<header>/
<footer>/<nav>, converting self-contained blocks to <article>, converting themed
groups to <section>, or moving sidebars to <aside>. Order the fixes and say what
"done" looks like for each.

[paste HTML here]

Landmarks match Anda intended structure

Test untuk run: Open Anda browser’s DevTools accessibility tree (Chrome/Edge: DevTools → Elements → Accessibility pane) pada retrofitted halaman. Expected hasil: landmark roles listed (banner, navigation, main, complementary, contentinfo) match semantic elements Anda actually wrote — one main/“main” (terjemahan) “main” role, one banner, etc. Failure interpretation: sebuah missing atau duplicated landmark role berarti markup didn’t produce structure Anda intended (e.g. sebuah kedua <main>, atau sebuah <div> itu seharusnya memiliki telah converted). Monitoring window: Immediate — periksa right setelah deploying retrofit. Rollback trigger: More daripada one main/“main” (terjemahan) “main” landmark, atau sebuah landmark nested where ini shouldn’t menjadi (e.g. main inside article), berarti undo dan re-periksa markup.

Exactly one <main> per halaman

Test untuk run: grep -o "<main" page.html | wc -l terhadap rendered HTML (atau view-source), atau search untuk <main di DevTools’ Elements panel. Expected hasil: Exactly one match. Failure interpretation: Zero matches berarti no primary-konten landmark adalah set; more daripada one berarti “single clearest signal” (terjemahan) “single clearest signal” tentang main konten adalah now ambiguous. Monitoring window: Immediate, di deploy time. Rollback trigger: apa pun count lainnya daripada exactly one.

Non-rendering crawler masih see structure

Test untuk run: Fetch halaman dengan sebuah plain HTTP client (curl atau “view page source” (terjemahan) “view halaman source”, not rendered DOM) dan confirm semantic elements adalah present di raw respons, not injected later oleh client-side JavaScript. Expected hasil: <header>, <nav>, <main>, <article>/<section>, <aside>, dan <footer> semua appear di initial HTML payload. Failure interpretation: jika semantic tags hanya appear setelah JS execution, crawler itu don’t render JavaScript (per AI/LLM-crawler poin above) tidak pernah see structure di semua. Monitoring window: Immediate — re-periksa apa pun time templating atau sebuah JS framework perubahan how halaman renders. Rollback trigger: Semantic landmarks present di rendered DOM tetapi absent dari raw HTML respons.

heading tingkat adalah explicit, not inherited dari nesting

Test untuk run: di Anda browser’s DevTools accessibility tree (atau sebuah outline-memeriksa extension), list heading tingkat di document order dan compare them untuk actual <h1>–<h6> tags di source, regardless dari how deeply setiap heading sits inside nested <section>/<article> elements. Expected hasil: reported heading tingkat untuk setiap heading matches -nya literal tag (sebuah <h2> reports sebagai tingkat 2 no penting how banyak bagian ini adalah nested inside) — tidak ada implicit demotion dari nesting. Failure interpretation: jika Anda template atau sebuah component library adalah relying pada <section> nesting untuk “automatically” (terjemahan) “automatically” lower sebuah heading’s peringkat, itu assumption doesn’t hold — old document outline algorithm adalah tidak pernah implemented dan saat ini spec doesn’t compute outlines itu cara. Fix actual heading tags. Monitoring window: Immediate, dan apa pun time sebuah baru template atau component pattern introduces nested bagian. Rollback trigger: sebuah heading’s rendered/announced tingkat doesn’t match -nya literal <h1>–<h6> tag.

Fake tautan dan fake buttons adalah keyboard-accessible

Test untuk run: Tab melalui halaman menggunakan hanya keyboard dan try untuk activate setiap clickable element dengan Enter/Space; separately, periksa accessibility tree untuk role setiap clickable element reports. Expected hasil: Elements itu navigate report link (native <a href>); elements itu act pada halaman report button (native <button>) dan both adalah reachable dan activatable oleh keyboard without extra role/tabindex/key-handler code. Failure interpretation: sebuah <div> atau <span> dengan sebuah click handler itu isn’t keyboard-reachable, atau itu reports sebuah generic role alih-alih link/button, berarti ini perlu untuk menjadi converted untuk native element alih-alih patched dengan ARIA. Monitoring window: Immediate — re-periksa setelah apa pun component-library atau design-sistem perubahan untuk interactive elements. Rollback trigger: apa pun clickable control itu dapat’t menjadi reached atau activated oleh keyboard alone.

Test yourself: Semantic HTML

Five quick pertanyaan pada semantic HTML dan what ini melakukan (dan doesn’t) melakukan untuk SEO. Pick sebuah jawaban untuk setiap, lalu periksa.

Log perubahan