SEO kỹ thuật

Công cụ Kiểm tra Thân thiện với Di động & Kích thước Vùng chạm

Google đã ngừng công cụ Mobile-Friendly Test riêng vào năm 2023. Dán mã HTML của trang (cùng CSS nếu không nằm inline), công cụ này sẽ chạy bảy kiểm tra thực sự: viewport meta, bố cục chiều rộng desktop cố định, cỡ chữ dễ đọc, kích thước vùng chạm ước tính, thẻ plugin lỗi thời, và độ tương phản màu theo WCAG.

Các kiểm tra cần CSS (chiều rộng bố cục, cỡ chữ, vùng chạm, độ tương phản) sẽ bị bỏ qua hoặc đánh dấu "không đủ dữ liệu" nếu không tìm thấy CSS trong HTML hoặc trong ô này.

Đây là kiểm tra tĩnh dựa trên quy tắc — không hiển thị trang như điện thoại thật, nên kết quả vùng chạm và bố cục là ước tính gần đúng dựa trên CSS của bạn, không phải phép đo chính xác từng pixel.

Công cụ này kiểm tra những gì

Bảy kiểm tra quan trọng với khách truy cập di động thực sự và chỉ số mobile-first của Google: thẻ viewport đúng và không chặn thu phóng; không có bố cục chiều rộng desktop cố định cứng; không có chữ quá nhỏ khó đọc; vùng chạm thoải mái trên liên kết và nút bấm; không có mã Flash/Java/marquee đã chết; và độ tương phản chữ đạt chuẩn WCAG. Dán toàn bộ HTML trang (View Source dùng được) cùng CSS nếu nằm trong stylesheet ngoài.

Cách mỗi kiểm tra hoạt động

Không có gì ở đây là đoán mò — mọi phát hiện đều từ việc phân tích HTML bạn dán (DOM) và CSS bạn dán (bộ phân tích quy tắc thực sự, mở các khối @media), sau đó áp dụng đúng ngưỡng mà Google và WCAG công bố.

Thẻ meta viewport

Kiểm tra thẻ có tồn tại không, có dùng width=device-width và initial-scale=1 không, và có chặn thu phóng bằng hai ngón tay không (user-scalable=no hoặc maximum-scale dưới 2, vốn là lỗi WCAG 1.4.4).

Bố cục chiều rộng desktop cố định

Quét CSS của bạn để tìm các selector cấu trúc (body, .wrapper, .container, #page, ...) có width hoặc min-width cố định từ 601px trở lên — dấu hiệu kinh điển của bố cục chưa từng được làm responsive.

Cỡ chữ dễ đọc

Đánh dấu bất kỳ khai báo font-size nào dưới 12px, mức tối thiểu thường dùng để đọc thoải mái trên màn hình điện thoại mà không cần thu phóng.

Kích thước vùng chạm

Ước tính chiều cao hiển thị của liên kết, nút bấm và phần tử role="button" từ font-size, line-height và padding (hoặc width/height rõ ràng), rồi so với hướng dẫn ~44-48px của Google Lighthouse và WCAG 2.5.5.

Nội dung plugin lỗi thời

Đánh dấu <applet>, <marquee>, <blink>, và bất kỳ <embed>/<object> nào trỏ đến Flash (.swf) — không thứ nào chạy được trên trình duyệt di động hiện nay.

Độ tương phản màu (WCAG)

Với bất kỳ quy tắc CSS nào đặt cả màu chữ và màu nền cùng nhau, tính tỷ lệ tương phản độ chói tương đối WCAG thực sự và so với mức tối thiểu AA 4.5:1 (hoặc 3:1 cho chữ lớn/đậm).

Điểm ngắt responsive

Đếm số quy tắc @media trong CSS như tín hiệu tham khảo rằng bố cục thích ứng với màn hình nhỏ hơn — chỉ mang tính thông tin, vì bố cục linh hoạt vẫn có thể responsive dù không có media query nào.

Câu hỏi thường gặp

Tại sao Google ngừng Mobile-Friendly Test?

Google đã đóng công cụ Mobile-Friendly Test độc lập vào tháng 12/2023, gộp việc kiểm tra thân thiện với di động vào các báo cáo lớn hơn của Search Console mà không còn công cụ kiểm tra một trang nhanh nào nữa. Công cụ này lấp khoảng trống đó bằng một bài kiểm tra dựa trên quy tắc, nhanh, không cần đăng nhập, chạy trên bất kỳ HTML nào bạn dán.

Tại sao tôi cần dán CSS riêng?

Hầu hết các trang thực đều tải CSS từ stylesheet ngoài (<link rel="stylesheet">), mà công cụ này không thể tự lấy thay bạn chỉ từ HTML đã dán. Dán nội dung stylesheet đó vào ô CSS, các kiểm tra bố cục, cỡ chữ, vùng chạm và độ tương phản sẽ chạy dựa trên đó.

Kích thước vùng chạm tốt là bao nhiêu?

Khoảng 44-48 pixel CSS cả chiều cao và chiều rộng, theo Google Lighthouse và WCAG 2.5.5 (Target Size). Dưới mức đó, ngón tay thật trên màn hình thật sẽ chạm nhầm vào các liên kết lân cận thường xuyên hơn rõ rệt.

Ước tính vùng chạm này có chính xác không?

Không — đây là ước tính đáng tin cậy từ font-size, line-height và padding (hoặc width/height rõ ràng) bạn khai báo, không phải kết xuất trình duyệt thực. Coi kết quả gần ranh giới 44-48px là "cần xác minh trên thiết bị thật", và kết quả thấp hơn nhiều là lỗi rõ ràng.

Công cụ này có gửi HTML hoặc CSS của tôi đi đâu không?

HTML/CSS bạn dán được gửi một lần, qua HTTPS, đến máy chủ của chúng tôi để chạy bộ phân tích (cần thiết để cùng một bộ quy tắc chạy nhất quán cho mọi người), và không được lưu trữ sau yêu cầu đó.