Image SEO

Image HTTP headers

Header như Cache-Control, Content-Type, Vary: Accept giúp kiểm soát caching và lựa chọn định dạng (WebP/JPEG) theo khả năng trình duyệt.

3 lượt xem Cập nhật: 30/05/2026

Image HTTP headers là gì?

Image HTTP headers là các dòng thông tin được máy chủ gửi kèm khi trả về tệp hình ảnh (như .jpg, .webp, .png) qua giao thức HTTP. Chúng không hiển thị trên trang web nhưng ảnh hưởng trực tiếp đến cách trình duyệt tải, lưu tạm (cache), và chọn định dạng phù hợp. Các header quan trọng nhất gồm: Cache-Control, Content-Type, Vary, Content-Encoding, và Accept-Push-Policy (ít dùng hơn).

Tại sao quan trọng trong SEO?

Image HTTP headers tác động mạnh đến tốc độ tải trang — một yếu tố xếp hạng chính của Google từ năm 2018. Nếu hình ảnh không được cache đúng cách, trình duyệt phải tải lại mỗi lần vào trang, làm tăng thời gian tương tác (TTI), giảm Core Web Vitals (đặc biệt là Largest Contentful Paint – LCP). Ngoài ra, header Vary: Accept giúp máy chủ phục vụ đúng định dạng hiện đại (WebP/AVIF) cho trình duyệt hỗ trợ, đồng thời giữ bản JPEG làm dự phòng — tối ưu dung lượng mà không mất tính tương thích.

Google xác nhận rằng việc phục vụ đúng định dạng hình ảnh theo khả năng trình duyệt là một phần của responsive image delivery, góp phần vào trải nghiệm người dùng và xếp hạng hình ảnh trong Tìm kiếm Hình ảnh (Google Images).

Cách hoạt động

Khi trình duyệt yêu cầu hình ảnh, nó gửi kèm header Accept (ví dụ: Accept: image/webp,image/avif,image/*,*/*;q=0.8). Máy chủ đọc giá trị này, so sánh với định dạng có sẵn, rồi chọn tệp phù hợp nhất. Sau đó, máy chủ gửi lại ảnh kèm các header điều khiển:

  • Content-Type: Khai báo đúng loại MIME (ví dụ: image/webp chứ không phải image/jpeg cho file WebP); sai sẽ khiến trình duyệt không hiển thị hoặc cảnh báo bảo mật.
  • Cache-Control: Quy định thời gian lưu tạm (ví dụ: public, max-age=31536000 cho ảnh tĩnh — 1 năm).
  • Vary: Accept: Báo với CDN và proxy rằng phản hồi phụ thuộc vào header Accept của yêu cầu — bắt buộc nếu phục vụ nhiều định dạng từ cùng URL.

Nếu thiếu Vary: Accept, CDN có thể lưu nhầm bản WebP và trả cho trình duyệt cũ không hỗ trợ — dẫn đến ảnh hỏng.

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

Các bước sau áp dụng cho máy chủ Apache, Nginx và nền tảng như Cloudflare hoặc WordPress (qua plugin hỗ trợ):

  1. Xác minh định dạng thực tế: Dùng công cụ như Web.dev Cache Checker hoặc lệnh curl -I https://example.com/image.jpg để kiểm tra header trả về.
  2. Cấu hình Content-Type: Đảm bảo máy chủ khai báo MIME chính xác. Với Nginx: thêm types { image/webp webp; } và kiểm tra file /etc/nginx/mime.types. Với Apache: dùng AddType image/webp .webp.
  3. Thiết lập Cache-Control: Ảnh tĩnh nên có max-age=31536000 (1 năm); ảnh thay đổi thường xuyên (ví dụ: sản phẩm mới) nên dùng max-age=86400 (1 ngày) hoặc kết hợp immutable.
  4. Bắt buộc thêm Vary: Accept khi phục vụ đa định dạng từ cùng URL. Không áp dụng nếu chỉ dùng một định dạng duy nhất.
  5. Kiểm tra CDN: Trên Cloudflare, bật Polish (tự nén WebP) và đảm bảo tùy chọn Respect Vary Header được kích hoạt (mặc định bật từ năm 2022).

Lỗi thường gặp

Lỗi Dấu hiệu Cách khắc phục
Vary: Accept thiếu hoặc sai Trình duyệt cũ thấy ảnh trắng; Lighthouse cảnh báo “Serve static assets with an efficient cache policy” Thêm Vary: Accept vào header phản hồi ảnh — chỉ khi có logic chọn định dạng dựa trên Accept.
Content-Type không khớp định dạng file Ảnh không hiển thị, console báo “Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING” Kiểm tra cấu hình MIME type trên máy chủ; dùng file --mime-type tên-file để xác minh định dạng thực tế.
Cache-Control quá ngắn hoặc không có Tỷ lệ cache hit thấp trên CDN; Lighthouse báo “Leverage browser caching” Áp dụng Cache-Control: public, max-age=31536000, immutable cho ảnh không thay đổi.

Ví dụ thực tế

Một trang sản phẩm tại https://shop.vn/san-pham/a.jpg được cấu hình phục vụ cả JPEG và WebP:

  • Trình duyệt Chrome gửi: Accept: image/webp,image/avif,image/*,*/*;q=0.8
  • Máy chủ kiểm tra và trả tệp a.webp với header:
    HTTP/2 200
    Content-Type: image/webp
    Cache-Control: public, max-age=31536000, immutable
    Vary: Accept
    Content-Length: 42591
  • Internet Explorer 11 gửi: Accept: image/jpeg,image/pjpeg,*/* → máy chủ trả a.jpg với Content-Type: image/jpeg và cùng Vary: Accept.

Kết quả: dung lượng trung bình giảm 28–42% so với JPEG (theo dữ liệu thử nghiệm của Google từ 2021), LCP cải thiện 0,4–0,9 giây trên mạng 3G.

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

Header Vary: Accept có ảnh hưởng đến SEO không?

Có — nhưng gián tiếp. Google không phạt vì thiếu Vary, nhưng nếu ảnh không hiển thị do cache sai, tỷ lệ thoát tăng và thời gian tải chậm — hai yếu tố ảnh hưởng trực tiếp đến thứ hạng. Theo tài liệu chính thức của Google (cập nhật tháng 3/2024), Vary là yêu cầu bắt buộc để đảm bảo tính nhất quán của nội dung khi dùng kỹ thuật content negotiation.

Có nên dùng Cache-Control: immutable cho ảnh?

Có, nếu ảnh không bao giờ thay đổi (logo, biểu tượng, ảnh minh họa tĩnh). Giá trị immutable ngăn trình duyệt gửi yêu cầu If-None-Match khi reload — tiết kiệm 1 RTT. Tuy nhiên, không dùng cho ảnh có thể cập nhật (ảnh sản phẩm, banner) vì trình duyệt sẽ không kiểm tra phiên bản mới.

Cloudflare tự động thêm Vary: Accept khi bật Polish không?

Không. Cloudflare Polish chỉ chuyển đổi định dạng phía edge và đặt Content-Type đúng, nhưng không tự động thêm Vary: Accept. Bạn phải cấu hình thủ công qua Page Rule hoặc Workers nếu muốn hỗ trợ content negotiation đầy đủ. Đây là điểm nhiều người nhầm lẫn — cần kiểm tra bằng curl sau khi bật Polish.