Semantic HTML cho SEO

Tóm tắt — Semantic HTML có nghĩ là sử dụng tags đó mô tả Điều gì nội dung là — <article>, <nav>, <main>, <header> — thay vì wrapping mọi thứ trong đơn giản <div>s. nó helps các công cụ tìm kiếm và screen readers understand của bạn trang, nhưng nó là không xếp hạng factor. sử dụng <article> sẽ không làm bạn xếp hạng cao hơn. giống nhau rule áp dụng past landmarks cũng: <a href> cho links, <button> cho actions, <table> cho tabular dữ liệu, thực alt text on images. sử dụng right tag cho job và bạn’re phần lớn của way ở đó.

Điều gì semantic HTML là

mỗi part của trang web là được xây dựng từ HTML elements. Semantic HTML chỉ có nghĩ là picking element đó matches Điều gì nội dung thực ra là, thay vì sử dụng generic wrapper cho mọi thứ.

So sánh những điều này hai versions của giống nhau trang 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>

Cả hai có thể look giống hệt on screen — CSS xử lý styling. khác biệt là đó thứ hai version tells machine ( công cụ tìm kiếm, screen reader, AI crawler) mà part là navigation, mà là main nội dung, và mà là sidebar. đầu tiên version làm mọi người guess.

elements bạn’ll thực ra sử dụng

• <header> — introductory nội dung tại top của trang (hoặc top của section).
• <nav> — block của navigation links.
• <main> — chính, unique nội dung của trang. Một theo trang.
• <article> — self-contained piece đó có thể stand on của nó own ( blog post, sản phẩm card, comment).
• <section> — thematic grouping của nội dung đó có của nó own heading.
• <aside> — nội dung đó tangential để main nội dung ( sidebar, callout).
• <footer> — closing nội dung (copyright, phụ links).

Đó giống nhau “use the right tag” (bản dịch) «dùng đó right tag» ý tưởng áp dụng dưới đó trang-layout cấp độ cũng: <a href> cho links, <button> cho on-trang actions, <table> cho thực tế tabular dữ liệu, và purpose-based alt text on images. Fake links được xây dựng từ styled <div>s là đó single hầu hết phổ biến accessibility miss — see đó Advanced tab cho đó đầy đủ list.

điều phần lớn mọi người nhận sai

Wrapping nội dung của bạn trong <article> không boost của bạn thứ hạng. Google John Mueller có đã nói đó <article> element có “no particular effect” (bản dịch) «không particular effect» trong Google Tìm kiếm, và đó semantic HTML là “not a magical multiplier.” (bản dịch) «không một magical multiplier.» Semantic HTML helps các công cụ tìm kiếm understand trang của bạn — điều này chỉ không một lever bạn pull để xếp hạng cao hơn.

Đó giá trị là real, đây là chỉ không “ranking points.” (bản dịch) «xếp hạng points.» Sạch semantic markup làm điều này easier cho các công cụ tìm kiếm để tell của bạn main nội dung apart từ đó boilerplate (menus, footers, quảng cáo), điều này làm trang của bạn hoạt động properly cho mọi người dùng screen readers, và đây là easier cho AI tools để đọc. Những là all good reasons để làm điều này — none of them là “it’s a ranking factor.” (bản dịch) «đây là một xếp hạng factor.»

Một hơn trap: Semantic HTML không phải đó giống nhau as “Semantic SEO.” (bản dịch) «Semantic SEO.» Semantic HTML là về markup structure. Semantic SEO là về topics và entities trong nội dung của bạn. Giống nhau word, totally khác nhau điều.

Muốn đầy đủ picture — Điều gì mỗi element các tín hiệu, Điều gì Google và Bing thực ra chẳng hạn, Cách nó fits main-nội dung extraction, và retrofit checklist? Chuyển để Nâng cao tab.

TL;DR — Semantic HTML dùng elements cho của họ dự kiến structural meaning (<main>, <article>, <section>, <nav>, <header>, <aside>) so markup communicates điều gì nội dung là, không cách điều này looks. Điều này là không phải là yếu tố xếp hạng — Mueller: “not a magical multiplier,” (bản dịch) «không một magical multiplier,» và <article> có “no particular effect.” (bản dịch) «không particular effect.» Điều gì điều này làm là reduce ambiguity: Google centerpiece chú thích separates main nội dung từ boilerplate qua NLP liệu hoặc không của bạn markup là semantic, nhưng sạch semantics làm đó job hơn reliable. Bing Fabrice Canel frames điều này hơn strongly (“an advantage in SEO” (bản dịch) «an advantage trong SEO») — I note đó khoảng trống honestly thay vì harmonizing điều này away. Google own Starter Hướng dẫn says hầu hết of đó web không hợp lệ HTML, so điều này rarely phụ thuộc vào spec semantics. Correct usage beats presence: một <main>, <article> cho self-contained nội dung, <section> cho một themed group với một heading — không một <div> substitute. Đó giống nhau kiểm thử extends để <a href> so với. <button> (navigate so với. act), real <table>s cho tabular dữ liệu, purpose-based image alt text, và <details>/<summary> cho disclosure widgets — và không rely on <section> nesting để imply một heading cấp độ; đó “document outline algorithm” (bản dịch) «document outline algorithm» đã là không bao giờ implemented và đó spec không lâu hơn defines outlines đó way. không confuse semantic HTML với Semantic SEO.

Điều gì semantic HTML thực ra là

Semantic HTML là đó practice of chọn HTML elements cho đó structural meaning they đã là designed để convey, thay vì reaching cho <div> và <span> cho mọi thứ. <article>, <section>, <nav>, <header>, <main>, <aside>, và <footer> mỗi declare một role. Đó markup mô tả điều gì một chunk of đó trang là; CSS decides cách điều này looks. Google own nhà phát triển style hướng dẫn diễn đạt đó rule as đơn giản as điều này nhận: “Use HTML elements for the purposes that they were designed for.” (bản dịch) «Dùng HTML elements cho đó purposes đó they đã là designed cho.»

