Như nhiều người đã biết, ngày 21/04 là thời gian mà Google đã ấn định để thực hiện những cập nhật lên thuật toán tìm kiếm của mình. Và theo những gì tôi biết từ Google thì lần cập nhật lần này có một tác động không hề nhỏ: 40% so với sự ảnh hưởng của Panda là 12% đối với các truy vấn tiếng Anh, còn Penguin tác động đã lên đến 4% đối với các truy vấn trên toàn cầu ở cả di động và desktop. Mặc dù con số này chưa phải là con số chính thức nhưng chúng ta cũng có thể nhìn ra được là lần cập nhật này tác động rất mạnh đến kết quả tìm kiếm.
Trong bài viết này tôi sẽ điểm qua một số vấn đề mà có thể bạn sẽ phải đối mặt trong lần cập nhật thuật toán này.
Phụ mục
Không cài đặt Viewport
Ở đây nghĩa là thẻ viewport đã không được thiết lập. Thẻ này cho phép bạn xác định với trình duyệt rằng website bạn có thể đáp ứng những chiều rộng (width) khác nhau theo kích cỡ màn hình hiển thị.
Các thẻ meta viewport sẽ giúp bạn trình bày với trình duyệt rằng website của bạn sẽ phản ứng như thế nào theo kích thước màn hình mà tôi đã nói ở trên. Nói một cách đơn giản, anh ta là “thông dịch viên” để trình duyệt có thể hiểu được website có khả năng phản ứng và thay đổi tùy theo kích thước màn hình.
Một thẻ viewport có thể được cài đặt đơn giản như sau:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
hoặc đầy đủ hơn:
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
Để xem thêm về thẻ này, bạn có thể tìm hiểu ở đây.
Khoảng cách giữa các nút bấm
Một vấn đề nữa mà tôi thấy nhiều website gặp phải khi kiểm tra khả năng tương thích với điện thoại(còn được gọi là responsive) đó là khoảng cách giữa các nút bấm quá gần nhau. Điều này thường xảy ra ở các thanh menu, navigation, các liên kết vốn dĩ hiển thị rất tốt trên trình duyệt desktop… Tuy nhiên, trên trình duyệt mobile, khi không gian hiển thị bị thu nhỏ và ngón tay người dùng trở nên to lớn so với con trỏ chuột thì điều này là một vấn đề: người dùng có thể bấm sai liên kết/bấm sai nút.
Dĩ nhiên, Google không thích điều này tí nào và nó yêu cầu bạn phải giải quyết vấn đề này để website của bạn “thân thiện với người dùng mobile” hơn.
Một khi bạn gặp lỗi này, sữa chữa nó thật ra không hề khó. Bạn chỉ cần thay đổi khoảng cách giữa các nút bấm trên trình duyệt dành cho mobile bằng cách tăng các giá trị padding và margin sao cho phù hợp là ổn. Điều này không cần nhiều kiến thức về CSS lắm.
Nếu bạn cần thêm thông tin, hãy đọc tài liệu của Google.
Font chữ
Hiển nhiên, màn hình điện thoại đã nhỏ, nếu kích thước chữ cũng quá nhỏ sẽ dẫn đến việc người dùng phải căng mắt lên mà đọc, hoặc zoom để phóng to nội dung. Và Google không thích điều này tí nào :)
Đa phần, khi bạn cài đặt thẻ viewport như tôi đã nói ở trên thì font chữ cũng đã được xác định lại theo kích thước của màn hình hiển thị và vấn đề dường như đã được giải quyết. Tuy nhiên có những font-size quá nhỏ hoặc không thích hợp khi đọc trên điện thoại cũng cần bạn kiểm tra và chỉnh sửa. Nếu bạn muốn tìm hiểu kỹ hơn thì tài liệu của Google ở đây nhưng tôi nghĩ bạn sẽ quan tâm đến giải pháp nhiều hơn.
Và giải pháp cụ thể để chúng ta có thể tiến hành chỉnh sửa đó là theo những bước sau:
- Cấu hình viewport, cho phép font chữ có thể hiện thị dễ dàng trên các thiết bị khác nhau.
- Sử dụng font cơ bản có kích thước 16 pixel. Bạn cần điều chỉnh lại kích thước các font chữ khác xoay quanh kích thước cơ bản này sao cho phù hợp.
- Chiều cao khoảng cách chữ(line-height) cũng cần được kiểm tra, nên sử dụng line-height:12em cho kích thước chuẩn.
- Hạn chế sử dụng nhiều font chữ và nhiều kích thước khác nhau. Quá nhiều font, quá nhiều kích thước sẽ làm website của bạn trở nên rối rắm. Theo kinh nghiệm của tôi có thể sử dụng 3 kích thước chuẩn thôi là đủ:
[code language=”css”] body {
font-size: 16px;
}.small {
font-size: 12px; /* 75% of the baseline */
}.large {
font-size: 20px; /* 125% of the baseline */
}
[/code]
Nội dung không tự co dãn
Việc này có thể hiểu là do nội dung của bạn không tôn trọng kích thước của màn hình và cố tình đẩy khung hình to hơn mức hiển thị bằng các thiết lập về chiều rộng vượt quá chiều rộng khung hình. Điều này cũng là một trường hợp hay gặp khi bạn quy định kích thước của khối(block) hay kích thước của hình ảnh.
Ví dụ:
[code language=”html”]<img src="image1.jpg" width="500" height="500" />[/code]
Cách chỉnh sửa cho trường hợp này đó là đừng bao giờ gò ép vào một kích thước nhất định mà hãy để hình ảnh tự co dãn theo màn hình bằng cách gỡ bỏ thuộc tính width và height ở trên.
[code language=”html”]<img src="image1.jpg" />[/code]Ngoài ra bạn có thể thiết kế nhiều kích thước khác nhau cho từng màn hình khác nhau. Điều này cực dễ và có thể thực hiện bằng Photoshop.
Trong trường hợp bạn muốn sử dụng và cố định kích thước hình ảnh(hoặc nội dung), hãy sử dụng tỉ lệ (%) thay vì một kích thước cụ thể bằng pixel. Ví dụ:
[code language=”css”]img{
display: block;
height: auto;
max-width: 100%;
}[/code]
Liên kết hữu ích
Trên đây là một vài điều thường gặp và được thuật toán “soi” kỹ khi cập nhật thuật toán. Bài này có thể là một hướng dẫn mang tính chung chung cho bạn về những vấn đề bạn sẽ đối mặt khi thuật toán mobile friendly được cập nhật vào 21/04 này. Tôi cũng cung cấp cho bạn một vài liên kết hữu ích mà có thể bạn sẽ cần tới:
- Nếu bạn muốn thiết kế giao diện, hãy đọc 7 lời khuyên hữu ích
- Còn đây là cách làm menu reponsive dành cho các bạn muốn tìm hiểu thêm
- Tôi cũng cung cấp một vài công cụ hữu ích cho bạn để bạn vọc responsive ở đây
- Cuối cùng, dành cho những bạn muốn thực hiện việc chỉnh sửa website, tôi có một bài viết hoàn chỉnh hướng dẫn bạn chỉnh sửa website thân thiện với công cụ tìm kiếm
Tôi hi vọng rằng bài viết này của tôi có ích cho nhiều người.