Đăng Ký Học SEO

SEO WordPress #17: Mobile, tối ưu giao diện và trải nghiệm

Tối ưu mobile WordPress là giữ nội dung đầy đủ, bố cục vừa màn hình, giúp người dùng đọc, chạm và nhập liệu thuận tiện. Layout phải chạy từ 320 px, viewport cho phép zoom, nội dung tương đương desktop. Nút quan trọng nên có vùng chạm khoảng 48 px. Popup, sticky UI và bàn phím ảo không được che nội dung hay nút gửi.

Tối ưu mobile WordPress là giữ nội dung đầy đủ, bố cục vừa màn hình và mọi thao tác đọc, chạm, nhập liệu đều thuận tiện. Bài #17 chuyển tiêu chí 134-143 thành các bước kiểm tra responsive, viewport, nội dung tương đương, chữ, vùng chạm, popup, hover, focus, form và sticky UI trên thiết bị thật.

Bài dành cho SEOer, người quản trị WordPress và đội phát triển cần một bộ nghiệm thu có bằng chứng. Mỗi tiêu chí có cách kiểm, lỗi thường gặp và công cụ phù hợp để áp dụng trên template đang sử dụng.

Tài liệu trả phí

Bản đầy đủ: SEO WordPress #17: Mobile, tối ưu giao diện và trải nghiệm

Phần đọc miễn phí giữ trọn phần chữ của bài. Bảng, danh sách bước và checklist của bài nằm trong bản đầy đủ, cùng bộ tài nguyên làm theo viết riêng cho bản bán, kèm tệp PDF và Excel.

  • Đọc trên trang học: trọn 8.238 chữ
  • Bộ tài nguyên làm theo: checklist, quy trình 16 bước, bảng lỗi, mẫu, nghiệm thu (6 bảng)
  • PDF: 19 trang, tải về
  • Excel: 11 bảng và 63 dòng checklist có cột đánh dấu
  • Quyền dùng: mua một lần, sở hữu vĩnh viễn

399.000đ thanh toán 16 USD qua PayPal hoặc thẻ Visa, Mastercard

Mua tài liệu

Xem trước bản đầy đủ: ba ảnh chụp từ chính tệp PDF và Excel bạn nhận sau khi mua.

Trang 1 bản PDF của tài liệu SEO WordPress #17: Mobile, tối ưu giao diện và trải nghiệm
Trang 1 trong 19 trang của bản PDF.
Trang 17 bản PDF của tài liệu SEO WordPress #17: Mobile, tối ưu giao diện và trải nghiệm, phần có bảng
Trang 17 trong 19 trang của bản PDF, phần có bảng.
Sheet Mục lục trong tệp Excel của tài liệu SEO WordPress #17: Mobile, tối ưu giao diện và trải nghiệm
Sheet Mục lục của tệp Excel: 11 bảng, mỗi bảng một sheet.

1. Mobile SEO WordPress cần tối ưu điều gì?

Mobile SEO WordPress cần đồng thời giữ đủ nội dung cho công cụ tìm kiếm và giúp người dùng đọc, chạm, điều hướng, nhập dữ liệu thuận tiện trên màn hình nhỏ. Một giao diện vừa chiều rộng vẫn có thể hỏng khi mở menu, phóng to chữ, xoay máy hoặc bật bàn phím.

Hãy đánh giá trang theo một hành trình cụ thể: từ kết quả tìm kiếm tới đọc nội dung, mở mục lục, so sánh thông tin và gửi biểu mẫu. Mỗi bước phải có đường đi rõ ràng. Nếu nút tư vấn bị chat che hoặc thông báo lỗi nằm sau bàn phím, việc trang đạt điểm hiệu năng cao không giải quyết được trở ngại đó.

Với WordPress, lỗi thường đến từ tương tác giữa theme, page builder và plugin: widget đặt chiều rộng cố định, hai bản nội dung cho desktop và mobile, popup bật cùng lúc với cookie banner, hoặc form chỉ được kiểm bằng chuột. Vì vậy, cần kiểm template lẫn trạng thái hoạt động.

Đầu ra cần có: danh sách lỗi gắn với URL, kích thước màn hình, thao tác tái hiện, thành phần gây lỗi và điều kiện nghiệm thu. Đây là căn cứ để sửa đúng nơi và đo lại sau mỗi lần cập nhật.

2. Checklist Mobile: 10 tiêu chí từ 134 đến 143

Mười tiêu chí dưới đây là khung nghiệm thu mobile của series, gồm bố cục, nội dung, khả năng tiếp cận và thao tác thực tế. Các nhãn trọng số giúp ưu tiên trong dự án; chúng không phải bảng yếu tố xếp hạng hoặc cách tính điểm SEO do Google công bố.

Bản đầy đủ của mục này có thêm: bảng 10 dòng (cột: Mã, Tiêu chí, Bằng chứng đạt, Trọng số). Xem bản đầy đủ

