Vary Header

Vary Header là gì?

Vary Header là một trường trong phản hồi HTTP (HTTP response header) dùng để thông báo cho máy chủ trung gian — như proxy, CDN hoặc bộ nhớ đệm trình duyệt — rằng nội dung trả về có thể khác nhau tuỳ theo giá trị của một hoặc nhiều header yêu cầu (request headers). Ví dụ: nếu trang web gửi Vary: User-Agent, điều đó có nghĩa là phiên bản HTML được gửi đi có thể thay đổi khi người dùng truy cập từ điện thoại (mobile) hay máy tính (desktop).

Header này không tạo ra sự khác biệt về nội dung trực tiếp, mà chỉ hướng dẫn hệ thống lưu trữ tạm (cache) cách xử lý phản hồi: không được dùng lại một bản cache cho mọi loại thiết bị hoặc trình duyệt. Đây là cơ chế đảm bảo người dùng nhận đúng phiên bản phù hợp — ví dụ: trang mobile cho điện thoại, trang desktop cho laptop.

Tại sao quan trọng trong SEO?

Vary Header ảnh hưởng trực tiếp đến cách Googlebot và các công cụ tìm kiếm thu thập (crawl), lập chỉ mục (index) và hiển thị kết quả. Nếu cấu hình sai, có thể dẫn đến:

• Googlebot crawl phiên bản mobile nhưng lưu vào chỉ mục dưới dạng trang desktop (hoặc ngược lại) → gây nhầm lẫn về trải nghiệm người dùng;
• Bộ nhớ đệm CDN trả sai phiên bản trang → người dùng mobile thấy giao diện desktop, làm tăng tỷ lệ thoát;
• Google không hiểu rõ cấu trúc phiên bản đa nền tảng → giảm độ tin cậy với trang AMP, responsive hoặc dynamic serving.

Theo tài liệu chính thức của Google, Vary: User-Agent vẫn được hỗ trợ nhưng chỉ nên dùng khi website áp dụng dynamic serving (tức là cùng URL nhưng trả nội dung khác nhau tuỳ thiết bị). Với website responsive (dùng CSS media queries), không cần Vary vì nội dung không thay đổi — chỉ định dạng hiển thị.

Cách hoạt động

Khi máy chủ gửi phản hồi kèm Vary, hệ thống cache sẽ lưu riêng từng bản dựa trên tổ hợp giá trị các header được liệt kê. Ví dụ:

Vary: User-Agent, Accept-Encoding

→ Cache sẽ lưu ít nhất 4 phiên bản khác nhau nếu có 2 giá trị User-Agent (mobile/desktop) và 2 giá trị Accept-Encoding (gzip/br). Mỗi lần request, cache so sánh giá trị header yêu cầu với các bản đã lưu — chỉ trả lại bản khớp hoàn toàn.

Lưu ý: Việc thêm quá nhiều giá trị vào Vary làm giảm hiệu suất cache (tỷ lệ hit thấp), vì mỗi tổ hợp mới đều tạo bản cache riêng. Số lượng giá trị tối ưu thường là 1–2, tùy kiến trúc.

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

1. Xác định phương pháp phục vụ nội dung: Kiểm tra xem website dùng responsive, dynamic serving hay AMP. Chỉ dynamic serving bắt buộc cần Vary: User-Agent.
2. Thêm header đúng cách: Cấu hình tại web server (Apache/Nginx) hoặc qua code backend (PHP, Node.js). Không dùng thẻ HTML hoặc meta tag — vì đây là header HTTP, không phải phần thân trang.
3. Apache: Dùng Header append Vary User-Agent trong file .htaccess hoặc cấu hình virtual host.
4. Nginx: Thêm add_header Vary "User-Agent" always; trong khối location hoặc server.
5. Kiểm tra kết quả: Dùng httpbin.org/headers, Chrome DevTools (tab Network > Headers) hoặc lệnh curl -I https://example.com.
6. Giám sát cache hit ratio: Theo dõi trên CDN (Cloudflare, Cloud CDN…) để đảm bảo Vary không làm giảm hiệu suất quá mức.

Lỗi thường gặp

• Dùng Vary: User-Agent cho website responsive: Không cần thiết, gây phân mảnh cache vô ích. Khắc phục: gỡ bỏ header nếu không dùng dynamic serving.
• Thiếu Vary khi dùng dynamic serving: Googlebot có thể index sai phiên bản. Khắc phục: bổ sung Vary: User-Agent cho tất cả URL áp dụng logic phân nhánh theo thiết bị.
• Vary với header không ổn định: Ví dụ Vary: Cookie hoặc Vary: X-Forwarded-For khiến cache gần như không hoạt động. Khắc phục: tránh dùng các header có giá trị thay đổi liên tục; nếu bắt buộc, giới hạn phạm vi áp dụng (ví dụ chỉ với API, không với HTML).
• Ghép sai định dạng giá trị: Viết Vary: user-agent (thường chữ thường) thì vẫn hợp lệ, nhưng viết Vary: User-Agent,Accept-Encoding thiếu khoảng trắng sau dấu phẩy có thể gây lỗi ở một số CDN. Khắc phục: luôn dùng dấu phẩy + khoảng trắng: Vary: User-Agent, Accept-Encoding.

Ví dụ thực tế

Một trang tin tức Việt Nam dùng dynamic serving: cùng URL https://baonews.vn/bai-viet, nhưng trả nội dung khác nhau cho mobile và desktop. Khi kiểm tra phản hồi:

Yêu cầu từ	Header gửi đi	Phản hồi kèm Vary	Kết quả cache
Mobile (Chrome Android)	User-Agent: Mozilla/5.0 (Linux; Android 13)…	Vary: User-Agent Content-Type: text/html (phiên bản rút gọn)	Lưu bản A
Desktop (Chrome Windows)	User-Agent: Mozilla/5.0 (Windows NT 10.0)…	Vary: User-Agent Content-Type: text/html (phiên bản đầy đủ)	Lưu bản B
Googlebot-Mobile	User-Agent: Googlebot/2.1 (+http://www.google.com/bot.html)	Vary: User-Agent Content-Type: text/html (phiên bản mobile)	Lưu bản C

Nếu thiếu Vary: User-Agent, CDN có thể trả bản A cho cả desktop → gây lỗi hiển thị và ảnh hưởng xếp hạng mobile-first indexing.

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

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

Có — nhưng gián tiếp. Nếu cấu hình quá rộng (ví dụ Vary: * hoặc nhiều header không cần thiết), cache hit ratio giảm mạnh → nhiều request phải đi thẳng tới origin server → làm chậm thời gian phản hồi. Tối ưu là chỉ liệt kê header thực sự ảnh hưởng đến nội dung.

Có nên dùng Vary: Accept-Encoding?

Có, và đây là thực hành chuẩn. Accept-Encoding cho biết trình duyệt hỗ trợ nén nào (gzip, br, deflate). Hầu hết CDN và web server đều tự động thêm header này khi bật nén. Việc này không gây phân mảnh cache nghiêm trọng vì số giá trị phổ biến chỉ khoảng 2–3.

Vary có cần thiết với trang AMP?

Không bắt buộc, nhưng nên dùng nếu trang AMP và non-AMP có cùng URL (thông qua <link rel="amphtml">). Trong mô hình canonical + AMP riêng biệt, Vary không liên quan — vì đây là hai URL khác nhau. Với AMP trên cùng URL (AMP-first), cần phối hợp kỹ với Vary: User-Agent và thẻ <meta name="viewport"> để đảm bảo Googlebot hiểu đúng ngữ cảnh.