Alt ảnh là gì và cách viết cho đúng

Mỗi lần có khách hỏi "ảnh trên web em đầy đủ rồi mà sao Google không thấy", mình thường hỏi ngược lại một câu: anh đã điền alt cho ảnh chưa? Phần lớn mọi người ngơ ra, vì chưa từng nghe tới. Nói ngắn gọn, alt ảnh là gì thì đây: alt (viết tắt của "alternative text" — chữ thay thế) là một đoạn mô tả ngắn gắn vào mỗi tấm ảnh, để máy đọc và người không nhìn thấy ảnh vẫn biết tấm đó vẽ cái gì. Nó không hiện ra trên trang khi ảnh tải bình thường, nhưng nó nằm trong mã nguồn và đóng vai trò lớn hơn nhiều người tưởng.

Mình làm web hơn chục năm, gặp không biết bao nhiêu site đẹp long lanh mà mục alt bỏ trống toàn bộ. Đáng tiếc, vì điền alt là việc dễ nhất trong cả quy trình tối ưu, gần như không tốn công, mà bỏ qua thì thiệt đủ đường. Bài này mình nói cho rõ alt là gì, tại sao cần, viết thế nào cho đúng, và làm sao chủ web tự kiểm tra ảnh của mình.

Alt nằm ở đâu trong tấm ảnh

Khi bạn chèn một tấm ảnh vào web, đoạn mã của nó trông đại khái thế này: <img src="ten-anh.jpg" alt="...">. Phần src là đường dẫn tới file ảnh, còn phần alt chính là chỗ điền chữ mô tả. Máy tính không "nhìn" được ảnh như mắt người, nó chỉ thấy một file dữ liệu. Cái duy nhất giúp nó hiểu tấm ảnh đó là gì chính là đoạn chữ alt bạn viết.

Trên các nền tảng quen thuộc như WordPress, bạn không cần đụng tới mã. Lúc tải ảnh lên, bên phải sẽ có ô "Văn bản thay thế" (Alt Text) — đó chính là alt. Điền vào đó là xong. Nhiều người nhầm ô này với phần "Chú thích" (caption) hoặc cứ để trống vì thấy ảnh vẫn hiện đẹp, nhưng hai thứ đó khác nhau hoàn toàn, lát nữa mình nói kỹ.

Vì sao tấm ảnh nào cũng cần alt

Mình hay tóm tắt cho khách bằng ba lý do thật, không màu mè:

• Trợ năng cho người khiếm thị. Người mù dùng phần mềm đọc màn hình (screen reader — phần mềm đọc to nội dung trang cho người không nhìn được). Tới chỗ có ảnh, phần mềm này sẽ đọc to đoạn alt lên. Nếu alt trống, nó chỉ đọc "hình ảnh" hoặc đọc cái tên file vô nghĩa kiểu "IMG_2381". Người dùng chẳng hiểu gì. Alt tốt giúp họ "thấy" được ảnh bằng tai.
• Giúp Google hiểu ảnh và đưa lên Google Images. Google ngày càng giỏi nhận diện nội dung ảnh, nhưng alt vẫn là tín hiệu rõ ràng nhất để nó biết tấm hình nói về cái gì. Ảnh có alt mô tả đúng thì có cơ hội xuất hiện trong phần tìm ảnh, kéo thêm một luồng khách mà nhiều người quên mất.
• Hiện ra khi ảnh bị lỗi. Mạng chậm, đường dẫn sai, file bị xoá — ảnh không tải được. Lúc đó trình duyệt sẽ hiện đoạn alt thay vào chỗ trống. Người đọc ít nhất còn biết "à, chỗ này đáng lẽ là ảnh phòng khách căn hộ mẫu", thay vì nhìn một ô vỡ trống hoác.

Ba lý do đó đủ để thấy alt không phải việc làm cho có. Nó là một phần của một website tử tế. Mình có nói thêm về chuyện ảnh ảnh hưởng tốc độ tải trang trong bài tốc độ tải website — alt và tốc độ là hai mặt của cùng một thói quen làm web cẩn thận.

Viết một câu alt tốt thì viết thế nào

Đây là phần nhiều người làm sai nhất, không phải vì khó mà vì hiểu lệch mục đích. Alt là để mô tả tấm ảnh, không phải để nhồi từ khoá. Nguyên tắc mình luôn áp dụng:

Một, mô tả đúng những gì có trong ảnh, như thể bạn đang kể qua điện thoại cho người không nhìn thấy. Ảnh chụp một ổ bánh mì thịt nướng đặt trên thớt gỗ thì viết "ổ bánh mì thịt nướng trên thớt gỗ", chứ không viết "bánh mì ngon nhất Sài Gòn giá rẻ giao tận nơi".

Hai, ngắn gọn. Một câu, khoảng năm tới mười lăm chữ là vừa. Đừng viết cả đoạn văn. Phần mềm đọc màn hình đọc hết cả đoạn dài dòng sẽ làm người nghe mệt.