Một điều đó trips mọi người lên: class name không tạo semantics. Naming <div> class="article" hoặc class="main-nav" không cho nó <article> element nội dung model hoặc <nav> element implicit navigation role — nó vẫn generic <div> as far as trình duyệt, screen reader, hoặc crawler là concerned. Semantics trực tiếp trong element bạn chọn, không trong Cách bạn style hoặc label nó.

Này bài viết là về đó semantic elements cụ thể. Đó rộng hơn “how Google parses your HTML, heading hierarchy, validity” (bản dịch) «cách Google parses của bạn HTML, heading hierarchy, validity» picture belongs để đó HTML SEO hub này trang sits dưới — I’ll cross-reference điều này thay vì re-litigate điều này ở đây.

Làm semantic HTML thực ra help SEO?

Ngắn câu trả lời: nó helps understanding, nó không phải xếp hạng factor, và hai engines frame nó little differently. Ở đây honest version.

Điều gì Google nói

Google line, repeated by John Mueller, là đó semantic HTML là worth đang làm nhưng không một xếp hạng lever. As Search Engine Journal reported, Mueller đã nói “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher,” (bản dịch) «Semantic HTML làm help để understand một trang. Tuy nhiên, đây là không một magical multiplier cho đang làm một website xếp hạng cao hơn,» và riêng: “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” (bản dịch) «Please dùng semantic HTML. đây là không phải là yếu tố xếp hạng, nhưng điều này có thể help của chúng ta các hệ thống để understand nội dung của bạn tốt hơn.»

On đó <article> element cụ thể — đó một mọi người asks về — Mueller đã là blunt trong an Office Hours session: đó <article> element “does not have any particular effect in Google Search,” (bản dịch) «không có bất kỳ particular effect trong Google Search,» và he đã thêm đó reason để dùng điều này anyway: “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.” (bản dịch) «Sometimes có accessibility hoặc semantic reasons để dùng một cụ thể kind of markup, so không chỉ focus on SEO.»

Google cũng explicitly says điều này không phụ thuộc on perfect semantics. Của nó SEO Starter Hướng dẫn notes đó “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.” (bản dịch) «Đặt các heading theo thứ tự ngữ nghĩa rất tốt cho trình đọc màn hình, nhưng từ Google Search góc nhìn, không quan trọng nếu bạn dùng chúng sai thứ tự. Web nói chung không phải HTML hợp lệ, vì vậy Google Search hiếm khi có thể dựa vào những ý nghĩa ngữ nghĩa ẩn trong đặc tả HTML.» đó là an quan trọng nuance, không một contradiction: semantic HTML helps tại đó margins, điều này không require perfection, và điều này không một scored tín hiệu.

Cách nó fits Google finding của bạn main nội dung

Ở đây đó mechanism đó làm semantic HTML hữu ích mặc dù điều này không một xếp hạng factor. Google có để tách biệt đó main nội dung of một trang từ đó boilerplate (nav, header, footer, sidebars, quảng cáo) trước điều này có thể decide điều gì một trang là về. Martin Splitt có 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.” (bản dịch) «We có một điều called đó Centerpiece Chú thích, chẳng hạn, và có vài other các chú thích đó we có nơi we xem đó semantic nội dung.» Đó way Google figures out đó topic là natural language processing over đó nội dung, không đó 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.” (bản dịch) «Này looks như từ all đó natural language processing đó we đã làm on này entire text nội dung ở đây đó we đã nhận, điều này looks như này là primarily về topic MỘT, dog food.» Và điều này xuống-weights đó rest: “We figure out what looks like boilerplate and then, that gets weighted differently as well.” (bản dịch) «We hình out điều gì looks như boilerplate và thì, đó nhận weighted differently as well.»

Đó key point: đó extraction hoạt động liệu hoặc không của bạn markup là semantic. Google có thể untangle một trang được xây dựng hoàn toàn từ <div>s. Nhưng asked trực tiếp liệu semantic HTML5 helps, Splitt câu trả lời đã là “It does help us, but it’s not the only thing that we look for. Yes.” (bản dịch) «Điều này làm help us, nhưng đây là không điều duy nhất đó we tìm. Có.» So semantic HTML không score bạn cao hơn — điều này reduces đó guesswork trong một step Google đã làm, mà là chính xác vì sao đây là một confidence và efficiency tín hiệu rather hơn một xếp hạng một. Để là precise về điều gì điều này không làm: correct semantic markup không bảo đảm bất kỳ cụ thể tìm kiếm presentation either — đây là một tách biệt layer từ đó eligibility rules đó govern rich kết quả (hơn on đó dưới).

Điều gì Bing nói (và Vì sao nó differs)

Bing frames này hơn strongly hơn Google, và I’m going để leave đó khác biệt intact thay vì paper over điều này. Microsoft Fabrice Canel có đã nói đó các trang với correctly implemented semantic HTML5 có “an advantage in SEO” (bản dịch) «an advantage trong SEO» over những đó không. đó là một stronger claim hơn Google “helps us understand” (bản dịch) «helps us understand» — Bing ties semantic HTML5 trực tiếp để an SEO advantage. Cả hai engines converge on “it helps mechanically,” (bản dịch) «điều này helps mechanically,» nhưng they không dùng đó giống nhau words, và bạn nên know đó khi bạn đọc competing hướng dẫn. Neither, để là clear, mô tả điều này as một scored xếp hạng factor đó way links hoặc relevance là.

cốt lõi semantic elements và Cách sử dụng them correctly

Presence không phải point — đúng usage là. phần lớn phổ biến thất bại chế độ là sprinkling semantic tags khoảng như decoration, hoặc swapping <div> cho <section> với không thought về Điều gì mỗi element có nghĩ là.

<header> và <footer>

