Technical SEO

Web App Manifest

Tệp JSON mô tả metadata cho PWA như tên, biểu tượng, theme color và cách hiển thị khi cài đặt trên thiết bị.

4 lượt xem Cập nhật: 26/05/2026

Web App Manifest là gì?

Web App Manifest là một tệp JSON (thường đặt tên là manifest.json) chứa thông tin mô tả về ứng dụng web — như tên, biểu tượng, màu chủ đạo, hướng hiển thị và cách hành xử khi người dùng cài đặt trang lên thiết bị. Đây là thành phần bắt buộc để biến một website thành Progressive Web App (PWA), giúp trang hoạt động gần giống ứng dụng gốc trên điện thoại hoặc máy tính.

Tệp manifest không phải là công cụ SEO trực tiếp như thẻ meta hay sitemap, nhưng nó ảnh hưởng gián tiếp đến trải nghiệm người dùng, tỷ lệ giữ chân và khả năng xuất hiện trong các kênh phân phối như màn hình chính, thanh tìm kiếm hệ điều hành — những yếu tố Google xác nhận là tín hiệu xếp hạng dài hạn.

Tại sao quan trọng trong SEO?

Web App Manifest hỗ trợ SEO qua ba kênh chính:

Tăng tương tác người dùng: Khi trang có manifest đúng chuẩn, người dùng dễ cài đặt lên màn hình chính → tăng tần suất truy cập, thời gian ở lại và giảm tỷ lệ thoát — tất cả đều là tín hiệu chất lượng mà Google dùng để đánh giá trang.
Hỗ trợ chỉ mục hóa PWA: Googlebot nhận diện manifest để hiểu trang là ứng dụng web tiến bộ. Nếu kèm theo service worker và HTTPS, trang có thể được lập chỉ mục như một ứng dụng — mở ra cơ hội xuất hiện trong kết quả tìm kiếm đặc biệt như "Installable Web Apps" hoặc gợi ý từ Google Discover.
Cải thiện trải nghiệm trên thiết bị di động: Manifest kiểm soát cách trang hiển thị khi mở từ màn hình chính (ví dụ: ẩn thanh địa chỉ, dùng toàn màn hình). Trải nghiệm mượt mà hơn → giảm bounce rate trên mobile → cải thiện vị trí xếp hạng trên thiết bị di động (mobile-first indexing).

Lưu ý: Không có bằng chứng nào cho thấy manifest ảnh hưởng trực tiếp đến điểm Page Experience hay Core Web Vitals — nhưng nó là một phần không thể thiếu trong hệ sinh thái PWA, vốn được Google ưu tiên trong chiến lược web hiện đại.

Cách hoạt động

Manifest hoạt động qua ba bước:

Khởi tạo: Trang web khai báo tệp manifest trong thẻ <link rel="manifest" href="/manifest.json"> ở phần <head>.
Phân tích: Trình duyệt đọc tệp JSON, kiểm tra tính hợp lệ (định dạng, bắt buộc các trường như name, short_name, icons).
Áp dụng: Khi người dùng chọn "Cài đặt trang web" hoặc trình duyệt tự động đề xuất (trên Chrome/Edge Android), hệ thống dùng dữ liệu từ manifest để tạo biểu tượng, thiết lập màu thanh trạng thái, chọn biểu tượng phù hợp với độ phân giải thiết bị.

Quá trình này hoàn toàn độc lập với server — không cần backend xử lý. Tất cả dựa vào client-side và tuân thủ tiêu chuẩn W3C.

Hướng dẫn thực hiện

Dưới đây là các bước triển khai manifest chuẩn SEO:

Tạo tệp manifest.json: Đặt tại thư mục gốc (ví dụ: https://example.com/manifest.json). Đảm bảo tệp có định dạng JSON hợp lệ và mã hóa UTF-8.
Khai báo bắt buộc: Các thuộc tính tối thiểu gồm:
- name: Tên đầy đủ của ứng dụng (dùng cho tooltip, cửa sổ cài đặt)
- short_name: Tên ngắn gọn (hiển thị dưới biểu tượng trên màn hình chính)
- icons: Mảng các biểu tượng ở nhiều kích thước (ít nhất một biểu tượng 192x192 px và một 512x512 px)
- start_url: URL khởi đầu khi mở từ màn hình chính (nên là trang chủ hoặc trang landing có nội dung rõ ràng)
- display: Giá trị đề xuất là standalone hoặc minimal-ui để loại bỏ thanh điều hướng
- theme_color: Màu nền thanh tiêu đề khi mở trang (ảnh hưởng đến trải nghiệm chuyển đổi)
Liên kết trong HTML: Thêm thẻ sau vào <head> của mọi trang cần hỗ trợ cài đặt:
```
<link rel="manifest" href="/manifest.json">
```
Kiểm tra: Dùng Manifest Checker hoặc tab Application > Manifest trong DevTools (Chrome/Edge) để xác minh lỗi cú pháp, thiếu icon, hoặc start_url không truy cập được.

Lỗi thường gặp

Lỗi	Dấu hiệu	Cách khắc phục
Tệp manifest không được tải	DevTools báo "Failed to load resource" hoặc không thấy tab Manifest	Kiểm tra đường dẫn `href`, đảm bảo tệp tồn tại, trả về mã 200, và có header `Content-Type: application/manifest+json`
Thiếu `icons` hoặc icon không đúng kích thước	Biểu tượng hiển thị mờ, bị kéo giãn hoặc không xuất hiện trên màn hình chính	Cung cấp ít nhất hai icon: 192x192 và 512x512 px, định dạng PNG, nền trong suốt, không viền. Kiểm tra đường dẫn icon trong manifest — nên dùng URL tuyệt đối hoặc tương đối từ gốc.
`start_url` dẫn đến trang 404 hoặc không có nội dung	Ứng dụng mở ra trang trắng hoặc lỗi khi nhấn biểu tượng ngoài màn hình chính	Đảm bảo `start_url` trỏ tới trang tồn tại, tải nhanh, có nội dung hữu ích và không yêu cầu đăng nhập bắt buộc.
Sử dụng `display: browser`	Trang mở với thanh địa chỉ, không giống ứng dụng	Thay bằng `standalone` hoặc `minimal-ui`. Lưu ý: `fullscreen` chỉ dùng khi thực sự cần (ví dụ: game, trình chiếu).

Ví dụ thực tế

Dưới đây là tệp manifest.json mẫu cho một trang tin tức Việt Nam, đã tối ưu cho SEO và cài đặt:

{
  "name": "Tin Tức Hôm Nay",
  "short_name": "Tin Hôm Nay",
  "description": "Cập nhật tin tức trong nước và quốc tế mỗi ngày",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0066cc",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Chú thích: description không bắt buộc nhưng nên có — một số trình duyệt (như Samsung Internet) dùng trường này để hiển thị mô tả trong cửa sổ cài đặt. background_color giúp tránh nhấp nháy màu đen khi tải trang.

Câu hỏi thường gặp

Web App Manifest có cần HTTPS không?

Có. Manifest chỉ hoạt động trên môi trường an toàn (HTTPS hoặc localhost). Trên HTTP, trình duyệt sẽ bỏ qua hoặc chặn việc cài đặt — đây là yêu cầu bắt buộc từ tiêu chuẩn PWA.

Một website có thể có nhiều manifest không?

Không. Mỗi trang chỉ nên khai báo một manifest duy nhất trong <head>. Việc dùng nhiều manifest gây xung đột và không được trình duyệt hỗ trợ. Nếu cần tùy biến theo ngôn ngữ hoặc khu vực, nên dùng logic phía client để tải manifest phù hợp — nhưng vẫn chỉ liên kết một tệp tại thời điểm render.

Manifest ảnh hưởng đến tốc độ tải trang không?

Không đáng kể. Tệp manifest thường nhỏ hơn 5 KB và được tải bất đồng bộ. Tuy nhiên, nếu start_url hoặc các icon bị lỗi 404, trình duyệt có thể trì hoãn một phần quá trình khởi tạo PWA — do đó cần kiểm tra kỹ tính sẵn sàng của các tài nguyên liên quan.