Bạn có chắc mình đang tận dụng hết sức mạnh của hình ảnh trên website? Bài viết này sẽ giải mã Alt Text là gì một cách đơn giản nhất, phân biệt rõ ràng với các thuộc tính khác như Title hay Caption. Tiếp theo, bài viết sẽ đi sâu vào lý do tại sao thẻ Alt lại quan trọng đối với cả SEO và trải nghiệm người dùng. Quan trọng nhất, bạn sẽ được cung cấp một công thức viết thẻ Alt chuẩn SEO qua 5 bước cùng rất nhiều ví dụ thực tế. Đọc ngay!
Alt Text (Thẻ Alt) Là Gì?
Alt Text (viết tắt của Alternative Text - Văn bản thay thế) là một thuộc tính được thêm vào thẻ
Hãy tưởng tượng bạn đăng một bức ảnh lên mạng xã hội và viết một dòng chú thích ngắn gọn bên dưới để mọi người hiểu bức ảnh đó nói về điều gì. Thẻ Alt hoạt động với một vai trò tương tự cho hình ảnh trên website, nhưng đối tượng "đọc" chú thích này không chỉ có con người.
Trong đoạn mã HTML, thuộc tính alt sẽ trông như thế này:
Đoạn văn bản nằm trong dấu ngoặc kép của alt="..." chính là Alt Text. Đây là một thành phần cơ bản nhưng cực kỳ quan trọng trong chiến lược tối ưu hóa hình ảnh và On-page SEO tổng thể._la_gi.jpg)
Phân Biệt Thẻ Alt, Title Text và Caption
Một trong những nhầm lẫn phổ biến nhất của người mới bắt đầu là không phân biệt được vai trò của Thẻ Alt, Title Text và Caption. Việc này dẫn đến sử dụng sai mục đích và làm giảm hiệu quả tối ưu.
Dưới đây là bảng so sánh để làm rõ sự khác biệt:
| Thuộc tính | Mục đích chính | Cách hiển thị | Ví dụ |
|---|---|---|---|
| Thẻ Alt (Alt Text) | SEO & Khả năng tiếp cận (cho công cụ tìm kiếm và trình đọc màn hình). | Chỉ hiển thị khi ảnh bị lỗi. Được trình đọc màn hình đọc lên. | alt="biểu đồ tròn thể hiện thị phần smartphone 2024" |
| Title Text | Cung cấp thông tin bổ sung cho người dùng (không quan trọng cho SEO). | Hiển thị dưới dạng một ô chú thích nhỏ khi người dùng di chuột qua ảnh. | title="Nhấp để xem chi tiết báo cáo" |
| Caption | Chú thích hoặc mô tả trực tiếp cho người dùng đọc. | Luôn hiển thị bên dưới hoặc bên cạnh hình ảnh cho tất cả mọi người. | "Hình 1.1: Thị phần smartphone toàn cầu năm 2024" |
Như vậy, có thể thấy thuộc tính Alt phục vụ cho mục đích kỹ thuật và tối ưu, trong khi Caption phục vụ cho việc giải thích trực tiếp với người đọc.
Tại Sao Thẻ Alt Lại Quan Trọng Hơn Bạn Nghĩ?
Nhiều người làm nội dung thường xem nhẹ việc viết Alt Text vì cho rằng đây là một chi tiết nhỏ, tốn thời gian mà không mang lại hiệu quả rõ rệt. Đây là một quan niệm sai lầm nghiêm trọng. Tác dụng của thẻ Alt có ảnh hưởng lớn đến hai khía cạnh cốt lõi của một website: hiệu quả SEO và trải nghiệm người dùng.
1. Đối Với SEO: Cầu Nối Giữa Hình Ảnh và Google
Công cụ tìm kiếm như Google đã rất thông minh, nhưng về cơ bản, chúng "đọc" nội dung trang web chứ không "nhìn" hình ảnh như con người. Thuật toán của Google không thể tự mình hiểu được một bức ảnh chụp "hoàng hôn trên biển Phú Quốc" hay "một chiếc laptop MacBook Pro".
Thẻ Alt chính là cầu nối ngôn ngữ, là cách bạn "nói" cho Google biết chính xác nội dung của hình ảnh là gì. Khi Google hiểu được ngữ cảnh của hình ảnh, hai lợi ích SEO to lớn sẽ xuất hiện:
- Tăng cơ hội xếp hạng trên Google Images: Google Images là một công cụ tìm kiếm khổng lồ. Theo dữ liệu từ Sparktoro, hơn 20% tổng số lượt tìm kiếm trên web tại Mỹ diễn ra trên Google Images. Khi bạn viết thẻ Alt tốt và chứa từ khóa liên quan, hình ảnh của bạn có cơ hội xuất hiện ở top đầu kết quả tìm kiếm hình ảnh, từ đó kéo về một lượng truy cập chất lượng cho website.
- Cải thiện mức độ liên quan cho toàn bộ trang: Hình ảnh được tối ưu với Alt Text sẽ cung cấp thêm tín hiệu ngữ nghĩa, giúp Google hiểu sâu hơn về chủ đề tổng thể của bài viết. Một bài viết về "công thức làm bánh" có các hình ảnh với văn bản thay thế mô tả từng bước sẽ được Google đánh giá là liên quan và đầy đủ hơn một bài viết chỉ có chữ.
2. Đối Với Người Dùng: Cải Thiện Trải Nghiệm và Khả Năng Tiếp Cận
Tầm quan trọng của Alt Text không chỉ dừng lại ở SEO. Thuộc tính này đóng vai trò thiết yếu trong việc xây dựng một website thân thiện và dễ tiếp cận cho tất cả mọi người.
- Hiển thị khi hình ảnh bị lỗi: Trong trường hợp kết nối mạng chậm hoặc đường dẫn ảnh bị sai, trình duyệt không thể tải hình ảnh. Lúc này, thuộc tính Alt sẽ hiển thị một đoạn văn bản thay thế ngay vị trí của ảnh, giúp người dùng vẫn hiểu được nội dung bị thiếu.
- Hỗ trợ người dùng khiếm thị: Đây là vai trò nhân văn và quan trọng nhất. Hàng triệu người khiếm thị trên khắp thế giới sử dụng các phần mềm trình đọc màn hình (screen reader) để duyệt web. Khi gặp một hình ảnh, phần mềm này sẽ đọc to nội dung của thẻ Alt. Nếu không có Alt Text, người dùng sẽ chỉ nghe "hình ảnh" hoặc tên file vô nghĩa, làm gián đoạn trải nghiệm và khiến họ không thể tiếp cận đầy đủ thông tin. Tuân thủ việc viết Alt Text là một phần của tiêu chuẩn về Khả năng Tiếp cận Nội dung Web (WCAG - Web Content Accessibility Guidelines).
Công Thức Viết Thẻ Alt Chuẩn SEO Trong 5 Bước
Viết thẻ Alt không hề phức tạp. Thay vì đoán mò, bạn có thể áp dụng công thức 5 bước đơn giản dưới đây để đảm bảo mọi Alt Text bạn viết ra đều hiệu quả.
Bước 1: Mô Tả Ngắn Gọn và Cụ Thể
Hãy nhìn vào bức ảnh và trả lời câu hỏi: "Đây là gì?". Hãy mô tả đối tượng chính, hành động và bối cảnh của bức ảnh một cách súc tích. Tránh các mô tả chung chung.
Thay vì: alt="chó"
Hãy viết: alt="chú chó golden retriever đang bắt đĩa bay trên bãi cỏ"
Bước 2: Thêm Từ Khóa Một Cách Tự Nhiên
Nếu bài viết của bạn có từ khóa chính hoặc phụ liên quan trực tiếp đến hình ảnh, hãy lồng ghép chúng vào thẻ Alt một cách tự nhiên. Việc này giúp tăng cường sự liên quan cho cả hình ảnh và bài viết.
Từ khóa: "máy ảnh sony a7iv"
Mô tả: alt="nhiếp ảnh gia đang cầm máy ảnh sony a7iv chụp ảnh chân dung"
Cảnh báo: Tuyệt đối không nhồi nhét từ khóa. Một thẻ Alt như alt="máy ảnh máy ảnh sony a7iv máy ảnh giá rẻ mua máy ảnh" sẽ bị Google xem là spam và gây hại cho SEO.
Bước 3: Loại Bỏ Các Từ Thừa
Bạn không cần phải thêm các cụm từ như "hình ảnh của...", "bức ảnh về...", "picture of..." vào thẻ Alt. Trình duyệt và trình đọc màn hình đã biết đó là một hình ảnh thông qua thẻ
Không nên: alt="hình ảnh của một tách cà phê"
Nên: alt="tách cà phê latte nóng với lớp bọt sữa hình chiếc lá"
Bước 4: Giữ Độ Dài Dưới 125 Ký Tự
Hầu hết các trình đọc màn hình sẽ dừng đọc Alt Text sau khoảng 125 ký tự. Vì vậy, hãy cố gắng giữ cho đoạn mô tả của bạn súc tích trong giới hạn này để đảm bảo người dùng có thể nghe được toàn bộ thông điệp. Nếu hình ảnh quá phức tạp và cần mô tả dài hơn (như biểu đồ, infographic), bạn nên mô tả chi tiết trong phần nội dung chính của bài viết.
Bước 5: Xử Lý Các Ảnh Trang Trí
Đối với những hình ảnh chỉ mang tính chất trang trí (ví dụ như các đường kẻ phân cách, icon trang trí, ảnh nền không có nội dung) và không truyền tải thông tin quan trọng, cách tốt nhất là để trống thuộc tính Alt.
Ví dụ: alt=""
Làm như vậy, trình đọc màn hình sẽ bỏ qua hình ảnh này, giúp người dùng khiếm thị không bị làm phiền bởi những thông tin không cần thiết.
Ví Dụ Thực Tế: Cách Viết Thẻ Alt Tốt và Tệ
Lý thuyết sẽ dễ hiểu hơn khi đi kèm với các ví dụ thực tế. Dưới đây là cách áp dụng công thức trên cho nhiều loại hình ảnh khác nhau.
Ví dụ 1: Ảnh sản phẩm thương mại điện tử
Tệ: alt="giày"
Khá hơn: alt="giày sneaker adidas"
Tốt: alt="giày sneaker adidas stan smith màu trắng với chi tiết gót màu xanh lá"
Ví dụ 2: Ảnh biểu đồ, dữ liệu
Tệ: alt="biểu đồ"
Khá hơn: alt="biểu đồ tăng trưởng"
Tốt: alt="biểu đồ cột thể hiện sự tăng trưởng người dùng mạng xã hội tại Việt Nam từ 2020 đến 2024"
Ví dụ 3: Ảnh chụp màn hình hướng dẫn
Tệ: alt="wordpress"
Khá hơn: alt="thêm alt text trong wordpress"
Tốt: alt="chụp màn hình giao diện thư viện media của wordpress với ô văn bản thay thế được tô sáng"
Ví dụ 4: Ảnh có người và bối cảnh
Tệ: alt="họp"
Khá hơn: alt="cô gái đang thuyết trình"
Tốt: alt="nữ nhân viên văn phòng mặc vest xanh đang đứng thuyết trình trước bảng trắng trong một cuộc họp"
Cách Thêm và Kiểm Tra Alt Text Trên Website (WordPress)
Hiểu được cách viết là một chuyện, thực hành thêm vào website lại là chuyện khác. Rất may, các nền tảng quản trị nội dung (CMS) hiện đại như WordPress giúp công việc này trở nên cực kỳ đơn giản.
Hướng dẫn thêm Alt Text trong WordPress
Bạn có thể thêm văn bản thay thế ngay khi tải ảnh lên hoặc chỉnh sửa các ảnh đã có sẵn trong thư viện.
- Trong trình soạn thảo bài viết, nhấp vào nút "Thêm Media" hoặc kéo thả ảnh trực tiếp vào.
- Sau khi ảnh được tải lên, một cửa sổ "Chi tiết file đính kèm" sẽ hiện ra ở bên phải.
- Tìm đến ô có nhãn "Văn bản thay thế" (Alternative Text).
- Nhập nội dung thẻ Alt đã được tối ưu của bạn vào ô này.
- Nhấp vào nút "Chèn vào bài viết".
Đối với các ảnh đã có sẵn, bạn chỉ cần vào "Thư viện" (Media Library), chọn ảnh và điền vào ô "Văn bản thay thế" tương tự.
Công cụ giúp kiểm tra thiếu Alt Text hàng loạt
Với một website đã có hàng trăm, hàng nghìn ảnh, việc kiểm tra thủ công là bất khả thi. Bạn có thể dùng các công cụ sau để quét và tìm ra những ảnh đang bị thiếu thuộc tính Alt:
- Screaming Frog SEO Spider: Đây là một phần mềm mạnh mẽ cho dân SEO. Phiên bản miễn phí cho phép bạn thu thập dữ liệu (crawl) tới 500 URL. Sau khi quét xong, bạn có thể vào tab "Images" và lọc theo cột "Missing Alt Text" để xem danh sách các ảnh cần bổ sung.
- Ahrefs Site Audit / SEMrush Site Audit: Nếu bạn đang sử dụng các bộ công cụ SEO trả phí này, tính năng Site Audit sẽ tự động quét và báo cáo lỗi thiếu Alt Text trong mục "Issues" hoặc "Vấn đề".
Lời kết
Thẻ Alt là một ví dụ điển hình cho thấy trong SEO, những chi tiết nhỏ có thể tạo ra tác động lớn. Việc biến hành động viết Alt Text cho mọi hình ảnh thành một thói quen không thể thiếu trong quy trình xuất bản nội dung sẽ giúp bạn xây dựng một website.