Landing page mobile responsive là landing page tự co giãn bố cục để hiển thị tốt trên mọi kích thước màn hình, đặc biệt là điện thoại. Muốn làm đúng, bạn cần khai báo thẻ viewport, dùng bố cục linh hoạt thay vì độ rộng cố định, tối ưu ảnh, làm nút bấm đủ lớn và giữ tốc độ tải nhanh. Google khuyến nghị thiết kế responsive vì đây là mẫu thiết kế dễ triển khai và dễ bảo trì nhất. Bài này hướng dẫn thiết kế landing page mobile và landing page responsive theo từng bước, kèm checklist kiểm tra.
Mục lục
- Landing page mobile và landing page responsive: khác nhau thế nào?
- Tại sao landing page cần thân thiện với điện thoại?
- So sánh các cách làm landing page cho điện thoại
- Bước 1: Khai báo viewport
- Bước 2: Bố cục linh hoạt và breakpoint
- Bước 3: Ảnh và video
- Bước 4: Nội dung, chữ và nút bấm cho ngón tay
- Bước 5: Biểu mẫu trên điện thoại
- Bước 6: Tốc độ và Core Web Vitals
- Đo hiệu quả trên điện thoại
- Checklist kiểm tra trước khi chạy
- Lỗi thường gặp
- Khi nào nên và không nên làm bản mobile riêng?
- Câu hỏi thường gặp
- Nguồn tham khảo
Landing page mobile và landing page responsive: khác nhau thế nào?
Hai cụm từ hay bị dùng lẫn lộn:
- Landing page responsive: một trang, một địa chỉ, một bộ mã HTML; giao diện tự thay đổi theo chiều rộng màn hình bằng CSS.
- Landing page mobile: cách gọi chung cho trang tối ưu trên điện thoại. Có thể là trang responsive, hoặc là một phiên bản riêng dành cho di động (ví dụ địa chỉ m.ten-mien.vn hoặc phục vụ nội dung khác nhau theo thiết bị).
Với hầu hết doanh nghiệp, responsive là lựa chọn nên ưu tiên. Google viết rõ trong tài liệu về lập chỉ mục ưu tiên thiết bị di động rằng họ khuyến nghị thiết kế web responsive vì đây là mẫu thiết kế dễ triển khai và duy trì nhất. Bạn có thể đọc thêm về khái niệm ở mobile friendly là gì và mobile first indexing.
Tại sao landing page cần thân thiện với điện thoại?
- Nguồn truy cập: quảng cáo trên mạng xã hội và ứng dụng xem trên điện thoại, nên người nhấp vào landing page thường dùng thiết bị di động. Tỷ lệ cụ thể khác nhau theo ngành và chiến dịch, hãy xem báo cáo thiết bị trong Google Analytics 4 của bạn để biết con số thực.
- Lập chỉ mục: Google dùng phiên bản di động của trang để lập chỉ mục và xếp hạng. Theo tài liệu của Google, chỉ nội dung hiển thị trên bản di động được dùng để lập chỉ mục, nên nội dung thiếu trên mobile sẽ không được tính.
- Chuyển đổi: nút bấm nhỏ, chữ bé, biểu mẫu khó điền khiến khách bỏ đi trước khi hoàn tất.
- Chất lượng quảng cáo: Google Ads coi trải nghiệm trang đích là một thành phần của Điểm chất lượng, định nghĩa là mức độ liên quan và hữu ích của trang với người nhấp quảng cáo.
So sánh các cách làm landing page cho điện thoại
| Cách làm | Cách hoạt động | Ưu điểm | Nhược điểm |
|---|---|---|---|
| Responsive | Một mã, CSS thay đổi bố cục theo màn hình | Dễ bảo trì, một địa chỉ, phù hợp khuyến nghị của Google | Cần thiết kế cẩn thận để không nặng trên di động |
| Dynamic serving | Cùng địa chỉ nhưng máy chủ trả HTML khác theo thiết bị | Tùy biến theo thiết bị | Phức tạp, dễ lỗi nội dung không đồng nhất |
| Địa chỉ mobile riêng | Trang riêng cho di động (ví dụ m.) | Có thể rất nhẹ | Phải đồng bộ nội dung hai bản, tăng công việc |
| Chỉ thiết kế cho desktop | Bố cục cố định rộng | Không | Chữ bé, cuộn ngang, chuyển đổi thấp trên điện thoại |
Bước 1: Khai báo viewport
Thẻ viewport báo cho trình duyệt di động biết cần khớp chiều rộng trang với chiều rộng màn hình. Đoạn mã chuẩn được web.dev hướng dẫn:
<meta name="viewport" content="width=device-width, initial-scale=1">
Theo web.dev, nếu thiếu thẻ này, trang sẽ tải ở trạng thái thu nhỏ, chữ rất khó đọc vì trình duyệt giả định độ rộng kiểu máy tính để bàn. Hầu hết công cụ dựng landing page và giao diện WordPress hiện đại đã tự thêm thẻ này, nhưng bạn vẫn nên kiểm tra bằng cách xem mã nguồn trang.
Bước 2: Bố cục linh hoạt và breakpoint
- Thiết kế mobile-first: bắt đầu bằng bố cục một cột trên màn hình nhỏ, rồi mở rộng thành nhiều cột khi màn hình lớn hơn.
- Dùng đơn vị tương đối: phần trăm, rem, flexbox hoặc grid thay vì độ rộng pixel cố định.
- Breakpoint theo nội dung: web.dev khuyên không đặt điểm ngắt theo tên thiết bị hay hãng, mà thêm điểm ngắt khi bố cục thật sự cần điều chỉnh.
- Không cuộn ngang: mọi khối, ảnh, bảng phải nằm gọn trong chiều rộng màn hình. Ảnh nên có giới hạn
max-width: 100%để co lại theo khung. - Thứ tự nội dung trên di động: tiêu đề, lợi ích chính và nút kêu gọi nên xuất hiện sớm, không bị đẩy xuống dưới ảnh lớn.
Bước 3: Ảnh và video
- Khai báo kích thước: thêm thuộc tính chiều rộng và chiều cao cho thẻ ảnh để trình duyệt giữ chỗ, tránh trang giật khi ảnh tải xong (web.dev khuyến nghị điều này).
- Nén ảnh và chọn định dạng nhẹ: ảnh nặng là nguyên nhân phổ biến khiến landing page chậm.
- Tải lười ảnh ngoài màn hình đầu: nhưng không tải lười ảnh chính ở phần đầu trang vì ảnh này ảnh hưởng LCP. Google cũng lưu ý không tải lười nội dung chính cần thao tác người dùng mới hiện ra.
- Video: không tự phát âm thanh, có ảnh bìa, tải khi người dùng bấm nếu video nặng.
- Ảnh có chữ: tránh nhúng chữ quan trọng vào ảnh vì khó đọc khi thu nhỏ và không được đọc bởi trình đọc màn hình hay công cụ tìm kiếm.
Bước 4: Nội dung, chữ và nút bấm cho ngón tay
| Thành phần | Nguyên tắc trên điện thoại |
|---|---|
| Cỡ chữ nội dung | Đủ lớn để đọc không cần phóng to; giãn dòng thoáng |
| Đoạn văn | Ngắn, 2 đến 4 câu; dùng gạch đầu dòng |
| Nút kêu gọi hành động | Đủ rộng, đủ cao để chạm bằng ngón tay, có khoảng cách với phần tử khác |
| Số điện thoại | Dùng liên kết gọi trực tiếp để bấm là gọi |
| Menu | Bỏ hoặc rút gọn, giữ một lối thoát rõ ràng |
| Bảng | Ít cột; cho phép cuộn trong khung hoặc xếp lại thành khối |
| Cửa sổ bật lên (popup) | Hạn chế; tránh che kín màn hình ngay khi vào trang |
Một mẹo đơn giản: cố định một nút kêu gọi hành động ở cuối màn hình trên di động, nhưng đảm bảo nó không che nội dung hoặc biểu mẫu.
Bước 5: Biểu mẫu trên điện thoại
- Chỉ hỏi thông tin cần thiết; mỗi trường thêm là một lý do để bỏ đi.
- Dùng đúng kiểu nhập (số điện thoại, email) để bàn phím phù hợp tự hiện.
- Nhãn trường rõ ràng, thông báo lỗi dễ hiểu, không chỉ báo bằng màu.
- Kiểm tra bàn phím ảo có che nút gửi hay không.
- Sau khi gửi, hiển thị trang cảm ơn rõ ràng và gắn sự kiện chuyển đổi.
Bước 6: Tốc độ và Core Web Vitals
Theo web.dev, ba chỉ số Core Web Vitals và ngưỡng “tốt” (đo ở phân vị 75 của lượt tải trang) là: LCP trong 2,5 giây, INP từ 200 mili giây trở xuống, CLS từ 0,1 trở xuống. Trên di động, mạng yếu và thiết bị chậm hơn khiến các ngưỡng này khó đạt hơn, nên hãy:
- Giữ ít script bên thứ ba (chat, popup, theo dõi). Chỉ cài cái thật sự dùng.
- Giảm phông chữ tùy chỉnh, chỉ tải kiểu chữ cần.
- Dùng bộ nhớ đệm và CDN nếu có thể.
- Kiểm tra bằng PageSpeed Insights với dữ liệu thực tế và dữ liệu phòng thí nghiệm, đọc kết quả mobile trước.
Thêm chi tiết ở Core Web Vitals là gì và tối ưu mobile SEO.
Đo hiệu quả của landing page trên điện thoại
Làm xong chưa phải kết thúc. Để biết bản mobile thực sự hoạt động, hãy tách số liệu theo thiết bị trong Google Analytics 4 và trong báo cáo quảng cáo:
| Chỉ số | So sánh giữa | Dấu hiệu cần xử lý |
|---|---|---|
| Tỷ lệ chuyển đổi | Mobile và desktop | Mobile thấp hơn hẳn: kiểm tra biểu mẫu, nút bấm, tốc độ |
| Tỷ lệ thoát và thời gian trên trang | Mobile và desktop | Thoát nhanh trên mobile: tiêu đề hoặc phần đầu trang chưa rõ, trang tải chậm |
| Điểm cuộn trang | Theo từng khối | Khách dừng ở một khối: nội dung khối đó dài hoặc khó đọc |
| Dữ liệu thực tế Core Web Vitals | Báo cáo trong Google Search Console và PageSpeed Insights | URL được xếp cần cải thiện hoặc kém |
| Lỗi biểu mẫu | Số lần bắt đầu và số lần gửi thành công | Chênh lệch lớn: trường quá nhiều hoặc bàn phím che nút gửi |
Quy trình cải thiện nên đi theo vòng lặp: đo, đặt giả thuyết về một vấn đề (ví dụ nút bấm quá nhỏ), sửa một thay đổi, chạy đủ lượng truy cập rồi so sánh. Thay nhiều thứ cùng lúc sẽ khiến bạn không biết thay đổi nào có tác dụng. Với các trang cần lên Google, hãy theo dõi thêm báo cáo trải nghiệm trên trang trong Google Search Console, nơi tổng hợp dữ liệu Core Web Vitals theo nhóm URL.
Tình huống thực tế thường gặp
- Quảng cáo tốt nhưng ít lead trên di động: mở trang từ quảng cáo bằng điện thoại thật; thường lỗi nằm ở biểu mẫu dài, popup che màn hình hoặc nút gọi không bấm được.
- Trang đẹp trên máy tính, rối trên điện thoại: bắt đầu lại bằng bố cục một cột, rồi thêm cột cho màn hình rộng thay vì thu nhỏ bản desktop.
- Điểm tốc độ thấp do công cụ bên thứ ba: gỡ bớt script chat, theo dõi không cần thiết, hoặc tải chúng sau khi trang hiển thị xong.
- Nội dung mobile ngắn hơn desktop: bổ sung nội dung chính vào bản mobile, vì Google lập chỉ mục dựa trên bản này.
Checklist kiểm tra trước khi chạy
| Hạng mục | Cách kiểm tra | Đạt khi |
|---|---|---|
| Viewport | Xem mã nguồn hoặc công cụ dành cho nhà phát triển | Có thẻ viewport chuẩn |
| Không cuộn ngang | Mở trên điện thoại thật và chế độ giả lập | Mọi khối nằm trong màn hình |
| Chữ đọc được | Đọc không phóng to | Không phải chụm ngón tay để đọc |
| Nút bấm | Bấm thử bằng ngón tay cái | Không bấm nhầm nút kế bên |
| Biểu mẫu | Điền và gửi thử | Gửi được, lead về đúng nơi |
| Tốc độ | PageSpeed Insights, thử trên mạng 4G | Các chỉ số trong ngưỡng tốt hoặc cải thiện rõ |
| Nội dung đồng nhất | So sánh nội dung bản mobile và desktop | Không thiếu nội dung chính ở mobile |
| Đo lường | Kiểm tra sự kiện trên điện thoại | Sự kiện chuyển đổi ghi nhận được |
Lỗi thường gặp khi làm landing page responsive
- Thiếu thẻ viewport làm trang hiển thị thu nhỏ như máy tính.
- Ẩn nội dung quan trọng trên mobile để cho gọn. Vì Google lập chỉ mục theo bản di động, nội dung bị ẩn hoặc bỏ đi có thể không được tính.
- Ảnh nền quá nặng hoặc video tự phát ở đầu trang.
- Nút bấm sát nhau khiến người dùng bấm nhầm.
- Popup che toàn màn hình ngay khi vào trang.
- Chỉ kiểm tra bằng giả lập, không thử trên điện thoại thật và trong ứng dụng Facebook hoặc TikTok.
- Chặn tài nguyên bằng robots.txt (CSS, JS, ảnh) khiến Google không hiển thị đúng trang; tài liệu Google cũng khuyên không chặn ảnh và tài nguyên.
- Không đồng nhất dữ liệu có cấu trúc, tiêu đề, mô tả giữa bản mobile và desktop khi dùng hai bản riêng.
Khi nào nên và không nên làm bản mobile riêng?
| Tình huống | Nên | Không nên |
|---|---|---|
| Landing page mới, nguồn lực hạn chế | Responsive, một mã | Làm hai bản độc lập |
| Trang cũ chỉ có bản desktop | Nâng cấp lên responsive hoặc dựng lại | Giữ nguyên rồi chạy quảng cáo mobile |
| Nhu cầu trải nghiệm rất khác (ví dụ ứng dụng) | Cân nhắc dynamic serving có kiểm soát | Thay đổi nội dung chính giữa các bản |
| Traffic gần như 100% từ mạng xã hội | Thiết kế mobile-first | Thiết kế desktop trước rồi “thu nhỏ” |
Câu hỏi thường gặp
Landing page mobile là gì?
Là landing page được tối ưu để hiển thị và thao tác tốt trên điện thoại. Cách phổ biến nhất hiện nay là dùng thiết kế responsive, một trang tự co giãn theo màn hình.
Landing page responsive là gì?
Là landing page dùng một địa chỉ và một bộ mã, trong đó CSS thay đổi bố cục theo chiều rộng màn hình. Google khuyến nghị cách này vì dễ triển khai và duy trì.
Làm sao biết landing page đã responsive?
Mở trang trên điện thoại thật, kiểm tra không cuộn ngang, chữ đọc được, nút bấm dễ chạm; xem mã nguồn có thẻ viewport; chạy PageSpeed Insights và đọc kết quả mobile.
Thẻ viewport viết thế nào?
Dạng chuẩn theo web.dev là thẻ meta tên viewport với nội dung width=device-width, initial-scale=1, đặt trong phần head của trang.
Landing page mobile có ảnh hưởng SEO không?
Có. Google lập chỉ mục dựa trên phiên bản di động, nên nội dung và tốc độ của bản mobile ảnh hưởng đến khả năng hiển thị. Xem thêm bài về cách SEO landing page.
Nên dùng hai trang riêng cho mobile và desktop không?
Thông thường không cần. Nếu bắt buộc, hãy đảm bảo nội dung chính, tiêu đề, mô tả và dữ liệu có cấu trúc đồng nhất giữa hai bản.
Landing page có cần tải dưới bao nhiêu giây?
Google đưa ra ngưỡng LCP tốt là trong 2,5 giây ở phân vị 75. Đây là mục tiêu tham khảo; hãy đo trên trang thật của bạn và cải thiện dần.
Có cần kiểm tra trong ứng dụng Facebook hoặc TikTok không?
Nên có, vì trang mở trong trình duyệt tích hợp của ứng dụng có thể hiển thị và tải khác trình duyệt thông thường. Hãy bấm thử từ chính quảng cáo.
Kết luận và bước tiếp theo
Hãy xem điện thoại là màn hình chính của landing page: khai báo viewport, thiết kế một cột, tối ưu ảnh, làm nút bấm to rõ và kiểm tra bằng thiết bị thật. Khi trang đã ổn, tiếp tục đọc thiết kế landing page để hoàn thiện nội dung.
Vidco Group có thể hỗ trợ: nếu bạn cần rà soát landing page hiện có trên điện thoại hoặc xây mới theo hướng mobile-first, Vidco Group có thể tư vấn và đề xuất các hạng mục cần ưu tiên.
Nguồn tham khảo
- Google Search Central – Mobile-first indexing
- web.dev – Responsive web design basics
- web.dev – Core Web Vitals
- PageSpeed Insights
- Google Ads – Điểm chất lượng và trải nghiệm trang đích
Cập nhật: tháng 10/2026