<header> holds introductory nội dung và <footer> holds closing nội dung — và cả hai là contextual. Tại document cấp độ, <header> là của bạn trang web banner và <footer> là của bạn trang web footer. nhưng họ có thể cũng nest bên trong <article> hoặc <section> để mark đó block own intro và outro ( bài viết tiêu đề/byline trong <header>, của nó tags trong <footer>). Bạn có thể có nhiều của them; chỉ hãy đảm bảo mỗi một wraps intro hoặc closing nội dung cho của nó context, không arbitrary boxes.

<nav>

<nav> là cho major chặn của navigation links — của bạn chính menu, breadcrumb trail, hoặc trong-trang bảng của nội dung. nó không phải cho mỗi group của links on trang ( list của related posts trong thân phản hồi không cần để là <nav>). Wrapping mỗi link cluster trong <nav> dilutes tín hiệu; reserve nó cho genuine navigation.

<main>

<main> wraps đó trang chính, unique nội dung — đó part đó không repeated trên đó site. Đó rule đó trips mọi người lên: ở đó nên là chính xác một <main> theo trang, và điều này không nên là nested bên trong <article>, <aside>, <header>, <footer>, hoặc <nav>. đây là đó single clearest tín hiệu bạn có thể cho về “this is the content that matters here.” (bản dịch) «này là đó nội dung đó matters ở đây.»

<article> so với <section> ( một mọi người nhận sai)

Đây là phân biệt để nhận right:

• <article> là cho self-contained, independently distributable nội dung — điều gì đó sẽ vẫn làm hợp lý pulled out of đó trang và dropped vào một feed. MỘT blog post, một news story, một sản phẩm card, một forum post, một single người dùng comment. Nếu điều này có thể syndicate on của nó own, đây là an <article>.
• <section> là một thematic grouping of nội dung đó nên có của nó own heading. MỘT “Reviews” block, một “Specifications” (bản dịch) «Các đặc tả» block, một chapter. Đó kiểm thử: nếu đó nội dung không làm hợp lý với một heading, đây là probably không một <section> — và nếu bạn là chỉ dùng điều này để hang some CSS on, điều này nên là một <div>.

<section> là không một generic wrapper. Khi bạn cần một styling hook với không semantic meaning, dùng <div> — đó là chính xác điều gì đây là cho. Reaching cho <section> vì điều này “feels more modern” (bản dịch) «feels hơn modern» là đó single hầu hết phổ biến misuse.

<aside>

<aside> marks nội dung đó là tangential để đó xung quanh nội dung — một sidebar, một pull quote, một related-links box, một set of quảng cáo. Điều này các tín hiệu “this is related but not the main thread,” (bản dịch) «này là related nhưng không đó main chuỗi trao đổi,» mà là precisely đó boilerplate-so với-main-nội dung phân biệt Google là trying để draw anyway. không dùng điều này chỉ vì điều gì đó sits visually để đó side; dùng điều này khi đó nội dung là genuinely phụ.

Getting landmark vai trò right (và outline myth)

mỗi landmark element maps để cụ thể implicit ARIA role đó assistive tech đọc trực tiếp — Đây là giống nhau computed structure non-visual người dùng navigates by, và nó worth knowing thực tế mapping thay vì assuming:

Một piece của folklore worth retiring: nesting <section> làm không cho của nó headings implicit thấp hơn xếp hạng. Sớm HTML5 được định nghĩa document outline algorithm đó sẽ có computed heading effective cấp độ từ Cách deeply nó là nested bên trong sectioning elements — so nested <h1> có thể theoretically “act như” <h2>. Không trình duyệt hoặc screen reader bao giờ implemented đó algorithm, và WHATWG spec có since dropped nó trong favor của nhiều simpler definition: outline là chỉ all headings trong document, trong tree order. Ghi của bạn <h1>–<h6> levels explicitly và trong order bạn thực ra muốn đọc — nesting depth không làm đó hoạt động cho bạn.

Links so với. buttons — hành động-versus-navigation kiểm thử

điều này một không phải landmark element, nhưng nó phần lớn phổ biến semantic mistake on web: sử dụng styled <div> hoặc <span> (hoặc <button>) nơi <a href> belongs, hoặc vice versa. WHATWG spec là cụ thể — <a> với href thuộc tính là native hyperlink mechanism, và <button> element là labeled interactive control cho triggering hành động. kiểm thử là đơn giản: làm điều này take người dùng để điều gì đó ( new URL, new trang, fragment)? sử dụng <a href>. Làm nó làm điều gì đó on hiện tại trang (submit form, open modal, toggle setting)? sử dụng <button>. Styling một để trông giống khác không thay đổi Điều gì nó natively là — <div> với nhấp handler nhận neither native keyboard activation nor đúng accessible role trừ khi bạn rebuild tất cả đó yourself với role, tabindex, và mấu chốt handlers. chỉ sử dụng right element.

Các bảng là cho tabular dữ liệu, không layout

nếu nội dung genuinely có các hàng và các cột — so sánh bảng, pricing grid, dữ liệu đặt — sử dụng thực tế <table>, không grid của styled <div>s. WHATWG các bảng spec defines thực dữ liệu model: <caption> names bảng, và <th> header cells (với scope) establish hàng/cột relationships đó let assistive tech announce “price, $4 USD USD9 USD” thay vì chỉ wall của numbers. visually bảng-như grid được xây dựng từ <div>s không carry bất kỳ của đó mối quan hệ dữ liệu — nó looks right, nó không đọc right. không sử dụng <table> cho trang layout, either; đó older misuse điều này practice replaced.

Alt text phụ thuộc vào Điều gì image là cho

<img> cần alt thuộc tính, nhưng WHATWG spec requirements là purpose-phụ thuộc, không một-size-fits-all: sản phẩm photo cần mô tả của Điều gì shown; image đó purely decorative nên nhận alt="" (rỗng, không bị thiếu) so assistive tech skips nó thay vì announcing filename; image đó cũng link cần alt text describing link đích hoặc hành động, không chỉ picture. không default để từ khóa-stuffed alt text on mỗi image “cho SEO” — đó sai kiểm thử. right kiểm thử là: Điều gì làm screen reader người dùng cần để know đó họ’d nếu không miss?

