Cụm từ "thân thiện với thiết bị di động" hay "mobile friendly" chắc các bạn cũng đều nghe qua rồi hoặc bạn cũng đã sử dụng công cụ của Google để kiểm tra trang blog của bạn có thân thiện với thiết bị di động không?
Tuy nhiên vẫn chưa có câu trả lời theo dạng định nghĩa cho khái niệm thế nào là trang thân thiện với thiết bị di động? Nếu bạn vẫn không tin, bạn cứ thử tìm kiếm kết quả cho câu hỏi này trên Google tìm kiếm, bạn sẽ nhận được rất nhiều câu trả lời và tất nhiên tất cả câu trả lời đều không ra được một khái niệm chung nhất. Thay vì bạn đang cố gắng đi tìm câu trả lời, trong bài này mình đưa ra cho bạn nhận biết một vài yếu tố phải có và các yếu tố này chắc chắn tạo nên một trang thân thiện với thiết bị di động.
Trang web của bạn bao gồm một tập hợp nhiều trang, với mỗi URL là một trang riêng biệt, và tất nhiên bạn không có đủ kiên nhẫn ngồi kiểm tra từng URL của mỗi trang xem có thân thiện với thiết bị di động hay không do đó bạn cứ đảm bảo mỗi trang phải có những yếu tố tạo thành thân thiện với thiết bị di động.
Các yếu tố ngắn gọn và rất quan trọng tạo nên một trang thân thiện với thiết bị di động, lưu ý bạn đang đọc bài viết dành cho Blogger chứ không phải mã nguồn khác vì với một số mã nguồn khác có thể cần thêm một vài yếu tố khác.
- Trang tải nhanh
- Dễ nhìn
- Dễ đọc
- Dễ tiếp cận
- Dễ tìm kiếm
- Không chặn URL, JavaScript, trình phát
Sau đây mình giải thích ngắn gọn về mỗi yếu tố
Trang tải nhanh
Yếu tố này ai cũng biết cả thế nhưng làm cho trang tải nhanh không hề đơn giản đặc biệt trên smartphone. Muốn làm cho trang tải nhanh cánh làm hay nhất là loại bỏ những yếu tố gây ra nguyên nhân khiến trang tải chậm, những yếu tố là có thể kể ra: kích thước trang nặng, hình ảnh không được nén và có kích thước lớn hơn vị trí hiển thị, tải liên kết ngoài không đồng bộ.
Các bạn tham khảo các bài viết chuyên mục Page speed để biết cách làm trang tải nhanh
Dễ nhìn
Trang có khung nhìn thích hợp với màn hình điện thoại có nghĩa tất cả nội dung của trang phải nằm trong màn hình hiển thị của điện thoại. Vấn đề này nó liên quan đến chiều rộng của trang được quy định bởi hai yếu tố
Thẻ meta đầu trang
<meta name="viewport" content="width=device-width,initial-scale=1"/>
Css @media
Các bạn xem bài viết Quy tắc đặt @media với thuộc tính min-width và max-width đúng cách khi viết css
Đễ đọc
Kích thước và màu sắc phông chữ quyết định nội dung văn bản có dễ đọc hay không, các thuộc tính css cho phông chữ thường dùng: font-family, font-style, font-weight, color, line-height. Nên tối ưu để tất cả mọi người đều có thể đọc được cho dù người thị lực bình thường hoặc kém hơn. Thói quen người dùng thường cầm điện thoại ở một vị trí cố định cho dù màn hình điện thoại có kích thước lớn hay nhỏ thì thói quen cầm điện thoại với khoảng cách không đổi và những người thị lực kém hơn họ sẽ cầm điện thoại gần mắt hơn. Do đó nên chú trọng kích thước phông chữ trên những điện thoại có kích thước màn hình nhỏ chiều rộng 365px trở xuống.
Dễ tiếp cận
Yếu tố này chỉ ra các liên kết, button các thẻ khác gọi chung là các mục tiêu nhấn có kích thước và khoảng cách giữa chúng phải đủ lớn để khi người dùng nhấp vào trên màn hình cảm ứng không thất bại. Các bạn tham khảo bài viết Thiết kế các mục tiêu nhấn có kích thước và khoảng cách đáp ứng để hiểu rõ hơn.
Ngoài ra dễ tiếp cận còn liên quan đến thao tác nhanh nghĩa là cái gì còn thể thao tác được ở trang hiện tại nên đưa vào chứ đừng chuyển đến một trang khác.
Dễ tìm kiếm
Yếu tố này liên quan đến hộp tìm kiếm của blog, hộp tìm kiếm phải luôn hiển thị sẵn hoặc có thể thay thế bằng biểu tượng để người dùng nhìn thấy tìm kiếm bài viết bất cứ khi nào. Tránh làm ẩn hộp tìm kiếm gây khó khăn cho người dùng mỗi khi muốn tìm kiếm lại không biết hộp tìm kiếm trang web nằm ở đâu.
Những yếu tố mình vừa nêu ở trên chỉ cảm nhận bằng mắt thường nhưng đối với các công cụ tìm kiếm chúng ta hay gọi bằng robots (con bọ), nói cao siêu gọi là thuật toán được lập trình sẵn khi khám phá một trang dựa vào những thứ đã lập trình đưa ra kết quả.
Không chặn URL, JavaScript, trình phát
Đảm bảo robots phải đọc được tất cả mã HTML, JavaScript, trình phát mà không bị chặn. Nếu bạn chặn một yếu tố nào đó của trang sẽ khiến robots khó đọc hoặc không thể đọc được mục đó và robots sẽ không hiểu và có thể không lập chỉ mục trên kết quả tìm kiếm.
Sử dụng thẻ meta chỉ rõ cho robots biết được trang hiện tại thay vì chặn URL trang trong tệp robots.txt. Lưu ý nếu bạn chặn URL trang trong tệp robots.txt bạn chỉ chặn theo dõi nofollow chứ không ngăn trang lập chỉ mục do đó ban thường thấy đã chặn trang mà trang vẫn hiển thị trên kết quả tìm kiếm.
Sử dụng thẻ meta với điều kiện trang trong blogspot, ví dụ với trang lưu trữ
<b:if cond='data:view.isArchive'>
<meta content='noindex, follow' name='robots'/>
</b:if>
Thẻ meta cho phép robots theo dõi URL chính của trang cùng các URL của trang khác đang hiển thị trong trang hiện tại nhưng không được lập chỉ mục URL trang hiện tại.
Công cụ kiểm tra trang thân thiện với thiết bị di động
- https://search.google.com/test/mobile-friendly
- https://search.google.com/search-console
- https://web.dev/measure
Lưu ý thêm sau URL trang tham số m=1, ví dụ https://www.thietkeblogspot.com/?m=1 hoặc https://www.thietkeblogspot.com/search/label/thiet-ke-blogspot?max-results=10&m=1
