[Cơ bản] Hướng dẫn chỉnh sửa trang web thân thiện với mobile

Thảo luận trong 'Onpage Seo - Tối ưu các yếu tố trên trang web' bắt đầu bởi meoblog, 28/3/15.

  1. Hiện tại có một số member mạo danh BQT để giao dịch trên diễn đàn và đã LỪA ĐẢO khá nhiều tại chuyên mục Adwords... Mọi người cảnh giác và đọc bài: Giới thiệu giao dịch đảm bảo bởi @Admin
Lượt xem: 1,327
  1. meoblog

    meoblog Top 7

    Gia nhập:
    15/6/10
    Bài viết:
    904
    Đã được thích:
    1,284
    Điểm thành tích:
    480
    Best Answers:
    0
    Có lẽ việc thực hiện phiên bản dành cho điện thoại di động đang trở thành cơn "sốt xình xịch" mấy ngày nay đối với nhiều bạn khi Google thông báo thuật toán mới có liên quan đến sự thân thiện trên thiết bị di động (Thuật toán Google’s Mobile-Friendly sẽ có tác động mạnh hơn Panda, Penguin) và thậm chí có ảnh hưởng rất nhiều.

    Là một người làm SEO, độ ảnh hưởng của thuật toán đối với kết quả trên SERP là mối quan tâm hàng đầu của nhiều bạn, đặc biệt là khi bạn nhận được một cảnh báo như thế này trong thời gian gần đây:

    google-mobile-friendly-html-css

    Nếu doanh nghiệp bạn có trong tay một lập trình viên, mọi chuyện sẽ trở nên đơn giản. Nếu trong tay bạn không có một lập trình viên, bạn lại không thể thuê bên ngoài chỉnh sửa website của mình vì nhiều yếu tố chủ quan và khách quan, bạn chỉ có thể "vượt lên chính mình" mà thôi. Bài viết này của tôi không có tham vọng biến bạn thành một chuyên gia tùy chỉnh website trên di động (thường được gọi là responsive - trong bài này đôi lúc tôi sẽ dùng từ này thay thế do nó là từ chuyên ngành), bài viết này cung cấp cho bạn những kiến thức và phương pháp đơn giản mang tính "chữa cháy" để website của bạn có thể thân thiện hơn với thiết bị di động. Còn việc làm như thế nào cho đẹp, cho tiện dụng cho người dùng bài viết này không nhắm đến.

    1. Bạn phải bắt đầu từ đâu?

    Điểm để bạn bắt đầu là chuẩn bị đầy đủ "đồ chơi" cho một buổi nghiên cứu và tùy chỉnh website của mình. Bạn cần có một vài công cụ sau đây:
    1. Editor: có thể là phần mềm Adobe Dreamweaver, một công cụ mới được biết đến gần đây mà tôi cũng rất thích là Sublime Text - cái này vừa nhẹ lại vừa có bản miễn phí rất phù hợp. Ngoài ra bạn có thể sử dụng Notepad nếu khả năng của bạn cho phép.
    2. Các tài khoản truy cập: để có thể chỉnh sửa được source code bạn cần có tài khoản FTP, tài khoản admin (nếu admin có thể chỉnh sửa được các thẻ meta).
    3. Các công cụ kiểm tra: Google đã cung cấp cho bạn công cụ kiểm tra tính tương thích với mobile ở đây. Trong bài viết này tôi sẽ dựa vào công cụ của Google là chủ yếu, những công cụ khác để bạn tham khảo nếu cần.
    4. Website của bạn: để trực quan, tôi sẽ thực hiện những bước đơn giản trên một website mà lâu rồi tôi không sử dụng đến và đang mắc lỗi tối ưu với thiết bị di động. Bạn có thể vừa đọc vừa thực hiện trên website của mình.
    5. Và bài viết này - dĩ nhiên ! Đây là bài hướng dẫn bạn mà!
    2. Bắt đầu như thế nào?

    Trước tiên, bạn cần xác định xem website của mình đang gặp những vẫn đề gì và cần khắc phục những gì để thân thiện với công cụ tìm kiếm. Tôi sử dụng công cụ kiểm tra của Google mà tôi đã nói ở trên và nhập URL của mình vào để xem kết quả kiểm tra:

    google-mobile-friendly-html-css 2

    Như bạn thấy, website tôi gặp rất nhiều vấn đề:
    • Chữ quá nhỏ để đọc.
    • Chưa đặt cửa sổ xem thiết bị di động.
    • Các liên kết quá gần nhau.
    • Nội dung rộng hơn màn hình.
    Bạn phải bình tĩnh và đừng nhìn vào những lỗi này, có khi sau khi thực hiện những điều cơ bản những lỗi này sẽ tự động biến mất. Điều quan trọng ở đây là chúng ta xác định những lỗi nào đang tồn tại và lỗi lớn nhất là: nội dung rộng hơn màn hình nên người dùng không thể xem được website một cách tự nhiên trên di động.

    3. Bước 1: thiết lập và quy ước cho trình duyệt

    Bạn bổ sung vào thẻ header một thẻ meta như sau:
    Thẻ nay mang ý nghĩa rằng bạn định dạng các phiên bản trên website dựa trên kích thước chiều rộng màn hình với tỉ lệ là 1.0. Trình duyệt sẽ dựa vào kích thước màn hình hiển thị (hoặc kích thước cửa sổ) để tính toán những quy ước khác về sau này.

    Tiếp theo, do mỗi thiết bị có nhiều kích thước màn hình khác nhau nên khi hiển thị trên đó chúng ta cũng có những lựa chọn khác nhau (ví dụ như bạn có thể hiển thị website trên tablet khác với trên điện thoại có màn hình lớn, hay điện thoại có màn hình lớn sẽ hiển thị khác với điện thoại có màn hình nhỏ hơn). Để thiết lập điều này, chúng ta cần quy định Cascading Style Sheet (CSS) cho mỗi phiên bản như vậy. Để không ảnh hưởng đến cái chung, chúng ta sẽ tạo ra một file CSS có nội dung là các tùy chỉnh cho các phiên bản khác nhau dựa vào kích thước màn hình. Tôi đăt tên cho file này là responsive.css và có nội dung ban đầu như sau:
    Mã:
    /******** For mobile device ********/
    /******************************/
    /*---- Responsive base screen witdh ------- */
    /* width - 30 */
    /* Tablet Devices Resizing */
    @media screen and (max-width: 1024px) and  (min-width: 970px){
    }
    @media screen and  (max-width: 970px){
    }
    @media screen and  (max-width: 870px)  and (min-width:750px){
    }
    @media screen and (max-width:750px) and (min-width:680px){
    }
    @media screen and (min-width:320px) and (max-width: 480px) {
    }
    @media screen and (max-width: 380px) {
    }
    /*---- end Responsive base screen witdh ------- */
    
    Ở đây tôi có một vài kích thước màn hình phổ biến, bạn có thể sử dụng công cụ ResizeMyBrowser.com mà tôi đã giới thiệu ở trên để xác định thêm những thiết bị khác nếu bạn quan tâm đến chúng.

    Phần mã ở trên là những thay đổi cấu hình CSS chúng ta sẽ bổ sung tùy theo độ rộng của màn hình.

    Tiếp theo chúng ta sẽ gắn file này vào website để thực hiện tùy chỉnh:
    Bạn lưu ý là phần CSS này phải nằm dưới CSS chính của website, nếu không có thể nó sẽ bị CSS chính ghi đè,lúc đó nó sẽ không có tác dụng.

    Tới bước này, bạn sẽ kiểm tra lại trên công cụ kiểm tra tính thân thiện với điện thoại xem đã có những lỗi nào được fix hay chưa. Đa phần các lỗi do font chữ nhỏ đã được fix vì chúng ta đã định dạng lại chúng theo tỉ lệ tương ứng với điện thoại ở thẻ header. Nếu giao diện của bạn vẫn còn quá nhỏ so với điện thoại, có thể là chúng ta đã định dạng cố định kích thước (pixel) không thích hợp. Tuy nhiên chúng ta vẫn phải kiểm tra xem nó tương thích với di động được bao nhiêu rồi.

    google-mobile-friendly-html-css 3

    Như đã nói ở trên, đa phần lỗi đã được fix, chỉ còn 1 vấn đề duy nhất là tràn lề (do kích thước chiều ngang trên điện thoại quá lớn). Cứ bình tĩnh, chúng ta sẽ khắc phục chúng!

    Theo Nguyễn Duy Nhân (vnwebmaster)​
  2. nguyenxuankien

    nguyenxuankien Top 9

    Gia nhập:
    24/3/15
    Bài viết:
    30
    Đã được thích:
    4
    Điểm thành tích:
    80
    Giới tính:
    Nam
    Best Answers:
    0
    website bây giờ mà k tối ưu thân thiện vs mobile là chỉ có chết .
  3. phongvv

    phongvv Top 9

    Gia nhập:
    24/8/14
    Bài viết:
    69
    Đã được thích:
    0
    Điểm thành tích:
    60
    Giới tính:
    Nam
    Web:
    Best Answers:
    0
    đây la xu hướng rồi, người dùng lướt web chủ yếu từ các thiết bị di động, tablet, nếu không tương thích thì thì chính bạn từ giết bạn rồi, chứ ko phải do google nữa. Vì vậy làm website, bạn nên chú ý nhé, làm luôn một lần cho tiện.
  4. springmusic

    springmusic Top 9

    Gia nhập:
    14/6/14
    Bài viết:
    232
    Đã được thích:
    10
    Điểm thành tích:
    180
    Giới tính:
    Nữ
    Web:
    Best Answers:
    0
    Quan trọng là phải chỉnh sửa trong code như thế nào cho thân thiện nữa!
    Đó mới là vấn đề khó khăn!
  5. boyhtql

    boyhtql Top 9

    Gia nhập:
    27/10/13
    Bài viết:
    162
    Đã được thích:
    15
    Điểm thành tích:
    180
    Giới tính:
    Nam
    Web:
    Best Answers:
    0
    Chưa có phương án để fix cho cái web site của em . em dùng blogspot và hiện giờ chỉ dùng mỗi... giao diện mobile của blogspot
    phải nói là củ chuối vô cùng...

    mong các bác tư vấn cách fix cho blogspot mà ko phải thay template mới reponsive
  6. ngochuongvan

    ngochuongvan Top 9

    Gia nhập:
    17/10/14
    Bài viết:
    60
    Đã được thích:
    5
    Điểm thành tích:
    80
    Giới tính:
    Nam
    Web:
    Best Answers:
    0
    Mình cũng đang lọ mọ để chỉnh sửa trang web thân thiện với mobile, hiện tại nếu trang web không thân thiên với mobile thì chỉ có chết thôi
  7. phongvv

    phongvv Top 9

    Gia nhập:
    24/8/14
    Bài viết:
    69
    Đã được thích:
    0
    Điểm thành tích:
    60
    Giới tính:
    Nam
    Web:
    Best Answers:
    0
    Mình nghĩ cứ dùng công cụ kiểm tra từ google, phát hiện lỗi nào fix lỗi đó. Tốt nhất là reponsive cho website thì sẽ tốt hơn,
  8. cuongzu

    cuongzu Top 9

    Gia nhập:
    29/1/15
    Bài viết:
    154
    Đã được thích:
    11
    Điểm thành tích:
    180
    Giới tính:
    Nam
    Web:
    Best Answers:
    0
    chỉnh sửa như vậy nó có ảnh hưởng đến top từ khóa không bác ơi :3
  9. kimjoonshin

    kimjoonshin Top 9

    Gia nhập:
    16/2/15
    Bài viết:
    105
    Đã được thích:
    4
    Điểm thành tích:
    180
    Giới tính:
    Nam
    Web:
    Best Answers:
    0
    Nếu doanh nghiệp bạn có trong tay một lập trình viên, mọi chuyện sẽ trở nên đơn giản. Nếu trong tay bạn không có một lập trình viên
  10. myloveabc89

    myloveabc89 Seo Newbie

    Gia nhập:
    31/1/11
    Bài viết:
    6
    Đã được thích:
    0
    Điểm thành tích:
    10
    Best Answers:
    0
    Đang đau đầu với cái này, làm theo bạn hướng dẫn nên bỏ được 1 số lỗi rồi.... đợi bạn viết tiếp xem, cảm ơn trước nha.
  11. anh_ba

    anh_ba Top 9

    Gia nhập:
    12/4/15
    Bài viết:
    101
    Đã được thích:
    4
    Điểm thành tích:
    180
    Best Answers:
    0
    rất hữu ích, thank bác

Chia sẻ trang này

Đang tải...