Ba, không nhồi từ khoá. Đây là lỗi kinh điển. Nhiều người nghe nói alt tốt cho SEO liền nhét cả cụm từ khoá dài vào mọi tấm ảnh, lặp đi lặp lại. Google coi đó là spam (gửi rác — hành vi cố tình nhồi nhét để lừa máy tìm kiếm) và không những không có lợi mà còn hại. Alt có chứa từ khoá một cách tự nhiên thì tốt, cố tình nhồi thì phản tác dụng.

Bốn, ảnh trang trí thuần tuý thì để alt rỗng. Có những ảnh chỉ là hoa văn, đường kẻ, nền mờ — không mang thông tin. Với loại này, để alt rỗng (alt="") là đúng, để phần mềm đọc màn hình bỏ qua, khỏi đọc những thứ vô nghĩa. Lưu ý là "alt rỗng có chủ đích" khác với "quên điền alt".

Alt khác gì tên file ảnh và caption

Ba thứ này hay bị nhầm lẫn nên mình tách bạch luôn.

Tên file ảnh là cái tên của file trên máy chủ, kiểu phong-khach-can-ho-mau.jpg. Đặt tên file có dấu gạch nối, không dấu, gợi tả nội dung cũng giúp ích cho SEO ảnh — nhưng nó là một tín hiệu yếu hơn alt nhiều. Cái tên IMG_4023.jpg máy chụp tự đặt thì vô dụng, nên đổi trước khi tải lên.

Caption là dòng chú thích hiển thị ngay dưới ảnh cho người đọc nhìn thấy. Nó là chữ thật trên trang, ai cũng đọc được. Alt thì ngược lại — bình thường không hiện, chỉ dành cho máy và cho lúc ảnh lỗi. Một tấm ảnh có thể có cả ba: tên file gợi tả, caption cho người đọc, alt cho máy và người khiếm thị. Ba thứ phục vụ ba mục đích khác nhau, không thay thế cho nhau được.

Chủ web tự kiểm tra ảnh của mình ra sao

Bạn không cần là dân kỹ thuật vẫn tự rà được. Vài cách đơn giản:

Cách dễ nhất: mở trang web bằng trình duyệt máy tính, bấm chuột phải lên một tấm ảnh, chọn "Kiểm tra" (Inspect). Một bảng mã hiện ra, tìm dòng <img> và xem có phần alt="..." không, bên trong có chữ gì. Trống trơn nghĩa là chưa điền.

Trên WordPress thì còn dễ hơn. Vào thư viện ảnh (Media), bấm vào từng ảnh, nhìn ô "Văn bản thay thế". Site nhiều ảnh thì dùng các công cụ kiểm tra SEO miễn phí — phần lớn đều liệt kê ra danh sách ảnh thiếu alt cho bạn xem một lượt. Việc điền alt nằm trong nhóm những thứ cơ bản mình gọi là SEO trên trang (on-page SEO), và nó góp phần làm nên một website chuẩn SEO thực thụ — không phải mấy chiêu mẹo, mà là làm tử tế từng chi tiết nhỏ.

Một mẹo kiểm nhanh nữa: tắt tạm hình ảnh trong trình duyệt rồi tải lại trang. Lúc này mọi ảnh biến mất, thay vào đó là các đoạn alt. Đọc một lượt, chỗ nào trống hoặc hiện tên file lạ là chỗ cần sửa. Cách này cho bạn cảm nhận đúng những gì người khiếm thị "nghe" thấy.

Vài hiểu lầm hay gặp

Có người tưởng phải điền alt thật dài, nhồi đủ từ khoá thì mới lên top — sai, đã nói ở trên. Có người tưởng để trống cũng chẳng sao vì ảnh vẫn hiện — đúng là ảnh vẫn hiện với người sáng mắt, nhưng bạn đang bỏ rơi nhóm người khiếm thị và bỏ phí cơ hội với Google. Cũng có người copy y nguyên caption sang alt cho nhanh — không sai chết người, nhưng nếu caption vốn không mô tả ảnh (kiểu caption chỉ ghi tên tác giả) thì alt đó vô dụng.

Cái cần nhớ gọn lại: alt là để mô tả ảnh cho người và máy không nhìn thấy. Viết thật, viết ngắn, đừng nhồi. Vậy là đủ tốt rồi.

Bên mình — Thiết Kế Web Giá Rẻ — khi làm web cho khách luôn điền alt đầy đủ cho từng ảnh ngay từ đầu, vì đây là phần nền của một site làm cẩn thận. Bên mình làm web trọn gói từ 1.990.000đ gói Cơ bản, 3.990.000đ gói Pro, từ 7.990.000đ gói VIP. Mọi gói tặng tên miền, hosting và chứng chỉ bảo mật SSL năm đầu, bàn giao 3–7 ngày. Mời xem bảng giá trọn gói, còn muốn tư vấn riêng thì nhắn qua trang liên hệ hoặc Zalo 0777 716 863.