Native disclosure widgets: <details> và <summary>

Cho “click to expand” (bản dịch) «nhấp để expand» nội dung — FAQs, spec sheets, spoiler text — đó <details>/<summary> pair là một native disclosure widget: <summary> là đó luôn-visible label, và đó nội dung bên trong <details> cho thấy hoặc hides dựa trên đó element open state, không có bất kỳ JavaScript. Điều này xuất hiện với được xây dựng-trong keyboard hỗ trợ và đó right accessible semantics cho free — reaching cho một custom <div>-plus-JavaScript accordion có nghĩa là re-implementing behavior đó trình duyệt đã cho bạn. Kiểm thử điều này trong của bạn thực tế đích các trình duyệt và screen readers trước shipping, though — kết xuất và accessibility-tree exposure cho <details>/<summary> có trong lịch sử varied by trình duyệt và assistive-tech combination, so không assume parity bạn haven’t checked.

phổ biến myths về semantic HTML và SEO

1. “Wrapping content in <article> boosts rankings.” (bản dịch) «Wrapping nội dung trong thẻ bài viết boosts thứ hạng.» Không — Mueller: đó <article> element “does not have any particular effect in Google Search.” (bản dịch) «không có bất kỳ particular effect trong Google Search.»
2. “Semantic HTML is a ranking factor.” (bản dịch) «Semantic HTML là một xếp hạng factor.» Không — “not a magical multiplier” (bản dịch) «không một magical multiplier» và “It’s not a ranking factor, but it can help our systems to understand your content better.” (bản dịch) «đây là không phải là yếu tố xếp hạng, nhưng điều này có thể help của chúng ta các hệ thống để understand nội dung của bạn tốt hơn.»
3. “Google requires valid/strict semantic HTML.” (bản dịch) «Google requires hợp lệ/strict semantic HTML.» Không — theo đó Starter Hướng dẫn, hầu hết of đó web không hợp lệ HTML và Google “can rarely depend on semantic meanings hidden in the HTML specification.” (bản dịch) «hiếm khi có thể dựa vào những ý nghĩa ngữ nghĩa ẩn trong đặc tả HTML.»
4. “Heading order has to be perfect for SEO.” (bản dịch) «Heading order có để là perfect cho SEO.» Screen readers care; Google xếp hạng không (giống nhau Starter Hướng dẫn line). Đó deeper heading-hierarchy treatment belongs để đó HTML SEO hub — này là chỉ đó brief version.
5. “Semantic HTML and Semantic SEO are the same thing.” (bản dịch) «Semantic HTML và Semantic SEO là cùng một điều.» Không — một là markup structure, đó other là topical/entity nội dung strategy. Conflating them là vì sao so nhiều tìm kiếm kết quả cho “semantic” các truy vấn là về đó sai topic.
6. “Structured data makes semantic HTML unnecessary.” (bản dịch) «Dữ liệu có cấu trúc làm semantic HTML unnecessary.» Không — họ là complementary. Semantic HTML cho của bạn dữ liệu có cấu trúc một hơn trustworthy foundation; điều này không replace điều này, và JSON-LD không cách sửa div soup. Và neither một bảo đảm an outcome: Google own structured-dữ liệu intro là rõ ràng đó dùng supported markup không bảo đảm một rich kết quả — eligibility cho một cụ thể tìm kiếm feature là một tách biệt set of rules từ liệu của bạn markup (semantic HTML hoặc JSON-LD) là technically hợp lệ.
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.” (bản dịch) «Nesting một thẻ section cho của nó headings an implicit thấp hơn xếp hạng — bạn không cần để drop từ thẻ h1 để thẻ h2 bên trong một nested section.» Không — này là một leftover từ HTML5’s old document outline algorithm, mà sẽ có computed an implicit heading xếp hạng từ sectioning-element nesting. Không trình duyệt hoặc screen reader bao giờ implemented điều này, và đó WHATWG HTML spec không lâu hơn defines outline computation đó way — đó outline hôm nay là chỉ “all headings in the document, in tree order.” (bản dịch) «all headings trong đó document, trong tree order.» Dùng rõ ràng, correctly-ordered <h1>–<h6> regardless of cách deep của bạn <section>/<article> nesting goes; không rely on nesting để làm heading-cấp độ hoạt động cho bạn.

Semantic HTML so với. Semantic SEO — không confuse them

vì họ share word, những điều này nhận mixed lên constantly, và nó pollutes tìm kiếm kết quả cho cả hai:

• Semantic HTML = markup — mà elements bạn sử dụng để structure trang.
• Semantic SEO = nội dung strategy — building topical authority khoảng entities và related concepts ( kind của điều đó lives dưới AI Tìm kiếm và nội dung pillars, không ở đây).

Nếu bạn landed ở đây từ một “semantic SEO” (bản dịch) «semantic SEO» query expecting topic modeling, đó là một khác nhau bài viết. Này một là strictly về đó elements.

Semantic HTML và AI/LLM các crawler

