Giới thiệu
Landing page trông đẹp trên máy bạn chưa có nghĩa là đã sẵn sàng ra mắt. Bài này liệt kê những phần khách truy cập không nhìn thấy ngay nhưng ảnh hưởng đến việc trang có được tìm thấy, được chia sẻ, được tin tưởng và đo được hiệu quả hay không. Mỗi mục có một prompt mẫu. Prompt viết cho bản HTML; nếu bạn dùng bản Next.js, xem phần ghi chú Next.js ở từng mục. Chuẩn bị:- Landing page đã hoàn chỉnh nội dung
- Form đăng ký đã gửi được dữ liệu (xem Nhận dữ liệu form đăng ký)
1. SEO cơ bản
SEO giúp trang xuất hiện trên Google khi người khác tìm kiếm. Phần tối thiểu gồm tiêu đề trang, mô tả và cấu trúc heading rõ ràng.Next.js: tiêu đề và mô tả khai báo bằng đối tượng
metadata trong app/layout.tsx. Bạn chỉ cần nói với Claude Code: “Thêm metadata cho trang: title …, description …“.2. Chia sẻ lên mạng xã hội và favicon
Khi ai đó dán link trang của bạn lên Facebook hoặc Zalo, mạng xã hội đọc các thẻ Open Graph để hiển thị ảnh, tiêu đề và mô tả. Thiếu các thẻ này, link hiện ra trống trơn hoặc lấy ảnh ngẫu nhiên. Favicon là biểu tượng nhỏ trên tab trình duyệt.Next.js: đặt file
favicon.ico và opengraph-image.jpg vào thư mục app/, Next.js tự sinh thẻ tương ứng. Các trường Open Graph khác khai báo trong metadata.openGraph.3. Đo lường (Analytics)
Không đo lường thì bạn không biết bao nhiêu người vào trang, họ đến từ đâu và bao nhiêu người đăng ký. Chọn một trong các công cụ sau:
Sau khi tạo tài khoản Google Analytics và có Measurement ID (dạng
G-XXXXXXXXXX):
Next.js: dùng component
GoogleAnalytics từ gói @next/third-parties/google, đặt trong app/layout.tsx với prop gaId. Nói với Claude Code: “Gắn Google Analytics bằng @next/third-parties với gaId G-XXXXXXXXXX”.4. Trang cảm ơn và trang 404
Trang cảm ơn hiện ra sau khi khách đăng ký thành công. Trang này xác nhận với khách rằng đăng ký đã được nhận, cho khách biết bước tiếp theo, và giúp bạn đếm lượt đăng ký (mỗi lượt xem trang cảm ơn là một lượt đăng ký). Trang 404 hiện ra khi khách gõ sai đường dẫn. Thay vì trang lỗi mặc định, trang 404 riêng giữ giao diện và dẫn khách về trang chủ.Next.js: trang cảm ơn là
app/thank-you/page.tsx, trang 404 là app/not-found.tsx.5. Chính sách bảo mật và dữ liệu cá nhân
Form đăng ký thu thập họ tên, email, số điện thoại — đây là dữ liệu cá nhân. Bạn cần cho khách biết dữ liệu được dùng vào việc gì và xin sự đồng ý của họ.6. Tốc độ tải và hình ảnh
Hình ảnh thường là phần nặng nhất của landing page. Trang tải chậm trên điện thoại sẽ mất khách trước khi họ kịp đọc tiêu đề.Next.js: dùng component
next/image thay cho thẻ <img> — Next.js tự chuyển định dạng, đổi kích thước và lazy load. Thêm priority cho ảnh hero.7. Khả năng truy cập (Accessibility)
Khả năng truy cập giúp người dùng trình đọc màn hình, người chỉ dùng bàn phím, hoặc người nhìn kém vẫn dùng được trang. Những điểm này cũng giúp SEO tốt hơn.Kiểm tra lần cuối
Sau khi deploy, tự kiểm tra trên điện thoại thật:- Tab trình duyệt hiện đúng tiêu đề trang và favicon
- Dán link vào Messenger hoặc Zalo: hiện ảnh, tiêu đề, mô tả
- Gửi thử form: chuyển sang trang cảm ơn, bạn nhận được dữ liệu
- Google Analytics ghi nhận lượt truy cập (xem báo cáo Realtime)
- Gõ sai đường dẫn: hiện trang 404 riêng
- Link Chính sách bảo mật hoạt động, checkbox đồng ý là bắt buộc
- Điểm PageSpeed Insights phần Mobile không có mục báo đỏ về ảnh