Thẻ viewport là gì?

Thẻ viewport là gì?

Thẻ viewport là một thẻ meta trong phần <head> của trang web, cho trình duyệt biết cách điều chỉnh kích thước hiển thị theo màn hình thiết bị. Nhờ nó, cùng một trang web hiển thị gọn gàng trên cả máy tính để bàn lẫn điện thoại — thay vì bị thu nhỏ tí hon buộc người dùng phải zoom.

Vì sao thẻ viewport quan trọng?

Hơn 70% lượt truy cập web ở Việt Nam đến từ điện thoại. Một trang thiếu thẻ viewport sẽ hiển thị trên mobile như bản desktop bị ép nhỏ lại: chữ li ti, nút bấm chồng lấn, phải kéo ngang dọc mới đọc được. Người dùng thoát ngay trong vài giây.

Google thì đánh giá thẳng tay: từ lâu Google đã dùng tiêu chí thân thiện với di động (mobile-friendly) làm yếu tố xếp hạng, và với chính sách lập chỉ mục ưu tiên di động (mobile-first indexing), phiên bản mobile chính là “bản chính” Google dùng để đánh giá trang của bạn. Thiếu viewport coi như tự loại mình khỏi cuộc chơi trên di động.

Ví dụ thực tế

Cùng một trang bán hàng: có thẻ viewport thì trên iPhone chữ vừa mắt, nút “Mua ngay” to rõ, menu gọn thành biểu tượng; không có thẻ viewport thì toàn bộ trang desktop bị nén vào màn hình 6 inch — khách phải zoom từng dòng chữ mới đọc được giá. Tỷ lệ thoát của bản không viewport thường cao gấp đôi.

Lỗi thường gặp

• Quên thẻ viewport hoàn toàn: thường gặp ở web cũ làm từ thời chỉ có desktop, hoặc landing page dựng vội bằng HTML tĩnh.
• Khóa zoom của người dùng (maximum-scale=1.0, user-scalable=no): gây khó chịu cho người thị lực kém và có thể bị Google trừ điểm trải nghiệm.
• Đặt sai giá trị width: không dùng width=device-width khiến trang vẫn render sai khổ màn hình.
• Chỉ test trên desktop: chủ web không bao giờ mở thử trang mình trên điện thoại thật.

Xem thêm

• Kích thước ảnh
• Dung lượng trang
• Định dạng ảnh

Kiểm tra ngay

Dùng extension SEO-Check quét trang của bạn để kiểm tra thẻ viewport tự động. Tải extension miễn phí tại seocheck.vn/chrome-extension.