Hướng dẫn về Viewport Meta Tag cho người mới bắt đầu

Viewport Meta Tag là gì?

Một viewport meta tag là đoạn mã HTML (HyperText Markup Language) cho trình duyệt biết cách kiểm soát kích thước và tỷ lệ của viewport. Đây là thành phần thiết yếu của thiết kế web responsive, giúp nội dung của bạn dễ xem.

viewport là vùng hiển thị của trang web mà người dùng nhìn thấy. Kích thước vùng này thay đổi tùy theo thiết bị và khi bạn thay đổi kích thước cửa sổ trình duyệt.

Ví dụ, kích thước viewport 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. Viewport trên điện thoại thông minh thường nhỏ hơn cả hai.

Khi 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 đang điều chỉnh viewport. Nội dung hiển thị có thể giữ nguyên hoặc được định dạng lại.

Viewport hiếm khi có cùng kích thước với trang web đã được hiển thị đầy đủ, vì vậy trình duyệt dùng thanh cuộn để người dùng truy cập toàn bộ nội dung trên website.

Hãy chú ý rằng trên mỗi thiết bị, bạn không chỉ nhìn thấy nhiều hay ít hơn cùng một trang. Bố cục cũng thay đổi:

Kiểu thiết kế website responsive này cải thiện UX (trải nghiệm người dùng) và có thể tác động tích cực đến các nỗ lực SEO của bạn.

Viewport Meta Tag hoạt động như thế nào?

Viewport meta tag điều chỉnh nội dung cho phù hợp với màn hình của người dùng. Thẻ này giúp trang responsive hơn và ngăn người dùng phải cuộn ngang hoặc phóng to.

Dưới đây là ví dụ về cách viewport tag tác động đến một trang cơ bản:

Chữ trên màn hình bên trái khó đọc. Màn hình cũng không tận dụng tốt không gian sẵn có. Người dùng phải phóng to cả ảnh lẫn chữ để xem.

Chữ bên phải có thể đọc ngay (ngoại trừ phần chữ mẫu) và hình ảnh lấp đầy chiều rộng màn hình. Người dùng có thể xem rõ mà không cần điều chỉnh.

Nội dung trên trang có viewport meta tag thuận tiện và thu hút hơn, vì vậy người dùng có khả năng dành nhiều thời gian hơn cho trang.

Thêm meta viewport tag sẽ giúp trang responsive hơn. Và dù điều này giúp trang thân thiện với mobile, nhưng không đồng nghĩa với một trang mobile. Sau đây là điểm khác biệt chính:

• Một responsive page tự động thích ứng với môi trường hiển thị bất kể thiết bị nào (tức là phiên bản máy tính để bàn của website so với iPad). Người dùng có thể truy cập toàn bộ website.
• Một mobile page được thiết kế chỉ để sử dụng trên trình duyệt mobile. Nội dung trên những trang này tách biệt với website chính. Trang thường có một Subdomain “mdot” riêng (tức là “m.[yourwebsite].com”). Người dùng có thể không truy cập được toàn bộ website.

Viewport Meta Tag ảnh hưởng đến hiệu suất marketing như thế nào

Sử dụng viewport meta tags là 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ể giúp tăng organic traffic.

Cuối cùng, cả hai kết quả đều có thể giúp bạn đạt được mục tiêu marketing.

Cải thiện trải nghiệm người dùng để giữ chân khách truy cập

Viewport meta tags giúp nội dung của bạn dễ đọc hơn. Nhờ đó, khách truy cập có nhiều khả năng ở lại trang lâu hơn.

Khách truy cập ở lại trang web càng lâu, bạn càng có nhiều cơ hội để:

• Thu thập thông tin giá trị (thông qua biểu mẫu web hoặc website analytics)
• Chuyển đổi họ (mục tiêu tối thượng)

Gần ba phần tư (73.1%) các nhà thiết kế web được GoodFirms khảo sát cho rằng thiết kế không đáp ứng là một trong những lý do chính khiến người dùng rời khỏi website:

Nguồn hình ảnh: GoodFirms

