Header Website Là Gì? Thành Phần, Kiểu Thiết Kế Và Cách Tối Ưu SEO (Cập Nhật 2026)

Khách vào website, nhìn phần đầu trang vài giây rồi thoát ra vì không thấy menu sản phẩm hay số điện thoại ở đâu?

Tôi là Thái Doãn Kiên, làm SEO từ năm 2016 và đã cùng đội ngũ SEODO triển khai gần 1.000 dự án. Phần đầu trang lặp lại trên mọi trang, nên menu đặt sai thì cả website khó dùng, còn logo nặng thì trang nào cũng mở chậm.

Sửa header thường không cần làm lại giao diện. Bạn sẽ biết header website cần có gì, Google đọc phần này ra sao và 8 việc tối ưu xếp theo thứ tự nên làm.

1. Header website là gì?

Phân biệt header với thẻ header HTML, thẻ H1 và footer để sửa đúng chỗ.

Header ở đây là phần đầu trang website, không phải header trong Word hay HTTP header. Header website là khu vực trên cùng của mỗi trang, thường gồm logo, menu điều hướng và lối liên hệ. Bố cục giữ nguyên trên mọi trang để khách luôn biết mình đang ở website nào.

Lỗi ở header có trên mọi URL cùng lúc, nên cần xem sớm khi làm SEO Onpage.

1.1. Header website khác thẻ header trong HTML thế nào

Khác ở cấp độ. Header website là khái niệm giao diện, còn thẻ <header> là phần tử HTML dùng được nhiều lần, ví dụ ở đầu trang và ở đầu mỗi bài viết.

Theo MDN (cập nhật 24/04/2026), thẻ header không nằm trong article, main, section, nav hay aside thì là landmark banner của trang. Tiêu chí là mỗi trang có đúng 1 header cấp trang, đặt ngoài thẻ main.

1.2. Header khác thẻ H1 thế nào

H1 là tiêu đề riêng của từng trang và nằm trong nội dung chính, còn header lặp lại y hệt ở mọi trang. Vì vậy H1 không đặt trong header, và mỗi trang có 1 H1 mô tả đúng trang đó.

1.3. Header, footer và sidebar

Ba vùng này khác nhau ở vị trí và việc chúng làm:

• Header: trên cùng, giữ logo và menu.
• Footer: cuối trang, chứa thông tin doanh nghiệp, chính sách.
• Sidebar: cạnh nội dung chính, có danh mục, bài liên quan.

Bài footer website có danh sách thành phần nên đặt ở chân trang.

2. Header website gồm những thành phần nào?

Thành phần nào bắt buộc, thành phần nào thêm theo loại website.

Logo và menu là lối để khách về trang chủ và sang trang khác. Website bán hàng thêm ô tìm kiếm và giỏ hàng, còn website dịch vụ thêm nút liên hệ.

2.1. Logo dẫn về trang chủ

Logo là liên kết về trang chủ trên mọi trang, như logo Tiki kèm dòng chữ “Tốt & Nhanh” bấm vào là về trang chủ. Tiêu chí gồm 3 điểm:

• Logo là thẻ a trỏ về trang chủ trên 100% trang.
• Ảnh logo có alt là tên thương hiệu, đúng cách viết alt cho ảnh có chữ.
• Tệp logo là SVG, hoặc ảnh dưới 20KB theo kinh nghiệm của SEODO.

2.2. Menu điều hướng

Menu cấp 1 là danh sách link tới các nhóm trang chính, nên phải phản ánh đúng cấu trúc website. Tiki có hàng link nhanh tới ngành hàng như “nhà cửa”, “sách”, kèm khối “Danh mục” đầy đủ.

Tên mục dài 1 đến 3 từ, mục đang xem được đánh dấu. Con số 5 đến 7 mục cấp 1 là thực hành phổ biến, không phải chuẩn. Bài thiết kế menu điều hướng có 8 nguyên tắc chia cấp và đặt nhãn menu. Nếu cần sắp lại menu cùng toàn bộ cấu trúc, bạn có thể tham khảo dịch vụ SEO của SEODO.