Này là nơi semantic HTML là âm thầm getting hơn relevant, và I’ll flag điều này as ngành opinion thay vì an engine statement. Nhiều LLM các crawler và AI câu trả lời engines không render JavaScript — they parse đó HTML họ là phân phối. Sạch semantic markup là far easier cho them để hoạt động với hơn deeply nested <div> soup. As Barry Adams diễn đạt điều này, “It’s much simpler for ChatGPT to parse a few dozen semantic HTML tags rather than several hundred (or even thousand) nested <div> tags,” (bản dịch) «đây là nhiều simpler cho ChatGPT để parse vài dozen semantic HTML tags thay vì several hundred (hoặc ngay cả thousand) nested thẻ div tags,» và hơn broadly, “Semantic HTML markup on your webpages can help machine systems better understand your content and its value.” (bản dịch) «Semantic HTML markup on của bạn webpages có thể help machine các hệ thống tốt hơn understand nội dung của bạn và của nó giá trị.» Jono Alderson làm đó giống nhau forward-looking case — đó một site là “an interface. An API. A dataset,” (bản dịch) «an interface. An API. MỘT dataset,» không chỉ một visual experience — và his một-liner là đó toàn bộ argument cho correct usage: “If everything is a <div> or a <span>, then nothing is meaningful.” (bản dịch) «Nếu mọi thứ là một thẻ div hoặc một thẻ span, thì không có gì là có ý nghĩa.» Treat toàn bộ điều này as một good directional reason để giữ của bạn markup sạch, không as một promise từ Google hoặc Bing.

Cách audit và retrofit existing các trang

phần lớn thực các trang là đã div soup, và bạn không rebuild them overnight. thực dụng retrofit order:

• Establish landmarks đầu tiên. hãy đảm bảo có chính xác một <main>, document <header>, <footer>, và <nav> cho chính menu. những điều này landmark elements làm phần lớn hoạt động cho cả hai main-nội dung extraction và accessibility.
• Convert self-contained chặn để <article>. Blog posts, sản phẩm cards, comments — bất cứ điều gì đó có thể stand alone trong feed.
• Convert genuine themed groups để <section> — nhưng chỉ nơi có thực heading. nếu ở đó không phải một, leave nó <div>.
• Move sidebars và related-nội dung boxes vào <aside>.
• khắc phục fake links và fake buttons. styled <div> với nhấp handler nên become <a href> (nếu nó navigates) hoặc <button> (nếu nó acts on trang) — Đây là thường highest-giá trị single khắc phục cho keyboard và screen reader người dùng.
• Convert bảng-như grids của <div>s để thực <table>s nơi nội dung là genuinely tabular, với <caption> và <th> cho header cells.
• không over-convert. <div> được sử dụng purely as styling/layout hook là đúng. không mọi thứ cần semantic element; forcing một là của nó own mistake.
• Verify, không assume. kiểm tra accessibility tree trong của bạn trình duyệt DevTools — nó exposes landmark vai trò của bạn markup produces, mà là giống nhau structure machines đọc.

Cách điều này fits vào HTML SEO hub

điều này bài viết là một deep dive dưới parent HTML SEO hub, mà covers wider câu hỏi của Cách các công cụ tìm kiếm parse và sử dụng của bạn HTML — heading hierarchy, HTML validity, và Cách forgiving parsers xử lý messy markup. I’ve có chủ ý kept điều này trang scoped để semantic elements themselves và left những điều đó topics để hub và của nó sibling các bài viết. Semantic HTML cũng pairs trực tiếp với dữ liệu có cấu trúc: markup cho của bạn schema trustworthy foundation, và hai làm complementary jobs.

FAQs

Làm semantic HTML help SEO hoặc là nó chỉ cho accessibility? Cả hai — nó helps tìm kiếm engines identify của bạn main nội dung và nó essential cho accessibility. nhưng nó không phải xếp hạng factor.

Làm dùng đó <article> tag improve thứ hạng? Không. Mueller: điều này “does not have any particular effect in Google Search.” (bản dịch) «không có bất kỳ particular effect trong Google Search.»

Điều gì khác biệt giữa <article> và <section>? <article> là self-contained nội dung đó có thể stand alone trong feed; <section> là themed grouping với của nó own heading. Neither là <div> replacement.

có thể I có nhiều hơn một <main> element trên một trang? Không — một <main> theo trang.

Làm Google require hợp lệ HTML để xếp hạng một trang? Không — hầu hết of đó web không hợp lệ HTML, và Google “can rarely depend on semantic meanings hidden in the HTML specification.” (bản dịch) «hiếm khi có thể dựa vào những ý nghĩa ngữ nghĩa ẩn trong đặc tả HTML.»

là semantic HTML giống nhau as semantic SEO? Không — một là markup, khác là topical/entity nội dung strategy.

nên I sử dụng <a> hoặc <button> cho clickable element? Phụ thuộc Điều gì nó làm. nếu nó navigates để URL hoặc fragment, sử dụng <a href>. nếu nó thực hiện hành động on hiện tại trang (submit, toggle, open modal), sử dụng <button>. không fake một với styled <div> và nhấp handler.

Làm nesting <section> thay đổi Điều gì heading cấp độ I nên sử dụng? Không. HTML5’s old document outline algorithm — mà sẽ có computed implicit heading xếp hạng từ sectioning nesting — là không bao giờ implemented by bất kỳ trình duyệt hoặc screen reader, và hiện tại spec không define outlines đó way. sử dụng rõ ràng, correctly-ordered <h1>–<h6> regardless của nesting depth.

Làm đúng semantic HTML hoặc dữ liệu có cấu trúc bảo đảm rich kết quả? Không. Google own structured-dữ liệu tài liệu nói supported markup không bảo đảm cụ thể tìm kiếm presentation — eligibility cho feature là tách biệt từ liệu của bạn markup là technically hợp lệ.

AI summary

condensed take on Nâng cao version:

• Semantic HTML = dùng elements cho của họ dự kiến meaning (<main>, <article>, <section>, <nav>, <header>, <aside>, <footer>) so markup says điều gì nội dung là. CSS xử lý looks.
• Không phải là yếu tố xếp hạng. Mueller: “not a magical multiplier” (bản dịch) «không một magical multiplier»; đó <article> element có “no particular effect” (bản dịch) «không particular effect» trong Google Search. Dùng điều này cho accessibility/clarity, không xếp hạng points.
• Điều này helps main-nội dung extraction. Google centerpiece chú thích separates main nội dung từ boilerplate qua NLP regardless of markup (Splitt), so điều này hoạt động on div soup cũng — nhưng semantic markup reduces đó guesswork. Splitt: “It does help us, but it’s not the only thing that we look for.” (bản dịch) «Điều này làm help us, nhưng đây là không điều duy nhất đó we tìm.»
• Google không require hợp lệ HTML. Starter Hướng dẫn: hầu hết of đó web không hợp lệ, so Google “can rarely depend on semantic meanings hidden in the HTML specification.” (bản dịch) «hiếm khi có thể dựa vào những ý nghĩa ngữ nghĩa ẩn trong đặc tả HTML.»
• Bing frames điều này hơn strongly. Fabrice Canel: semantic HTML5 cho “an advantage in SEO.” (bản dịch) «an advantage trong SEO.» Note đó khoảng trống honestly — Bing wording là stronger hơn Google; neither calls điều này một scored xếp hạng factor.
• Correct usage beats presence: một <main>; <article> = self-contained; <section> = themed group với một heading, không một <div> substitute; <nav> = major navigation chỉ; <aside> = tangential nội dung.
• Landmark elements map để cụ thể implicit ARIA vai trò (<header>→banner, <nav>→navigation, <main>→main, <aside>→complementary, <footer>→contentinfo — chỉ tại document cấp độ; nested bên trong một section họ là không landmarks). <section> là chỉ một landmark (region) nếu điều này có an accessible name; <article> không một landmark tại all.
• Đó document outline algorithm myth: nesting một <section> không cho của nó headings an implicit thấp hơn xếp hạng. Đó algorithm đã là không bao giờ implemented by bất kỳ trình duyệt hoặc screen reader và đó WHATWG spec không lâu hơn defines outlines đó way — ghi rõ ràng <h1>–<h6> levels.
• Beyond landmarks: dùng <a href> cho navigation so với. <button> cho on-trang actions; real <table>s (với <caption>/<th>) cho tabular dữ liệu, không <div> grids; purpose-based alt text on images (alt="" cho decorative); <details>/<summary> cho native disclosure widgets — kiểm thử trình duyệt/TẠI kết xuất trước shipping.
• AI/LLM angle (ngành opinion): LLM các crawler thường không render JS, so sạch semantic HTML là easier để parse hơn nested <div>s (Adams, Alderson).
• không confuse điều này với Semantic SEO (entity/topic strategy) — giống nhau word, khác nhau điều. Dữ liệu có cấu trúc complements semantic HTML, điều này không replace điều này, và neither bảo đảm một rich kết quả hoặc một xếp hạng gain.

Tài liệu chính thức

Chính-nguồn tài liệu và style hướng dẫn từ các công cụ tìm kiếm và các tiêu chuẩn các thân phản hồi.

Google

• SEO Starter Hướng dẫn — đó “things you shouldn’t focus on” (bản dịch) «điều bạn không nên focus on» section, including đó heading-order / semantic-meanings caveat.
• Google Nhà phát triển Tài liệu Style Hướng dẫn — HTML và semantic tagging — “Use HTML elements for the purposes that they were designed for.” (bản dịch) «Dùng HTML elements cho đó purposes đó they đã là designed cho.»
• web.dev — Learn HTML: Semantic HTML — Google own learning module on landmark elements và của họ accessibility vai trò.

Các tiêu chuẩn / reference

• MDN — Semantics (glossary) — canonical definition của semantic elements so với. non-semantic wrappers.
• WHATWG HTML Living tiêu chuẩn — Sections — <article>, <section>, <nav>, <aside>, <header>, <footer> definitions, nội dung models, và hiện tại (non-algorithmic) definition của document outline.
• WHATWG HTML Living tiêu chuẩn — Links — <a> element và hyperlink semantics.
• WHATWG HTML Living tiêu chuẩn — button element — native interactive-control semantics.
• WHATWG HTML Living tiêu chuẩn — Tabular dữ liệu — <table>, <caption>, header-cell và dữ liệu-mối quan hệ semantics.
• WHATWG HTML Living tiêu chuẩn — Images — <img> alternative-text requirements by purpose/context.
• WHATWG HTML Living tiêu chuẩn — details và summary elements — native disclosure widget.
• MDN — ARIA vai trò reference — implicit landmark role mappings cho sectioning elements.
• W3C WAI — trang Structure Tutorial — Cách native regions và headings hỗ trợ assistive-technology navigation.

Bing / Microsoft

• Kalicube — HTML5 Semantic Tags (Fabrice Canel) — đó nguồn cho Canel “advantage in SEO” (bản dịch) «advantage trong SEO» position on semantic HTML5.

Quotes từ nguồn

On—record statements từ Google và Bing. nơi nguồn trang hỗ trợ nó, mỗi link là deep link đó jumps để quoted passage.

Google — không xếp hạng factor (John Mueller)

• “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher.” (bản dịch) «Semantic HTML làm help để understand một trang. Tuy nhiên, đây là không một magical multiplier cho đang làm một website xếp hạng cao hơn.» — John Mueller, Google, qua Search Engine Journal. Đọc bài đưa tin
• “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” (bản dịch) «Please dùng semantic HTML. đây là không phải là yếu tố xếp hạng, nhưng điều này có thể help của chúng ta các hệ thống để understand nội dung của bạn tốt hơn.» — John Mueller, Google, giống nhau nguồn. Đọc bài đưa tin

Google — <article> element cụ thể (John Mueller)

• “The <article> HTML element does not have any particular effect in Google Search.” (bản dịch) «Đó thẻ bài viết HTML element không có bất kỳ particular effect trong Google Search.» — John Mueller, Google SEO Office Hours, qua Search Engine Journal. Đọc bài đưa tin
• “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.” (bản dịch) «Sometimes có accessibility hoặc semantic reasons để dùng một cụ thể kind of markup, so không chỉ focus on SEO.» — John Mueller, Google SEO Office Hours, giống nhau nguồn. Đọc bài đưa tin

