Thẻ Meta Viewport là gì?
Thẻ meta viewport là mã HTML (Ngôn ngữ đánh dấu siêu văn bản) cho trình duyệt biết cách kiểm soát kích thước và tỷ lệ viewport. Đây là thành phần chính của thiết kế web đáp ứng và đảm bảo nội dung của bạn dễ xem.
Viewport là vùng hiển thị của người dùng trên trang web. Nó thay đổi tùy theo thiết bị và thời điểm bạn thay đổi kích thước cửa sổ trình duyệt .
Ví dụ, kích thước khung nhìn mặc định trên máy tính bảng nhỏ hơn trên màn hình máy tính để bàn. Khung nhìn trên điện thoại thông minh thường nhỏ hơn cả hai.
Nếu người dùng thay đổi kích thước cửa sổ trình duyệt trên máy tính để bàn, họ cũng thao tác với khung nhìn. Màn hình có thể giữ nguyên hoặc định dạng lại.
Khung nhìn hiếm khi có cùng kích thước với trang web được hiển thị đầy đủ, do đó trình duyệt sử dụng thanh cuộn để cho phép người dùng truy cập toàn bộ nội dung của trang web.
Lưu ý rằng bạn không chỉ thấy nhiều hay ít trang giống nhau trên mỗi thiết bị. Bố cục cũng thay đổi:
Kiểu thiết kế trang web phản hồi này giúp nâng cao UX (trải nghiệm của người dùng) và có thể tác động tích cực đến nỗ lực SEO của bạn .
Thẻ Meta Viewport hoạt động như thế nào?
Thẻ meta viewport điều chỉnh nội dung của bạn theo màn hình của người dùng. Nó làm cho trang phản hồi nhanh hơn và ngăn người dùng phải cuộn theo chiều ngang hoặc phóng to.
Sau đây là ví dụ về cách thẻ viewport tác động đến một trang cơ bản:
Văn bản trong màn hình bên trái không thể đọc được. Và màn hình không tận dụng tốt không gian có sẵn. Người dùng phải phóng to cả ảnh và văn bản để xem chúng.
Văn bản bên phải có thể đọc được ngay (ngoại trừ văn bản giả) và hình ảnh lấp đầy chiều rộng của màn hình. Người dùng có thể nhìn rõ mà không cần điều chỉnh.
Nội dung trên trang có thẻ meta viewport thuận tiện và hấp dẫn hơn, do đó, người dùng có thể sẽ dành nhiều thời gian hơn cho trang đó.
Thêm thẻ meta viewport sẽ làm cho trang của bạn phản hồi tốt hơn. Mặc dù nó làm cho các trang thân thiện với thiết bị di động , nhưng nó không giống như một trang di động. Sau đây là sự khác biệt chính:
- Một trang phản hồi sẽ tự động thích ứng với môi trường xem bất kể thiết bị nào (ví dụ: phiên bản máy tính để bàn của trang web so với iPad). Người dùng có thể truy cập vào toàn bộ trang web của bạn.
- Trang di động được thiết kế chỉ để sử dụng trên trình duyệt di động. Nội dung trên các trang này tách biệt với trang web chính của bạn. Trang này thường có tên miền phụ “mdot” riêng (tức là “m.[yourwebsite].com”). Người dùng có thể không truy cập được toàn bộ trang web của bạn.
Thẻ Meta Viewport ảnh hưởng đến hiệu suất tiếp thị như thế nào
Sử dụng thẻ meta viewport là một cách đơn giản để cải thiện trải nghiệm người dùng trên trang web của bạn. Điều này cũng có thể tăng lưu lượng truy cập tự nhiên của bạn.
Cuối cùng, cả hai kết quả đều có thể giúp bạn đạt được mục tiêu tiếp thị của mình.
Cải thiện trải nghiệm người dùng để giữ chân mọi người trên trang web của bạn
Thẻ meta Viewport giúp nội dung của bạn dễ đọc hơn. Điều đó có nghĩa là khách truy cập có nhiều khả năng ở lại trang của bạn lâu hơn.
Mọi người ở lại trang web của bạn càng lâu thì bạn càng có nhiều cơ hội:
- Thu thập thông tin có giá trị (thông qua biểu mẫu web hoặc phân tích trang web)
- Chuyển đổi chúng (chiến thắng cuối cùng)
Gần ba phần tư (73,1%) nhà thiết kế web được GoodFirms hỏi cho biết thiết kế không phản hồi là một trong những lý do chính khiến người dùng rời khỏi trang web:
Nguồn hình ảnh: GoodFirms
Bạn có thể kiểm tra lý thuyết này trên trang web của riêng bạn. Sau khi thêm thẻ meta viewport, hãy theo dõi các số liệu sau để xem mức độ tương tác có cải thiện không:
- Thời gian tương tác trung bình: Thời gian người dùng dành cho trang web của bạn trên màn hình của họ. Thời gian này cũng nên tăng lên.
- Tỷ lệ thoát: Tỷ lệ phần trăm các phiên mà Google tính là không tương tác. Đây là khi người dùng rời khỏi trang web của bạn trong vòng 10 giây mà không nhấp vào liên kết hoặc kích hoạt sự kiện. Giảm báo hiệu mức độ tương tác cao hơn.
Bạn có thể xem thời gian tương tác trung bình trên bảng điều khiển Google Analytics bằng cách vào “ Báo cáo ” > “ Vòng đời ” > “ Tương tác ” > “ Tổng quan về tương tác ”.
Tỷ lệ thoát trang khó tìm hơn một chút với Google Analytics 4. Để biết cách thực hiện, hãy xem bản tóm tắt các số liệu hữu ích của Google Analytics và nơi tìm chúng.
Đọc thêm:
Giúp bạn xếp hạng cao hơn trong kết quả của công cụ tìm kiếm
Bản thân thẻ meta viewport không phải là yếu tố xếp hạng trực tiếp, nhưng nó mang lại trải nghiệm người dùng tốt hơn. Điều này có thể cải thiện thứ hạng của trang web của bạn trên các trang kết quả của công cụ tìm kiếm Google (SERP).
Một lý do lớn cho điều này là Google chuyển sang lập chỉ mục ưu tiên thiết bị di động . Điều này có nghĩa là Google sẽ xem xét phiên bản di động của trang web khi xác định thứ hạng của bạn trong SERP.
Bằng cách có thẻ meta viewport phù hợp, bạn đảm bảo nội dung của mình thân thiện với thiết bị di động. Và việc người dùng không phải phóng to hoặc cuộn để đọc nội dung sẽ giúp bạn có cơ hội xếp hạng cao hơn.
Nguồn hình ảnh: Google
Cách sử dụng thẻ Meta Viewport
Hầu hết các hệ thống quản lý nội dung (CMS) sẽ tự động thiết lập thẻ meta chế độ xem tối ưu cho trang web của bạn.
Bạn cũng có thể tự thiết lập bằng cách chỉnh sửa mã trang web của mình.
Thẻ meta viewport, giống như các thẻ meta khác , là mã HTML nằm trong thẻ <head> của trang.
Một trang thông thường sẽ chứa nội dung tương tự như sau:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thuộc tính nội dung (“content=”) xác định cách trang sẽ hiển thị khi tải. Bạn có thể điều chỉnh cách trang web của mình sẽ hiển thị bằng cách điều chỉnh các thuộc tính device-width và initial-scale.
Chiều rộng
Không có gì ngạc nhiên khi width kiểm soát chiều rộng của khung nhìn. Bạn có thể đặt một giá trị cụ thể (tính bằng pixel), chẳng hạn như width=500. Nó sẽ trông như thế này:
<meta name="viewport" content="width=500, initial-scale=1">
Bạn cũng có thể sử dụng device-width, sẽ sử dụng 100% chiều rộng của thiết bị. Nó trông như thế này:
<meta name="viewport" content="width=device-width, initial-scale=1">
Chiều rộng thiết bị đơn giản hơn. Và đảm bảo trải nghiệm người dùng tốt nhất bằng cách điều chỉnh theo nhiều kích thước màn hình khác nhau.
Quy mô ban đầu
Initial-scale quyết định mức độ thu phóng khi tải trang. Bạn có thể đặt từ 0,1 đến 10. Mặc định là 1.
Mức thu phóng 3 sẽ trông như thế này:
<meta name="viewport" content="width=device-width, initial-scale=3">
Các Thuộc Tính Khác
Ngoài ra còn có những cách khác để bạn có thể điều chỉnh thẻ meta viewport đó. Các thuộc tính này là:
- Chiều cao: Hoạt động tương tự như chiều rộng. Bạn có thể đặt thành số pixel cụ thể hoặc sử dụng chiều cao thiết bị (khuyến nghị).
- Minimum-scale: Điều này kiểm soát mức độ phóng to mà trang cho phép. Nó ngăn người dùng thu nhỏ quá mức. Nó phải thấp hơn hoặc bằng maximum-scale. Mặc định là 0,1.
- Maximum-scale: Điều này cũng kiểm soát mức thu phóng bằng cách ngăn người dùng phóng to quá mức. Mức này phải lớn hơn hoặc bằng minimum-scale. Mặc định là 10. Bất kỳ giá trị nào nhỏ hơn 3 đều vi phạm nguyên tắc trợ năng .
- Có thể mở rộng theo người dùng: Điều này kiểm soát liệu người dùng có thể phóng to hay không. Các giá trị hợp lệ là 0 hoặc không, hoặc 1 hoặc có. Không cho phép người dùng phóng to sẽ vi phạm Nguyên tắc về khả năng truy cập nội dung web (WCAG). Nó cũng mang lại trải nghiệm người dùng kém.
- Interactive-widget: Chỉ định cách các widget tương tác, như bàn phím ảo, ảnh hưởng đến viewport của trang. Có hai loại viewport: visual (bất kỳ phần nào của trang mà người dùng hiện đang thấy trên màn hình của họ) và layout (tất cả các thành phần trên trang, có thể nhìn thấy hoặc không). Các giá trị hợp lệ là:
- Resizes-visual: Chỉ thay đổi kích thước khung nhìn trực quan nhưng không thay đổi kích thước khung nhìn bố cục (mặc định)
- Thay đổi kích thước nội dung: Thay đổi kích thước cả chế độ xem trực quan và chế độ xem bố cục
- Nội dung lớp phủ: Không thay đổi kích thước bất kỳ khung nhìn nào
Một số trình duyệt xử lý các thuộc tính viewport khác nhau để mang lại cho người dùng trải nghiệm tốt nhất có thể. Ví dụ, Apple đã bỏ qua tất cả các phần tử meta liên quan đến zoom kể từ khi phát hành iOS 10.
Những người khác cho phép người dùng "buộc bật" chức năng thu phóng (tức là bỏ qua giá trị có thể mở rộng của người dùng) bằng cách thay đổi cài đặt trợ năng. Sau đây là giao diện của các tùy chọn trình duyệt Google Chrome dành cho thiết bị di động Android:
Hãy tìm tùy chọn tương tự trong phần cài đặt trợ năng của trình duyệt bạn chọn.
Nơi để nhập thẻ Meta Viewport của bạn
Nếu bạn đang thiết lập thẻ meta khung nhìn theo cách thủ công, hãy nhớ rằng thiết lập được đề xuất là:
<meta name="viewport" content="width=device-width, initial-scale=1">
Điều này có nghĩa là bất kỳ trình duyệt nào cũng sẽ hiển thị trang theo chiều rộng màn hình của nó. Nội dung của bạn sẽ thích ứng với các thiết bị khác nhau và luôn trông đẹp nhất.
Bạn thêm HTML này vào phần tử <head> của trang web. Nó sẽ trông như thế này:
Kiểm tra trang web của bạn để tối ưu hóa hiệu suất
Hầu hết các CMS tự động bao gồm thẻ meta viewport trên mọi trang. Bạn có thể xác nhận điều này trên trang web của mình bằng cách sử dụng công cụ Semrush Site Audit .
Mở công cụ và tìm tên miền của bạn. Chọn “ Thiết lập ” nếu đây là lần kiểm tra đầu tiên của bạn.
Thao tác này sẽ mở cửa sổ “Site Audit Settings”. Cấu hình các thông tin cơ bản cho lần thu thập dữ liệu đầu tiên của bạn. ( Hướng dẫn thiết lập chi tiết này sẽ hướng dẫn bạn qua các cài đặt.)
Sau khi bạn đã cấu hình xong các cài đặt, hãy nhấp vào “ Bắt đầu kiểm tra trang web ” để bắt đầu.
Công cụ này sẽ thu thập dữ liệu trang web của bạn, sử dụng số liệu “Sức khỏe trang web” để tạo ra bản tổng quan về sức khỏe của trang web.
Nhấp vào tab “ Sự cố ”, sau đó chọn danh mục “ SEO di động ”. Bạn sẽ thấy danh sách lỗi, bao gồm bất kỳ thẻ nào bị thiếu.
Nhấp vào “ Tìm hiểu thêm ” bên cạnh lỗi để biết hướng dẫn nhanh về cách khắc phục sự cố.
Tối ưu hóa thẻ Meta của bạn ngay hôm nay
Thẻ meta Viewport là một phần nhỏ nhưng quan trọng trong việc tối ưu hóa trang web của bạn cho trải nghiệm người dùng, khả năng truy cập và hiệu suất tìm kiếm. Chúng là những khối xây dựng chính trong chiến lược SEO trên trang tổng thể của bạn.
Tận dụng tối đa thẻ meta (và các yếu tố SEO khác) của bạn với On Page SEO Checker của Semrush . Nhận thông tin về trang web của bạn và đối thủ cạnh tranh, cùng với các đề xuất về cách bạn có thể cải thiện hiệu suất ngay bây giờ.