2.3. Ô tìm kiếm

Ô tìm kiếm là bắt buộc với website nhiều sản phẩm hoặc nhiều bài, vì khách biết mình cần gì sẽ gõ luôn. Amazon đặt ô tìm kiếm rộng có chữ gợi ý “Search Amazon”, phía trước là ô chọn danh mục “All”.

Trên di động, ô hiện sẵn hoặc mở ra sau 1 lần bấm vào kính lúp.

2.4. Nút kêu gọi hành động và thông tin liên hệ

Website dịch vụ đặt hotline hoặc nút “Nhận báo giá” trên header, vì đó là việc muốn khách làm nhất. HubSpot đặt nút dùng thử miễn phí và đặt lịch demo trên header. Tiêu chí là 1 nút CTA chính màu tương phản với nền, số điện thoại là liên kết tel: bấm gọi được.

2.5. Giỏ hàng, tài khoản, chọn ngôn ngữ

Giỏ hàng, tài khoản dành cho thương mại điện tử, chọn ngôn ngữ dành cho website đa ngôn ngữ. Tiki hiện giỏ hàng kèm số sản phẩm và mục “Tài khoản”. Tiêu chí là giỏ có số lượng, nút ngôn ngữ mở đúng trang tương ứng chứ không về trang chủ.

Thành phần	Doanh nghiệp	Bán hàng	Tin tức	Landing page
Menu	Bắt buộc	Bắt buộc	Bắt buộc	Không cần
Ô tìm kiếm	Nên có	Bắt buộc	Bắt buộc	Không cần
CTA, hotline	Bắt buộc	Nên có	Không cần	Bắt buộc
Giỏ hàng	Không cần	Bắt buộc	Không cần	Không cần

3. Header website ảnh hưởng thế nào đến SEO?

Ba đường header tác động tới SEO, kèm tài liệu Google.

Header không có điểm SEO riêng. Nó tác động gián tiếp vì chứa link có trên mọi trang và tải đầu tiên.

3.1. Google đọc liên kết trong menu như mọi liên kết

Như mọi link khác, Google chỉ thu thập đáng tin cậy link menu là thẻ a có href. Theo Link best practices (cập nhật 10/12/2025), thẻ a thiếu href, thẻ span hay đường dẫn javascript: là cách viết không nên dùng.

Tên mục menu là anchor text, nên viết ngắn và mô tả đúng trang đích. Menu là nhóm liên kết nội bộ có trên mọi trang, tiêu chí là 100% mục menu là thẻ a có href, kiểm tra bằng công cụ Kiểm tra URL trong Search Console.

3.2. Google dùng bản di động, nên menu di động phải đủ

Menu di động phải đủ vì Google dùng bản di động để lập chỉ mục và xếp hạng. Tài liệu Mobile-first indexing best practices (cập nhật 10/12/2025) khuyên bản di động có cùng nội dung với bản máy tính, có thể gom vào accordion hay tab cho gọn.

Website responsive dùng chung HTML nên ít gặp lỗi này, rủi ro nằm ở giao diện có menu di động riêng chỉ điền vài mục. Khi dựng giao diện responsive, hai menu nên lấy từ cùng một danh sách link.

3.3. Header nặng làm chậm mọi trang

Header nặng làm chậm mọi trang vì nó tải trước nội dung trên mọi URL. Banner đầu trang, thậm chí logo, có thể là phần tử LCP (web.dev, “Largest Contentful Paint”). Thanh khuyến mãi chèn muộn trên header đẩy trang xuống, làm tăng CLS.

Theo web.dev, ngưỡng tốt là LCP từ 2,5 giây trở xuống và CLS từ 0,1 trở xuống, đo ở phân vị 75. Tiêu chí là header có chiều cao dành sẵn trong CSS và ảnh trong header khai báo width, height. Bài Core Web Vitals có 9 việc cải thiện theo từng chỉ số, bài chỉ số LCP nói phần tử nào được tính.

4. 5 kiểu header website phổ biến