Chia trạng thái thành Đạt, Chưa đạt và Chưa kiểm. Một công cụ không báo lỗi không có nghĩa mọi hành trình đã được kiểm tra. Ví dụ, audit trang khi form chưa mở sẽ không chứng minh rằng bàn phím không che nút gửi.

Cách sử dụng: gắn mỗi dòng với ít nhất một URL đại diện và một phép kiểm có thể lặp lại. Giữ ảnh chụp hoặc video ngắn cho lỗi tương tác để người triển khai không phải đoán từ mô tả chung.

3. Tiêu chí 134: Responsive Design từ 320 px đến desktop

Layout phải thích ứng ở 320 px, 360 px, tablet và desktop mà không làm mất thông tin, phát sinh cuộn ngang toàn trang hoặc chồng điều khiển. Kiểm thêm các chiều rộng nằm giữa breakpoint vì lỗi thường xuất hiện ngay trước khi bố cục chuyển từ hai cột xuống một cột.

320 px là chiều rộng tính bằng CSS pixel, không phải số điểm ảnh vật lý của màn hình. WCAG Reflow dùng mốc tương đương 320 CSS px cho nội dung cuộn dọc; bảng dữ liệu hoặc bản đồ cần bố cục hai chiều có thể thuộc ngoại lệ.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng. Xem bản đầy đủ

Trong WordPress: mở trang đã xuất bản bằng phiên ẩn danh, không chỉ xem màn preview của page builder. Cache, font thực và widget bên thứ ba có thể làm kích thước khác với trình biên tập.

Trọng số: Bắt buộc. Công cụ: Chrome DevTools, BrowserStack, thiết bị thật; PageSpeed Checker của Novaverb hỗ trợ rà thêm hiệu năng của trang mobile, không thay thế việc đo bố cục.

4. Tiêu chí 135: Viewport đúng và không khóa phóng to

Trang nên có một khai báo viewport thống nhất với width=device-width và initial-scale=1, đồng thời giữ khả năng phóng to của người dùng. Cấu hình sai có thể khiến điện thoại hiển thị một trang desktop bị thu nhỏ, làm chữ và vùng chạm nhỏ dù CSS đã có media query.

Bản đầy đủ của mục này có thêm: mẫu để chép. Xem bản đầy đủ

Kiểm trong View Source và DOM đã render. Theme và plugin cùng chèn viewport có thể tạo hai khai báo khác nhau; hãy sửa tại nguồn phát sinh. Gỡ user-scalable=no và giới hạn maximum-scale gây cản trở zoom. MDN về viewport giải thích các thuộc tính và tác động tới khả năng tiếp cận.

Không sửa lỗi iPhone tự phóng to ô nhập bằng cách khóa zoom của cả trang. Trước hết kiểm cỡ chữ thực tế của input, CSS kế thừa và hành vi trên Safari iOS. Khả năng đọc và phóng to phải còn nguyên sau khi chỉnh.

Trọng số: Bắt buộc. Công cụ: View Source và DevTools để xác minh viewport; Meta Tag Checker của Novaverb dùng đối chiếu các metadata liên quan. Kết luận dựa trên thẻ thực và phép thử zoom.

5. Tiêu chí 136: Nội dung mobile và desktop tương đương

Mobile phải giữ nội dung chính, heading, metadata, robots directives, structured data và media quan trọng tương đương desktop. Google dùng phiên bản được thu thập bằng tác nhân smartphone cho mobile-first indexing; vì vậy, một giao diện gọn hơn nhưng thiếu thông tin có thể làm giảm phần nội dung Google nhận được.

Theo hướng dẫn mobile-first indexing của Google, cách trình bày có thể khác, nhưng nội dung chính cần tương đương. Responsive cùng HTML thường thuận tiện để duy trì điều này; dynamic serving và URL mobile riêng cần đối chiếu kỹ từng phiên bản.

Bản đầy đủ của mục này có thêm: bảng 5 dòng (cột: Nhóm, Cần đối chiếu). Xem bản đầy đủ

Thực hiện so sánh trên cùng phiên bản nội dung, cùng trạng thái đăng nhập và consent. Đổi User-Agent chỉ là một phép kiểm hỗ trợ; nó không mô phỏng đầy đủ môi trường Googlebot.

Trọng số: Bắt buộc. Công cụ: URL Inspection, Screaming Frog có render JavaScript; Website SEO Checker của Novaverb hỗ trợ kiểm crawlability và indexability, còn Meta Tag Checker của Novaverb hỗ trợ đối chiếu metadata.

6. Accordion, tab và nội dung tải sau tương tác

Accordion có thể giúp mobile gọn hơn khi nội dung đã có trong HTML hoặc DOM render và người dùng mở được bằng thao tác rõ ràng. Rủi ro xuất hiện khi bấm nút mới tải nội dung chính từ API, vì Google không tải nội dung cần thao tác vuốt, bấm hoặc gõ mới xuất hiện.