Google — main-nội dung 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.” (bản dịch) «We có một điều called đó Centerpiece Chú thích, chẳng hạn, và có vài other các chú thích đó we có nơi we xem đó semantic nội dung.» — Martin Splitt, Google, qua Search Engine Journal. Đọc bài đưa tin
• “We figure out what looks like boilerplate and then, that gets weighted differently as well.” (bản dịch) «We hình out điều gì looks như boilerplate và thì, đó nhận weighted differently as well.» — Martin Splitt, giống nhau nguồn. Đọc bài đưa tin
• “It does help us, but it’s not the only thing that we look for. Yes.” (bản dịch) «Điều này làm help us, nhưng đây là không điều duy nhất đó we tìm. Có.» — Martin Splitt, answering trực tiếp liệu semantic HTML5 helps Google. Nhảy đến trích dẫn

Google — không phụ thuộc on hợp lệ/spec semantics (SEO Starter Hướng dẫn)

• “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.” (bản dịch) «Đặt các heading theo thứ tự ngữ nghĩa rất tốt cho trình đọc màn hình, nhưng từ Google Search góc nhìn, không quan trọng nếu bạn dùng chúng sai thứ tự. Web nói chung không phải HTML hợp lệ, vì vậy Google Search hiếm khi có thể dựa vào những ý nghĩa ngữ nghĩa ẩn trong đặc tả HTML.» — Google SEO Starter Hướng dẫn. Nhảy đến trích dẫn

Google — sử dụng elements cho của họ purpose (Style Hướng dẫn)

• “Use HTML elements for the purposes that they were designed for.” (bản dịch) «Dùng HTML elements cho đó purposes đó they đã là designed cho.» — Google Nhà phát triển Tài liệu Style Hướng dẫn. Đọc đó nguồn

Bing / Microsoft (Fabrice Canel)

• Fabrice Canel of Microsoft Bing có đã nói đó các trang với correctly implemented semantic HTML5 có an advantage trong SEO over những đó không — Bing cách diễn đạt là stronger hơn Google “helps understanding,” (bản dịch) «helps understanding,» though điều này vẫn không described as một scored xếp hạng factor. Paraphrased, không quoted verbatim: này là reached qua một phụ citation (Kalicube), không một fetched Bing chính nguồn — xác nhận đó chính xác wording so với đó original trước treating điều này as một trực tiếp quote. Đọc đó nguồn

Mà element làm điều này block cần?

Đó bài viết-so với-section-so với-div câu hỏi (và đó rest of đó landmark choices) là một genuine branch, không một style preference. Câu trả lời honestly tại mỗi step — đó kiểm thử là luôn “what does this content actually do,” (bản dịch) «điều gì làm này nội dung thực ra làm,» không “what looks more modern.” (bản dịch) «điều gì looks hơn modern.»

Điều gì không để làm

những điều này là thực tế mistakes myths trên point tại — mỗi với Vì sao nó sai và Điều gì để làm thay vì.

• Wrapping nội dung trong <article> expecting một xếp hạng boost. Vì sao đây là sai: Mueller có đã nói đó element “does not have any particular effect in Google Search.” (bản dịch) «không có bất kỳ particular effect trong Google Search.» Điều cần làm thay vì: dùng <article> khi đó nội dung là genuinely self-contained (có thể stand alone trong một feed), cho accessibility và clarity — không as an SEO lever.

• Treating semantic HTML generally as một scored xếp hạng factor. Vì sao đây là sai: đây là “not a magical multiplier” (bản dịch) «không một magical multiplier» và có không scored tín hiệu để chase. Điều cần làm thay vì: budget đó hoạt động as an understanding/accessibility investment với một real (nếu unmeasurable-as-xếp hạng) payoff, không một thứ hạng project với an dự kiến lift.

• Obsessing over perfect heading order hoặc strict validity cho Google sake. Vì sao đây là sai: Google own Starter Hướng dẫn says “the web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” (bản dịch) «Web nói chung không phải HTML hợp lệ, vì vậy Google Search hiếm khi có thể dựa vào những ý nghĩa ngữ nghĩa ẩn trong đặc tả HTML.» Điều cần làm thay vì: cách sửa heading order và validity cho screen readers và người dùng — đó là nơi điều này thực ra matters — không vì Google là scoring điều này.

• Dùng <section> as một <div> replacement vì điều này “feels more modern.” (bản dịch) «feels hơn modern.» Vì sao đây là sai: <section> không có một heading không một themed grouping, đây là decoration — này là đó single hầu hết phổ biến misuse of đó element. Điều cần làm thay vì: nếu đó block không làm hợp lý với của nó own heading, dùng <div>.

• Confusing Semantic HTML với Semantic SEO. Vì sao nó sai: một là markup structure, khác là topical/entity nội dung strategy — conflating them có nghĩ là optimizing sai điều cho goal bạn thực ra có. Điều gì để làm thay vì: giữ hai tách biệt; điều này bài viết là chỉ về elements.

• Skipping semantic HTML vì dữ liệu có cấu trúc đã tồn tại. Vì sao nó sai: JSON-LD không khắc phục div soup, và dữ liệu có cấu trúc không phải substitute cho markup structure. Điều gì để làm thay vì: sử dụng cả hai — dữ liệu có cấu trúc sits bên cạnh semantic foundation, nó không replace nó. Neither một bảo đảm rich kết quả, either — đó tách biệt eligibility câu hỏi từ markup validity.

• Nesting <section> elements để làm headings “act như” thấp hơn cấp độ. Vì sao nó sai: điều này relies on HTML5’s old document outline algorithm, mà không trình duyệt hoặc screen reader bao giờ implemented và mà hiện tại WHATWG spec không lâu hơn defines đó way. Điều gì để làm thay vì: ghi rõ ràng, correctly-ordered <h1>–<h6> levels — không let nesting depth stand trong cho heading xếp hạng bạn thực ra có nghĩa là.