Mỗi kiểu hợp với một loại website và có một rủi ro riêng.

Theo MDN, header cố định (position: fixed) gắn vào khung nhìn, còn header dính (position: sticky) nằm trong luồng trang, cuộn qua mới dính lên đỉnh.

Kiểu	Hợp với	Rủi ro
Tĩnh	Website ít trang	Phải cuộn lên mới thấy menu
Dính	Bán hàng, trang dài	Che nội dung
Thu gọn khi cuộn	Tin tức, blog	Ẩn hiện giật
Trong suốt	Khách sạn, bất động sản	Chữ khó đọc
Mega menu	Nhiều danh mục	Khó dùng bằng bàn phím

Khối ảnh lớn hero thuộc khối đầu trang chủ, không phải một kiểu header.

4.1. Header dính và header thu gọn khi cuộn

Header dính giữ menu luôn trong tầm bấm, header thu gọn ẩn khi cuộn xuống. Theo kinh nghiệm của SEODO, header dính trên di động cao không quá khoảng 15% chiều cao màn hình.

Đặt scroll-margin-top cho heading bằng chiều cao header để khỏi che tiêu đề.

4.2. Header trong suốt trên ảnh lớn

Header trong suốt chỉ dùng được khi chữ menu đọc rõ trên ảnh, tức tương phản tối thiểu 4,5:1 theo WCAG 2.2 tiêu chí 1.4.3. Cách làm là phủ lớp tối lên ảnh.

4.3. Header có mega menu

Mega menu là khung xổ nhiều cột cho website nhiều danh mục. Tiêu chí là mở được bằng bàn phím lẫn chạm, link có sẵn trong HTML.

Khách vào sâu nhiều cấp cần đường quay lại, nên trang danh mục có breadcrumb dưới header.

4.4. Chọn kiểu header theo loại website

Chọn kiểu theo mục tiêu chính của trang, không theo xu hướng.

Loại website	Kiểu header	Thành phần nổi bật
Doanh nghiệp dịch vụ	Tĩnh hoặc dính	Nút liên hệ, hotline
Thương mại điện tử	Dính, mega menu	Tìm kiếm, giỏ hàng
Tin tức, blog	Thu gọn khi cuộn	Chuyên mục, ô tìm kiếm
Landing page	Tối giản	Logo và 1 nút CTA

5. Kích thước header website bao nhiêu là chuẩn?

Tách con số có nguồn khỏi con số chỉ là thói quen thiết kế.

Con số 80 đến 120px trên nhiều bài là thói quen thiết kế. Chuẩn có nguồn là vùng bấm trong WCAG 2.2 tiêu chí 2.5.8 và tiêu chí 2.5.5.

Hạng mục	Gợi ý	Nguồn
Vùng bấm tối thiểu	24 x 24 CSS px	WCAG 2.2, 2.5.8 (AA)
Vùng bấm khuyến nghị	44 x 44 CSS px	WCAG 2.2, 2.5.5 (AAA)
Header dính trên điện thoại	Không quá khoảng 15% màn hình	Kinh nghiệm SEODO
Logo	SVG hoặc dưới 20KB	Kinh nghiệm SEODO

Ảnh động trong header chỉ nên dùng khi không làm chậm LCP và không gây CLS.

5.1. Kích thước trên máy tính và điện thoại

Trên điện thoại rộng 375px, header đạt khi:

• H1 của trang vẫn nằm trong màn hình đầu.
• Mỗi mục bấm từ 24 x 24 CSS px trở lên.
• Các mục cách nhau đủ xa để không bấm nhầm.

Bảng 10 độ phân giải màn hình phổ biến cho bản máy tính có trong bài kích thước website chuẩn.

6. Checklist 8 việc tối ưu header chuẩn SEO, xếp theo mức ưu tiên

Sửa nhóm Google đọc được trước, rồi tới nhóm người dùng.

Mỗi việc có tiêu chuẩn đạt, lỗi hay gặp và mức.

6.1. Nhóm 1: Google đọc được header (4 việc)

1. Mọi mục menu là liên kết thẻ a có href