Trong WordPress, kiểm widget FAQ bằng View Source và DOM, sau đó mở bằng bàn phím và cảm ứng. Nếu câu trả lời chỉ được gọi về sau lần bấm đầu, cân nhắc render sẵn nội dung cần index rồi dùng cơ chế thu gọn để điều khiển cách trình bày.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng. Xem bản đầy đủ

Một phép kiểm hữu ích là tìm câu trả lời bằng tìm kiếm trong DOM trước khi mở accordion. Kết quả này hỗ trợ xác định nội dung đã tồn tại; vẫn cần kiểm URL Inspection để biết Google đang render và tiếp cận trang như thế nào.

7. Tiêu chí 137: Chữ dễ đọc, không phải chỉ tăng font-size

Nội dung chính cần dễ đọc ở mức zoom mặc định, với cỡ chữ, khoảng cách dòng và độ dài dòng phù hợp trên màn hình nhỏ. Khoảng 16 CSS px là điểm bắt đầu thiết kế phổ biến, không phải quy định cứng về xếp hạng hoặc bằng chứng trang đã đạt khả năng tiếp cận.

Chữ tiếng Việt có dấu cần đủ khoảng trống theo chiều dọc. Kiểm các dòng có dấu cao, chữ in đậm, link và danh sách. Line-height đặt quá chặt hoặc container có chiều cao cố định có thể cắt dấu khi font thật được tải.

Bản đầy đủ của mục này có thêm: mẫu để chép. Xem bản đầy đủ

Đây là mẫu khởi điểm, không phải cấu hình áp vào mọi theme. 1rem phụ thuộc cỡ chữ gốc; cần đo computed style và thử tăng cỡ chữ hệ thống. H1 có thể xuống nhiều dòng nhưng không nên bị ép thành một cột hẹp bởi icon, spacer hoặc chiều rộng cố định.

Trọng số: Quan trọng. Công cụ: DevTools, Lighthouse, axe DevTools và PageSpeed Checker của Novaverb. Kiểm thêm độ tương phản và đọc thật một đoạn dài để đánh giá nhịp chữ, không chỉ nhìn màn hình đầu.

8. Tiêu chí 138: Vùng chạm 48 px và mức tối thiểu WCAG

Nút quan trọng nên có vùng chạm khoảng 48 × 48 CSS px và khoảng cách đủ để hạn chế bấm nhầm. Cần phân biệt mục tiêu thiết kế này với WCAG 2.2 mức AA: tiêu chí 2.5.8 quy định tối thiểu 24 × 24 CSS px hoặc đáp ứng ngoại lệ phù hợp.

web.dev về tap target đề xuất vùng chạm khoảng 48 px. W3C về Target Size Minimum có các ngoại lệ về khoảng cách, điều khiển tương đương, liên kết trong dòng, điều khiển do trình duyệt quyết định và trường hợp thiết yếu. Vì vậy, không nên kết luận mọi link nhỏ hơn 24 px đều tự động vi phạm.

Đo vùng tương tác của phần tử, không chỉ kích thước icon. Một icon 20 px có thể nằm trong nút 48 px; ngược lại, một hình tròn trang trí 48 px không giúp nếu chỉ phần glyph bên trong bắt sự kiện.

Bản đầy đủ của mục này có thêm: mẫu để chép. Xem bản đầy đủ

Kiểm đặc biệt nút đóng popup, dấu cộng FAQ, phân trang và các icon meta cạnh nhau. Không áp chiều cao 48 px máy móc cho mọi liên kết trong đoạn văn.

Trọng số: Quan trọng. Công cụ: axe DevTools, audit Lighthouse có liên quan, thiết bị thật; PageSpeed Checker của Novaverb là phép rà bổ sung. Nghiệm thu bằng vùng chạm thực tế và khả năng thao tác.

9. Tiêu chí 139: Popup không cản trở nội dung chính

Người vào trang từ tìm kiếm nên tiếp cận nội dung chính thuận tiện, không phải đóng nhiều lớp quảng cáo trước khi đọc. Đánh giá popup ở lúc vào trang, sau vài giây, khi cuộn và khi chuyển trang, vì mỗi trigger có thể tạo một lớp cản trở khác.

Google hướng dẫn về interstitial khuyên dùng banner nhỏ hơn thay cho lớp phủ che nội dung và phân biệt các hộp thoại bắt buộc. Hộp thoại pháp lý hoặc đăng nhập cần thiết vẫn phải được thiết kế phù hợp với mục đích truy cập.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng. Xem bản đầy đủ

Một form đăng ký nhận tài liệu có thể đặt trong luồng nội dung. Nếu dùng modal, hãy để người đọc chủ động mở và quản lý focus đúng. Không xem mọi hộp thoại đăng nhập là lý do hợp lệ để che một bài viết vốn công khai.

Trọng số: Bắt buộc. Công cụ: kiểm trực tiếp và URL Inspection; Website SEO Checker của Novaverb hỗ trợ xem tín hiệu truy cập URL nhưng không xác nhận toàn bộ hành vi popup.

