Debug HTML trong thẻ head là một trong những vấn đề kỹ thuật khiến nhiều SEOer đau đầu nhất, đặc biệt khi website đã khai báo đầy đủ title, canonical hay hreflang nhưng Google vẫn bỏ qua hoặc xử lý không ổn định. Trong thực tế audit kỹ thuật, quá trình này không chỉ là việc kiểm tra metadata, mà là quá trình phân tích cách Googlebot và Chrome parse – render HTML để xác định chính xác nguyên nhân làm hỏng dữ liệu phía sau. Nguyên nhân thường không nằm ở metadata, mà đến từ các phần tử HTML không hợp lệ vô tình xuất hiện trong <head> hoặc trước thẻ <head>, khiến Google tự động đóng <head> và làm hỏng toàn bộ dữ liệu phía sau. Trong bài hướng dẫn này, LENART sẽ đi thẳng vào quy trình debug HTML trong thẻ <head> theo đúng cách Googlebot và Chrome render trang, giúp bạn nhanh chóng xác định nguyên nhân, tránh hiểu sai lỗi và xử lý triệt để các vấn đề ảnh hưởng trực tiếp đến index và hiệu suất SEO trong hệ thống kiến thức SEO tổng thể.
1. HTML Elements không hợp lệ trong thẻ <head> là gì và vì sao Google bỏ qua metadata?
Việc sử dụng HTML đúng chuẩn cho metadata giúp Google hiểu chính xác nội dung trang. Trong quá trình debug HTML trong thẻ head, đây là bước nền tảng để xác định liệu Google có thể parse đúng markup hay không. Công cụ tìm kiếm có thể cố gắng parse markup dù có lỗi. Trong các trường hợp như audit PDF SEO, việc Google bỏ qua metadata do lỗi HTML cũng cần được kiểm tra tương tự, nhưng một số lỗi trong <head> sẽ khiến metadata bị bỏ qua. Khi Google gặp element không hợp lệ trong <head>, nó sẽ tự động đóng <head> và chuyển sang <body>. Với các trang audit AMP, lỗi này càng nghiêm trọng vì AMP yêu cầu cấu trúc <head> cực kỳ chặt chẽ. Tương tự cách Chrome xử lý. Mọi metadata nằm sau element lạ đều bị ignore.
Theo chuẩn, <head> chỉ được chứa các element sau. Nếu bạn triển khai schema trong <head>, hãy luôn kiểm tra structured data để đảm bảo chúng không bị Google bỏ qua do <head> bị đóng sớm. Các thẻ như title, meta, link, script, style, base, noscript, template
Những element thường gây lỗi nhất gồm: iframe, img, svg, div, và noscript có chứa img. Quy tắc đơn giản: bất kỳ element thuộc <body> xuất hiện trước khi <head> kết thúc đều có thể làm hỏng metadata.
1.1 Không chỉ “trong <head>”, mà cả “trước <head>”
Google đã document rõ vấn đề này. Không chỉ các element lạ nằm trong <head> mới nguy hiểm – các element thuộc <body> xuất hiện trước thẻ <head> cũng có thể phá vỡ toàn bộ metadata.
Ví dụ, một thẻ <div> xuất hiện trước thẻ <html> mở đầu sẽ khiến Google tự tạo một <head> rỗng rồi đóng ngay, toàn bộ metadata bị đẩy xuống <body> và bị bỏ qua.
2. Cách phát hiện HTML Elements làm hỏng thẻ <head> khi audit SEO
Việc tìm các element HTML không hợp lệ trong <head> hoặc xuất hiện trước <head> trên toàn site khá tốn công nếu làm thủ công. Trong audit kỹ thuật, sau khi kiểm tra robots.txt bằng Screaming Frog, bạn nên tiếp tục rà soát HTML để đảm bảo Google không bỏ qua metadata do lỗi cấu trúc <head>. Trong thực tế audit, SEO Spider của Screaming Frog là công cụ rất hiệu quả để hỗ trợ debug HTML trong thẻ head ở quy mô lớn. Tool sẽ chỉ ra ngay URL nào có element không hợp lệ, hoặc các metadata quan trọng như title, canonical, meta robots bị đặt ngoài <head>. Kết hợp với http status code crawl, bạn có thể loại trừ các URL trả về 200 nhưng vẫn gặp vấn đề về xử lý metadata.
2.1 Crawl website bằng SEO Spider để phát hiện lỗi <head>
Nhập địa chỉ website vào ô URL, sau đó bấm Start.
Tool phân tích theo thời gian thực, bạn có thể xem kết quả ngay hoặc chờ crawl hoàn tất 100%.
2.2 Phát hiện lỗi HTML trong tab Validation của SEO Spider
Click tab Validation, tại đây có các filter để phát hiện lỗi HTML.
Khung Overview bên phải hiển thị số lượng URL gặp từng loại lỗi.
Các filter HTML quan trọng:
- Invalid HTML Elements In <head>: Có element không hợp lệ trong <head> – Google sẽ tự đóng <head> và bỏ qua toàn bộ metadata phía sau. Theo chuẩn, <head> chỉ nên chứa: title, meta, link, script, style, base, noscript, template.
- <body> Element Preceding <html>: Có element thuộc <body> nằm trước <html> – Google tự tạo một <head> rỗng rồi đóng lại, metadata rơi xuống <body> và bị ignore.
- <head> Not First In <html>: Có element khác đứng trước <head> – theo chuẩn, <head> phải là element đầu tiên trong <html>.
- Missing <head> Tag: Thiếu hoàn toàn thẻ <head>.
- Multiple <head> Tags: Có nhiều thẻ <head> – chỉ nên tồn tại duy nhất một thẻ.
2.3 Kiểm tra metadata nằm ngoài <head> trong SEO Spider
Khi Validation báo lỗi, hãy kiểm tra thêm các tab Page Titles, Meta Descriptions, Canonicals, Directives, Hreflang để xem có filter “Outside <head>” hay không.
Tab Issues bên phải sẽ gắn cờ “high priority” cho các vấn đề quan trọng.
Google đôi khi vẫn đọc được title hoặc noindex trong <body>, nhưng không ổn định – còn canonical và hreflang thì gần như chắc chắn bị bỏ qua. Vì vậy, trước khi thực hiện audit hreflang, bạn cần đảm bảo <head> không gặp lỗi HTML khiến Google ignore metadata. Đây cũng là một trong những nguyên nhân khiến nhiều URL rơi vào trạng thái crawled currently not indexed dù không có lỗi nội dung rõ ràng. Khi <head> đã gặp lỗi, cần tiếp tục debug để xử lý triệt để, nếu không URL có thể chỉ được phát hiện nhưng không được xử lý đầy đủ, dẫn đến trạng thái discovered currently not indexed trong Search Console.
3. Quy trình debug HTML trong thẻ head khi Google bỏ qua metadata
Nếu bạn phát hiện các URL bị gắn cờ trong bộ lọc “Invalid HTML Elements In Head” hoặc các lỗi liên quan, đây là lúc cần bắt đầu debug HTML trong thẻ head bằng cách phân tích cấu trúc HTML thực tế mà Googlebot nhìn thấy.
3.1 Phân tích Raw HTML để tìm phần tử không hợp lệ trong <head>
Click chuột phải và chọn “View page source” trong Chrome sẽ hiển thị HTML thô trước khi JavaScript được thực thi. Tại đây, bạn có thể xem nội dung bên trong thẻ <head>.
Việc rà soát HTML thô để tìm các phần tử HTML không hợp lệ nằm giữa thẻ mở và thẻ đóng <head> có thể khá khó, đặc biệt khi <head> quá dài. Trong ví dụ này, phần <head> có hơn 600 dòng code.
Tuy nhiên, trong trường hợp này vẫn có thể phát hiện lỗi: có một phần tử SVG ở dòng 70 — điều này không nên xảy ra, dựa trên danh sách các phần tử HTML hợp lệ đã đề cập trước đó.
Một hạn chế khi chỉ xem HTML thô là bạn có thể bỏ sót các phần tử được JavaScript chèn động sau khi trang tải xong. Đây là lý do vì sao trong các website sử dụng nhiều JS, bạn cần kết hợp thêm crawl JavaScript SEO để đảm bảo Google render và parse <head> đúng cách.
3.2 Debug <head> bằng Rendered HTML và Inspect Element
Một cách hiệu quả và đáng tin cậy hơn để xác định các phần tử HTML không hợp lệ trong <head> là sử dụng “Inspect element” (Chuột phải → Inspect) trong Chrome — đây cũng là bước quan trọng trong quá trình debug HTML trong thẻ head. Cách này hiển thị HTML đã render sau khi JavaScript được xử lý. Phương pháp này hữu ích vì hai lý do:
- Phần tử đầu tiên trong <body> thường chính là phần tử HTML không hợp lệ.
- Nó tính đến cả JavaScript — vốn có thể âm thầm chèn các phần tử HTML không hợp lệ vào <head> nếu bạn chỉ phân tích HTML thô.
Chrome (giống như Googlebot) sẽ tự động coi <head> đã kết thúc và <body> bắt đầu khi gặp một phần tử thuộc <body>. Trong quá trình audit redirect, nếu metadata bị đặt sai vị trí sau redirect, bạn cần kiểm tra lại cách Google render HTML thực tế. Vì vậy, bạn có thể nhanh chóng nhận ra lỗi do SVG gây ra, thay vì phải dò hàng trăm dòng HTML thô.
Bạn cũng có thể thấy rằng trong trường hợp này, thẻ canonical link xuất hiện sau SVG trong HTML thô (nhưng vẫn nằm trong <head>) lại bị xem là “nằm ngoài <head>” và thuộc <body> trong HTML đã render.
3.3 So sánh cách Googlebot render HTML với Chrome
Theo các thử nghiệm của chúng tôi, Googlebot thường phân tích HTML tương tự Chrome, ngoại trừ một số khác biệt liên quan đến iframe — vốn thường được Google inline.
Tuy nhiên, bạn có thể xác minh hành vi thực tế của Google bằng cách sử dụng:
- URL Inspection Tool trong Search Console
- Hoặc Mobile Friendly Test (sắp bị ngừng hoạt động)
Sau đó, hãy kiểm tra Rendered HTML.
Như bạn có thể thấy, thẻ <body> đã được mở ra do SVG, giống hệt cách Chrome xử lý. Ở phần dưới của HTML đã render, thẻ canonical nằm bên ngoài <head>.
3.4 Edge case với <noscript>: khi Google bỏ qua canonical dù HTML nhìn có vẻ đúng
Mặc dù thường cho rằng Google hiện nay render gần như mọi thứ, nhưng vẫn tồn tại một số edge case với <noscript>, yêu cầu bạn phải tắt JavaScript khi kiểm tra bằng Inspect Element.
Nếu một thẻ <noscript> chứa phần tử HTML không hợp lệ, nó có thể đóng thẻ <head> sớm. Khi đó, việc dùng URL Inspection Tool để xem rendered HTML sẽ không hiển thị lỗi <head> bị hỏng.
Một cách để phát hiện vấn đề là sử dụng Google URL Inspection → Page Indexing, nơi hiển thị mục “User-declared Canonical” sau khi Google index trang.
HTML đã render ở phía bên phải trông có vẻ bình thường, nhưng có thể thấy “User-declared Canonical” hiển thị là “N/A” — do đã bị bỏ qua, vì thẻ <noscript> chứa hình ảnh phía trên đã âm thầm đóng thẻ <head>.
Việc debug HTML trong thẻ head một cách có hệ thống từ việc rà soát HTML thô, so sánh với HTML đã render, kiểm tra hành vi Googlebot đến xử lý các edge case như <noscript> — giúp bạn nhanh chóng xác định nguyên nhân khiến metadata bị Google bỏ qua và tránh debug sai hướng trong audit kỹ thuật thực tế. Với workflow này, bạn có thể nhanh chóng xác định nguyên nhân khiến title, canonical, hreflang hoặc directives bị Google bỏ qua, tránh debug sai hướng và tiết kiệm đáng kể thời gian làm việc với dev. Dịch vụ SEO LENART tin rằng việc debug HTML trong thẻ <head> một cách có hệ thống sẽ giúp website duy trì metadata ổn định, cải thiện khả năng index và tối ưu hiệu suất SEO bền vững trên Google Search.
