Bạn đã dành hàng giờ để tạo ra trang WordPress hoàn hảo. Nội dung rất chắc chắn. Các từ khóa đã được đặt. Plugin SEO của bạn hiển thị dấu kiểm màu xanh lá cây.
But open your browser’s developer tools and inspect the heading structure, and you’ll see something that can quietly kill your organic traffic: a broken heading hierarchy. Two H1s. A site title wrapped in `＜h1＞`. Sections jumping from H2 straight to H4. Or worse — no H1 at all.
This isn’t a lỗi của người mới bắt đầu. It’s a vấn đề cấu trúc baked into how WordPress, themes, page builders, and the Gutenberg editor interact — and most site owners never know it’s happening.
This guide exists to fix that. Whether you’re a WordPress site owner managing your own content, or an agency building sites for dozens of clients, you’ll leave here knowing exactly how to kiểm tra, chẩn đoán và giải quyết triệt để vấn đề thứ tự tiêu đề trong WordPress.
Thẻ H1 là gì và tại sao nó lại quan trọng trong WordPress?
An H1 tag (＜h1>) is the top-level HTML heading element. In semantic HTML, it signals to browsers, search engines, and assistive technologies: “This is the primary topic of this page.”
Hãy coi các thẻ tiêu đề như một dàn ý tài liệu:
H1 – Main page title (only one per page)
├── H2 – First major section
│ ├── H3 – Subsection
│ └── H3 – Another subsection
├── H2 – Second major section
│ ├── H3 – Subsection
│ │ └── H4 – Detail within subsection
└── H2 – Third major sectionSkip a level — jumping from H2 to H4 — and you break the outline. Use two H1s and you create structural ambiguity. Use H3 tags for visual styling and you introduce ghost headings that confuse crawlers.
In WordPress specifically, this gets complicated fast. Unlike a static HTML page where you write every tag manually, WordPress generates heading markup from at least four different sources simultaneously: the theme’s header template, the post title, the editor content, and any widgets or page builder modules you’ve added.
Google thực sự nói gì về thẻ H1
Let’s settle the cuộc tranh luận về xếp hạng sớm.
In July 2026, Google’s Gary Illyes addressed this directly during the SEO Office Hours podcast: arranging headings in semantic order is genuinely helpful for accessibility (especially screen reader users), but it doesn’t significantly impact Google’s ranking algorithms. John Mueller has also stated that multiple H1 tags on a page don’t confuse crawlers and have zero direct SEO impact.
Vậy điều này có quan trọng không?
Yes — but not for the reason most SEO guides say.
Những lý do thực sự để quan tâm đến cấu trúc tiêu đề trong WordPress là:
- Tuân thủ khả năng truy cập — WCAG 2.1 success criterion 1.3.1 requires information and relationships to be programmatically determinable. Broken heading hierarchies fail this.
- Khả năng thu thập dữ liệu và tín hiệu nội dung — While Google can parse messy markup, a clean H1 gives the clearest possible signal about page topic, which matters in ambiguous cases.
- Trải nghiệm người dùng và thời gian dừng lại — Readers scan headings. A logical hierarchy helps them navigate and stay longer — both indirect ranking signals.
- Sự sạch sẽ trong kiểm toán kỹ thuật — For agencies, heading issues surface in every audit tool (Screaming Frog, Ahrefs, SEMrush, Rank Math, Yoast). Client-facing reports look bad even if the direct ranking impact is debated.
Cách WordPress tạo thẻ tiêu đề: Bốn nguồn xung đột
Hiểu tại sao cấu trúc tiêu đề WordPress bị hỏng đòi hỏi phải hiểu bốn nơi mà nó tạo ra các tiêu đề.
Source 1: The Theme’s Header Template
Most WordPress themes output the site title in the header area. Older and poorly coded themes wrap this in an ＜h1> tag — on every single page. This means every page on your site starts with the same H1: your brand name.
Sau đó, khi tiêu đề trang hoặc bài viết hiển thị (thứ nên là H1), nó sẽ trở thành H1 thứ hai hoặc bị hạ cấp xuống H2.
Here’s what this looks like in a broken theme’s header.php:
php
// Broken — site title as H1 on every page
＜h1＞＜?php bloginfo('name'); ?＞＜/h1＞
＜h2＞＜?php the_title(); ?＞＜/h2＞ // Post title wrongly demotedNó sẽ trông như thế nào:
php
// Correct — site title is a link or span, post title is H1
＜p class="site-title"＞＜a href="＜?php echo home_url(); ?＞"＞＜?php bloginfo('name'); ?＞＜/a＞＜/p＞
＜h1＞＜?php the_title(); ?＞＜/h1＞This is one of the most common WordPress H1 issues and it’s entirely invisible unless you inspect the page source. You can have an SEO plugin, a green readability score, and nội dung hoàn hảo — and still be outputting duplicate H1s on every page.
Nguồn 2: Trình chỉnh sửa khối Gutenberg
The WordPress block editor introduced deliberate changes to H1 behavior. By default, Gutenberg de-emphasizes the H1 option in the Heading block — the assumption is that the post title is already rendering as H1, so content-area headings should start at H2.
Trên thực tế, điều này tạo ra hai vấn đề:
Vấn đề A: Một số chủ đề không output the post title as H1. If your theme renders the title in a ＜div> or ＜h2> for stylistic reasons, and Gutenberg has hidden H1 from the heading block options, you end up with zero H1 tags on the page.
This is exactly the situation flagged in a long-running GitHub issue in the Gutenberg repository — users requesting the ability to remove the H1 option entirely for enterprise and agency setups where the H1 is controlled at the template level. The issue highlights real confusion: the editor’s default behavior and the theme’s template need to be explicitly coordinated, but WordPress provides no automated check for this.
Vấn đề B: Content editors can still select H1 in the block editor by changing the heading level. If your theme already outputs the post title as H1, an editor adding another H1 block inside the content area creates a duplicate — and no warning appears.
Nguồn 3: Trình tạo trang (Elementor, Divi, Beaver Builder)
Trình tạo trang là nguồn lớn nhất gây ra sự hỗn loạn về phân cấp tiêu đề trong WordPress.
Here’s why: page builders give you granular visual control. You can drag a text element anywhere, style it any way, and assign any heading level. This is powerful for design. It’s disastrous for structure.
Vấn đề tiêu đề trình tạo trang điển hình trông như thế này:
- Phần Hero: H1 (đúng) ✓
- Feature section title: H3 (skipped H2, chosen because it “looks better”) ✗
- Tiêu đề khu vực tiện ích: H2 (trông giống như tiêu đề phần, nhưng chỉ là tiêu đề tiện ích thanh bên) ✗
- Tiêu đề lời chứng thực: H4 (không có H3 phía trên nó) ✗
- Tiêu đề CTA: H2 (quay lại cấp độ cao hơn, bây giờ dàn ý hoàn toàn không tuyến tính) ✗
The result is a heading structure that’s visually coherent but semantically meaningless. Screen readers and crawlers parsing this get a content outline that jumps around like a broken table of contents.
InspectWP’s documentation identifies this pattern explicitly: authors and page builder users choose heading levels based on how they trông như thế nào rather than their logical meaning — if H3 is the right visual size, they select H3, even with no H2 above it.
Nguồn 4: Tiện ích và Thành phần chủ đề
WordPress widget areas — sidebars, footers, header modules — often output their own headings. A “Recent Posts” widget might render as H2. A promotional banner built into the theme might use H3. None of these are part of the content outline, but they appear in the page’s heading structure.
This creates heading “noise” that inflates the apparent complexity of the outline and can push content headings out of their correct hierarchical position.
5 vấn đề phổ biến nhất về H1 và phân cấp tiêu đề trong WordPress
Vấn đề 1: Tiêu đề trang web được bao bọc trong thẻ H1 trên mọi trang
Nó trông như thế nào: Every page on your site has two H1s — your site name and your post title.
Nó ảnh hưởng đến ai: Sites using older themes, poorly built premium themes, or any theme where the developer used ＜h1> for the site branding.
Cách phát hiện: Right-click any page → Inspect → search for ＜h1 in the Elements panel. If you see your site name wrapped in H1 in the ＜header> section, you have this problem.
Cách khắc phục:
Cách 1: Chỉnh sửa giao diện con (cách tiếp cận của nhà phát triển) In your child theme’s header.php, find the site title output and change it from ＜h1> to ＜p> or ＜span> with appropriate classes:
php
＜p class="site-title"＞
＜a href="＜?php echo esc_url(home_url('/')); ?＞" rel="home"＞
＜?php bloginfo('name'); ?＞
＜/a＞
＜/p＞Cách 2: CSS + aria-label (giải pháp thay thế không cần mã) If you can’t edit theme files, use CSS to reset the H1 styling on the site title:
css
.site-header h1.site-title {
font-size: inherit;
font-weight: inherit;
margin: 0;
}Lưu ý: điều này ẩn vấn đề H1 trực quan H1 problem but doesn’t fix the structural issue. The H1 tag remains in the markup.
Cách 3: Chuyển sang giao diện có cấu trúc tốt Themes following WordPress coding standards (Twenty Twenty-Four, Kadence, GeneratePress, Astra) handle this correctly out of the box. If your current theme has this issue and you’re not a developer, switching is often the most reliable fix.
Vấn đề 2: Thiếu thẻ H1 trên trang chủ
Nó trông như thế nào: Your homepage has zero H1 tags. SEO plugins report “No H1 found.”
Nó ảnh hưởng đến ai: Sites that use a logo image for branding (hiding the site title), sites using a static front page with no title visible, or sites where the theme’s homepage template doesn’t call the_title().
This is a real and recurring issue in the WordPress support forums. The cause is typically this sequence: the site title is set to display in the header, but the user hides it (or replaces it with a logo), removing the only H1 from the page. Since the homepage often doesn’t have a “post title” in the way a blog post does, there’s no automatic H1 generated.
Cách khắc phục:
Đối với trang chủ cụ thể: Thêm thẻ H1 vào phần hero hoặc mẫu trang của bạn. Điều này có thể là:
- A visible heading (“Your Business Name | Service Category”) that also functions as the H1
- Một thẻ H1 ẩn trực quan được thêm qua CSS (
position: absolute; clip: rect(0 0 0 0);) cung cấp dấu hiệu ngữ nghĩa mà không làm gián đoạn thiết kế trực quan
Trong Gutenberg: Thêm khối Tiêu đề ở đầu nội dung trang chủ của bạn, đặt nó thành H1 và biến nó thành một phần trong thông điệp hero của bạn.
Vấn đề 3: Bỏ qua các cấp độ tiêu đề trong nội dung
Nó trông như thế nào: Cấu trúc nội dung nhảy từ H2 trực tiếp sang H4, hoặc từ H1 trực tiếp sang H3.
Nó ảnh hưởng đến ai: Bất kỳ ai viết nội dung dài sử dụng tiêu đề để tạo kiểu trực quan thay vì cấu trúc ngữ nghĩa.
Tại sao nó quan trọng: As InspectWP notes, skipping heading levels happens when authors choose levels based on appearance — the H3 looks right, so they use H3, regardless of whether an H2 precedes it.
Cách phát hiện trong Gutenberg: Nhấp vào biểu tượng thông tin (ⓘ) trên thanh công cụ phía trên của trình chỉnh sửa khối. Bảng Dàn ý Tài liệu hiển thị mọi tiêu đề theo thứ tự và gắn cờ các cấp độ bị bỏ qua bằng cảnh báo.
Cách khắc phục:
- Kiểm tra cấu trúc tiêu đề của bạn bằng Dàn ý Tài liệu trước khi xuất bản
- Set a content style guide for your team: H2 for major sections, H3 for subsections, H4 for sub-subsections — never skip levels
- Use Yoast SEO or Rank Math’s content analysis — both flag heading structure issues
Vấn đề 4: Nhiều thẻ H1 từ các trình tạo trang
Nó trông như thế nào: A page built with Elementor or Divi has three or four H1 tags because each major section has its own hero-style “H1” headline.
Cách khắc phục:
In Elementor: Edit each heading widget → check the HTML Tag setting → set only the primary page title to H1, and change all others to H2 or H3 as appropriate.
In Divi: Edit heading modules → under Advanced → HTML Tag → change to the correct semantic level.
In Beaver Builder: Each heading module has a “Heading Tag” setting in the Style tab. Audit each one.
Vấn đề 5: Vấn đề hiển thị H1 trong Gutenberg
Nó trông như thế nào: Your theme doesn’t output the post title as H1, and Gutenberg has hidden the H1 option in the Heading block. Your pages have no H1.
Cách khắc phục:
For developers managing a site where the H1 must be placed inside the content area, you can restore the H1 option using a filter in your theme’s functions.php:
php
// Allow H1 in the Heading block
add_filter( 'allowed_block_types_all', function( $allowed_blocks ) {
return $allowed_blocks;
});Alternatively, switch to the “Edit as HTML” view for the Heading block and manually set ＜h1> in the markup.
Đối với các thiết lập đại lý nơi bạn muốn ngăn chặn biên tập viên thêm H1 (vì mẫu đã kiểm soát nó), hãy sử dụng block_editor_settings_all bộ lọc để hạn chế các cấp độ tiêu đề trong trình chỉnh sửa.
Cách kiểm tra cấu trúc tiêu đề WordPress của bạn (Từng bước)
Phương pháp 1: Plugin miễn phí SkySEOManager
Sử dụng Plugin SkySEOManager trình phân tích SEO tích hợp để tìm tất cả các vấn đề liên quan đến Tiêu đề.
Đọc hướng dẫn đầy đủ của chúng tôi: cách kiểm tra trang web wordpress của bạn bằng SkySEOManager cho tất cả các vấn đề SEO
Phương pháp 2: Sử dụng trình phân tích SEO miễn phí của Siteskyline
Truy cập Trình phân tích SEO miễn phí và nhập URL của bạn rồi nhấp vào phân tích ngay.
It’ll Show you all issue with your headline tags.
Hệ thống phân cấp H1 của WordPress: Danh sách kiểm tra cho đại lý
If you’re building or maintaining WordPress sites for clients, heading structure needs to be part of your pre-launch and ongoing audit process. Here’s a repeatable checklist:
Ở cấp độ chủ đề (Theme):
- Site title in header is NOT wrapped in ＜h1> (use ＜p>, ＜span>, or ＜div>)
- Post/page title renders as ＜h1> in ＜article> or ＜main> on all post types
- Homepage has exactly one ＜h1> — either from the site title or the hero section
- Archive pages (category, tag, author) have a descriptive ＜h1>
- 404 page has an ＜h1>
Ở cấp độ nội dung:
- Each page has exactly one ＜h1> in the content area (or zero if the theme handles it via the title)
- Major sections use ＜h2>
- Subsections use ＜h3> nested within ＜h2> sections
- Không có cấp độ tiêu đề nào bị bỏ qua
- Tiêu đề không chỉ được sử dụng cho mục đích tạo kiểu hình ảnh
Ở cấp độ Plugin/Trình tạo trang:
- Các phần tử tiêu đề của Elementor/Divi/Beaver Builder có cài đặt Thẻ HTML chính xác
- Widget areas don’t output accidental H1 or H2 tags
- Các cảnh báo H1 của plugin SEO được giải quyết trên tất cả các trang chính
The Correct WordPress Heading Hierarchy — By Page Type
One pattern doesn’t fit every WordPress page type. Here’s the correct structure for each:
Bài đăng trên blog / Trang bài đăng đơn lẻ
H1: Post Title (output by theme automatically)
H2: First major section
H3: Subsection
H3: Another subsection
H2: Second major section
H3: Subsection
H4: Detail
H2: Third major sectionTrang chủ (Trang tĩnh)
H1: Primary value proposition or page headline
H2: Service category or feature group
H3: Individual service or feature
H2: Testimonials or social proof section
H2: Call to action sectionTrang sản phẩm WooCommerce
H1: Product name (output by WooCommerce template)
H2: Product description heading
H2: Reviews
H2: Related productsTrang danh mục / Trang lưu trữ
H1: Category name (e.g., "WordPress SEO Articles")
H2: Post title within loop (if posts are displayed with headings)Những sai lầm phổ biến làm hỏng cấu trúc H1 của WordPress
Sai lầm 1: Sử dụng thẻ tiêu đề để tạo kiểu văn bản If you want large bold text that isn’t a section heading, don’t use H2. Add a CSS class to a ＜p> or ＜div> and style it visually. Using heading tags for aesthetics pollutes your structural outline.
Sai lầm 2: Để biên tập viên chọn cấp độ tiêu đề theo mắt nhìn Nếu không có hướng dẫn về phong cách nội dung, các biên tập viên sẽ tự nhiên hướng tới các cấp độ tiêu đề mà họ trông như thế nào right. A brief internal guide — “H2 for sections, H3 for subsections, never use H1 in content” — prevents most issues.
Sai lầm 3: Cài đặt chủ đề WordPress mà không kiểm tra cấu trúc tiêu đề Không phải tất cả các chủ đề WordPress cao cấp đều xuất ra mã đánh dấu tiêu đề chính xác. Trước khi cam kết sử dụng một chủ đề, hãy kiểm tra một bài đăng demo: tiêu đề bài đăng có hiển thị dưới dạng H1 không? Tiêu đề trang web có tránh được việc là H1 trên các trang bên trong không?
Sai lầm 4: Giả định rằng plugin SEO của bạn bao quát mọi thứ Yoast and Rank Math check the post you’re editing. They don’t catch heading issues introduced by your theme’s header template, footer widgets, or archive page templates. A manual audit or Screaming Frog crawl is still necessary.
Sai lầm 5: Sửa giao diện hiển thị thay vì cấu trúc HTML The most common “fix” for the site title H1 problem is adding CSS to make it look smaller. That hides the problem visually but leaves the broken markup in place. Fix the HTML tag, not just the style.
