Nguyên Nghĩa

Hãy biết đam mê và mãi mãi khát khao học hỏi.

MENU
Tìm kiếm thông tin
Nguyên Nghĩa
Mr.N2

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.

mobile-web-approaches

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:

dieu_huong_website

Để 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.

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

<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:

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)

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:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot/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

Tags:
Bình luận

2 responses to “Tổng quan về Mobile Web Design”

  1. Quan Bui says:

    Bài này em đọc lâu rồi nhưng giờ mới comment. Em có vài câu hỏi như sau.
    1 . theo anh, mobile design có là 1 yếu tố trong SEO không? Trong 3 loại thiết kế trên, loại thiết kế nào tốt cho SEO nhất (quan điểm của em là có, tốt cho người dùng là tốt cho SEO)
    2. Khai báo cho google tập tin xml sitemap dành cho di động như thế nào hay chỉ cần sumit nó vào google webmaster tôl như sitemap thường?
    3. Nên sử dụng robots.txt như thế nào cho hợp lý để tối ưu hoá web site cho thiết bị di động.
    4. Menu trên di động nên thiết kế như thế nào cho hợp lý (hiện tại em thấy có 2 loại là menu co lại, xếp hàng từ trên xuống dưới và như của nguyennghia.com hoặc như giaiphapso.info.

    View Comment
    • Mr.N2 Mr.N2 says:

      Hi Quân,
      1. Theo mình Mobile Web Design sẽ trở thành chuẩn mực trong SEO và là điều kiện quan trọng cần phải có trong thiết kế giao diện. Thử nghĩ mà xem nếu không tối ưu giao diện thì mất biết bao traffic từ người dùng di động, chưa kể đó là những khách hàng tiềm năng hơn bao giờ hết. Trong 3 loại thiết kế thì mình đánh giá cao Responsive Web Design và Dynamic Serving vì nó chỉ sử dụng 1 Url làm mọi thứ đơn giản hơn rất nhiều. Nhưng thú thật là mình thích thiết kế Dynamic Serving nhất vì nó không bỏ sót bất kỳ thiết bị nào, cho dù là loại thiết bị di động cùi bắp vẫn có thể xem tốt. Mình gợi ý Quân nên sử dụng Responsive Web Design và Dynamic Serving cùng lúc trên các Money Site của mình, giao diện chính sử dụng Responsive Web Design, sử dụng thêm các hàm hoặc plugin tự động chuyển sang giao diện Dynamic Serving nếu kiểm tra user-agent là các thiết bị quá cũ.
      2. Có 3 loại giao diện, như mình đã nói bên trên thì Responsive Web Design và Dynamic Serving chỉ sử dụng 1 Url nên mình chỉ cần submit XML-Sitemap như bình thường là được. Còn đối với Parallel Mobile Site thì ngay subdomain của giao diện Mobile ví dụ như m.nguyennghia.com thì mình phải làm XML-Sitemap riêng cho nó, ngoài XML-Sitemap ra còn phải khai báo lại robots.txt nữa, 2 thành phần này rất quan trọng đối với thiết kế Parallel Mobile Site. Ví dụ về XML-Sitemap dành cho Mobile:

      3. Sử dụng robots.txt bình thường như trên Desktop (đọc lại câu 1 và câu 2 sử dụng 1 Url), chú ý Disallow những cái mà mình biết, tránh làm bừa bãi, nặng nề nhất là không Disallow Googlebots bậy bạ, cứ để nó quét tự nhiên chỉ chặn lại ở những thư mục mà mình hiểu là nó không quan trọng.
      4. Menu trên di động mà bạn thấy trên nguyennghia.com co lại do thiết kế giao diện này là Responsive đó Quân. Cái này thì mình cần phải test trên nhiều thiết bị, cảm thấy thiết kế hiển thị tốt mang lại tiện lợi khi duyệt web thì mình sử dụng thôi.

      View Comment

Leave a Reply