Đạt khi 100% mục, kể cả menu con, là thẻ a có href trỏ tới URL trả mã 200. Kiểm tra bằng công cụ Kiểm tra URL, lỗi hay gặp là mục chỉ có onclick. Mức P0.

2. Menu di động đủ link như máy tính

Đạt khi số link cấp 1 trong menu hamburger bằng bản máy tính. Lỗi hay gặp là ẩn mục “Dịch vụ” trên di động. Mức P0.

3. Không bọc logo bằng thẻ H1 trên mọi trang

Đạt khi logo chỉ là thẻ a chứa img, còn H1 là tiêu đề riêng của trang và cùng ý với thẻ meta title. Lỗi hay gặp là H1 bọc logo, mọi trang có H1 là tên công ty. Mức P1.

4. Tên mục menu mô tả đúng trang đích

Đạt khi tên mục dài 1 đến 3 từ, nói đúng trang đích, ví dụ “Thiết kế nội thất” thay cho “Dịch vụ 1”. Lỗi hay gặp là lặp “dịch vụ SEO giá rẻ” ở nhiều mục. Mức P1.

6.2. Nhóm 2: Người dùng thấy và bấm được (4 việc)

5. Logo và ảnh header nhẹ, có kích thước

Xem dung lượng logo ở tab Network của Chrome DevTools. Mức P1, đạt khi:

• Logo là SVG hoặc dưới 20KB (kinh nghiệm SEODO).
• Ảnh có width và height.
• Ảnh không gắn loading=”lazy”, vì web.dev khuyên tải ngay ảnh ở màn hình đầu.

Lỗi hay gặp là logo PNG vài trăm KB.

6. Header cố định không che nội dung

Đạt khi bấm mục lục mà tiêu đề không bị che, header không quá khoảng 15% màn hình. Lỗi hay gặp là header 2 tầng kèm thanh khuyến mãi. Mức P1.

7. Vùng bấm và tương phản đạt WCAG

Đạt khi vùng bấm từ 24 x 24 CSS px, chữ tương phản tối thiểu 4,5:1. Lỗi hay gặp là biểu tượng mạng xã hội 16px sát nhau. Mức P2.

8. Có thẻ header, nav và liên kết bỏ qua menu

Đạt khi header dùng thẻ header, menu dùng thẻ nav và có liên kết “Bỏ qua tới nội dung” hiện khi bấm Tab, theo WCAG 2.2 tiêu chí 2.4.1. Lỗi hay gặp là header toàn thẻ div. Mức P2.

<a class="skip-link" href="#noi-dung">Bỏ qua tới nội dung</a>
<header>
  <a href="/"><img src="/logo.svg" alt="Nội thất ABC" width="160" height="40"></a>
  <nav><ul>
    <li><a href="/thiet-ke-noi-that/">Thiết kế nội thất</a></li>
    <li><a href="/lien-he/">Liên hệ</a></li>
  </ul></nav>
</header>
<main id="noi-dung">...</main>

Tóm tắt 8 việc

Việc	Tiêu chuẩn đạt	Lỗi hay gặp	Mức
1. Thẻ a href	100% mục	Chỉ có onclick	P0
2. Menu di động đủ	Bằng bản máy tính	Ẩn mục	P0
3. Logo không bọc H1	H1 riêng	H1 là tên công ty	P1
4. Tên mục rõ	1 đến 3 từ	Lặp từ khoá	P1
5. Ảnh nhẹ	Dưới 20KB	PNG vài trăm KB	P1
6. Không che nội dung	Khoảng 15% màn hình	Header 2 tầng	P1
7. Vùng bấm	24 x 24 CSS px, 4,5:1	Biểu tượng 16px	P2
8. Thẻ ngữ nghĩa	Có skip link	Toàn thẻ div	P2

7. 3 hiểu lầm về header website nên bỏ

Ba lời khuyên còn phổ biến nhưng không khớp tài liệu của Google.

Cả ba xuất phát từ mong muốn Google hiểu website tốt hơn nhưng đi sai cách.