10. Tiêu chí 140: Menu và tooltip không phụ thuộc hover

Mọi hành động quan trọng phải có cách dùng bằng cảm ứng, bàn phím và chuột; hover chỉ là một cách kích hoạt bổ sung. Menu chỉ mở khi rê chuột sẽ không đáp ứng tốt điện thoại, còn tooltip chỉ xuất hiện bằng hover có thể làm người dùng bàn phím mất phần giải thích cần thiết.

Với menu có trang cha và submenu, có thể dùng link cho trang cha và một nút riêng mở submenu. Nhãn của nút cần nói rõ hành động, ví dụ “Mở danh mục khóa học”. Trạng thái aria-expanded phải phản ánh submenu đang mở hay đóng.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng. Xem bản đầy đủ

Đọc thêm W3C về Content on Hover or Focus khi thiết kế nội dung phụ xuất hiện theo tương tác.

Trọng số: Quan trọng. Công cụ: Device Mode, thiết bị thật và axe DevTools; dùng PageSpeed Checker của Novaverb để đối chiếu hiệu năng khi menu hoạt động, còn phép kiểm chức năng cần thao tác trực tiếp.

11. Tiêu chí 141: Thứ tự hiển thị, DOM và focus nhất quán

Khi layout đổi cột hoặc vị trí trên mobile, thứ tự đọc và tab focus vẫn phải giữ ý nghĩa của nội dung và quy trình thao tác. Tránh dùng CSS order để đưa nút lên đầu màn hình trong khi bàn phím phải đi qua nhiều phần tử nằm ở vị trí khác mới tới nút đó.

Sự nhất quán không có nghĩa mọi tọa độ thị giác phải trùng một chuỗi cứng. Với các khối độc lập, có thể có nhiều trình tự hợp lý. Điều cần bảo vệ là mối quan hệ như tên trường trước ô nhập, thông tin lựa chọn trước hành động xác nhận và heading trước nội dung thuộc heading.

W3C về Focus Order là nguồn đối chiếu cho trình tự focus giữ ý nghĩa và khả năng vận hành. Đừng dùng tabindex dương để vá một DOM lộn xộn; sửa cấu trúc gốc thường dễ duy trì hơn.

Bản đầy đủ của mục này có thêm: danh sách 4 dòng. Xem bản đầy đủ

Trọng số: Quan trọng. Công cụ: Accessibility Tree, Keyboard Test, axe DevTools; Meta Tag Checker của Novaverb hỗ trợ rà heading, còn thứ tự focus phải được kiểm bằng thao tác.

12. Tiêu chí 142: Biểu mẫu dễ nhập và dễ sửa lỗi trên mobile

Biểu mẫu mobile cần label rõ, kiểu nhập phù hợp, autocomplete đúng mục đích và thông báo lỗi gắn với trường cần sửa. Người dùng phải nhìn thấy trường đang nhập, hiểu vì sao dữ liệu chưa hợp lệ và hoàn tất gửi form khi bàn phím ảo đang hoạt động.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng, mẫu để chép. Xem bản đầy đủ

Số điện thoại nên dùng type=tel, không xem là phép tính bằng type=number. Inputmode gợi ý bàn phím, không thay validation. Placeholder không thay label vì biến mất khi gõ và có thể thiếu tương phản. web.dev về autofill giải thích cách khai autocomplete theo loại thông tin.

Trọng số: Quan trọng. Công cụ: Lighthouse, axe DevTools, thiết bị thật; PageSpeed Checker của Novaverb hỗ trợ đánh giá phần tải trang. Cần thử riêng gửi lỗi, sửa lỗi và gửi thành công trong môi trường kiểm thử.

13. Bàn phím ảo, xoay màn hình và safe area

Form và thanh điều khiển phải hoạt động khi vùng nhìn thấy bị thu nhỏ bởi bàn phím, thanh trình duyệt hoặc phần khuyết màn hình. Device Mode mô phỏng kích thước hữu ích nhưng không tái hiện đầy đủ hành vi bàn phím và thanh địa chỉ trên từng hệ điều hành.

Kiểm bằng thiết bị thật ở trạng thái mở bàn phím, chuyển trường và xoay ngang. Một bottom sheet đặt height: 100vh có thể giữ chiều cao không còn phù hợp khi vùng nhìn thấy đổi. Các đơn vị svh, lvh, dvh và Visual Viewport có thể hỗ trợ, nhưng cần chọn theo thành phần và thử trên trình duyệt mục tiêu.

Nếu giao diện tràn tới cạnh thiết bị, cân nhắc safe-area-inset cho padding. Khoảng bù phải đi cùng cách khai viewport và bố cục thực; không thêm padding khắp nơi vì có thể tạo khoảng trắng lớn hoặc cộng hai lần với thanh dưới.

Bản đầy đủ của mục này có thêm: mẫu để chép. Xem bản đầy đủ

