Meta Viewport là gì? Cẩm nang những điều cần biết về loại thẻ này
Thẻ meta viewport là một yếu tố rất được xem trọng trong thiết kế đáp ứng (Responsive web design) và tối ưu hóa công cụ tìm kiếm (SEO). Bài viết này giúp bạn giải nghĩa Meta viewport là gì? Cùng cách sử dụng và sửa những lỗi thường gặp với thẻ viewport trong website wordpress.
Meta Viewport là gì
Meta Viewport là một loại thẻ (Meta tags) nằm trong phần từ <head> thuộc tài liệu HTML. Meta Viewport thông báo cho trình duyệt biết nội dung của của website nên được hiển thị như thế nào cho phù hợp với khung nhìn của thiết bị.
Trong tôi ưu hóa công cụ tìm kiếm (SEO), meta viewport được coi là một yếu tố technical seo, bởi phần lớn ảnh hưởng của thẻ viewport là tác động cách hoạt động của website và các kỹ thuật liên quan.
Tại Sao Meta Viewport lại quan trọng
Sự ra đời của đa nền tảng và đa thiết bị kéo theo nội dung phải được đặt ở đa kích thước. Giả sử nội dung và bố cục website của bạn được đặt ở 1200px. Điều này sẽ là ổn nếu người dùng sử dụng nội dung đó trên các thiết bị có màn hình lớn (laptop hay TV), nhưng sẽ là không phù hợp nếu người dùng sử dụng những thiết bị nhỏ hơn (tablet, điện thoại) để theo dõi nội dung đó. Hình dung qua hình ảnh dưới đây.
Trong trường hợp này, người dùng phải theo dõi nội dung được cố định ở 1200px trong khung hình có độ phân giải là 414x763px (ngang x dọc) tương đương với chiếc điện thoại Iphone 6s và như bạn thấy, nó như là nhìn qua ô cửa sổ vậy.
Vậy cũng trong những trường hợp như này, thì thẻ Meta Viewport có tác dụng gì? Chính xác là như lý thuyết bạn đầu được mình giải nghĩa. Meta Viewport giúp đồng bộ khung hình của thiết bị với bố cục nội dung theo một tỉ lệ đáp ứng.
Đối với công cụ tìm kiếm
Google đã từng nói
Thẻ này thông báo cho trình duyệt biết cách hiển thị một trang trên thiết bị di động. Sự hiện diện của thẻ này cho Google biết rằng trang này thân thiện với thiết bị di động.
https://developers.google.com/search/docs/advanced/crawling/special-tags
Cũng trong một bài viết khác.
Các trang được tối ưu hóa cho nhiều thiết bị khác nhau phải bao gồm thẻ meta viewport ở đầu tài liệu. Thẻ meta viewport cung cấp cho trình duyệt hướng dẫn cách kiểm soát kích thước và tỷ lệ của trang.
https://web.dev/responsive-web-design-basics/#viewport
Nếu như bạn hay theo dõi Google, bạn sẽ biết họ không thường xuyên công khai khẳng định một yếu tố nhất định nào đó có tác dụng trong SEO.
Nhưng trong hai đoạn trích dẫn trên, mình lại không thấy một lời phủ định nào trong đó. Việc này cho thấy thẻ Meta Viewport chính xác là một điều kiện cần phải có trong SEO và Responsive web design (thiết kế web đáp ứng).
Cấu trúc cơ bản của một thẻ Meta Viewport là gì
Ví dụ về một thẻ meta viewport có trong tài liệu HTML.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…Đầu tiên là phần đầu của một thẻ meta, bao gồm <meta name=”value”...> value hay giá trị ở đấy chính là viewport. Còn phần thứ hai là nội dung bên trong thẻ, nằm bên trong <...content=”...”>, những giá trị bên trong content có thể là một hoặc nhiều trong các tùy chọn sau đây.
- width. Đặt chiều rộng cho khung nhìn (viewport) nó có thể là một giá trị tuyệt đối (pixel, cm, pt,...) hoặc một giá trị tương đối (hay đáp ứng) như “device-width” (chiều rộng thiết bị).
- initial-scale. Đặt giá trị phóng đại khung nhìn đầu tiên của người dùng, thường là “1”. Bạn cũng có thể thay đổi thành một giá trị khác (không khuyến khích thay đổi).
- minimum-scale. Đặt mức thu phóng tối thiểu (tức là người dùng có thể phóng nhỏ bao nhiêu). Điều này thường không được sử dụng vì nó lấy mất quyền kiểm soát của người dùng.
- maximum-scale. Ngược lại với thu phóng tối thiểu.
- height. Đặt chiều cao của khung nhìn (không được khuyến khích sử dụng bởi nhiều lý do, một trong số đó là trình duyệt thường không hỗ trợ giá trị này.
- user-scalable. Nếu thiết lập thì trình duyệt sẽ ngăn cản người dùng thu phóng (thực sự không khuyến khích sử dụng).
Trên 6 tùy chọn trên, bạn chỉ cần quan tâm đến 2 tùy chọn đầu tiên là: width (chiều rộng khung nhìn) và initial-scale (giá trị thu phóng ban khung nhìn đầu tiên). Vì vậy một cấu trúc phù hợp nhất hiện nay chính xác là như ví dụ ban đầu:
<meta name="viewport" content="width=device-width, initial-scale=1">Cách kiểm sự hiện diện của thẻ viewport trên trang
Có nhiều cách để bạn có thể kiểm tra thẻ meta viewport trên trang. Dưới đây là 2 cách thông dụng nhất mà mình muốn giới thiệu đến các bạn.
Thủ công
Với Window bạn nhấn tổ hợp phím “Ctrl + U” hoặc “Command + Option + U” trên MacOS tại bất kỳ trang nào bạn muốn kiểm tra.
Thường thì thẻ meta viewport sẽ xuất hiện cùng hàng với những thẻ meta khác như: Meta title hay meta description,...Phổ biến hơn là nằm ngay trong dòng đầu tiên, chỉ dưới thẻ meta charset.
Những có thể vì vài lý do mà giao diện (theme) sẽ tự động thêm thẻ meta viewport của nó và xóa đi thẻ viewport mặc định của CMS (wordpress, blogspot,...) Bạn có thể nhấn tổ hợp phím “Ctrl + F” hoặc “Command + F” rồi nhập từ khóa “viewport” vào. Nếu trang đó có thẻ viewport, trình duyệt sẽ đánh dấu nó. Giống như ảnh dưới đây.
Tổng thể
Trong Google search console bạn tìm đến mục “tính khả dụng trên thiết bị di động” tại menu chính. Google sẽ cung cấp một bảng báo cáo và đồ thị liên quan đến tính khả dụng của website với thiết bị di động.
Những Lỗi thường gặp với thẻ Viewport trong search console
Những lỗi thường gặp với thẻ meta viewport thường thấy nhất là trên Google search console. Dưới đây là một trong số chúng.
Chưa đặt cửa sổ xem (Viewport not set)
Như tên gọi. Sự cố này đến từ việc trang không có thẻ meta viewport, đơn giản là thêm thẻ này vào và double check (thủ công và tổng thể) lại là xong
Cửa sổ xem không được đặt theo “chiều rộng thiết bị” (Viewport not set to "device-width")
Lỗi này bắt nguồn từ giá trị bên trong thẻ viewport của bạn. Cụ thể là giá trị width (chiều rộng) được đặt thành một giá trị tuyệt đối thay vì một giá trị đáp ứng.
Đây là ví dụ về đoạn mã chứa giá trị gây ra “sự cố” này.
<meta name="viewport" content="width=1000px, initial-scale=1"> Thay đoạn mã đó bằng một đoạn mã phù hợp, chẳng hạn như. <meta name="viewport" content="width=device-width, initial-scale=1">. Đơn giản chỉ là thế giá trị 1000px bằng device-width để thông báo cho trình duyệt biết tự đáp ứng khung nhìn theo chiều rộng của thiết bị.
bonus
Thông thường hai lỗi trên có thể là nguyên nhân chính bắt nguồn đến nhiều lỗi khác liên quan đến “website không thân thiện với thiết bị di động” trong search console như “Chữ quá nhỏ để đọc” và “Các phần từ có thể nhấp quá gần nhau”.
Lời kết
Trên đây là toàn bộ nội dung chi tiết giải nghĩa về thẻ meta viewport là gì và tầm quan trọng của thẻ metaview port trong thiết kế website đáp ứng và SEO.
Mong rằng bài viết này giải đáp được thắc mắc của các bạn. Nếu như bạn còn bất kỳ câu hỏi nào cần giải đáp, đừng ngần ngại đặt câu hỏi tại mục bình luận bên dưới.
Cảm ơn các bạn đã đọc bài viết.
Nguồn bài viết: Meta Viewport là gì? Ảnh hưởng đến SEO ra sao | Duckwriter
Nhận xét
Đăng nhận xét