Bạn có thể kiểm chứng điều này trên website của mình. Sau khi thêm viewport meta tags, hãy theo dõi các chỉ số để xem mức độ tương tác có cải thiện hay không:

• Thời gian tương tác trung bình: Thời gian người dùng xem trang web của bạn ở trạng thái đang mở trên màn hình. Chỉ số này cũng nên tăng.
• Bounce Rate: Tỷ lệ phiên mà Google tính là không có tương tác. Trường hợp này xảy ra khi người dùng rời website 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. Chỉ số giảm cho thấy mức độ tương tác cao hơn.

Bạn có thể xem thời gian tương tác trung bình trong trang tổng quan Google Analytics bằng cách vào “Reports” > “Lifecycle” > “Engagement” > “Engagement overview.”

Bounce Rate khó tìm hơn một chút trong Google Analytics 4. Để xem hướng dẫn, hãy tham khảo bài tổng hợp các chỉ số Google Analytics hữu ích và cách tìm chúng.

Đọc thêm:

• Metric trong Google Analytics là gì? [Giải thích]

Giúp bạn đạt thứ hạng cao hơn trong kết quả của công cụ tìm kiếm

Bản thân viewport meta tag 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 website của bạn trên trang kết quả của công cụ tìm kiếm Google (SERP).

Một lý do lớn là Google đã chuyển sang mobile-first indexing. Điều này có nghĩa là Google xem xét phiên bản mobile của website khi xác định thứ hạng của bạn trên SERP.

Sử dụng viewport meta tag phù hợp giúp bạn đảm bảo nội dung thân thiện với mobile. Nội dung mà người dùng có thể đọc mà không cần phóng to hay cuộn sẽ giúp bạn có cơ hội đạt thứ hạng cao hơn.

Nguồn hình ảnh: Google

Cách sử dụng viewport meta tags

Hầu hết hệ thống quản lý nội dung (CMS) sẽ tự động thiết lập viewport meta tags tối ưu cho website của bạn.

Bạn cũng có thể tự thiết lập bằng cách chỉnh sửa code trên website.

Viewport meta tag, giống như các meta tags, là HTML được đặt trong phần <head> của trang.

Một trang thông thường sẽ có nội dung tương tự như sau:

<meta name="viewport" content="width=device-width, initial-scale=1">

Thuộc tính content (“content=”) quyết định cách trang hiển thị khi tải. Bạn có thể điều chỉnh giao diện trang web bằng cách thay đổi các thuộc tính device-width và initial-scale.

Width

Đúng như tên gọi, width kiểm soát chiều rộng của viewport. Bạn có thể đặt một giá trị cụ thể (tính bằng pixel), chẳng hạn như width=500. Kết quả sẽ như sau:

<meta name="viewport" content="width=500, initial-scale=1">

Bạn cũng có thể dùng device-width để sử dụng 100% chiều rộng của thiết bị. Kết quả sẽ như sau:

<meta name="viewport" content="width=device-width, initial-scale=1">

Device-width đơn giản hơn và đảm bảo trải nghiệm người dùng tốt nhất nhờ tự điều chỉnh theo nhiều kích thước màn hình.

Initial-scale

Initial-scale quyết định mức thu phóng khi trang tải. Bạn có thể đặt giá trị từ 0.1 đến 10. Giá trị mặc định là 1.

Mức thu phóng 3 sẽ trông như sau:

<meta name="viewport" content="width=device-width, initial-scale=3">

Các thuộc tính khác

Bạn cũng có thể điều chỉnh viewport meta tag theo những cách khác. Các thuộc tính này gồm:

• Height: Thuộc tính này hoạt động giống width. Bạn có thể đặt một số pixel cụ thể hoặc dùng device-height (được khuyến nghị).
• Minimum-scale: Thuộc tính này kiểm soát mức thu phóng mà trang cho phép, ngăn người dùng thu nhỏ quá mức. Giá trị phải nhỏ hơn hoặc bằng maximum-scale. Giá trị mặc định là 0.1.
• Maximum-scale: Thuộc tính này cũng kiểm soát mức thu phóng, ngăn người dùng phóng to quá mức. Giá trị phải lớn hơn hoặc bằng minimum-scale. Giá trị mặc định là 10. Mọi giá trị dưới 3 đều trái với hướng dẫn về khả năng tiếp cận.
• User-scalable: Thuộc tính này kiểm soát việc người dùng có thể thu phóng hay không. Các giá trị hợp lệ là 0 hoặc no, hoặc 1 hoặc yes. Không cho phép người dùng thu phóng là trái với Web Content Accessibility Guidelines (WCAG), đồng thời mang lại trải nghiệm người dùng kém.
• Interactive-widget: Thuộc tính này xác định cách các widget tương tác, chẳng hạn như bàn phím ảo, ảnh hưởng đến viewport của trang. Có hai loại viewport: visual (phần trang mà người dùng hiện đang nhìn thấy trên màn hình) và layout (tất cả thành phần trên trang, dù có hiển thị hay không). Các giá trị hợp lệ gồm:
• • Resizes-visual: Chỉ thay đổi kích thước visual viewport, không thay đổi layout viewport (mặc định)
  • Resizes-content: Thay đổi kích thước cả visual viewport lẫn layout viewport
  • Overlays-content: Không thay đổi kích thước viewport nào

Một số trình duyệt xử lý các thuộc tính viewport theo cách khác nhau để mang lại trải nghiệm tốt nhất có thể cho người dùng. Ví dụ, Apple đã bỏ qua mọi meta element liên quan đến thu phóng kể từ khi phát hành iOS 10.

Một số trình duyệt cho phép người dùng “force enable” tính năng thu phóng (tức là bỏ qua giá trị user-scalable) bằng cách thay đổi cài đặt trợ năng. Đây là giao diện các tùy chọn trình duyệt Google Chrome trên 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.

Nhập Viewport Meta Tag ở đâu

Nếu tự thiết lập Viewport Meta Tag, hãy nhớ dùng cài đặt được khuyến nghị sau:

<meta name="viewport" content="width=device-width, initial-scale=1">

Điều này có nghĩa là mọi trình duyệt đều sẽ hiển thị trang theo chiều rộng màn hình của thiết bị. 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 có thể.

Bạn thêm HTML này vào phần tử <head> trên website của mình. Phần này sẽ trông như sau:

Audit website để tối ưu hiệu suất

Hầu hết CMS đều tự động thêm Viewport Meta Tag vào mọi trang. Bạn có thể xác nhận điều này trên website bằng cách sử dụng công cụ Semrush Site Audit.

Mở công cụ và tìm domain của bạn. Chọn “Set up” nếu đây là lần audit đầu tiên của bạn.

Thao tác này sẽ mở cửa sổ “Site Audit Settings”. Thiết lập các tùy chọn cơ bản cho lần crawl đầu tiên. (Hướng dẫn hướng dẫn thiết lập chi tiết này sẽ hướng dẫn bạn từng bước về các tùy chọn.)

Sau khi thiết lập xong, hãy nhấp vào “Start Site Audit” để bắt đầu.

Công cụ sẽ crawl website của bạn và dùng chỉ số “Site Health” để tạo bản tổng quan về tình trạng website.

Nhấp vào tab “Issues”, sau đó chọn danh mục “Mobile SEO”. Bạn sẽ thấy danh sách lỗi, bao gồm cả những tag còn thiếu.

Nhấp vào “Learn more” bên cạnh lỗi để xem hướng dẫn nhanh cách khắc phục.

Tối ưu Meta Tag ngay hôm nay

Viewport Meta Tag là một phần nhỏ nhưng thiết yếu trong việc tối ưu website để cải thiện trải nghiệm người dùng, khả năng truy cập và Search Performance. Đây là những thành phần nền tảng quan trọng trong chiến lược on-page SEO tổng thể của bạn.

Tận dụng tối đa Meta Tag (và các yếu tố SEO khác) với On Page SEO Checker. Tìm hiểu thông tin về website và đối thủ cạnh tranh, cùng các đề xuất giúp bạn cải thiện hiệu suất ngay hôm nay.