Đọc MDN Visual Viewport để phân biệt vùng layout và vùng người dùng đang nhìn. Nghiệm thu cần thấy trường focus, thông báo lỗi và đường tới nút gửi trong các trạng thái này.

14. Tiêu chí 143: Sticky UI không che nội dung và thao tác

Sticky header, cookie banner, chat và CTA cài ứng dụng phải được phối hợp để nội dung, trường nhập và nút thao tác luôn tiếp cận được. Kiểm cả màn hình thấp và trạng thái zoom vì tổng chiều cao các lớp cố định có thể chiếm phần lớn vùng đọc.

WCAG 2.4.11 Focus Not Obscured Minimum yêu cầu thành phần nhận focus không bị nội dung do tác giả tạo che hoàn toàn. Mục tiêu UX của checklist này rộng hơn: giữ điều khiển chính nhìn thấy rõ và có thể sử dụng.

Bản đầy đủ của mục này có thêm: danh sách 5 dòng. Xem bản đầy đủ

Trọng số: Quan trọng. Công cụ: DevTools, Lighthouse, kiểm trực tiếp và PageSpeed Checker của Novaverb cho phần hiệu năng liên quan. Bằng chứng quyết định là hành trình đọc, focus và nhập liệu khi các lớp cùng xuất hiện.

15. Ma trận kiểm tra thiết bị, viewport và trạng thái

Một ma trận nhỏ nhưng phủ đúng rủi ro có giá trị hơn nhiều ảnh chụp trang chủ ở cùng trạng thái. Chọn viewport theo bố cục, thiết bị theo traffic thật và trạng thái theo hành trình chuyển đổi; mỗi tổ hợp cần có lý do để được đưa vào kiểm tra.

Bản đầy đủ của mục này có thêm: bảng 6 dòng (cột: Nhóm, Mẫu kiểm, Lỗi ưu tiên). Xem bản đầy đủ

Các kích thước trên là bộ mẫu dự án, không phải danh sách bắt buộc của Google. Bổ sung Safari iOS và Chrome Android dựa trên người dùng mục tiêu; thiết bị thật giúp kiểm thao tác mà trình giả lập chưa thể hiện đầy đủ.

Với lỗi chỉ xuất hiện một lần, lưu trình duyệt, hệ điều hành, chiều rộng CSS, mức zoom, consent và trạng thái đăng nhập. Thiếu các thông tin này, việc tái hiện sẽ tốn thời gian hơn bản thân sửa lỗi.

16. Kiểm theo template và plugin WordPress

Audit mobile nên phủ trang chủ, danh mục, bài viết, trang sản phẩm hoặc dịch vụ, landing page và biểu mẫu đang phục vụ người dùng. Mỗi template có thành phần khác nhau nên kết quả của trang chủ không đại diện cho bảng thông số, thư viện ảnh hay checkout.

Bản đầy đủ của mục này có thêm: bảng 5 dòng (cột: Template, Thành phần cần mở). Xem bản đầy đủ

Với page builder, kiểm container, breakpoint và thiết lập ẩn riêng từng thiết bị. Một spacer hoặc min-width đặt cho desktop có thể còn tác động sau khi các cột đã xếp dọc. Nên sửa component hoặc template chung nếu lỗi lặp trên nhiều URL.

Thực hiện thay đổi theme hoặc plugin trên staging, giữ một bản để quay lại và đo sau khi cache được làm mới. Phần SEO WordPress #16: Cache và kết nối giải thích cách xác minh phiên bản đang được phục vụ để tránh sửa đúng nhưng vẫn nghiệm thu trên bản cũ.

17. Ưu tiên sửa lỗi theo khả năng đọc và hoàn tất hành động

Ưu tiên lỗi làm mất nội dung, chặn thao tác hoặc khiến người dùng không thể hoàn tất hành trình trước các chỉnh sửa thẩm mỹ nhỏ. Trọng số trong checklist chỉ là điểm bắt đầu; phạm vi URL bị ảnh hưởng, tần suất và giá trị hành động sẽ quyết định mức khẩn cấp thực tế.

Bản đầy đủ của mục này có thêm: bảng 4 dòng (cột: Mức, Ví dụ, Điều kiện xác nhận). Xem bản đầy đủ

Không gán mọi lỗi accessibility cùng một mức. Nút đóng modal không tiếp cận được có thể chặn toàn trang; một nhãn phụ thiếu nhất quán có tác động khác. Ghi rõ ai bị ảnh hưởng và trong bước nào của hành trình.

Mỗi đợt sửa nên có URL mẫu, bằng chứng trước sau và điều kiện rollback. Kiểm tiếp Core Web Vitals trên WordPress khi bố cục đã dùng được, vì khả năng tương tác còn phụ thuộc tốc độ phản hồi và độ ổn định hiển thị.

18. Quy trình nghiệm thu Mobile trước và sau triển khai

