Tổng quan về Mobile Web Design

Hiện nay việc lướt web trên các thiết bị di động đã trở nên rất phổ biến. Có rất nhiều thiết bị di động như điện thoại, máy tính bảng sử dụng hệ điều hành Android, iOS, Symbian, BlackBerry để truy cập vào website. Theo nghiên cứu tại Mỹ thì có gần 75% người dùng điện thoại di động ở Mỹ sử dụng thiết bị của họ để truy cập mạng. Bài viết này hướng đến việc tối ưu hóa website để thân thiện hơn với các thiết bị di động, làm tăng năng suất hoạt động của website, tăng tỷ lệ chuyển đổi và góp phần giúp chiến dịch SEO tốt hơn.

Chuyển hướng giao diện từ Desktop sang Mobile

Để có thiết bị di động hoạt động tốt trên website không thể thiếu 2 giao diện dành cho máy tính và thiết bị di động. Trong quá trình chuyển hướng từ máy tính sang thiết bị di động có các khái niệm như sau:

• Responsive Web Design.
• Dynamic Serving.
• Parallel Mobile Site.

View attachment mobile-web-approaches.png

1. Sử dụng thiết kế Responsive Web:

Responsive Web Design (tạm dịch thiết kế thích nghi) là một khái niệm khuyến cáo những người thiết kế và người phát triển phải đáp ứng và thích nghi được với môi trường (hay thiết bị) của người dùng về kích thước màn hình, platform, trạng thái xoay hay đứng.

Ưu điểm của Responsive Web Design:

• Khả năng tương thích rất cao trên nhiều thiết bị hỗ trợ trình duyệt có độ phân giải màn hình khác nhau. Trên thực tế hiện nay các nhà sản xuất SmartPhone/Tablet liên tục đưa ra các chuẩn màn hình như 3.5’ 4’ 5’ chẳng hạn. Responsive Web đủ khả năng co giãn theo từng loại thiết bị này.
• Responsive Web không phải chuyển hướng giao diện người dùng, thống nhất chung 1 URL hiển thị trên máy tính và di động.

Nhược điểm của Responsive Web Design:

• Responsive Web với tính năng linh hoạt tự co giãn theo thiết bị mà không phải chuyển sang giao diện Mobile (đơn giản hơn, ít hình ảnh và code hơn,…) khi các thiết bị di động truy suất tới sẽ rất chậm, do phải load toàn bộ Website mà không được thanh lọc lại code và image. Điều này ngoài ảnh hưởng đến tốc độ truy cập, còn ảnh hưởng đến cước phí Mobile Data rất nhiều.
• Responsive Web chỉ phù hợp với các thiết bị di động thông minh và đời mới, còn các thiết bị cũ chạy Symbian như Nokia 6300 không hỗ trợ.

Demo trên thực tế có: www.manseo.com, www.tinhte.vn
Tài liệu về Responsive Design được Google phát hành tại đây.

2. Sử dụng thiết kế Parallel Mobile Site:

Parallel Mobile Site là giao diện sử dụng 2 url để hiển thị Desktop và Mobile.

Ưu điểm của Parallel Mobile Site:

• Có 2 url hiển thị dành cho máy tính và thiết bị di động.
• Mang lại trải nghiệm tốt hơn cho người sử dụng.
• Khắc phục các nhược điểm trong thiết kế Responsive Web, bằng cách thiết kế giao diện sử dụng ít mã nguồn, ít hình ảnh, làm giảm truy vấn, góp phần tăng tốc độ load nhanh hơn.

Nhược điểm của Parallel Mobile Site:

Google đã có hướng dẫn chi tiết về vấn đề này, kèm theo việc cảnh báo tại đây, hình ảnh bên dưới mô tả việc chuyển hướng nên và không nên sử dụng:
View attachment dieu_huong_website.png
Để giúp thuật toán của Google hiểu cấu hình website của bạn, Google khuyến cáo sử dụng các chú thích sau đây:

Dành cho máy tính:

