Thẻ Alt ảnh Cho Website Wordpress Theo Tên Của File

Alt là viết tắt của “alternative text”, tức là văn bản thay thế cho hình ảnh trong HTML. Thuộc tính Alt được dùng để cung cấp mô tả cho hình ảnh khi hình ảnh không thể hiển thị hoặc khi người dùng sử dụng các công cụ hỗ trợ như screen reader (trình đọc màn hình).

Alt trong ảnh là gì?

<img src="hinh-anh.jpg" alt="Mô tả của hình ảnh">

1	<img src="hinh-anh.jpg" alt="Mô tả của hình ảnh">

src: Đường dẫn của hình ảnh.
alt: Văn bản mô tả nội dung của hình ảnh.

Lợi ích của thuộc tính alt

Hỗ trợ SEO (tối ưu hóa công cụ tìm kiếm):

Google và các công cụ tìm kiếm không thể đọc nội dung hình ảnh, nhưng có thể đọc thuộc tính alt. Văn bản alt giúp công cụ tìm kiếm hiểu được nội dung của hình ảnh, từ đó cải thiện khả năng hiển thị trên kết quả tìm kiếm hình ảnh.

Trải nghiệm người dùng:

Khi hình ảnh không thể hiển thị do lỗi mạng hoặc bị chặn, nội dung alt sẽ được hiển thị thay cho hình ảnh.

Đối với người dùng khiếm thị sử dụng screen reader, thuộc tính alt sẽ đọc to mô tả hình ảnh, giúp họ hiểu được nội dung mà hình ảnh muốn truyền tải.

Hỗ trợ truy cập (Accessibility):

Việc thêm alt cho hình ảnh là một yếu tố quan trọng trong thiết kế website thân thiện với người khuyết tật, đặc biệt là đối với người khiếm thị.

Xem thêm bài viết khác

Cách 1: Thêm đoạn mã vào file functions.php

Nếu bạn không muốn sử dụng plugin, có thể chèn một đoạn mã vào file functions.php của theme để tự động gán alt text theo tên file.

function auto_add_image_alt_text($metadata, $attachment_id) {
    // Lấy tên file của hình ảnh
    $image_title = pathinfo($metadata['file'], PATHINFO_FILENAME);

    // Loại bỏ ký tự đặc biệt và thay thế dấu gạch ngang bằng khoảng trắng
    $image_title = preg_replace('/[-_]/', ' ', $image_title);

    // Gán alt text cho hình ảnh nếu chưa có alt text
    if (!get_post_meta($attachment_id, '_wp_attachment_image_alt', true)) {
        update_post_meta($attachment_id, '_wp_attachment_image_alt', $image_title);
    }

    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'auto_add_image_alt_text', 10, 2);

function auto_add_image_alt_text($metadata, $attachment_id) {

// Lấy tên file của hình ảnh

$image_title = pathinfo($metadata['file'], PATHINFO_FILENAME);

// Loại bỏ ký tự đặc biệt và thay thế dấu gạch ngang bằng khoảng trắng

$image_title = preg_replace('/[-_]/', ' ', $image_title);

// Gán alt text cho hình ảnh nếu chưa có alt text

if (!get_post_meta($attachment_id, '_wp_attachment_image_alt', true)) {

update_post_meta($attachment_id, '_wp_attachment_image_alt', $image_title);

}

return $metadata;

}

add_filter('wp_generate_attachment_metadata', 'auto_add_image_alt_text', 10, 2);

Giải thích mã:

pathinfo(): Lấy tên file từ đường dẫn của hình ảnh.
preg_replace(): Loại bỏ các ký tự đặc biệt và thay thế dấu gạch ngang bằng khoảng trắng.
update_post_meta(): Gán giá trị alt text cho hình ảnh nếu chưa có.

Cách 2: Sử dụng plugin “Auto Image Attributes”

Plugin này tự động tạo các thuộc tính ALT, Title, Caption dựa trên tên file hình ảnh khi bạn tải lên thư viện phương tiện (Media Library).

Cách thực hiện:

Cài đặt plugin Auto Image Attributes từ WordPress Plugin Repository.
Kích hoạt plugin và thiết lập cấu hình trong phần Settings.
Chọn tùy chọn tự động tạo ALT text dựa trên tên file.

Cách 3: Sử dụng plugin SEO như “Yoast SEO” hoặc “Rank Math”

Các plugin SEO như Yoast SEO hoặc Rank Math có thể giúp tối ưu hóa hình ảnh bằng cách tự động thêm alt text dựa theo tên file hoặc các quy tắc tùy chỉnh.

Cài đặt Yoast SEO hoặc Rank Math SEO.
Truy cập phần cài đặt hình ảnh và bật tùy chọn tự động điền alt text.

Lưu ý khi tạo alt text dựa theo tên file

Tên file hình ảnh nên rõ ràng, không nên chứa quá nhiều ký tự đặc biệt.
Hãy tối ưu tên file trước khi tải lên để alt text có ý nghĩa và hỗ trợ tốt cho SEO.