Nghiệm thu mobile cần kết hợp kiểm cấu trúc, kiểm tự động và thao tác trên thiết bị thật, sau đó lặp lại trên trang đã triển khai. Lưu cùng URL, viewport và trạng thái để so sánh trước sau; nếu điều kiện khác nhau, kết quả khó quy về thay đổi vừa thực hiện.

Bản đầy đủ của mục này có thêm: danh sách 10 dòng. Xem bản đầy đủ

Mẫu phiếu lỗi có thể gồm: URL, template, trình duyệt, chiều rộng CSS, trạng thái, các bước tái hiện, kết quả mong đợi, kết quả thực tế và người xử lý. Ghi nhận Chưa kiểm nếu thiếu thiết bị hoặc môi trường, không đổi thành Đạt chỉ vì chưa thấy lỗi.

Để tách điểm lab khỏi trải nghiệm thực, đọc SEO WordPress #14: Điểm PageSpeed. Điểm số hỗ trợ tìm vấn đề; điều kiện nghiệm thu vẫn cần bám hành vi người dùng trên trang.

19. Công cụ Novaverb, tài liệu gốc và hướng thực hành

Dùng Novaverb để kiểm nhanh hiệu năng, metadata và khả năng truy cập URL, sau đó dùng DevTools, axe và thiết bị thật để kiểm hành vi. Mỗi công cụ chỉ quan sát một phần của trang; cần đọc đúng phạm vi báo cáo trước khi kết luận mobile đã đạt.

Tài liệu nên giữ trong hồ sơ dự án: Google mobile-first indexing, WCAG target size, WCAG Reflow và Chrome Device Mode. Dùng tài liệu gốc để phân biệt quy định, khuyến nghị thiết kế và quy ước nội bộ.

Nếu đang tìm lộ trình đào tạo SEO, có thể dùng checklist mobile này làm bài thực hành: chọn một template, ghi bằng chứng, sửa và nghiệm thu lại. Trang khóa học SEO giúp đối chiếu chương trình theo nền tảng hiện tại.

Muốn đưa audit mobile vào quy trình SEO trên website thật, anh chị có thể xem phạm vi và cách học của khóa học SEO Master. Giá trị của bài thực hành nằm ở khả năng giải thích lỗi và chứng minh đã sửa bằng cùng một phép kiểm.

Kết hợp bài này với tối ưu hình ảnh WordPress và tối ưu hình ảnh và code để xử lý cả tính dễ dùng lẫn chi phí tải tài nguyên trên điện thoại.

20. Câu hỏi thường gặp và kết luận

Các câu trả lời dưới đây giúp phân biệt tiêu chuẩn mobile, khuyến nghị thiết kế và bằng chứng nghiệm thu trong WordPress. Khi gặp một kết quả không rõ, hãy quay về URL, thiết bị và hành trình cụ thể để chọn phép kiểm phù hợp trước khi sửa theme hoặc cài thêm plugin.

Website responsive đã đủ chuẩn mobile chưa?

Chưa đủ để kết luận. Responsive mới giải quyết cách bố cục thích ứng. Cần kiểm thêm nội dung, khả năng zoom, vùng chạm, thứ tự focus, biểu mẫu và những lớp cố định trong trạng thái đang hoạt động.

Cỡ chữ 16 px có phải điều kiện xếp hạng không?

Không. Đây là mốc khởi điểm thiết kế phổ biến. Cỡ chữ thực, font, khoảng cách dòng, độ tương phản và khả năng tăng chữ mới giúp đánh giá nội dung có dễ đọc trong thực tế khi cụ thể hay không.

Nút nhỏ hơn 48 px có vi phạm WCAG không?

Không tự động. 48 px là mục tiêu thiết kế dễ chạm thường được khuyến nghị. WCAG 2.2 tiêu chí 2.5.8 mức AA quy định 24 × 24 CSS px cùng các ngoại lệ; cần đánh giá đúng vùng tương tác và trường hợp áp dụng.

Có được thu gọn nội dung bằng accordion trên mobile không?

Có thể, nếu nội dung chính tương đương desktop, đã có sẵn để thu thập và người dùng mở được. Tránh thiết kế chỉ gọi nội dung quan trọng về sau thao tác vì Google không tải nội dung cần thao tác vuốt, bấm hoặc gõ.

PageSpeed 100 có chứng minh giao diện mobile tốt không?

Không. Điểm hiệu năng lab không kiểm hết các trạng thái như popup sau cuộn, bàn phím che form hoặc nút đóng khó chạm. Cần kết hợp phép đo với thao tác trực tiếp.

Bảng rộng có được cuộn ngang không?

Bảng cần hai chiều để giữ ý nghĩa có thể dùng vùng cuộn riêng. Ngoại lệ đó không cho phép cả trang và các đoạn văn xung quanh bị tràn ngang; người đọc vẫn cần hiểu tiêu đề cột và thao tác trong vùng bảng.

Có nên khóa zoom để tránh form bị phóng to không?

