Làm SEO hình ảnh là một trong những kỹ thuật tối ưu hóa quan trọng, và đem lại nhiều hiệu quả cho website.
Đang xem: Seo hình ảnh như thế nào
Thông thường người quản trị web chỉ thêm ảnh một cách tự nhiên, đôi khi mang tính hình thức, gọi là cho có, mà không để ý nhiều đến chất lượng cũng như lợi ích mà việc đó có thể mang lại. Như vậy thì quả là lãng phí tài nguyên sẵn có, mà lại khó hấp dẫn người dùng cũng như công cụ tìm kiếm.
Để giúp bạn tránh được sơ suất đó, trong bài này tôi sẽ dành thời gian để nói về chủ đề tối ưu hóa hình ảnh đăng trên website, nằm trong loạt bài viết về kỹ thuật SEO OnPage.
NỘI DUNG CHÍNH
Bước 1. Chuẩn bị và tối ưu hóa hình ảnhBước 2. Thêm hình ảnh và tối ưu hóa On-PageBước 3. Áp dụng thêm kỹ thuật nâng cao để SEO hình ảnh
Trước hết chúng ta cùng tìm hiểu một chút về khái niệm…
SEO hình ảnh là thế nào?
Việc tối ưu hình ảnh mục đích là để làm gì? Nếu chỉ nói là để “tăng hiệu quả” thì nghe chung chung quá. Việc gì làm cũng để tăng hiệu quả – nghe chưa thuyết phục. Cần cụ thể hơn!
Theo tôi, làm SEO Image phải hướng tới những mục tiêu sau:
Để Google nhìn thấy và “hài lòng” về trang web hơn, nhờ vậy “nó” sẽ xếp thứ hạng trang của bạn cao hơn trong hệ thống kết quả nói chung (SERP), bao gồm tất cả những gì có trên trang: text, hình ảnh, video…Để trong trang kết quả được kèm hình ảnh, tăng sự hấp dẫn để lôi cuốn người dùng vào xem.Để người dùng khi dùng Google Search Image (không tìm text), thì trang của bạn cũng có thứ hạng cao khi chỉ tìm kiếm bằng hình ảnh. Nói cách khác, trong trường hợp chỉ dùng hình ảnh để cạnh tranh, thì bạn cũng muốn trang của mình nằm trong Top, phải vậy không?Người dùng thấy hài lòng hơn khi thưởng thức nội dung bằng hình ảnh (cùng với những nội dung hữu ích khác) trên trang. Thực ra, đây mới là mục tiêu quan trọng và sau cùng: tăng trải nghiệm tốt cho người dùng, vì khi họ hài lòng thì Google sớm hay muộn cũng sẽ “happy” theo.
Mục đích là như vậy, giờ muốn bắt tay vào thực hiện thì phải làm từ đâu?
Đây là những bước khá đơn giản mà bạn có thể thực hiện được ngay.
Bước 1. Chuẩn bị và tối ưu hóa ảnh
Tìm & lựa chọn ảnh
Bạn cần phải tìm được nguồn ảnh chất lượng, nội dung phù hợp, và đảm bảo tính bản quyền. Tốt nhất là bạn dùng ảnh đẹp mà mình có thể tự chụp hoặc tự sáng tạo bằng phần mềm. Trường hợp phải dùng ảnh từ nguồn khác, thì phải tìm nơi đảm bảo chất lượng và uy tín.
Trong quá trình làm, cần lưu ý thực hiện một số việc sau:
1. Khắc phục chất lượng ảnh kém
Có thể là độ nét kém, thường là do khi chụp ảnh để ở độ phân giải thấp, hay do trình độ của người chụp bị hạn chế. Cũng có thể do ảnh gốc có size nhỏ, nhưng bị phóng to lên cho vừa với khung, thì trông sẽ bị mờ.
Ảnh gốc kích thước nhỏ (bên trái), nếu phóng to trên web sẽ bị mờ (bên phải)
Hoặc có thể do trình độ chụp ảnh hoặc thời điểm chụp có độ sáng không đảm bảo. Và nhìn hình tối thui, hoặc sáng lóa cũng không đẹp. Trong trường hợp này bạn có thể dùng phần mềm để chỉnh sửa trước khi đưa lên web.
Khắc phục ảnh chụp không đủ ánh sáng
2. Thay thế ảnh không liên quan đến nội dung
Một trường hợp khác là ảnh thì đẹp, nhưng chẳng ăn nhập gì với nội dung của trang, hay của đoạn văn xung quanh.
Chẳng hạn nếu trang bài viết về kỹ thuật SEO, nếu không có giải thích rõ ràng mà uỵch một cái, tôi đưa hình ảnh hoa hậu thời trang vào, thì dù bức ảnh rất đẹp và hấp dẫn, thì cũng vẫn sẽ bị xếp vào lỗi “vô duyên”. Người dùng sẽ thấy thiếu cảm tình với hình minh họa, thậm chí còn nghĩ người đăng ảnh hình như có vấn đề. Nghĩa là, chất lượng nội dung kém đi. Và Google cũng phát hiện ra và “trừ điểm” của trang.
Nguyên tắc: phải lựa chọn ảnh có liên quan đến nội dung của trang, và của đoạn văn bản mình đang trình bày.
Chọn định dạng phù hợp
Hiện có nhiều loại định dạng phổ biến như JPG, PNG, GIV, SVG, và WebP. Thực ra, không có lựa chọn nào đúng hay sai, chỉ là lựa chọn nào tối ưu cho loại ảnh mà bạn định sử dụng, vì mỗi loại có ưu điểm riêng, và kích thước file khác nhau.
Cụ thể:
JPG tốt nhất cho ảnh chụp, đảm bảo màu sắc và độ nét với kích thước file nhỏ.PNG tốt nhất cho hình vẽ bằng các đường kẻ, chữ viết, phù hợp khi bạn muốn giữ hiệu ứng trong suốt của ảnh trên màu nền (background).GIF là phương án tối ưu cho hình động.WebP có tỉ lệ nén cao (so với JPG và PNG), nhưng hiện chỉ có Chrome và Opera hỗ trợ loại ảnh này.
Hầu hết các phần mềm sửa ảnh chuyên nghiệp như Photoshop đều cho phép lưu ảnh dưới 1 trong 3 định dạng JPG, PNG, GIF, và cho phép chuyển đổi ảnh giữa những định dạng này. Nếu không có phần mềm chuyên nghiệp, bạn có thể thử sử dụng công cụ chuyển đổi định dạng ảnh miễn phí Online-Convert.com.
Mục tiêu là sử dụng công cụ để có những bức ảnh chất lượng cao, với kích thước file nhỏ nhất. Việc đó chính là tối ưu hóa hình ảnh.
Thay đổi kích cỡ hình ảnh cho hợp lý
Cần phải đảm bảo kích thước để người dùng thấy đẹp mắt. Và trong đa số các trường hợp, bạn chỉ cần vài thao tác là xử lý xong công đoạn này. Tôi muốn nói tới những kỹ năng rất cơ bản khi thao tác với ảnh, chẳng hạn như: Resize, Crop, Cut…
Sửa kích thước ảnh bị hụt so với khung
Người dùng sẽ thấy ngay nếu ảnh bị hụt so với khung có sẵn. Dễ nhận ra hơn nếu nằm trong loạt ảnh cùng kích cỡ, ví dụ như ảnh đại diện của blog, hay sản phẩm, mà có một vài ảnh bị “cọc cạch”.
Sửa tỉ lệ kích thước không hợp giữa ảnh và khung
Tỉ lệ về chiều dài và chiều rộng của file ảnh không khớp với tỉ lệ của khung ảnh thiết kế trên trang web. Khi đó, ảnh sẽ bị biến dạng: dãn ngang (bẹt), hoặc dãn dọc (móp).
Cả 2 trường hợp đều cần được xử lý khi đăng ảnh. Hoặc là bạn cần sửa lại kích thước file ảnh, hoặc là sửa lại phần mã code cho phù hợp với ảnh thực tế. Lập trình viên có thể dùng biện pháp cắt ảnh tự động để đảm bảo tỷ lệ chiều rộng so với chiều cao.
Nếu trang web của bạn mà có ảnh bị móp hoặc bẹt, thì nên chỉnh sửa ngay. Ví dụ như dưới đây: ảnh đăng trên web 1 hãng hàng không bị hẹp ngang, nên nhìn bị móp hình so với ảnh gốc (phía dưới).
Ảnh kích thước đầy đủ nhìn cân đối sẽ thế này:
Bạn có thấy sự thay đổi khi đưa ảnh lên web không đảm bảo tỉ lệ kích thước không?
Sử dụng responsive image
Bạn có thể sử dụng thuộc tính srcset=”” trong thẻ
Giảm kích cỡ file ảnh
Việc giảm kích thước file ảnh sẽ giúp tăng tốc độ tải trang, và nhờ đó cải thiện hiệu quả SEO về mặt kỹ thuật. Google đánh giá cao yếu tố này.
Có thể hoàn toàn chọn cách giảm file mà không ảnh hưởng đáng kể đến chất lượng ảnh. Cả 2 hình dưới, chất lượng nhìn bằng mắt thường là như nhau, nhưng kích thước file chênh nhau khá nhiều.
Kích thước rộng x cao = 464x326px, nhưng file PNG 424kb (phải) gấp gần 10 lần file JPG 44kb (trái).
Ảnh cùng kích thước, nhưng file JPG chỉ 44kb (trái) – còn file PNG 424kb (phải)
Rõ ràng trong trường hợp này, chỉ cần lựa chọn dạng file hợp lý người làm SEO đã giảm giảm kích thước file rõ rệt khi tối ưu ảnh.
Một trong những cách phổ biến là dùng công cụ mà Google gợi ý: ImageOptim. Lưu ý: khi dùng công cụ này thì sẽ tự động bỏ thông tin EXIF (xem khái niệm này trong phần dưới), để giúp giảm kích thước file, mặc dù cũng chẳng giảm thêm được nhiều lắm. Còn nếu bạn chỉ muốn loại bỏ dữ liệu EXIF thì có thể dùng ứng dụng VerExif này.
Một bài viết trên Ahref có giới thiệu một số công cụ khác và mức độ giảm kích thước với 2 dạng file ảnh JPEC và PNG, bạn hoàn toàn có thể nghiên cứu sử dụng.
Imageoptim: 69% (JPEG). 40% (PNG)Shortpixel: 42% (JPEG). 59% (PNG)Kraken.io: 13% (JPEG). 63% (PNG).TinyPNG: 27% (JPEG). 65% (PNG).Optimizilla: 27% (JPEG). 60% (PNG)Imagify.io: 6% (JPEG). 1% (PNG)Compressor.io: 42% (JPEG). 58% (PNG)
Bước 2. Thêm hình ảnh và tối ưu hóa On-Page
Đây là những công việc cần làm khi đưa ảnh vào trang web. Và đoạn mã thường có dạng thế này:
File ảnh có tên: du-thuyen-tren-vinh-ha-long.jpg
Tên file ảnh chứa từ khóa chính của trang, nếu thấy phù hợp. Trong ví dụ tôi vừa nêu, nếu trang web viết về du lịch, thì rõ ràng nên đưa từ khóa “du-thuyen-du-lich” vào tên file là rất hợp lý. Còn nếu trang có chủ đề khác, hoặc không liên quan tới nội dung ảnh, chẳng hạn trang viết về các thắng cảnh của tỉnh Quảng Ninh, thì bạn không cần cố đưa từ khóa chính “thắng cảnh Quảng Ninh” vào tên ảnh (không nên gò ép mất tự nhiên).
2. Nội dung thuộc tính Alt Text
Alt text là đoạn văn bản mô tả tóm tắt nội dung ảnh, đặt trong thẻ với cú pháp alt=””. Đúng như tên gọi Alt Text (alternative text) nghĩa là dòng văn bản thay thế, nó sẽ được hiển thị trên trang web trong trường hợp trình duyệt không tải được ảnh vì một lý do nào đó.
Hãy viết đoạn Alt text này như thể bạn đang mô tả bức ảnh cho ai đó bị khiếm thị, như Sean Work đã chia sẻ dưới đây.