Tối ưu Hình ảnh cho SEO: Alt Text, Nén ảnh & Lazy Loading
TL;DR (làm nhanh theo thứ tự)
- Tên file: Đặt tên mô tả, có keyword (VD:
giay-the-thao-nam-nike.jpg) - Alt text: Mô tả hình ảnh, có keyword tự nhiên (VD: "Giày thể thao nam Nike Air Force 1 màu trắng")
- Nén ảnh: Dùng TinyPNG hoặc ShortPixel để giảm dung lượng < 100KB
- Format: Ưu tiên WebP, fallback JPEG cho ảnh photo, PNG cho ảnh có text/logo
- Lazy loading: Bật trong WordPress hoặc dùng plugin để ảnh chỉ load khi cần
Mục tiêu
Ảnh load nhanh, xuất hiện trên Google Images, cải thiện SEO tổng thể và UX.
Thời gian
2–3 phút mỗi ảnh (đặt tên + alt + nén), setup lazy loading 5 phút (một lần).
Chuẩn bị
Phần mềm chỉnh ảnh (Photoshop, Canva...), TinyPNG hoặc plugin tối ưu ảnh.
1) Tại sao Image SEO quan trọng?
Image SEO là gì?
Image SEO là tối ưu hình ảnh để:
- Rank trên Google Images — nguồn traffic tiềm năng lớn
- Cải thiện SEO tổng thể — Google đánh giá trang có media chất lượng cao hơn
- Tăng tốc độ tải trang — ảnh nặng là nguyên nhân #1 làm chậm website
- Cải thiện UX — người dùng thích trang có hình ảnh đẹp, load nhanh
- Accessibility — alt text giúp người khiếm thị hiểu nội dung ảnh
Ảnh chưa tối ưu
- Tên file: IMG_20240115_123456.jpg
- Alt text: Trống hoặc 'image1'
- Dung lượng: 2MB+
- Format: BMP hoặc PNG không cần thiết
- Không lazy loading
Ảnh đã tối ưu
- Tên file: giay-nike-air-force-1-trang.jpg
- Alt text: 'Giày Nike Air Force 1 màu trắng'
- Dung lượng: < 100KB
- Format: WebP hoặc JPEG tối ưu
- Lazy loading enabled
2) Đặt tên file ảnh đúng cách
Quy tắc đặt tên file
- 01
Mô tả nội dung ảnh
Tên file phải mô tả hình ảnh đang hiển thị gì.
❌IMG_001.jpg→ ✅giay-chay-bo-nike.jpg - 02
Dùng dấu gạch ngang (-)
Tách từ bằng dấu gạch ngang, không dùng underscore hay space.
❌giay_nike.jpg→ ✅giay-nike.jpg - 03
Có keyword nếu phù hợp
Nếu ảnh liên quan đến keyword bài viết, thêm keyword vào tên file.
VD: Bài viết về "giày thể thao nam" → ảnh:giay-the-thao-nam-nike-air-max.jpg - 04
Ngắn gọn, không quá dài
Tên file nên 3-5 từ, không quá 50 ký tự.
❌giay-the-thao-nam-chinh-hang-nike-air-force-1-mau-trang-size-42.jpg
✅giay-nike-air-force-1-trang.jpg
- 1
Bước 1: Đặt tên trước khi upload
QUAN TRỌNG: Đặt tên file TRƯỚC khi upload lên WordPress.
Nếu đổi tên sau khi upload, URL ảnh vẫn giữ tên cũ. - 2
Bước 2: Xóa ký tự đặc biệt
Không dùng: dấu tiếng Việt (à, ă, ơ...), ký tự đặc biệt (!@#$%), space.
❌giày thể thao.jpg→ ✅giay-the-thao.jpg - 3
Bước 3: Chữ thường
Dùng chữ thường toàn bộ.
❌Giay-Nike.jpg→ ✅giay-nike.jpg
3) Viết Alt Text hiệu quả
Alt Text là gì?
Alt text (alternative text) là văn bản mô tả hình ảnh, hiển thị khi:
- Ảnh không load được
- Người dùng dùng screen reader (khiếm thị)
- Google crawl để hiểu nội dung ảnh
Alt text quan trọng cho cả SEO và Accessibility!
Alt text tốt
Những điểm nên ưu tiên để UI gọn và dễ bảo trì.
- Mô tả chính xác nội dung ảnh
- Có keyword tự nhiên (không ép buộc)
- Ngắn gọn: 5-15 từ
- Viết như đang mô tả cho người không nhìn thấy ảnh
- Mỗi ảnh có alt text khác nhau
Alt text xấu
Tránh các cách fix nhanh gây khó bảo trì hoặc lỗi responsive.
- Alt text trống hoặc 'image'
- Nhồi keyword: 'giày giày giày nike giày'
- Quá dài: > 125 ký tự
- Copy paste title bài viết
- Dùng cùng alt text cho nhiều ảnh
- 1
Bước 1: Mở Media Library
Trong WordPress admin → Media → Library → click vào ảnh cần edit.
- 2
Bước 2: Điền Alt Text
Trong panel bên phải → ô Alt Text → nhập mô tả ảnh.
- 3
Bước 3: Viết mô tả tự nhiên
Mô tả như đang nói cho người không nhìn thấy:
VD: "Đôi giày Nike Air Force 1 màu trắng, nhìn từ góc bên, đặt trên nền gỗ"
Ví dụ Alt Text theo loại ảnh
Ảnh sản phẩm:
"Giày thể thao nam Nike Air Max 270 màu đen đỏ, size 42"
Ảnh hướng dẫn (screenshot):
"Màn hình cài đặt Yoast SEO trong Bảng tin WordPress"
Ảnh banner/hero:
"Banner khuyến mãi Black Friday giảm 50% toàn bộ giày thể thao"
Ảnh infographic:
"Infographic 5 bước SEO cơ bản cho website mới"
3.1. Alt Text trong Gutenberg Editor
- 1
Thêm ảnh vào bài viết
Trong editor → click + → chọn Image → upload hoặc chọn từ Media Library.
- 2
Điền Alt Text
Click vào ảnh → panel bên phải → Block settings → ô Alt text (alternative text) → nhập mô tả.
- 3
Kiểm tra
Inspect element (F12) → tìm tag
<img>→ xem attributealt="..."đã có chưa.
4) Nén ảnh để tối ưu tốc độ
Ảnh nặng = Website chậm
Ảnh chiếm 50-80% dung lượng trang web trung bình.
Ảnh 2MB load = user đợi 3-5 giây = bounce rate tăng = SEO giảm.
Mục tiêu: Mỗi ảnh < 100KB (tối đa 200KB cho ảnh hero/banner).
4.1. Nén ảnh trước khi upload
- 1
Bước 1: Truy cập TinyPNG
Vào tinypng.com (hỗ trợ cả PNG và JPEG).
- 2
Bước 2: Upload ảnh
Kéo thả ảnh vào trang web (tối đa 20 ảnh/lần, mỗi ảnh < 5MB).
- 3
Bước 3: Download
Đợi nén xong → click Download all → ảnh đã được nén 50-80% mà không mất chất lượng đáng kể.
4.2. Plugin tự động nén ảnh (WordPress)
ShortPixel
- 100 ảnh miễn phí/tháng
- Tự động nén khi upload
- Hỗ trợ WebP conversion
Khuyến nghị cho website nhỏ-vừa
Imagify
- 20MB miễn phí/tháng
- Tích hợp tốt với WP Rocket
- 3 mức nén: Normal, Aggressive, Ultra
Tốt nếu dùng WP Rocket
Smush
- Miễn phí (có giới hạn)
- Bulk optimize ảnh cũ
- Lazy loading built-in
Phổ biến, dễ dùng
EWWW Image Optimizer
- Nén trên server của bạn (không giới hạn)
- Cần server mạnh
- Có option cloud
Tốt cho website lớn
- 1
Cài đặt plugin
Gói mở rộng → Cài mới → tìm "ShortPixel" (hoặc plugin khác) → Cài đặt → Kích hoạt.
- 2
Cấu hình
Đăng ký API key (miễn phí) → nhập vào plugin settings → chọn mức nén (Lossy recommended).
- 3
Bulk Optimize
Vào Media → Bulk ShortPixel → click Start để nén tất cả ảnh cũ.
5) Chọn Format ảnh phù hợp
Chọn format theo loại ảnh
- 01
JPEG/JPG
Dùng cho: Ảnh chụp, ảnh product, banner có nhiều màu sắc
Ưu điểm: Dung lượng nhỏ, support rộng
Nhược điểm: Không hỗ trợ trong suốt (transparency) - 02
PNG
Dùng cho: Logo, icon, ảnh có text, ảnh cần nền trong suốt
Ưu điểm: Chất lượng cao, hỗ trợ transparency
Nhược điểm: Dung lượng lớn hơn JPEG - 03
WebP (Khuyến nghị)
Dùng cho: Mọi loại ảnh (thay thế JPEG và PNG)
Ưu điểm: Nhẹ hơn 25-35%, hỗ trợ transparency
Nhược điểm: Một số browser cũ không support (đã hỗ trợ 95%+ browser 2024) - 04
SVG
Dùng cho: Icon, logo, illustrations vector
Ưu điểm: Scale không vỡ, dung lượng rất nhỏ
Nhược điểm: Chỉ dùng cho graphics vector, không phải ảnh chụp
Chiến lược format 2024+
Khuyến nghị: Dùng WebP làm format chính, với JPEG fallback cho browser cũ.
Hầu hết plugin tối ưu ảnh (ShortPixel, Imagify...) tự động:
- Convert sang WebP
- Serve WebP cho browser hỗ trợ
- Fallback JPEG cho browser cũ
6) Lazy Loading
Lazy Loading là gì?
Lazy loading là kỹ thuật chỉ load ảnh khi cần (khi user scroll đến vị trí ảnh).
Lợi ích:
- Trang load nhanh hơn (không load tất cả ảnh cùng lúc)
- Tiết kiệm bandwidth
- Cải thiện Core Web Vitals (LCP)
6.1. Native Lazy Loading (WordPress 5.5+)
WordPress 5.5+ tự động lazy loading
Từ WordPress 5.5, lazy loading được bật mặc định cho tất cả ảnh thông qua attribute loading="lazy".
Bạn không cần làm gì thêm — kiểm tra bằng cách Inspect element, tìm tag <img> có loading="lazy".
6.2. Plugin Lazy Loading (Nâng cao)
- 1
Dùng plugin cache có lazy loading
Các plugin cache như WP Rocket, LiteSpeed Cache có lazy loading built-in với nhiều options hơn.
- 2
Cấu hình
VD với WP Rocket: Settings → WP Rocket → Media → bật LazyLoad for images.
- 3
Lazy load iframe/video
Bật thêm lazy load cho iframe (YouTube embeds) và video để tối ưu thêm.
Không lazy load ảnh above-the-fold
Ảnh above-the-fold (hiển thị ngay khi trang load, không cần scroll) KHÔNG nên lazy load.
Lý do: Lazy load làm chậm LCP (Largest Contentful Paint) cho ảnh quan trọng.
Giải pháp: Exclude ảnh hero/banner khỏi lazy loading (plugin thường có option này).
7) Kích thước ảnh phù hợp
Kích thước ảnh khuyến nghị
- 01
Ảnh content (trong bài viết)
Chiều rộng: 800-1200px
Dung lượng: < 100KB
Không cần ảnh 4K cho content width chỉ 700px. - 02
Ảnh Hero/Banner
Chiều rộng: 1920px (full-width)
Dung lượng: < 200KB
Dùng format WebP để giảm dung lượng. - 03
Ảnh Thumbnail/Product
Chiều rộng: 300-600px
Dung lượng: < 50KB
Đảm bảo tỷ lệ nhất quán (VD: 1:1 cho product). - 04
Ảnh Featured Image
Chiều rộng: 1200px (cho social sharing)
Tỷ lệ: 16:9 hoặc 1.91:1 (optimal cho Facebook/Twitter)
Dung lượng: < 150KB
- 1
Resize trước khi upload
Dùng Photoshop, Canva, hoặc online tools để resize ảnh về kích thước cần thiết TRƯỚC khi upload.
- 2
WordPress tự tạo thumbnails
WordPress tự động tạo nhiều kích thước (thumbnail, medium, large). Kiểm tra trong Settings → Media.
- 3
Responsive images
WordPress 4.4+ tự động thêm
srcsetđể serve ảnh phù hợp với màn hình.
8) Checklist Image SEO
Checklist trước khi upload ảnh
Kiểm tra mỗi ảnh
- Tên file mô tả, có keyword (kebab-case)Bắt buộc
- Đã nén ảnh (< 100KB cho content, < 200KB cho hero)Bắt buộc
- Format phù hợp (WebP/JPEG cho photo, PNG cho logo)Bắt buộc
- Kích thước phù hợp (không upload ảnh 4K cho content 700px)Bắt buộc
- Sẽ điền Alt text sau khi upload
Checklist sau khi upload
Trong WordPress
- Đã điền Alt text mô tả ảnhBắt buộc
- Title ảnh phù hợp (optional nhưng tốt cho organization)
- Caption nếu cần (hiển thị dưới ảnh trong bài viết)
Câu hỏi thường gặp
Alt text có cần cho ảnh decorative không?
Ảnh decorative (trang trí, không mang thông tin quan trọng) có thể để alt text trống (alt="").
VD: Icon decorative, background pattern, divider images.
Tuy nhiên, hầu hết ảnh trên website đều nên có alt text mô tả.
Bao nhiêu ảnh trong 1 bài viết là đủ?
Không có con số cố định, nhưng:
- Minimum: 1 ảnh featured + 1-2 ảnh trong content
- Optimal: 1 ảnh mỗi 200-300 từ
- Maximum: Đừng quá nhiều ảnh làm chậm trang
Quan trọng: Ảnh phải có giá trị, không thêm ảnh vô nghĩa.
Có nên dùng ảnh stock hay tự chụp?
Ảnh tự chụp/tự tạo tốt hơn cho SEO vì unique.
Ảnh stock vẫn OK nếu không có ảnh riêng, nhưng:
- Chọn ảnh ít người dùng
- Edit/customize để khác biệt
- Tránh ảnh stock quá "fake"
WebP không hiển thị trên browser cũ?
Giải pháp: Dùng plugin (ShortPixel, Imagify) tự động serve WebP cho browser mới, JPEG cho browser cũ.
Hoặc dùng <picture> element:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
Ảnh cũ đã upload, làm sao tối ưu?
- Cài plugin tối ưu ảnh (ShortPixel, Smush...)
- Chạy Bulk Optimize để nén tất cả ảnh cũ
- Dùng plugin Media Library Assistant để bulk edit alt text
- Không cần re-upload — plugin xử lý in-place
Bài viết liên quan
Bài viết này có hữu ích không?
Bài viết liên quan
Hướng dẫn Google Search Console: Đăng ký, Xác minh & Sử dụng GSC
<TLDR title="TL;DR (làm nhanh theo thứ tự)"> - Truy cập [search.google.com/search-console](https://search.google.com/search-console) → Đăng nhập Gmai...
Hướng dẫn SEO
# Hướng dẫn SEO Chào mừng bạn đến với phần hướng dẫn về SEO (Search Engine Optimization) - tối ưu hóa công cụ tìm kiếm để website của bạn xuất hiện ...
Kiểm tra SEO Website: Checklist Audit SEO Toàn diện
<TLDR title="TL;DR (làm nhanh theo thứ tự)"> - **Technical SEO**: Kiểm tra indexing (GSC), site speed (PageSpeed Insights), mobile-friendly - **On-Pa...
Local SEO & Google Business Profile: Hướng dẫn Tối ưu Cho Doanh nghiệp Địa phương
<TLDR title="TL;DR (làm nhanh theo thứ tự)"> - Đăng ký **Google Business Profile** tại [business.google.com](https://business.google.com) - Điền đầy ...