Không nên. Hãy kiểm font-size của input và thử trên trình duyệt thật. Khóa zoom có thể làm người cần chữ lớn mất khả năng đọc và không giải quyết nguyên nhân bố cục hoặc kích thước trường.

Sticky CTA có ảnh hưởng xấu chỉ vì luôn hiển thị không?

Không thể kết luận chỉ từ việc nó cố định. Hãy kiểm diện tích chiếm chỗ, khả năng đóng, tương tác với chat và bàn phím, cùng việc nội dung và điều khiển đang focus có còn tiếp cận được hay không.

Mobile tốt là trang giữ đủ thông tin, đọc thuận tiện, chạm chính xác và hoàn tất được hành động trong các trạng thái thực tế. Kiểm đủ mười tiêu chí 134-143, lưu bằng chứng theo template và lặp lại sau triển khai giúp SEO WordPress có một quy trình cải thiện rõ ràng.

Bước tiếp theo

Muốn tự làm được việc này trên website của bạn?

Khóa học SEO Master hướng dẫn làm SEO trong 24 buổi, từ tư duy nền tảng tới triển khai và đo lường trên website thật.

Tài liệu trả phí

Bản đầy đủ: SEO WordPress #17: Mobile, tối ưu giao diện và trải nghiệm

Phần đọc miễn phí giữ trọn phần chữ của bài. Bảng, danh sách bước và checklist của bài nằm trong bản đầy đủ, cùng bộ tài nguyên làm theo viết riêng cho bản bán, kèm tệp PDF và Excel.

  • Đọc trên trang học: trọn 8.238 chữ
  • Bộ tài nguyên làm theo: checklist, quy trình 16 bước, bảng lỗi, mẫu, nghiệm thu (6 bảng)
  • PDF: 19 trang, tải về
  • Excel: 11 bảng và 63 dòng checklist có cột đánh dấu
  • Quyền dùng: mua một lần, sở hữu vĩnh viễn

399.000đ thanh toán 16 USD qua PayPal hoặc thẻ Visa, Mastercard

Mua tài liệu

Cách nghiệm thu mobile cho website WordPress

Các bước giúp bạn kiểm mười tiêu chí 134-143 trên thiết bị thật, ghi bằng chứng cho từng lỗi và nghiệm thu lại sau khi sửa theme hoặc plugin.

  1. Chọn template và URL đại diệnLiệt kê trang chủ, danh mục, trang sản phẩm hoặc dịch vụ, landing page và biểu mẫu, rồi gắn mỗi tiêu chí với ít nhất một URL đại diện.
  2. Lập ma trận viewport và trạng tháiChọn viewport theo bố cục, kể cả 320 px, 360 px, tablet và desktop, chọn thiết bị theo traffic thật và trạng thái theo hành trình chuyển đổi.
  3. Kiểm cấu trúc viewport và nội dungXem View Source và DOM đã render để xác nhận một khai báo viewport cho phép zoom, nội dung chính, heading, metadata và structured data tương đương desktop.
  4. Thao tác trên thiết bị thậtĐọc một đoạn dài, mở menu, bấm nút đóng popup, điền form khi bàn phím ảo đang mở và xoay ngang để xem sticky UI có che nội dung hay nút gửi không.
  5. Ghi phiếu lỗi kèm bằng chứngGhi URL, template, trình duyệt, chiều rộng CSS, trạng thái, các bước tái hiện, kết quả mong đợi và kết quả thực tế, kèm ảnh chụp hoặc video ngắn.
  6. Sửa theo mức ưu tiên trên stagingSửa trước lỗi làm mất nội dung hoặc chặn thao tác, thực hiện trên staging, giữ bản để quay lại và sửa component chung nếu lỗi lặp trên nhiều URL.
  7. Nghiệm thu lại sau triển khaiĐo lại trên trang đã triển khai sau khi cache được làm mới, cùng URL, viewport và trạng thái, rồi ghi Chưa kiểm nếu thiếu thiết bị hoặc môi trường.

Câu hỏi thường gặp về Tối ưu mobile WordPress

Vì sao giao diện vừa màn hình vẫn hỏng khi dùng thật trên điện thoại?

Giao diện vừa chiều rộng vẫn có thể hỏng khi mở menu, phóng to chữ, xoay máy hoặc bật bàn phím. Lỗi WordPress thường đến từ tương tác giữa theme, page builder và plugin, ví dụ widget đặt chiều rộng cố định hoặc popup bật cùng lúc với cookie banner. Vì vậy cần kiểm cả template lẫn trạng thái hoạt động.

Vì sao bàn phím ảo hay che thông báo lỗi và nút gửi form trên mobile?

Bàn phím ảo, thanh trình duyệt hoặc phần khuyết màn hình làm vùng nhìn thấy thu nhỏ, trong khi bottom sheet đặt height: 100vh vẫn giữ chiều cao cũ. Device Mode không tái hiện đầy đủ hành vi bàn phím, nên cần kiểm trên thiết bị thật khi mở bàn phím, chuyển trường và xoay ngang.

