Các cấu hình khi thiết kế web Responsive

Thiết kế web Responsive (RWD) là một thiết lập nơi mà các máy chủ luôn gửi các mã HTML tương tự cho tất cả các thiết bị và CSS được sử dụng để thay đổi các kiết xuất đồ họa (rendering) của trang trên thiết bị.

Các thuật toán của Google có thể tự động phát hiện các thiết lập này nếu Googlebot được phép thu thập dữ liệu trang và tài nguyên của website bao gồm CSS, JavaScript, và hình ảnh.

Sử dụng thẻ meta name="viewport" để thông báo cho trình duyệt điều chỉnh các nội dung như thế nào. Xem các hướng dẫn dưới đây để tìm các tài liệu phù hợp.

Để thông báo cho trình duyệt trang của bạn sẽ thích ứng với tất cả các thiết bị, thêm một thẻ meta vào phần đầu của tài liệu như sau:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Các thẻ meta viewport thông báo trình duyệt làm thế nào để điều chỉnh kích thước và quy mô của trang cho phù hợp với độ rộng của thiết bị. Khi các yếu tố meta viewport không đặt trong mã nguồn, các trình duyệt di động mặc định để hiển thị trang ở một độ rộng màn hình máy tính để bàn (thường là khoảng 980px, mặc dù giữa các thiết bị khác nhau). Trình duyệt di động sau đó cố gắng để làm cho nội dung tìm kiếm tốt hơn bằng cách tăng kích thước font chữ và mở rộng các nội dung để phù hợp với màn hình hoặc chỉ hiển thị một phần của nội dung đó có phù hợp với màn hình.

Đối với người dùng, điều này có nghĩa là kích thước font chữ có thể có một sự xuất hiện không phù hợp, và người dùng có thể phải double-tap hay pinch-to-zoom để có thể xem và tương tác với các nội dung. Điều này Google không thể đánh giá một trang như điện thoại di động thân thiện, vì nó đòi hỏi loại này (hoặc gõ) trong tương tác trên một thiết bị di động.

Bên trái là một trang mà không có thẻ viewport meta — do đó các trình duyệt di động giả định chiều rộng máy tính để bàn và quy mô trang để phù hợp với màn hình, làm cho nội dung khó đọc. Bên phải là cùng một trang với một khung nhìn cụ thể phù hợp với chiều rộng thiết bị — trình duyệt di động không chia tỷ lệ trang và nội dung là có thể đọc được.

Đối với hình ảnh responsive, bao gồm các thẻ <picture>.

Như một quy tắc chung, nếu trang web của bạn làm việc trong một trình duyệt gần đây như Google Chrome hoặc Apple Mobile Safari, nó sẽ làm việc với các thuật toán của chúng tôi.

Tại sao phải thiết kế Responsive

Google khuyên bạn nên sử dụng thiết kế web responsive bởi vì nó:

• Dễ sử dụng hơn cho người dùng để chia sẻ và liên kết đến nội dung của bạn với một URL duy nhất.
• Giúp các thuật toán của Google chỉ định chính xác để lập chỉ mục trang hơn là cần để báo hiệu sự tồn tại của máy tính để bàn hoặc trang di động tương ứng.
• Bạn sẽ không phải thiết kế nhiều trang cho cùng một nội dung.
• Làm giảm các sai lầm phổ biến ảnh hưởng đến các website trên điện thoại di động.
• Không yêu cầu phải chuyển hướng cho người sử dụng để xem thiết bị được tối ưu hóa, làm giảm thời gian tải trang. Ngoài ra, người sử dụng dựa trên chuyển hướng dễ bị lỗi và có thể làm giảm trải nghiệm người dùng của đến trang web của bạn (xem “cạm bẫy khi phát hiện user agent” để biết thêm chi tiết).
• Tiết kiệm tài nguyên khi Googlebot thu thập dữ liệu từ trang web của bạn. Đối với các trang web thiết kế responsive, một user agent duy nhất sử dụng Googlebot chỉ cần thu thập thông tin trang web của bạn một lần, chứ không phải là bò nhiều lần với các user agent Googlebot khác nhau để lấy tất cả các phiên bản của nội dung. Cải thiện này có thể gián tiếp giúp chỉ số Google dành cho website nhanh chóng và tốt hơn.

Trọng Đại - iZdesigner.com