Ảnh không có thuộc tính alt và tên file vô nghĩa

Chào các bạn sinh viên và những người mới bước chân vào ngành lập trình web cũng như SEO. Trong quá trình kiểm tra hàng trăm website của sinh viên thực tập và các dự án mới tại LuckySEO, tôi nhận thấy một thói quen rất phổ biến nhưng lại cực kỳ tác hại: xuất ảnh từ điện thoại hay phần mềm thiết kế rồi tải thẳng lên website với các tên gọi như IMG_1234.jpg, screenshot_01.png, hay Untitled-1.png. Đi kèm với đó là việc bỏ qua hoàn toàn thẻ alt hoặc chỉ điền sơ sài vài từ không liên quan. Lỗi tưởng chừng nhỏ nhặt này lại chính là rào cản lớn khiến website của bạn mất đi hàng nghìn lượt truy cập tự nhiên từ công cụ tìm kiếm Google Images mỗi tháng.

Thực tế, công cụ tìm kiếm như Googlebot hay các thiết bị đọc màn hình dành cho người khiếm thị không thể nhìn và thấu hiểu hình ảnh giống như mắt người. Chúng phụ thuộc hoàn toàn vào văn bản xung quanh, tên tệp tin ảnh và quan trọng nhất là thuộc tính alt để xác định nội dung bức ảnh đó truyền tải điều gì. Khi bạn bỏ trống alt hoặc đặt tên file vô nghĩa, bạn đang cố tình làm mờ đi một phần thông tin quan trọng trên trang web. Điều này không chỉ làm giảm điểm SEO tổng thể của toàn bộ bài viết mà còn khiến trải nghiệm người dùng rơi vào trạng thái tồi tệ khi mạng chập chờn không tải được hình ảnh.

Tại sao tên file IMG_1234.jpg và thiếu Alt lại là thảm họa SEO?

Để hiểu rõ tầm quan trọng, chúng ta cần biết rằng Google Images đóng góp tới 20% đến 25% tổng lượng tìm kiếm trên toàn cầu. Khi một hình ảnh có tên tệp là IMG_1234.jpg và không có thẻ alt, con bot tìm kiếm sẽ hoàn toàn mù tịt về ngữ cảnh của bức ảnh. Nếu bức ảnh đó chụp một đôi giày chạy bộ Nike Pegasus 39, nhưng lại mang tên vô nghĩa, cơ hội để sản phẩm của bạn xuất hiện khi khách hàng gõ từ khóa tìm kiếm gần như bằng không. Hơn thế nữa, các chỉ số về khả năng truy cập trên Lighthouse sẽ bị trừ điểm nặng nề, trực tiếp ảnh hưởng đến điểm chất lượng trang web và thứ hạng từ khóa trên kết quả tìm kiếm Google.

Cú pháp chuẩn SEO cho thuộc tính Alt và cách đặt tên file ảnh

Một quy tắc vàng trong thiết kế web và làm SEO là luôn đặt tên file ảnh rõ ràng trước khi tải lên host. Tên tệp tin phải sử dụng tiếng Việt không dấu, các từ nối với nhau bằng dấu gạch ngang, tuyệt đối không dùng khoảng trắng hay ký tự đặc biệt. Ví dụ, thay vì để IMG_9876.jpg, bạn phải đổi thành giay-chay-bo-nike-pegasus-39-xanh.jpg. Đối với thuộc tính alt, cấu trúc HTML chuẩn sẽ có dạng: <img src="giay-chay-bo-nike-pegasus-39-xanh.jpg" alt="Giày chạy bộ Nike Pegasus 39 màu xanh nam chính hãng">. Đoạn mã này cung cấp đầy đủ thông tin ngữ cảnh cho cả Googlebot và trình đọc màn hình.

• ✓Tên file: Không dấu, dùng dấu gạch ngang (-) để phân cách các từ, chứa từ khóa chính mô tả bức ảnh.
• ✓Không đặt tên file dạng: IMG_1234.jpg, photo.png, image-final(1).jpg hay chứa khoảng trắng.
• ✓Thẻ Alt: Viết tiếng Việt có dấu, mô tả chính xác và ngắn gọn nội dung hiển thị trong bức ảnh (dưới 125 ký tự).
• ✓Tận dụng từ khóa tự nhiên trong Alt, tránh hành vi nhồi nhét từ khóa (keyword stuffing) gây tác dụng ngược.
• ✓Kích thước ảnh: Tối ưu dung lượng (dưới 150KB) và định dạng (WebP hoặc JPEG) trước khi gắn alt.

Quy trình 3 bước khắc phục triệt để lỗi ảnh cho lập trình viên web

Bước đầu tiên trong quy trình xử lý là kiểm toán lại toàn bộ hình ảnh hiện có trên website. Lập trình viên có thể sử dụng các công cụ như Screaming Frog SEO Spider hoặc công cụ Lighthouse tích hợp sẵn trong Chrome DevTools để quét ra danh sách toàn bộ các file ảnh đang bị thiếu alt hoặc có tên tệp vô nghĩa. Sau khi có danh sách, bước thứ hai là tiến hành đổi tên file trực tiếp ở thư mục nguồn hoặc cập nhật lại media library trong CMS như WordPress. Đừng quên thiết lập redirect 301 nếu các đường dẫn ảnh cũ đã từng được Google lập chỉ mục để tránh bị lỗi 404 hình ảnh.

Bước thứ ba là tự động hóa quy trình kiểm tra để tránh lặp lại sai lầm trong tương lai. Đối với các dự án Front-end sử dụng React hay Vue, bạn hãy tích hợp quy tắc ESLint như eslint-plugin-jsx-a11y để bắt buộc thuộc tính alt phải tồn tại ngay trong quá trình viết code. Đối với các website sử dụng WordPress, lập trình viên có thể viết thêm hook PHP trong file functions.php để tự động lấy tên bài viết hoặc tiêu đề ảnh làm alt mặc định nếu người dùng quên điền. Việc kết hợp giữa kiểm tra thủ công và công cụ tự động sẽ giúp mã nguồn của bạn luôn sạch sẽ và tối ưu SEO bền vững.

Cách xử lý khác biệt giữa ảnh nội dung và ảnh trang trí

Một sai lầm phổ biến khác của sinh viên làm web là cố gắng thêm thuộc tính alt cho tất cả mọi hình ảnh, kể cả những biểu tượng trang trí nhỏ nhặt như icon mũi tên, đường kẻ trang trí hay ảnh nền. Theo tiêu chuẩn W3C về khả năng truy cập web (WCAG), những bức ảnh mang tính chất thuần trang trí và không cung cấp thêm thông tin cho bài viết nên được đặt thuộc tính alt rỗng, cụ thể là alt="". Việc này báo hiệu cho trình đọc màn hình bỏ qua bức ảnh, giúp người dùng khiếm thị không bị làm phiền bởi những thông tin vô nghĩa. Ngược lại, nếu là ảnh sơ đồ, biểu đồ hay sản phẩm, alt bắt buộc phải chi tiết.