Sai lầm nào hay gặp khi dùng tabindex hoặc CSS order để sắp lại bố cục mobile?

Sai lầm hay gặp là dùng CSS order đưa nút lên đầu màn hình trong khi bàn phím phải đi qua nhiều phần tử khác mới tới nút đó. Dùng tabindex dương để vá DOM lộn xộn cũng khó duy trì. Sửa cấu trúc gốc giúp giữ tên trường trước ô nhập và heading trước nội dung thuộc heading.

Popup dễ cản trở là lớp phủ che nội dung chính, buộc người đọc đóng nhiều lớp quảng cáo trước khi đọc. Cần đánh giá popup lúc vào trang, sau vài giây, khi cuộn và khi chuyển trang. Google khuyên dùng banner nhỏ hơn, còn form đăng ký nhận tài liệu có thể đặt trong luồng nội dung.

Bộ checklist mobile của series SEO WordPress kiểm những nhóm việc gì?

Bộ checklist gồm mười tiêu chí 134-143: responsive design, viewport, nội dung tương đương desktop, chữ dễ đọc, vùng chạm, popup, menu không phụ thuộc hover, thứ tự focus, biểu mẫu và sticky UI. Mỗi tiêu chí được chia trạng thái Đạt, Chưa đạt hoặc Chưa kiểm và gắn với ít nhất một URL đại diện.

Trọng số Bắt buộc và Quan trọng trong checklist mobile dùng để làm gì?

Trọng số giúp ưu tiên việc kiểm và sửa trong dự án. Nhãn Bắt buộc gắn với responsive, viewport, nội dung tương đương và popup, còn các tiêu chí khác mang nhãn Quan trọng. Các nhãn này không phản ánh cách Google tính điểm SEO. Phạm vi URL bị ảnh hưởng, tần suất và giá trị hành động mới quyết định mức khẩn cấp.

Viewport WordPress cần khai báo những giá trị nào để mobile hiển thị đúng?

Trang cần một khai báo viewport thống nhất với width=device-width và initial-scale=1, đồng thời giữ khả năng phóng to. Gỡ user-scalable=no và giới hạn maximum-scale. Theme và plugin cùng chèn viewport có thể tạo hai khai báo khác nhau, nên kiểm trong View Source lẫn DOM đã render và sửa tại nguồn phát sinh.

Ma trận kiểm tra mobile cần lưu những thông tin gì để tái hiện lỗi?

Với lỗi chỉ xuất hiện một lần, cần lưu trình duyệt, hệ điều hành, chiều rộng CSS, mức zoom, consent và trạng thái đăng nhập. Viewport chọn theo bố cục, thiết bị theo traffic thật, trạng thái theo hành trình chuyển đổi. Bổ sung Safari iOS và Chrome Android dựa trên người dùng mục tiêu.

Tối ưu mobile WordPress là gì và gồm những việc chính nào?

Tối ưu mobile WordPress là giữ nội dung đầy đủ, bố cục vừa màn hình và giúp người dùng đọc, chạm, nhập liệu thuận tiện. Việc chính gồm layout chạy từ 320 px, viewport cho phép zoom, nội dung tương đương desktop, vùng chạm khoảng 48 px và popup, sticky UI, bàn phím ảo không che nội dung.

Mobile-first indexing ảnh hưởng thế nào tới website WordPress?

Mobile-first indexing nghĩa là Google dùng phiên bản được thu thập bằng tác nhân smartphone. Website WordPress có bản mobile thiếu nội dung chính, heading, metadata, robots directives hoặc structured data có thể làm giảm phần nội dung Google nhận được. Cách trình bày trên mobile có thể khác desktop, nhưng nội dung chính cần tương đương.

Kiểm tra mobile WordPress bằng DevTools có đủ hay cần thiết bị thật?

Kiểm tra mobile WordPress bằng Chrome DevTools chưa đủ, cần thêm thiết bị thật. Device Mode mô phỏng kích thước hữu ích nhưng không tái hiện đầy đủ hành vi bàn phím ảo và thanh địa chỉ. Thiết bị thật giúp kiểm thao tác chạm, xoay ngang, chuyển trường form và các lớp sticky cùng xuất hiện.

Nên bắt đầu audit mobile cho website WordPress từ đâu?

Audit mobile cho website WordPress nên bắt đầu từ một hành trình cụ thể: từ kết quả tìm kiếm tới đọc nội dung, mở mục lục và gửi biểu mẫu. Sau đó chọn template đại diện, kiểm mười tiêu chí 134-143 và ghi danh sách lỗi gắn với URL, kích thước màn hình, thao tác tái hiện.

Menu

Thêm vào màn hình chính

  1. 1 Bấm nút Chia sẻ ở thanh công cụ Safari
  2. 2 Kéo xuống, chọn Thêm vào MH chính
  3. 3 Bấm Thêm ở góc trên bên phải

Ba bước này là của Safari. Nếu đang xem trong ứng dụng khác thì bấm mở bằng Safari trước đã.