Thiết kế web đáp ứng

Thiết kế web đáp ứng (RWD) là một cách thiết lập trong đó máy chủ luôn gửi cùng một mã HTML đến tất cả các thiết bị và CSS được sử dụng để thay đổi cách hiển thị trang trên thiết bị. Các thuật toán của Google có thể tự động phát hiện cách thiết lập này nếu tất cả các tác nhân người dùng Googlebot được phép thu thập dữ liệu trang và nội dung trên trang (CSS, JavaScript và hình ảnh).

Thiết kế đáp ứng phân phát cùng một mã đến tất cả các thiết bị. Mã này sẽ điều chỉnh theo kích thước màn hình.

TL;DR

  • Sử dụng thẻ meta name="viewport" để cho trình duyệt biết cách điều chỉnh nội dung.
  • Xem trang Kiến thức cơ bản về web của chúng tôi để đọc thêm tài liệu.

Sử dụng meta name="viewport"

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

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

Thẻ meta viewport sẽ hướng dẫn trình duyệt cách điều chỉnh kích thước và tỷ lệ của trang theo chiều rộng của thiết bị. Khi không có phần tử meta viewport, thì theo mặc định, trình duyệt trên thiết bị di động sẽ hiển thị trang ở độ rộng màn hình máy tính để bàn (thường là khoảng 980px, mặc dù kích thước này khác nhau tùy theo thiết bị). Sau đó, trình duyệt trên thiết bị di động sẽ cố gắng làm cho nội dung đẹp hơn bằng cách tăng kích thước phông chữ và hiển thị nội dung theo tỷ lệ vừa với màn hình hoặc chỉ hiển thị phần nội dung vừa 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 phông chữ có thể hiển thị không nhất quán và người dùng có thể phải nhấn đúp hoặc chụm để thu phóng thì mới xem và tương tác được với nội dung. Đối với Google, chúng tôi có thể không xem một trang là thân thiện với thiết bị di động vì trang yêu cầu kiểu (hoặc loại) tương tác này trên thiết bị di động.

Bên trái là một trang mà thẻ meta viewport không được xác định - do đó trình duyệt trên thiết bị di động hiển thị ở chiều rộng màn hình cho máy tính để bàn và hiển thị trang theo tỷ lệ vừa với màn hình, khiến nội dung khó đọc. Bên phải là cùng trang đó nhưng thẻ meta viewport được xác định để vừa với chiều rộng của thiết bị - trình duyệt trên thiết bị di động không hiển thị trang theo tỷ lệ và nội dung rất dễ đọc.

Đối với hình ảnh đáp ứng, hãy bao gồm cả phần tử <picture>.

Theo nguyên tắc chung, nếu trang web của bạn hoạt động tốt trên một trình duyệt mới ra mắt như Google Chrome hoặc Apple Mobile Safari, thì trang sẽ tương thích với các thuật toán của chúng tôi.

Tại sao nên sử dụng thiết kế đáp ứng

