Thiết lập cấu hình với các công cụ tìm kiếm

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.

Thiết kế Responsive hỗ trợ hiển thị tất cả các thiết bị với cùng một mã có thể tự điều chỉnh cho kích thước phù hợp với màn hình..
Thiết kế Responsive hỗ trợ hiển thị tất cả các thiết bị với cùng một mã có thể tự điều chỉnh cho kích thước phù hợp với màn hình..

TL;DR

  • 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.

Ảnh minh họa thiết kế responsive và thiết kế dành cho máy tính bàn
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.

Nếu bạn quan tâm đến web responsive, bắt đầu tìm hiểu với các Thiết kế web Responsive và khai thác sức mạnh truy vấn.

Nhớ lại

  • Hãy chắc chắn không ngăn chặn các crawling của bất kỳ tài nguyên trên trang (như CSS, JavaScript, và hình ảnh) với Googlebot sử dụng robots.txt hoặc các phương pháp khác.Truy cập đầy đủ các tập tin bên ngoài sẽ giúp các thuật toán của chúng tôi phát hiện đáp ứng cấu hình thiết kế web trang web của bạn và xử lý nó một cách thích hợp.
  • Tìm hiểu sai lầm phổ biến để chắc chắn rằng bạn không đi vào vết xe đổ.

JavaScript

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

Cấu hình phổ biến

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

  • JavaScript-adaptive: Trong cấu hình này, tất cả các thiết bị được phục vụ như nhau HTML, CSS, JavaScript và nội dung. Khi JavaScript được thực hiện trên các thiết bị, thiết lập hoặc hiển thị của trang web thay đổi theo. Nếu một trang web yêu cầu JavaScript, đây là cấu hình đề nghị của Google.
  • Combined detection: Để thực hiện điều này, các trang web sử dụng cả JavaScript và phía máy chủ khả năng phát hiện thiết bị để hiển thị nội dung khác nhau cho các thiết bị khác nhau..
  • Tự động được phục vụ JavaScript: Trong cấu hình này, tất cả các thiết bị được phục vụ như nhau tùy thuộc vào user-agent của thiết bị.

Hãy xem mỗi thông tin trong các cấu hình chi tiết..

JavaScript-adaptive

Kết hợp phát hiện là một thiết lập nơi mà các máy chủ hoạt động song song với JavaScript trên máy khách để phát hiện những khả năng của thiết bị và làm thay đổi các nội dung đang được phục vụ.

Như một ví dụ, một trang phục vụ tất cả các thiết bị cùng một HTML trong đó bao gồm một thẻ <script> yêu cầu một URL bên ngoài phục vụ các JavaScript. Tất cả các thiết bị yêu cầu URL của JavaScript được lấy từ cùng mã. Khi thực hiện, JavaScript phát hiện các thiết bị và quyết định thay đổi một cái gì đó về trang web, nói để bao gồm một hình ảnh điện thoại thông minh thân thiện hoặc mã quảng cáo thay vì các lựa chọn thay thế máy tính để bàn.

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

Kết hợp phát hiện

Kết hợp phát hiện là một thiết lập nơi mà các máy chủ hoạt động song song với JavaScript trên máy khách để phát hiện những khả năng của thiết bị và làm thay đổi các nội dung đang được phục vụ.

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

Các máy chủ trả về HTML khác nhau để sử dụng các tác nhân khác nhau, kết hợp phát hiện được coi là một loại cấu hình dynamic serving. Các chi tiết được mô tả đầy đủ, nhưng để tóm tắt ngắn gọn, các trang web bao gồm các "Vary: User-agent" đáp ứng tiêu đề HTTP khi một URL phục vụ nội dung HTML khác nhau để sử dụng các tác nhân khác nhau được yêu cầu.

Tự động được phục vụ JavaScript

Trong cấu hình này, tất cả các thiết bị được phục vụ như nhau trong đó bao gồm một HTML <script> phần tử bao gồm một tập tin JavaScript bên ngoài mà có thể có nội dung khác nhau tùy thuộc vào yêu cầu sử dụng đại lý. Đó là, các mã JavaScript được động phục vụ..

Trong trường hợp này, chúng tôi đề nghị rằng các tập tin JavaScript được phục vụ với "Vary: User-agent" HTTP header. Đây là một tín hiệu để lưu trữ Internet và Googlebot rằng JavaScript có thể khác nhau cho các user-agents khác nhau, và là một tín hiệu cho Googlebot thu thập dữ liệu tập tin JavaScript sử dụng Googlebot user-agents khác nhau.

Cập nhật 02-03-2015