• sử dụng <div> với nhấp handler thay vì <a href> hoặc <button>. Vì sao nó sai: bạn lose native keyboard activation và đúng accessible role trừ khi bạn manually rebuild cả hai với role, tabindex, và mấu chốt handlers. Điều gì để làm thay vì: sử dụng <a href> Khi hành động navigates nơi nào đó, <button> Khi nó làm điều gì đó on hiện tại trang — và nhận native behavior cho free.

Landmark elements tại glance

seven elements điều này bài viết covers, Điều gì mỗi là thực ra cho, và misuse pattern để tránh.

Nhanh rule của thumb: nếu block có thể syndicate on của nó own, nó <article>; nếu nó cần heading để làm hợp lý, nó <section>; nếu nó neither, nó <div>.

Beyond landmarks: interactive và dữ liệu elements

Prompts cho retrofitting HTML

Ready-để-copy prompts cho cụ thể task điều này bài viết covers: finding div soup và converting nó để đúng semantic markup. Paste của bạn trang HTML (view-nguồn, không được kết xuất DOM) vào AI assistant với một của những điều này.

Flag div soup và 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]

kiểm tra cho landmark structural các lỗi

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 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 của bạn dự kiến structure

Kiểm thử để chạy: Open của bạn trình duyệt DevTools accessibility tree (Chrome/Edge: DevTools → Elements → Accessibility pane) on retrofitted trang. Dự kiến kết quả: landmark vai trò listed (banner, navigation, main, complementary, contentinfo) match semantic elements bạn thực ra wrote — một main/“main” role, một banner, etc. thất bại interpretation: bị thiếu hoặc duplicated landmark role có nghĩ là markup đã không produce structure bạn dự kiến (e.g. thứ hai <main>, hoặc <div> đó nên có là converted). Monitoring window: Immediate — kiểm tra right sau khi deploying retrofit. Rollback trigger: nhiều hơn một main/“main” landmark, hoặc landmark nested nơi nó không nên là (e.g. main bên trong article), có nghĩ là undo và re-kiểm tra markup.

Chính xác một <main> theo trang

Kiểm thử để chạy: grep -o "<main" page.html | wc -l so với đó được kết xuất HTML (hoặc view-nguồn), hoặc tìm kiếm <main trong DevTools’ Elements panel. Dự kiến kết quả: Chính xác một match. Failure interpretation: Zero matches có nghĩa là không chính-nội dung landmark đã là set; hơn một có nghĩa là đó “single clearest signal” (bản dịch) «single clearest tín hiệu» về main nội dung là hiện tại ambiguous. Monitoring window: Immediate, tại deploy time. Rollback trigger: Bất kỳ count other hơn chính xác một.

Non-kết xuất các crawler vẫn see structure

Kiểm thử để chạy: Fetch đó trang với một đơn giản HTTP client (curl hoặc “view page source” (bản dịch) «view trang nguồn», không đó được kết xuất DOM) và xác nhận đó semantic elements là present trong đó thô phản hồi, không injected sau đó by client-side JavaScript. Dự kiến kết quả: <header>, <nav>, <main>, <article>/<section>, <aside>, và <footer> all xuất hiện trong đó ban đầu HTML payload. Failure interpretation: Nếu đó semantic tags chỉ xuất hiện sau JS execution, các crawler đó không render JavaScript (theo đó AI/LLM-crawler point trên) không bao giờ see đó structure tại all. Monitoring window: Immediate — re-kiểm tra bất kỳ time templating hoặc một JS framework thay đổi cách đó trang renders. Rollback trigger: Semantic landmarks present trong đó được kết xuất DOM nhưng absent từ đó thô HTML phản hồi.

Heading levels là rõ ràng, không inherited từ nesting

Kiểm thử để chạy: Trong trình duyệt của bạn DevTools accessibility tree (hoặc an outline-kiểm tra extension), list đó heading levels trong document order và so sánh them để đó thực tế <h1>–<h6> tags trong đó nguồn, regardless of cách deeply mỗi heading sits bên trong nested <section>/<article> elements. Dự kiến kết quả: Đó reported heading cấp độ cho mỗi heading matches của nó literal tag (an <h2> các báo cáo as cấp độ 2 không quan trọng cách nhiều sections đây là nested bên trong) — có không implicit demotion từ nesting. Failure interpretation: Nếu của bạn template hoặc một component library là relying on <section> nesting để “automatically” (bản dịch) «tự động» thấp hơn một heading xếp hạng, đó assumption không hold — đó old document outline algorithm đã là không bao giờ implemented và đó hiện tại spec không compute outlines đó way. Cách sửa đó thực tế thẻ heading. Monitoring window: Immediate, và bất kỳ time một new template hoặc component pattern introduces nested sections. Rollback trigger: MỘT heading được kết xuất/announced cấp độ không match của nó literal <h1>–<h6> tag.

Fake links và fake buttons là keyboard-accessible

Kiểm thử để chạy: Tab qua trang sử dụng chỉ keyboard và try để activate mỗi clickable element với Enter/Space; riêng, kiểm tra accessibility tree cho role mỗi clickable element các báo cáo. Dự kiến kết quả: Elements đó navigate báo cáo link (native <a href>); elements đó act on trang báo cáo button (native <button>) và cả hai là reachable và activatable by keyboard không có extra role/tabindex/mấu chốt-handler code. thất bại interpretation: <div> hoặc <span> với nhấp handler đó không phải keyboard-reachable, hoặc đó các báo cáo generic role thay vì link/button, có nghĩ là nó cần để là converted để native element thay vì patched với ARIA. Monitoring window: Immediate — re-kiểm tra sau khi bất kỳ component-library hoặc design-hệ thống thay đổi để interactive elements. Rollback trigger: bất kỳ clickable control đó có thể’t là reached hoặc activated by keyboard alone.

Tự kiểm tra: Semantic HTML

Five nhanh các câu hỏi on semantic HTML và Điều gì nó làm (và không) làm Đối với SEO. Pick câu trả lời cho mỗi, sau đó kiểm tra.

Nhật ký thay đổi