1. Giới thiệu về chèn hình ảnh trong HTML
Hình ảnh đóng vai trò quan trọng trong nội dung website, giúp tăng tính trực quan và trải nghiệm người dùng. Tuy nhiên, nếu không được tối ưu đúng cách, hình ảnh có thể làm chậm tốc độ tải trang và ảnh hưởng đến SEO. Trong bài viết này, chúng ta sẽ tìm hiểu cách chèn hình ảnh vào HTML và cách tối ưu hình ảnh chuẩn SEO để giúp Google nhận diện và xếp hạng nội dung tốt hơn.
2. Cách chèn hình ảnh vào HTML bằng thẻ <img>
Trong HTML, chúng ta sử dụng thẻ <img> để hiển thị hình ảnh. Cấu trúc cơ bản của thẻ <img> như sau:
<img src="duong-dan-hinh-anh.jpg" alt="Mô tả hình ảnh" title="Tiêu đề hình ảnh">Giải thích các thuộc tính quan trọng:
src: Đường dẫn đến file ảnh.alt: Văn bản thay thế, giúp Google hiểu nội dung hình ảnh.title: Tiêu đề hiển thị khi người dùng di chuột qua ảnh.
Ví dụ chèn hình ảnh trong HTML:
<img src="seo-optimization.jpg" alt="Hướng dẫn tối ưu SEO cho hình ảnh" title="SEO Image Optimization">
3. Cách viết alt text, title, caption để tối ưu SEO
3.1. Viết alt text chuẩn SEO
Thẻ alt giúp Google hiểu nội dung hình ảnh và hỗ trợ SEO hình ảnh. Một số mẹo để viết alt text tốt:
- Mô tả chính xác nội dung hình ảnh.
- Chèn từ khóa chính nhưng không nhồi nhét.
- Tránh sử dụng các từ không liên quan như “hình ảnh của”, “ảnh về”…
Ví dụ:
<img src="ban-phim-co.jpg" alt="Bàn phím cơ gaming RGB" title="Bàn phím cơ chất lượng cao">3.2. Sử dụng title hợp lý
Thẻ title giúp người dùng có thêm thông tin khi rê chuột vào ảnh. Bạn có thể sử dụng title để cung cấp ngữ cảnh bổ sung.
Ví dụ:
<img src="iphone-15.jpg" alt="iPhone 15 Pro Max" title="iPhone 15 Pro Max với camera 48MP">3.3. Thêm caption để tăng trải nghiệm người dùng
Bạn có thể sử dụng <figure> và <figcaption> để thêm mô tả dưới hình ảnh:
<figure>
<img src="thiet-ke-website.jpg" alt="Thiết kế website chuẩn SEO">
<figcaption>Thiết kế website tối ưu SEO giúp tăng thứ hạng tìm kiếm.</figcaption>
</figure>
4. Công cụ tối ưu ảnh giúp tăng tốc độ tải trang
Hình ảnh có dung lượng lớn có thể làm chậm tốc độ tải trang, ảnh hưởng đến trải nghiệm người dùng và SEO. Dưới đây là một số công cụ giúp tối ưu hình ảnh:
4.1. Công cụ nén ảnh
- TinyPNG (https://tinypng.com/): Nén ảnh PNG, JPG hiệu quả.
- JPEG Optimizer (https://jpeg-optimizer.com/): Giảm dung lượng ảnh JPEG.
- ImageOptim (https://imageoptim.com/): Tối ưu ảnh không làm giảm chất lượng.
4.2. Sử dụng định dạng ảnh hiện đại
- WebP: Giảm dung lượng ảnh nhưng vẫn giữ được chất lượng cao.
- AVIF: Hiệu quả nén tốt hơn WebP, tương thích trình duyệt mới.
Ví dụ cách sử dụng WebP trong HTML:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Ảnh tối ưu hóa SEO">
</picture>
5. Các kỹ thuật tối ưu hình ảnh chuẩn SEO
5.1. Đặt tên file hình ảnh chuẩn SEO
Tên file ảnh nên chứa từ khóa liên quan, không dấu và phân tách bằng dấu “-“.
Ví dụ tốt:
thiet-ke-web-chuan-seo.jpg
iphone-15-pro-max.webpVí dụ không tốt:
image1.jpg
hinh-anh-moi.png5.2. Tạo sitemap hình ảnh
Sử dụng sitemap hình ảnh giúp Google index hình ảnh nhanh hơn. Ví dụ:
<url>
<loc>https://example.com</loc>
<image:image>
<image:loc>https://example.com/images/iphone-15.jpg</image:loc>
<image:title>iPhone 15 Pro Max</image:title>
<image:caption>Camera 48MP trên iPhone 15</image:caption>
</image:image>
</url>5.3. Responsive Image – Hình ảnh tương thích đa thiết bị
Hình ảnh cần hiển thị phù hợp trên mọi màn hình:
<img src="large.jpg" srcset="small.jpg 480w, medium.jpg 1024w" sizes="(max-width: 600px) 480px, 1024px" alt="Hình ảnh responsive">Tối ưu hình ảnh trong HTML không chỉ giúp cải thiện trải nghiệm người dùng, mà còn tăng thứ hạng SEO trên Google. Hãy đảm bảo sử dụng thẻ <img> đúng cách, tối ưu alt text, title, sử dụng các công cụ nén ảnh và áp dụng các kỹ thuật tối ưu hình ảnh để website của bạn nhanh hơn, thân thiện hơn và đạt thứ hạng cao trên Google.
Nếu bạn cần hỗ trợ tối ưu website chuẩn SEO, hãy liên hệ ngay với chúng tôi để được tư vấn chi tiết
