Hãy nghĩ về lần cuối bạn tải một hình ảnh lên trang web của mình. Rất có thể bạn đã tải nó xuống từ một trang web lưu trữ ảnh, tải nó lên phần phụ trợ của trang web của bạn, rồi chèn vào blog, website.
Đây là một ví dụ điển hình về tối ưu hóa hình ảnh, phải không?
Bạn đã thêm một quả bóng bowling có trọng lượng khổng lồ vào trang web của mình, điều này làm chậm tốc độ trang. Không những thế các công cụ tìm kiếm không thể đọc hình ảnh của bạn nếu không có văn bản thay thế.
Hãy thay đổi điều đó. Hơn 20% tổng số lượt tìm kiếm trên web diễn ra trên Google Hình ảnh.
Nếu không tối ưu hóa hình ảnh phù hợp, bạn đang lãng phí một tài sản SEO có giá trị.
Tối ưu hóa hình ảnh tạo ra nhiều lợi thế như trải nghiệm người dùng tốt hơn, thời gian tải trang nhanh hơn và các cơ hội xếp hạng bổ sung. Nó đang trở thành một vai trò ngày càng quan trọng hơn.
Nhưng yếu tố nào là quan trọng nhất để đảm bảo hình ảnh trang web có tốc độ tải trang nhanh và có thể được tìm thấy.
Dưới đây là top thủ thuật tối ưu hóa hình ảnh quan trọng mà bạn cần biết.
1. Chọn định dạng hình ảnh
Giải mã tất cả các định dạng hình ảnh khác nhau có thể giống như lần đầu tiên bạn đặt hàng tại Shopee. Tuy nhiên, trước khi bạn có thể bắt đầu thêm hình ảnh vào trang web của mình, bạn muốn đảm bảo rằng bạn đã chọn loại tệp tốt nhất.
Mặc dù có nhiều định dạng hình ảnh để lựa chọn, nhưng PNG và JPEG là phổ biến nhất cho website.
- PNG: Tạo ra hình ảnh có chất lượng tốt hơn nhưng đi kèm với kích thước tệp lớn hơn.
- JPEG: Bạn có thể giảm chất lượng hình ảnh, nhưng bạn có thể điều chỉnh mức chất lượng để tìm được sự cân bằng tốt.
- WebP: Chọn không mất dữ liệu hoặc nén mất dữ liệu bằng cách sử dụng định dạng hình ảnh duy nhất này được cả Chrome và Firefox hỗ trợ.
Đối với tôi, PNG là người hùng thầm lặng của định dạng hình ảnh. Tuy nhiên, đối với việc sử dụng hàng ngày của tôi, PNG là cách để chuyển đổi chúng thành WebP.
JPG và JPEG: Định dạng tệp hình ảnh này có giống nhau không?
Chỉ cần cẩn thận nếu bạn đang sử dụng hình ảnh .jpg bên trong định dạng SVG nội tuyến vì Google không thể lập chỉ mục những hình ảnh này.
2. Nén hình ảnh của bạn
Đúng vậy, không có cơn thịnh nộ nào giống như một trang web cồng kềnh khi tải lên một hình ảnh không được nén.
Theo HTTP Archive, hình ảnh chiếm trung bình 21% tổng dung lượng của trang web.
Đó là lý do tại sao tôi khuyên bạn nên nén hình ảnh trước khi tải lên trang web của mình. Bạn có thể làm điều này trong Photoshop hoặc sử dụng công cụ như TinyPNG.
Bạn có thể sử dụng TingPNG, thông qua plugin của WordPress.
Tuy nhiên, tôi thích WP Smush làm plugin WordPress của mình hơn. Nó làm giảm kích thước tệp mà không làm giảm chất lượng hình ảnh.
Dù bạn sử dụng plugin nào, hãy đảm bảo tìm một plugin nén hình ảnh bên ngoài trên máy chủ của họ. Nó làm giảm tải trên trang web của bạn.
Hoặc tiến thêm một bước và sử dụng CDN hình ảnh để phát hiện thiết bị và tối ưu hóa hình ảnh trước khi xuất bản. Cloudinary và Imgix là hai tùy chọn để dùng thử.
Nếu bạn không chắc hình ảnh của mình ảnh hưởng đến tốc độ trang như thế nào, tôi khuyên bạn nên sử dụng công cụ Thông tin chi tiết về tốc độ website của Google.
3. Tạo hình ảnh độc đáo
Bạn muốn hình ảnh của bạn xuất hiện trên trang web. Nếu bạn lấp đầy trang web của mình bằng hình ảnh có sẵn, bạn sẽ trông không nguyên bản và không nổi bật giống như hàng ngàn trang web khác.
Quá nhiều trang web lộn xộn với cùng một kho ảnh chung chung.
Hãy nghĩ về một website công ty, một công ty tư vấn, một doanh nghiệp tự hào về dịch vụ khách hàng. Tất cả các website này đều sử dụng hầu như cùng một hình ảnh có sẵn về một doanh nhân đang mỉm cười.
Tôi chắc rằng bạn đã nhìn thấy một thứ giống như thế này:
Mặc dù bạn có hình ảnh lưu trữ của mình được tối ưu hóa hoàn hảo, nhưng nó sẽ không có cùng tác động hoặc lợi ích SEO tiềm năng như hình ảnh gốc, chất lượng cao.
Bạn càng có nhiều ảnh gốc, trải nghiệm của người dùng càng tốt và giá trị xếp hạng của bạn trên các tìm kiếm có liên quan càng cao.
Hãy nhớ rằng những hình ảnh lớn có nhiều khả năng xuất hiện trong Google Khám phá hơn.
Như Google đề xuất trong tài nguyên SEO nâng cao của mình,
Không sử dụng logo của bạn làm hình ảnh.
4. Tùy chỉnh tên tệp hình ảnh
Khi nói đến SEO, việc tạo tên tệp mô tả, giàu từ khóa là vô cùng quan trọng.
Tên tệp hình ảnh khai báo cho Google và các trình thu thập thông tin của công cụ tìm kiếm khác về chủ đề của hình ảnh.
Thông thường, tên tệp sẽ giống như “IMG_1422023” hoặc đại loại như vậy. Điều đó giống như đặt hàng từ thực đơn bằng một ngôn ngữ khác. Nó không giúp ích gì cho Google.
Thay đổi tên tệp từ mặc định để giúp các công cụ tìm kiếm hiểu hình ảnh và cải thiện giá trị SEO của bạn.
Điều này liên quan đến một chút công sức, tùy thuộc vào mức độ mở rộng của thư viện phương tiện của bạn, nhưng việc thay đổi tên hình ảnh mặc định luôn là một ý tưởng hay.
Giả sử bạn có một hình ảnh sô cô la chẳng hạn.
Tôi có thể đặt tên nó đơn giản là “sô-cô-la” nhưng nếu bạn bán sô-cô-la trên trang web của mình, thì có khả năng mọi hình ảnh đều có thể được đặt tên là “sô-cô-la-1”, “sô-cô-la-2”,…
Tôi đặt tên cho hình ảnh này là “cà phê sô-cô-la kem” để người dùng và công cụ tìm kiếm hiểu được hình ảnh.
5. Viết văn bản thay thế thân thiện với SEO
Thẻ alt là một văn bản thay thế cho hình ảnh khi trình duyệt không thể hiển thị chúng đúng cách. Tương tự như tiêu đề, thuộc tính alt được sử dụng để mô tả nội dung của tệp hình ảnh.
Khi hình ảnh không được tải, bạn sẽ nhận được một khung hình ảnh có thẻ alt ở góc trên cùng bên trái. Đảm bảo rằng chúng phù hợp với hình ảnh và làm cho hình ảnh có liên quan.
Chú ý đến các thẻ alt cũng có lợi cho chiến lược SEO tổng thể trên trang, bài đăng. Bạn muốn đảm bảo tất cả các khu vực tối ưu hóa khác đều ở đúng vị trí, nhưng nếu hình ảnh không tải được vì bất kỳ lý do gì, người dùng sẽ thấy hình ảnh được cho là như thế nào.
Ngoài ra, việc thêm thẻ alt thích hợp vào hình ảnh trên trang web có thể giúp trang web của bạn đạt được thứ hạng tốt hơn trong công cụ tìm kiếm bằng cách liên kết từ khóa với hình ảnh. Ngay cả Google cũng đã nhận xét về giá trị của văn bản thay thế trong hình ảnh.
Nó cung cấp cho Google thông tin hữu ích về chủ đề của hình ảnh. Công cụ sử dụng thông tin này để giúp xác định hình ảnh tốt nhất để trả về cho truy vấn của người dùng.
Ví dụ: giả sử bạn có hình ảnh sô cô la trên trang web của mình.
Văn bản thay thế có thể đọc:
<img src=”so-co-la-1.jpg” alt=”sô cô la”/>
Tuy nhiên, một văn bản thay thế tốt hơn mô tả hình ảnh sẽ đọc:
<img src=”socola-1.jpg” alt=”thanh sô cô la đen vị cà phê”/>
Văn bản thay thế có thể xem được trong phiên bản text được lưu trong bộ nhớ cache của trang, mang lại lợi ích cho cả người dùng và công cụ tìm kiếm. Để có thêm giá trị SEO, văn bản thay thế có thể đóng vai trò là văn bản liên kết của liên kết nội bộ khi hình ảnh liên kết đến một trang khác trên trang web.
6. Cấu trúc tệp hình ảnh
Google đã cập nhật Nguyên tắc về hình ảnh của mình. Một trong những cập nhật chính mà họ tiết lộ là họ sử dụng đường dẫn tệp và tên tệp để xếp hạng hình ảnh.
Lặp lại: Đường dẫn tệp và tên tệp là một yếu tố xếp hạng thực tế.
Ví dụ: nếu bạn là một thương hiệu thương mại điện tử có nhiều sản phẩm, thay vì đặt tất cả hình ảnh sản phẩm của bạn vào một thư mục chung, tôi khuyên bạn nên cấu trúc các thư mục con của mình theo nhiều chủ đề liên quan đến danh mục hơn như /ao-so-mi/ hoặc /quan-sot/.
7. Tối ưu hóa Tiêu đề & Mô tả
Google cũng tiết lộ rằng họ sử dụng tiêu đề và mô tả như một phần của thuật toán tìm kiếm hình ảnh.
Trang hỗ trợ của Google nêu rõ:
Tất cả các yếu tố SEO trên trang cơ bản như dữ liệu meta, thẻ tiêu đề, nội dung trên trang, dữ liệu có cấu trúc, …. đều ảnh hưởng đến cách Google xếp hạng hình ảnh của bạn.
8. Xác định kích thước hình ảnh
Nếu đang sử dụng AMP hoặc PWA, bắt buộc phải xác định kích thước hình ảnh của mình trong mã nguồn.
Tuy nhiên, nếu bạn không sử dụng cả hai, thì cách tốt nhất vẫn là xác định chiều rộng và chiều cao để cung cấp trải nghiệm người dùng tốt hơn.
Ngoài ra, nó cho phép các trình duyệt định kích thước hình ảnh trước khi tải CSS. Điều này ngăn trang nhảy khi tải.
Các thuộc tính kích thước hình ảnh cũng rất quan trọng để ngăn chặn các sự cố Cumulative Layout Shift (CLS) có thể ảnh hưởng đến quá trình tối ưu hóa Core Web Vitals của bạn.
Đảm bảo rằng bạn có các thuộc tính chiều rộng và chiều cao cho mọi phần tử hình ảnh và video là điều quan trọng.
Điều này cho trình duyệt biết cần phân bổ bao nhiêu dung lượng cho tài nguyên và ngăn việc thay đổi nội dung gây phiền nhiễu làm giảm điểm CLS của bạn.
9. Hình ảnh thân thiện với thiết bị di động
Ồ, SEO di động. Tồi tệ nhất có thể mang lại cho bạn tỷ lệ thoát cao và chuyển đổi thấp. Tuy nhiên, tốt nhất là nó mang lại cho bạn nhiều quyền lực xếp hạng hơn và mức độ tương tác của người dùng tốt hơn.
Vấn đề là, làm cách nào để tối ưu hóa hình ảnh của mình cho chỉ mục ưu tiên thiết bị di động?
May mắn thay, Google cung cấp hướng dẫn về các phương pháp hay nhất cho hình ảnh.
Nói tóm lại, bạn muốn tạo hình ảnh đáp ứng. Điều này có nghĩa là hình ảnh sẽ mở rộng theo kích thước của trang web cho dù người dùng đang sử dụng máy tính hoặc thiết bị di động. Nó điều chỉnh theo kích thước của thiết bị.
Mozilla cung cấp hướng dẫn toàn diện về cách sử dụng các thuộc tính srcset và dimensions để cung cấp cho trình duyệt các hình ảnh nguồn bổ sung, cho phép hiển thị nội dung hình ảnh giống hệt nhau đã thay đổi kích thước cho thiết bị.
Điều quan trọng là phải định dạng phần này với một phần khác của giá trị thuộc tính trên mỗi dòng, như được minh họa trong ví dụ này từ tài nguyên của họ:
<img srcset=”elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w”
sizes=”(max-width: 600px) 480px,
800px”
src=”elva-fairy-800w.jpg”
alt=”Elva ăn mặc như 1 nàng tiên”>
Tìm hiểu thêm về cách sử dụng srcset cho hình ảnh phản hồi tại đây.
10. Thêm hình ảnh vào sơ đồ trang web
Cho dù bạn đang thêm hình ảnh vào sơ đồ trang web hay tạo sơ đồ trang web mới cho hình ảnh, bạn đều muốn hình ảnh ở đâu đó trong sơ đồ trang web của mình.
Có hình ảnh trong sơ đồ trang web làm tăng đáng kể cơ hội cho các công cụ tìm kiếm thu thập dữ liệu và lập chỉ mục hình ảnh của bạn. Do đó, dẫn đến lưu lượng truy cập trang web nhiều hơn.
Nếu bạn đang sử dụng WordPress, Yoast và RankMath sẽ cung cấp giải pháp sơ đồ trang web trong plugin của họ.
11. Thêm dữ liệu có cấu trúc
Dữ liệu có cấu trúc đánh dấu các loại nội dung trang web để hướng dẫn google và các công cụ tìm kiếm mang lại kết quả trực quan tốt hơn. Về cơ bản, Google có thể phân phát hình ảnh của bạn dưới dạng kết quả nhiều định dạng nếu bạn thêm dữ liệu có cấu trúc.
Ví dụ: nếu bạn đang sử dụng đánh dấu lược đồ trên trang sản phẩm và bạn gắn nhãn hình ảnh là sản phẩm, Google có thể ghép hình ảnh này với thẻ giá. Các công cụ tìm kiếm bỏ qua thuật toán và sử dụng thông tin được cung cấp trong dữ liệu có cấu trúc để cung cấp hình ảnh phù hợp.
Bí quyết tối ưu hóa hình ảnh
Vì vậy, trước khi bắt đầu tải hình ảnh lên trang web của mình, hãy đảm bảo tuân theo các quy trình tối ưu hóa hình ảnh ở trên.
Điều quan trọng nhất là đảm bảo hình ảnh và văn bản thay thế có liên quan đến trang. Các điểm chính khác:
- Chọn định dạng tệp phù hợp. Tôi thích dùng PNG để chụp ảnh màn hình.
- Giảm kích thước tệp để có tốc độ tải trang nhanh hơn.
- Đảm bảo các yếu tố SEO trên trang (dữ liệu meta, dữ liệu có cấu trúc,…) khớp với hình ảnh của bạn.
- Để có thể thu thập thông tin, hãy tạo sơ đồ trang web hình ảnh hoặc đảm bảo rằng hình ảnh của bạn được làm nổi bật trong sơ đồ trang web của bạn.
Tối ưu hóa hình ảnh không phải là trò đùa. Với những tiến bộ trong công nghệ tìm kiếm bằng giọng nói, phương tiện truyền thông ngày càng có tầm quan trọng và toàn bộ trang web của bạn sẽ được hưởng lợi từ việc thực hiện các bước trên.
Chúc bạn tối ưu hóa vui vẻ!
