Câu trả lời ngắn: Bạn vẫn có thể dùng Blogger lazy loading ảnh SEO mà không làm mất khả năng thu thập ảnh, miễn là URL ảnh xuất hiện trong thuộc tính src của thẻ <img> trong HTML kết xuất. Ảnh quan trọng ở phần đầu bài không nên tải trì hoãn; các ảnh phía dưới có thể dùng loading="lazy" hoặc cơ chế tải tự động khi ảnh tiến gần vùng nhìn thấy. Sau đó, hãy kiểm tra bằng HTML kết xuất trong Search Console thay vì chỉ nhìn mã nguồn ban đầu.
Quy trình dưới đây phù hợp với người viết blog trên Blogger, không cần thay đổi máy chủ. Bạn cần quyền chỉnh sửa bài viết hoặc giao diện, một trình duyệt máy tính và tài khoản Google Search Console đã xác minh blog. Mục tiêu sau cùng là người đọc vẫn thấy bài tải nhanh, còn Googlebot vẫn phát hiện được nội dung và URL ảnh.
Vì sao ảnh lazy loading Blogger có thể ảnh hưởng SEO?
Lazy loading là cách trì hoãn tải ảnh chưa nằm trong vùng nhìn thấy để giảm số tài nguyên phải tải ngay khi mở trang. Đây là kỹ thuật có ích cho tốc độ, nhưng không nên biến ảnh thành nội dung chỉ xuất hiện sau một thao tác mà Googlebot không thực hiện, chẳng hạn nhấp nút, vuốt hoặc cuộn thủ công. Google khuyến nghị nội dung tải trì hoãn phải xuất hiện tự động khi tiến vào vùng nhìn thấy; Google Search không tương tác với trang như người dùng thật (theo Google Search Central).
Vấn đề thường không nằm ở từ khóa hay tên tệp, mà ở cách URL ảnh được đưa vào HTML. Nếu thẻ ảnh chỉ có ảnh tạm trong src, còn URL thật bị giấu trong thuộc tính tùy biến như data-src và chỉ được JavaScript thay thế sau khi người dùng cuộn, Google có thể không xử lý được ảnh ổn định. Ngược lại, Google có thể tìm ảnh trong thuộc tính src của thẻ <img>, kể cả khi thẻ đó nằm trong cấu trúc <picture> (theo Google Search Central).
Nguyên tắc phân loại ảnh trước khi tối ưu
| Loại ảnh | Cách tải nên dùng | Lý do |
|---|---|---|
| Ảnh đại diện hoặc ảnh chính ở đầu bài | Tải bình thường, không lazy loading | Đây là nội dung người đọc và công cụ tìm kiếm cần thấy sớm. |
| Ảnh minh họa ngay sau đoạn mở đầu | Cân nhắc tải bình thường nếu nằm gần vùng nhìn thấy | Tránh làm ảnh xuất hiện chậm khi người đọc vừa mở bài. |
| Ảnh minh họa ở giữa hoặc cuối bài | Dùng loading="lazy" | Giảm tải ban đầu nhưng vẫn để trình duyệt tự tải khi ảnh tiến gần viewport. |
| Ảnh nền bằng CSS | Không dùng cho ảnh cần lập chỉ mục | Google khuyến nghị dùng thẻ HTML <img>; ảnh CSS không phải lựa chọn phù hợp để Google Images phát hiện. |
Không nên thêm lazy loading vào mọi ảnh theo kiểu máy móc. Google cũng cảnh báo rằng việc trì hoãn nội dung có khả năng hiển thị ngay khi mở trang có thể làm trải nghiệm ban đầu chậm hơn (theo Google Search Central).
Cách triển khai Blogger lazy loading ảnh SEO an toàn
Bước 1: Chèn ảnh bằng thẻ HTML có URL thật
Trong trình soạn thảo Blogger, chuyển sang chế độ HTML của bài viết và kiểm tra từng ảnh. Một cấu trúc cơ bản nên có URL thật trong src, văn bản thay thế trong alt, cùng kích thước dự kiến bằng width và height nếu bạn biết chính xác tỷ lệ ảnh:
<img src="https://blogger.googleusercontent.com/img/b/example-image.webp"
alt="Ảnh minh họa cách tối ưu ảnh Blogger"
width="1200"
height="675"
loading="lazy"
decoding="async">Với ảnh đầu tiên hoặc ảnh chính của bài, hãy bỏ loading="lazy" nếu ảnh hiển thị ngay trong màn hình đầu tiên. Với ảnh phía dưới, giữ thuộc tính này là lựa chọn đơn giản hơn so với viết JavaScript riêng.
URL trong ví dụ chỉ mang tính minh họa. Khi đăng bài, bạn phải dùng URL ảnh thực do Blogger tạo. Không thay URL thật bằng ảnh giữ chỗ như ảnh trong suốt 1×1 pixel, vì Google có thể chỉ nhìn thấy ảnh giữ chỗ thay vì nội dung cần lập chỉ mục.
Bước 2: Viết alt và tên tệp phục vụ cả SEO lẫn khả năng tiếp cận
Thuộc tính alt nên mô tả đúng nội dung hoặc chức năng của ảnh, không phải danh sách từ khóa. Ví dụ, alt="Kiểm tra thuộc tính src của ảnh trong HTML Blogger" hữu ích hơn alt="Blogger lazy loading ảnh SEO ảnh Blogger Google SEO". Google dùng alt text cùng nội dung trang và hệ thống nhận dạng hình ảnh để hiểu chủ đề ảnh; nhồi từ khóa có thể làm trải nghiệm kém và bị xem là hành vi không phù hợp (theo Google Search Central).
Đặt ảnh gần đoạn văn liên quan, dùng tên tệp có tính mô tả nếu có thể, và giữ một URL ổn định cho cùng một ảnh trên nhiều trang. Việc dùng lại cùng URL giúp Google có thể lưu bộ nhớ đệm và tránh phải yêu cầu lại tài nguyên giống nhau quá nhiều lần (theo Google Search Central).
Bước 3: Tối ưu kích thước nhưng không làm mất URL dự phòng
Ảnh lớn là một trong những nguyên nhân phổ biến khiến bài Blogger nặng. Hãy xuất ảnh theo đúng kích thước hiển thị gần nhất, nén trước khi tải lên và ưu tiên định dạng hiện đại như WebP hoặc AVIF khi quy trình của bạn hỗ trợ. Nếu dùng srcset để phục vụ nhiều kích thước màn hình, vẫn phải giữ src làm URL dự phòng:
<img src="anh-800.webp"
srcset="anh-480.webp 480w, anh-800.webp 800w, anh-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Ảnh minh họa tối ưu ảnh Blogger"
loading="lazy">Google khuyến nghị luôn cung cấp URL trong src khi dùng srcset, bởi không phải mọi trình duyệt hoặc trình thu thập đều xử lý các thuộc tính phản hồi theo cùng cách (theo Google Search Central).
Kiểm tra ảnh trong HTML và xác nhận Googlebot tải ảnh
Kiểm tra nhanh bằng trình duyệt
- Mở bài viết đã xuất bản ở cửa sổ ẩn danh.
- Nhấp chuột phải, chọn Kiểm tra rồi tìm thẻ
<img>. - Xác nhận ảnh quan trọng có URL thật trong
src, không chỉ códata-src. - Cuộn chậm xuống cuối bài và xem ảnh có tự động xuất hiện mà không cần nhấp nút hay không.
- Trong tab Network, lọc theo Img để xem URL ảnh có trả về thành công, không bị lỗi 403, 404 hoặc chuyển hướng bất thường.
Đừng chỉ kiểm tra mục View page source. Nếu giao diện hoặc JavaScript thay đổi HTML sau khi tải, mã nguồn ban đầu có thể khác HTML mà trình duyệt và Google nhìn thấy.
Kiểm tra bằng Search Console
- Mở công cụ Kiểm tra URL trong Google Search Console.
- Dán URL bài viết và chọn kiểm tra phiên bản đã xuất bản.
- Nếu cần, chọn Kiểm tra URL trực tiếp, sau đó mở phần xem trang đã thu thập hoặc HTML kết xuất.
- Tìm các thẻ
<img>và xác nhận ảnh quan trọng vẫn có URL trongsrc. - Kiểm tra thêm khả năng tải tài nguyên: ảnh không yêu cầu đăng nhập, không bị chặn bởi robots.txt và không trả về lỗi máy chủ.
Google hướng dẫn sử dụng URL Inspection để xác nhận nội dung lazy loading đã xuất hiện trong HTML kết xuất; nếu URL ảnh nằm trong src của thẻ <img>, đó là dấu hiệu triển khai đang hoạt động đúng ở mức cơ bản (theo Google Search Central).
Bạn cũng có thể dùng hướng dẫn Blogger để rà soát thêm các thiết lập giao diện có thể ảnh hưởng đến tốc độ và khả năng thu thập. Nếu điểm tương tác bị ảnh hưởng sau khi thêm script, hãy đo lại bằng PageSpeed Insights và DevTools thay vì chỉ dựa vào cảm nhận.
Lỗi thường gặp và cách khắc phục
- Ảnh chỉ có trong data-src: chuyển URL thật vào
srchoặc thay cơ chế JavaScript bằngloading="lazy"của trình duyệt. - Ảnh đầu bài xuất hiện trễ: bỏ lazy loading ở ảnh chính và kiểm tra lại kích thước, định dạng, máy chủ phân phối.
- Ảnh trả về lỗi 404 hoặc 403: mở trực tiếp URL ảnh, kiểm tra lại quyền truy cập và thay liên kết hỏng.
- Ảnh bị chặn trong robots.txt: chỉ chặn tài nguyên trang trí không cần cho việc hiểu nội dung; không chặn thư mục chứa ảnh cần lập chỉ mục.
- Thêm script lazy loading quá phức tạp: quay về HTML chuẩn, giảm phụ thuộc JavaScript rồi kiểm tra lại HTML kết xuất.
Lazy loading không đảm bảo ảnh sẽ được xếp hạng trong Google Images. Nó chỉ giúp bạn trì hoãn tải ảnh mà vẫn giữ khả năng phát hiện nếu HTML, URL, alt text, khả năng truy cập và chất lượng trang đều phù hợp. Sau khi sửa, hãy yêu cầu Google kiểm tra lại URL; việc thu thập và lập chỉ mục không diễn ra ngay lập tức.
Checklist hoàn tất: ảnh đầu bài không bị trì hoãn; ảnh phía dưới tự tải khi tiến gần viewport; mọi ảnh cần SEO có src thật; alt mô tả tự nhiên; ảnh không bị robots.txt chặn; HTML kết xuất trong Search Console hiển thị đúng; và trang vẫn đạt tốc độ chấp nhận được trên thiết bị di động.
Nguồn tham khảo
- Fix Lazy-Loaded Website Content — Google Search Central
- Google Image SEO Best Practices — Google Search Central
- Troubleshoot Google Search Crawling Errors — Google Search Central
- Prepare for mobile-first indexing — Google Search Central Blog
