Image SEO

Focus point

Điểm trung tâm được xác định thủ công hoặc tự động trên hình ảnh để đảm bảo vùng chủ thể không bị cắt khi crop.

4 lượt xem Cập nhật: 01/06/2026

Focus point là gì?

Focus point (điểm lấy nét) là một tọa độ cụ thể — thường ở dạng cặp giá trị x, y — được đặt lên hình ảnh để chỉ định vùng chủ thể quan trọng nhất. Khi hệ thống tự động cắt ảnh (crop) theo các tỷ lệ khác nhau (ví dụ: 1:1 cho mạng xã hội, 16:9 cho banner), thuật toán ưu tiên giữ nguyên vùng xung quanh focus point thay vì cắt đều bốn cạnh. Điểm này có thể được thiết lập thủ công bởi người dùng hoặc xác định tự động qua AI nhận diện khuôn mặt, vật thể hoặc vùng có độ tương phản cao.

Tại sao quan trọng trong SEO?

Focus point không trực tiếp ảnh hưởng đến thứ hạng từ khóa trên Google, nhưng nó tác động mạnh đến tỷ lệ tương tác và trải nghiệm người dùng — hai yếu tố gián tiếp ảnh hưởng đến SEO hình ảnh và toàn trang. Khi ảnh bị cắt sai, chủ thể biến mất, người xem không hiểu nội dung, dẫn đến tăng tỷ lệ thoát và giảm thời gian ở lại trang. Ngoài ra, ảnh hiển thị đúng trên thiết bị di động, mạng xã hội hay kết quả tìm kiếm hình ảnh (Google Images) giúp tăng khả năng click và chia sẻ — từ đó nâng cao tín hiệu hành vi tích cực.

Google xác nhận rằng họ sử dụng dữ liệu hình ảnh (bao gồm metadata và cách xử lý crop) để hiểu ngữ cảnh. Một ảnh được trình bày rõ ràng, giữ được chủ thể, sẽ hỗ trợ thuật toán phân loại chính xác hơn — đặc biệt khi kết hợp với thẻ alt, tên file và cấu trúc trang.

Cách hoạt động

Khi bạn tải ảnh lên CMS (như WordPress, Shopify, hoặc nền tảng quản lý nội dung hiện đại), hệ thống ghi nhận focus point dưới dạng metadata (thường là trong phần mở rộng XMP hoặc lưu riêng trong cơ sở dữ liệu). Khi yêu cầu xuất ảnh ở kích thước mới (ví dụ: image.jpg?width=300&height=200&fit=crop), máy chủ hoặc CDN sẽ:

  1. Đọc tọa độ focus point (ví dụ: x=0.65, y=0.4 — tính theo phần trăm chiều rộng/cao)
  2. Tính toán vùng crop sao cho điểm đó nằm gần tâm nhất có thể
  3. Thực hiện cắt và xuất ảnh mà không làm lệch chủ thể

Một số nền tảng (như Cloudinary, Imgix) hỗ trợ cú pháp chuyên biệt như g_faces (tự động phát hiện khuôn mặt) hoặc g_custom (dùng focus point thủ công).

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

Dưới đây là các bước thiết lập focus point trên các nền tảng phổ biến:

  1. WordPress (với plugin như WP Retina 2x hoặc Advanced Custom Fields):
    • Tải ảnh lên thư viện media
    • Chọn ảnh → Nhấn "Chỉnh sửa" → Dùng công cụ kéo thả để đặt điểm trên khung xem trước
    • Lưu — điểm sẽ được lưu trong trường _wp_attachment_metadata dưới dạng mảng focus_point
  2. Shopify:
    • Trong phần quản lý sản phẩm → chọn ảnh → nhấn biểu tượng "Focus point" (mũi tên chéo)
    • Kéo chấm tròn vào vị trí mắt, khuôn mặt hoặc vật thể chính
    • Ảnh tự động cập nhật khi dùng trong theme với {{ product.featured_image | img_url: '300x300', scale: 2 }}
  3. Tự code (HTML/CSS + JS):
    • Dùng thư viện như focusPoint.js để tạo hiệu ứng zoom & crop thông minh
    • Hoặc thêm thuộc tính data-focus-x và data-focus-y vào thẻ <img>, sau đó xử lý bằng CSS background-position hoặc JavaScript

Lỗi thường gặp

Dưới đây là những sự cố phổ biến và cách khắc phục:

Lỗi Nguyên nhân Cách khắc phục
Ảnh vẫn bị cắt sai dù đã đặt focus point Plugin hoặc theme không đọc metadata focus point; hoặc dùng hàm resize mặc định không hỗ trợ Kiểm tra tài liệu nền tảng — đảm bảo dùng hàm hỗ trợ focus (ví dụ: wp_get_attachment_image_src() với tham số tùy chỉnh, hoặc gọi API CDN có hỗ trợ g_custom)
Focus point không lưu sau khi cập nhật ảnh Plugin chưa được cập nhật; hoặc ảnh bị ghi đè bằng phiên bản mới không giữ metadata Sử dụng plugin hỗ trợ XMP (như Media Cleaner hoặc Image Regenerate & Select Crop); tránh upload đè ảnh cùng tên
Hiệu ứng không hoạt động trên mobile CSS background-position không tương thích với object-fit; hoặc JS không chạy trên viewport nhỏ Dùng object-fit: cover kết hợp object-position: [x] [y] — giá trị x/y phải ở dạng % hoặc px, ví dụ: object-position: 65% 40%

Ví dụ thực tế

Một cửa hàng thời trang online đăng ảnh mẫu nam mặc áo sơ mi. Nếu không đặt focus point, ảnh 1200×800 khi cắt thành 300×300 (dùng làm thumbnail sản phẩm) sẽ cắt mất đầu người — chỉ còn phần ngực và cổ áo. Sau khi đặt focus point vào giữa khuôn mặt (x=0.5, y=0.35), mọi kích thước crop đều giữ được gương mặt rõ ràng. Kết quả: tỷ lệ click vào sản phẩm tăng 22% (theo báo cáo A/B test của một khách hàng Shopify năm 2023), và thời gian xem trang tăng trung bình 18 giây.

Lưu ý: Tỷ lệ cải thiện có thể thay đổi tùy ngành, đối tượng người dùng và chất lượng ảnh gốc.

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

Focus point có thay thế được thẻ alt không?

Không. Thẻ alt cung cấp thông tin văn bản cho máy tìm kiếm và người khiếm thị; focus point chỉ điều khiển cách cắt ảnh. Cả hai cần dùng song song — một cái cho SEO, một cái cho trải nghiệm.

Có thể đặt nhiều focus point trên một ảnh không?

Không — mỗi ảnh chỉ có một focus point chính. Một số hệ thống nâng cao (như Adobe Experience Manager) hỗ trợ vùng ưu tiên đa điểm, nhưng không phải tiêu chuẩn web. Với đa chủ thể, nên chia thành nhiều ảnh riêng.

Focus point có hoạt động với ảnh SVG hoặc WebP?

Có, nhưng tùy trường hợp. SVG không cần crop nên focus point không áp dụng. Với WebP: nếu được xử lý qua CDN hỗ trợ (Imgix, Cloudinary), focus point vẫn hoạt động đầy đủ. Trên WordPress本地, cần plugin hỗ trợ WebP + metadata (ví dụ: WebP Express kết hợp Custom Image Sizes).