Chúng tôi khuyên bạn nên sử dụng thiết kế web đáp ứng vì thiết kế này:

  • Giúp người dùng chia sẻ và liên kết đến nội dung của bạn dễ dàng hơn chỉ bằng một URL.
  • Giúp thuật toán của Google gán các thuộc tính lập chỉ mục cho trang một cách chính xác thay vì phải chỉ báo rằng có các phiên bản tương ứng cho máy tính để bàn/thiết bị di động.
  • Giúp giảm thời gian thực hiện các thao tác kỹ thuật để duy trì nhiều trang cho cùng một nội dung.
  • Giảm khả năng xảy ra các lỗi phổ biến ảnh hưởng đến các trang web trên thiết bị di động.
  • Không yêu cầu người dùng phải chuyển hướng để có chế độ xem được tối ưu hóa cho thiết bị, giúp giảm thời gian tải. Ngoài ra, việc chuyển hướng dựa trên tác nhân người dùng dễ gặp lỗi và có thể làm giảm trải nghiệm người dùng trên trang web của bạn (xem phần Các sai lầm khi phát hiện tác nhân người dùng" để biết chi tiết).
  • Giảm mức tài nguyên sử dụng khi Googlebot thu thập dữ liệu trang web của bạn. Đối với các trang sử dụng thiết kế web đáp ứng, một tác nhân người dùng Googlebot chỉ cần thu thập dữ liệu trang của bạn một lần, thay vì thu thập dữ liệu nhiều lần bằng các tác nhân người dùng Googlebot khác nhau để truy xuất tất cả các phiên bản nội dung. Điểm cải thiện này về hiệu suất thu thập dữ liệu có thể gián tiếp giúp Google lập chỉ mục nhiều nội dung hơn trên trang web của bạn và duy trì cập nhật nội dung có trong chỉ mục.

Nếu bạn quan tâm đến thiết kế web đáp ứng, hãy bắt đầu với bài đăng blog của chúng tôi trên Trung tâm quản trị trang web và truy cập trang Kiến thức cơ bản về web.

JavaScript

Một phần trong quá trình xây dựng các trang web thân thiện với thiết bị di động mà bạn phải xem xét cẩn thận là việc sử dụng JavaScript để thay đổi cách hiển thị và hành vi của trang web trên các thiết bị khác nhau. Ví dụ là cách sử dụng JavaScript điển hình là quyết định xem quảng cáo hoặc biến thể độ phân giải hình ảnh nào sẽ hiển thị trong trang.

Phần này mô tả các phương thức khác nhau để sử dụng JavaScript và cách chúng liên quan đến khuyến nghị của Google về việc sử dụng thiết kế web đáp ứng.

Cấu hình phổ biến

Ba cách triển khai JavaScript phổ biến cho các trang web thân thiện với thiết bị di động là:

  • Thích ứng với JavaScript: Trong cấu hình này, tất cả các thiết bị được cung cấp cùng một nội dung HTML, CSS và JavaScript. Khi JavaScript được thực thi trên thiết bị, phương thức hiển thị hoặc hành vi của trang web sẽ thay đổi. Nếu một trang web yêu cầu JavaScript, thì đây là cấu hình mà Google đề xuất sử dụng.
  • Phát hiện kết hợp: Trong cách triển khai này, trang web sử dụng cả JavaScript và chức năng phát hiện phía máy chủ đối với các khả năng của thiết bị để phân phát nội dung khác nhau cho các thiết bị khác nhau.
  • JavaScript được phân phát động: Trong cấu hình này, tất cả các thiết bị được cung cấp cùng một HTML, nhưng JavaScript được phân phát từ một URL tự động phân phát mã JavaScript khác nhau tùy thuộc vào tác nhân người dùng của thiết bị.

Chúng ta hãy xem xét từng cấu hình một cách chi tiết.

Thích ứng với JavaScript

Trong cấu hình này, một URL phân phát cùng một nội dung (HTML, CSS, Javascript, hình ảnh) cho tất cả các thiết bị. Chỉ khi JavaScript được thực thi trên thiết bị thì phương thức hiển thị hoặc hành vi của trang web mới thay đổi. Phương thức này tương tự như cách hoạt động của thiết kế web đáp ứng (sử dụng truy vấn phương tiện CSS).

Ví dụ: một trang phân phát cho tất cả thiết bị cùng một HTML, trong đó có phần tử <script> yêu cầu một URL bên ngoài phân phát JavaScript. Tất cả các thiết bị yêu cầu URL của JavaScript sẽ nhận được cùng một mã. Khi được thực thi, JavaScript sẽ phát hiện thiết bị và quyết định thay đổi một phần tử gì đó trên trang, giả sử như bao gồm một hình ảnh hoặc mã quảng cáo thân thiện với điện thoại thông minh thay vì hình ảnh hoặc mã cho máy tính để bàn.

Cấu hình này liên quan rất chặt chẽ đến thiết kế web đáp ứng và các thuật toán của chúng tôi có thể tự động phát hiện cách thiết lập này. Hơn nữa, cấu hình này không yêu cầu tiêu đề Vary HTTP vì các URL của trang và phần tử trên trang không tự động phân phát nội dung. Do những ưu điểm này, nếu trang web của bạn yêu cầu sử dụng JavaScript, thì đây là cấu hình mà chúng tôi đề xuất sử dụng.

Phát hiện kết hợp

Phát hiện kết hợp là một cách thiết lập trong đó máy chủ hoạt động song song với JavaScript trên ứng dụng khách để phát hiện các khả năng của thiết bị và thay đổi nội dung phân phát.

Ví dụ: một trang web có thể chọn thay đổi cách hiển thị nội dung dựa trên việc thiết bị là máy tính để bàn hay điện thoại thông minh. Trong trường hợp này, trang web có thể bao gồm JavaScript phát hiện kích thước màn hình mà sau đó sẽ được gửi đến máy chủ để cập nhật hoặc thay đổi mã được gửi đến thiết bị. Thông thường, JavaScript lưu trữ các khả năng thiết bị đã phát hiện trong một cookie mà máy chủ sẽ đọc trong các lần truy cập tiếp theo từ cùng một thiết bị.

Vì máy chủ trả về HTML khác nhau cho các tác nhân người dùng khác nhau, nên phát hiện kết hợp được coi là một loại cấu hình phân phát động. Bạn có thể tìm chi tiết đầy đủ trong phần Phân phát động. Nhưng tóm lại, trang web phải bao gồm tiêu đề phản hồi HTTP "Vary: User-agent" khi một URL phân phát nội dung HTML khác nhau cho các tác nhân người dùng khác nhau được yêu cầu.

JavaScript được phân phát động

Trong cấu hình này, tất cả các thiết bị được cung cấp cùng một HTML, trong đó có phần tử <script> để bao gồm một tệp JavaScript bên ngoài mà có thể có nội dung khác nhau tùy thuộc vào tác nhân người dùng đưa ra yêu cầu. Điều đó nghĩa là mã JavaScript được phân phát động.

Trong trường hợp này, tệp JavaScript nên được phân phát với tiêu đề HTTP "Vary: User-agent". Đây là một tín hiệu thông báo cho bộ nhớ đệm Internet và Googlebot rằng JavaScript có thể khác nhau đối với các tác nhân người dùng khác nhau, và cũng là tín hiệu báo cho Googlebot biết nên thu thập dữ liệu tệp JavaScript này bằng các tác nhân người dùng Googlebot khác nhau.

Gửi phản hồi về...