Trên giao diện máy tính thêm thẻ alternate trỏ đến url dành cho thiết bị di động tương ứng. Điều này giúp Googlebot phát hiện ra vị trí của điện thoại di động trang web của bạn.

HTML:

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1">

Dành cho thiết bị di động:

Trên trang điện thoại di động, thêm một liên kết rel=”canonical” trỏ đến URL máy tính để bàn tương ứng.

HTML:

<link rel="canonical" href="http://www.example.com/page-1">

Hiện tại Google hỗ trợ 2 thẻ này, tuy nhiên bản chỉ cần sử dụng 1 trong 2 là đủ. Ví dụ sử dụng thẻ trên Mobile thì không cần sử dụng thẻ trên máy tính. Hoặc nếu bạn quá kỹ thì có thể sử dụng cả 2

Chuyển hướng này đã được Google hướng dẫn chi tiết tại đây.

Demo về kiểu giao diện này có tại:
- PC: vnexpress.net, Mobile: m.vnexpress.net
- PC: dantri.com.vn, Mobile: m.dantri.com.vn
- PC: thanhnien.com.vn, Mobile: m.thanhnien.com.vn

3. Sử dụng thiết kế Dynamic Serving:

Dynamic Serving là chuyển hướng sử dụng user-agent để chuyển đổi từ giao diện máy tính sang giao diện di động, chuyển hướng này chỉ sử dụng 1 url duy nhất.

Ưu điểm của Dynamic Serving:

• Chỉ sử dụng 1 url duy nhất, không nhất thiết phải khai báo rel=”canonical” trong giao diện Mobile.
• Vì sử dụng 2 giao diện nên hoàn toàn có đầy đủ tính năng như chuyển hướng Parallel Mobile Site đó là sử dụng ít mã nguồn, ít hình ảnh, làm giảm truy vấn, góp phần tăng tốc độ load nhanh hơn.

Nhược điểm của Dynamic Serving:

• Loại chuyển hướng này sử dụng user-agent để chuyển hướng người dùng từ giao diện máy tính sang giao diện di động. Do đó, user-agent phải được khai báo đầy đủ, việc khai báo thiếu user-agent góp phần làm làm việc chuyển hướng ở một số thiết bị không thành công. Điều này được nhắc đến trong tài liệu nội bộ của Mần SEO tại đây: Responsive_ManSEO.docx

4. Các loại Googlebot-Mobile User-Agents được Google sử dụng:

Đối với điện thoại cơ bản:

Mã:

SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

Mã:

DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

Đối với điện thoại thông minh:

Mã:

DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

5. Những tối ưu cần thiết dành cho Mobile Web Design:

• Không chặn googlebot từ phiên bản di động trong tập tin robots.txt
• Tạo riêng tập tin XML-Sitemap dành cho phiên bản di động.
• Trên giao diện máy tính thêm vào thẻ rel=”alternate”.
• Trên giao diện di động thêm vào thẻ rel=”canonical”.
• Thẻ tiêu đề tags (title tags) chỉ nên có khoảng 40 đến 60 ký tự.
• Thẻ mô tả (meta descriptions) chỉ nên có khoảng 90 ký tự.
• Tối ưu nội dung trên giao diện di động dành cho từ khóa trên thiết bị di động.
• Sử dụng công nghệ nén hình ảnh, tham khảo thêm cách tăng tốc máy chủ tại đây.
• Không sử dụng Flash trên giao diện di động.
• Mần SEO gợi ý tham khảo các tài liệu liên quan về Mobile Web Design:
• https://developers.google.com/webmasters/smartphone-sites/
• http://searchengineland.com/author/cindy-krum
• http://moz.com/blog/seo-of-responsive-web-design

Nguyên Nghĩa – Mần SEO​

 

Nó là khái niệm thứ nhất về Responsive Web Design đó bạn.

 

Google đã có hỗ trợ vấn đề này tại đây: https://support.google.com/webmasters/answer/34648?hl=en
Hầu như mọi vấn đề chỉ cần search là ra, chịu khó search trước khi đặt câu hỏi là cách tự học SEO hiệu quả.