7.1. “Thêm schema SiteNavigationElement để Google hiểu menu”

SiteNavigationElement không có trong Search Gallery của Google (cập nhật 16/10/2026), nên không tạo ra kết quả nhiều định dạng nào. Loại đáng làm là Organization để khai báo logo và WebSite trên trang chủ cho tên trang web.

Bài schema là gì có bảng chọn loại schema cho từng loại trang.

7.2. “Nhồi từ khoá vào menu giúp tăng hạng”

Không, Google xếp nhồi từ khoá vào nhóm vi phạm chính sách spam. Vậy có nên đưa từ khoá chính vào header không? Chỉ khi đó là tên tự nhiên của trang đích, như mục “Thiết kế nội thất”. Tiêu chí là đọc to menu lên vẫn nghe tự nhiên.

7.3. “Thêm uy tín E-E-A-T bằng cách nhét mọi thứ lên header”

Theo Google, E-E-A-T không phải một yếu tố xếp hạng cụ thể, nên header chất đầy chứng nhận không được cộng điểm. Trang giới thiệu và chính sách thường đặt ở footer hoặc mục “Về chúng tôi”.

Theo kinh nghiệm của SEODO, header nên giữ tối đa 1 nút CTA và 1 lối liên hệ.

8. Câu hỏi thường gặp về header website

5 câu hỏi hay gặp khi làm hoặc sửa header.

8.1. Header và footer khác nhau thế nào?

Header ở đầu trang, giúp khách đi tiếp bằng logo, menu và ô tìm kiếm. Footer ở cuối trang, chứa thông tin doanh nghiệp, chính sách và link phụ, chi tiết trong bài chân trang website.

8.2. Header có cần giống nhau trên mọi trang không?

Có, nên giữ cùng bố cục và cùng menu để khách không bị lạc. Ngoại lệ là landing page chạy quảng cáo, có thể chỉ gồm logo và 1 nút.

8.3. Có nên đặt số điện thoại trên header không?

Website dịch vụ và website bán hàng cần tư vấn thì nên đặt, dưới dạng liên kết tel: để khách bấm gọi ngay trên điện thoại. Website tin tức thì không cần, vì khách đến để đọc.

8.4. Sửa header trên WordPress ở đâu?

Tuỳ giao diện. Với theme thông thường, logo và menu sửa trong mục Giao diện của WordPress. Elementor dựng header bằng Theme Builder thuộc bản Pro, bài plugin Elementor so sánh bản Free và Pro.

8.5. Header có nên dùng video nền không?

Chỉ nên dùng khi video không làm chậm LCP và có kích thước dành sẵn để không gây CLS. Trên di động, nên thay video bằng một ảnh tĩnh nhẹ để trang mở nhanh hơn.

Nguồn tham khảo

• MDN Web Docs: header, The Header element (cập nhật 24/04/2026)
• MDN Web Docs: position, giá trị fixed và sticky (cập nhật 26/07/2026)
• Google Search Central: Link best practices for Google (cập nhật 10/12/2025)
• Google Search Central: Mobile site and mobile-first indexing best practices (cập nhật 10/12/2025)
• Google Search Central: Structured data markup that Google Search supports, Search Gallery (cập nhật 16/10/2026)
• Google Search Central: Site names (cập nhật 10/12/2025)
• Google Search Central: Spam policies for Google web search, mục Keyword stuffing (cập nhật 28/08/2026)
• Google Search Central: Creating helpful, reliable, people-first content (cập nhật 05/10/2026)
• web.dev: Web Vitals (cập nhật 31/10/2024), Largest Contentful Paint (cập nhật 04/09/2025), Optimize Cumulative Layout Shift (cập nhật 07/02/2025)
• web.dev: Browser-level image lazy loading for the web (cập nhật 13/08/2024)
• W3C: Understanding WCAG 2.2, tiêu chí 1.4.3, 2.4.1, 2.5.5 và 2.5.8
• Elementor: trang giới thiệu gói Pro và Theme Builder (đọc ngày 21/10/2026)