SEO và tối ưu hóa hình ảnh cho thương mại điện tử

http archive

Hình ảnh chiếm 50% nội dung của website. Ở web bán hàng thì tỉ lệ này thậm chí cao hơn nhiều. Tối ưu hóa hình ảnh là giảm dung lượng của chúng thấp nhất có thể, mà vẫn đảm bảo chất lượng ảnh để nâng cao tốc độ tải trang. Và mô tả hình ảnh của bạn thật rõ ràng để thăng hạng trong Google Image Search.

Tên file ảnh mô tả nội dung rõ ràng

Googlebot không thể thấy hình ảnh theo cách mà bạn thấy. Nó “thấy” hình ảnh thông qua tên file và “hiểu” nội dung của hình ảnh thông qua Thẻ Alt text.

Vậy bạn muốn Googlebot thấy tấm ảnh đôi giày thể thao của bạn dưới tên:

https://tenmiencuaban.com/DSC_019287.jpg

Hay

https://tenmiencuaban.com/giay-nam-the-thao-nike.jpg

Hãy giữ tên file ảnh thật: ngắn gọn, mô tả đầy đủchứa từ khóa. Tên của file ảnh tương tự như slug của bài viết.

Mô tả hình ảnh bằng thẻ Alt text

Như đã nói ở trên, Alt text chính là đoạn text nói cho Googlebot biết về nội dung của file ảnh. Nếu Googlebot tìm thấy đoạn code sau trong web của bạn.

<img src="giay-the-thao.jpg" alt="Giày thể thao nam Nike màu trắng" title="Giày thể thao nam Nike" />

Thì nó sẽ hiểu hình ảnh trên nói về đôi giày thể thao nam của hãng Nike màu trắng. Và nhỡ đâu lần sau khi có ai tìm từ khóa “giày thể thao nam”, Google sẽ lấy hình ảnh của bạn ra để show cho người dùng thì sao.

Hãy giữ cho thẻ Alt text của mọi hình ảnh thật: ngắn gọn, mô tả đầy đủchứa từ khóa. Alt text của hình ảnh tương tự như thẻ Meta của bài viết.

Cách kiểm tra Alt text của hình ảnh.

  • Click phải vào ảnh, chọn Inspect Element. Bạn sẽ thấy đoạn code tương tự như trên. Nếu chưa có Alt thì bổ sung ngay.
  • Sử dụng Lighthouse hoặc GT Metrix để kiểm tra toàn bộ ảnh trong một trang.

Cách viết Alt text cho hình ảnh.

  • Ảnh sản phẩm: Đa phần mã nguồn web bán hàng hiện nay, Alt text cho ảnh sản phẩm được tạo tự động từ Tên sản phẩm. Nếu chưa có, hãy nhờ bạn code web dành 10 phút bổ sung ngay.
  • Ảnh trong bài viết: Tùy vào trình soạn thảo và quản lý ảnh của web bạn. Thường thì click phải vào ảnh, chọn Property và nhập Alt text.
  • Ảnh tại các vị trí khác: như logo, ảnh trình chiếu, biểu tượng vận chuyển. Nhờ bạn code web can thiệp trong html.

Lựa chọn kích thước ảnh phù hợp

Kích thước ảnh (image size) tỉ lệ thuận với dung lượng ảnh (file size).

Dung lượng ảnh tỉ lệ nghịch với tốc độ tải trang.

Dù hầu hết mã nguồn web bán hàng hiện nay đủ thông minh để tạo file cache với kích thước phù hợp tại nơi mà nó được gọi ra. Nhưng tính năng nén thì chưa chắc. Nên không có nghĩa là bạn thoải mái up ảnh 2000px để nó ì ạch crop về 400px. Hãy cố gắng chọn size đúng từ đầu.

Thường thì web bán hàng có các dạng ảnh sau:

image size tesla womens hoodie

  • Ảnh sản phẩm. Nền trắng hoặc đồng nhất. Kích thước 600×600 px là đủ để hiển thị chi tiết sản phẩm. Tối đa 70kB.
  • Ảnh trình chiếu slide. Nhiều màu sắc, hiển thị hết bề ngang container hoặc full width. Kích thước 1200×600. Tối đa 200kB.
  • Ảnh thật sản phẩm trong phần mô tả. Nhiều màu sắc. Kích thước 600x600px. Tối đa 100kB.

Bọn mình nên dùng ảnh vuông (ratio 1:1) để hiển thị tối ưu trên di động. Cũng như tiết kiệm thời gian khi thiết kế và xử lý ảnh. Vì không phải quản lý nhiều tỉ lệ ảnh (ratio) khác nhau.

Nhiều bạn muốn ảnh có độ phân giải lớn để thể hiện tốt chi tiết sản phẩm. Nhưng hãy cẩn thận, bạn phải đánh đổi bằng tốc độ tải trang bằng một cái giá rất đắt. Thay vì đó hãy cứ giữ ảnh nhỏ và khi click vào sẽ hiển thị ảnh lớn ở tab khác.

Giảm dung lượng file ảnh

Bởi hình ảnh chiếm 50% nội dung trang web đồng nghĩa với việc chúng khiến thời gian tải trang tăng gấp đôi. Nếu không lựa chọn cẩn thận hình ảnh, việc trang chủ của bạn mất 20s để full load là chuyện bình thường. Và hãy nhớ, cứ thêm 1s tải trang, có thêm 5% người dùng rời khỏi website của bạn.

Export photos for the web in Photoshop

Khi xuất file từ Photoshop hãy chọn Save for web (Ctrl + Alt + Shift + S).

  • Quality: phía trên, góc phải (ví dụ 60%).
  • File format: phía trên, góc phải. (ví dụ JPEG).
  • Optimization: checkbox phía trên, góc phải (chọn Optimized).
  • Color: checkbox phía trên, góc phải (chọn Convert to sRBG).
  • Image size: phía dưới, góc phải (ô W: và H:).
  • Dung lượng dự tính: phía dưới, góc trái (ví dụ 136.7K).

Tối ưu hóa hình ảnh khi không có Photoshop.

  • Sử dụng các app chỉnh ảnh online như PixlrX hoặc Canva. Quan trọng là chúng miễn phí.
  • Sử dụng GT Metrix để kiểm tra tối ưu dung lượng file ảnh khi tải trang. GT Metrix cũng đề nghị và tạo sẵn ảnh đã được tối ưu sẵn giúp bạn. Chỉ việc tải về và upload lại lên hosting thôi.

Dung lượng ảnh bao nhiêu là tối ưu? Tối đa 70kB cho ảnh sản phẩm.

Lựa chọn định dạng file ảnh phù hợp

Đó là PNG, JPG và GIF. Mục tiêu của bọn mình là chọn những hình ảnh tạo nhiều tương tácnhẹ.

file type comparison

JPG nhẹ khi mã hóa nhiều màu sắc. Nên dùng cho hình ảnh chiếm số lượng lớn. Ví dụ: ảnh sản phẩm, ảnh chụp thật, banner, slide.

PNG giữ được chất lượng màu sắc tốt nhất nhưng nặng hơn JPG gấp 4 lần. Nên dùng khi bạn muốn ảnh chất lượng cao. Ví dụ: ảnh có nền trong suốt như logo, ảnh đẹp nhưng size từ vừa trở xuống.

GIF là ảnh động, ít màu sắc. Chỉ sử dụng khi thật sự cần thiết và ít màu thôi. Dường như Google không thích định dạng này cho lắm.

* WebP là định dạng ảnh mới mà Google khuyến khích. Nó nhẹ hơn PNG và giữ chất lượng màu sắc tốt hơn JPG. Nhưng có lẽ dường như chưa được thế giới web hào hứng cho lắm. Bởi ít trình duyệt, kể cả Chrome, hiển thị tốt được định dạng này.

Ảnh thumbnails nhẹ và hấp dẫn

Khi lướt trang danh mục hoặc kéo xuống cuối trang sản phẩm trên web bán hàng thì ảnh sản phẩm bạn nhìn thấy nhiều nhất là ảnh thumbnails. Mục đích của chúng rất rõ ràng: khiến bạn muốn click vào sản phẩm.

amazon thumbnails

Hãy giữ ảnh thumbnail thật nhẹ. Tại trang sản phẩm, bạn chỉ cần show ra 1 ảnh sản phẩm 600x600px và 3-4 ảnh khác đang load ngầm. Nhưng tại trang danh mục, bạn phải show 20-30 sản phẩm, tương ứng 20-30 ảnh ngay lập tức. Một số yêu cầu bọn mình áp dụng cho ảnh thumbnail là.

  • Kích thước khoảng 200×200 px. Tương ứng 6 sản phẩm dàn ngang trong container 1200px.
  • Tối đa 50kB.
  • Định dạng JPG, hoặc PNG nếu dung lượng cho phép.
  • Tối ưu tên file và Alt text. Tương tự ảnh sản phẩm.

Ở hầu hết web bán hàng, ảnh thumbnail được resize lại từ 1 trong những ảnh sản phẩm. Nên hãy chọn thumbnails thật rõ ràng, nền trắng, sản phẩm nổi bật dù ở kích thước nhỏ.

Sitemap cho hình ảnh

Bọn mình vẫn đang thực hành việc này. Dựa trên hướng dẫn của Google về hình ảnh. Sẽ cập nhật sớm nhất có thể.

Chuyên mụcseo

1 bình luận cho “SEO và tối ưu hóa hình ảnh cho thương mại điện tử

Bình luận đã bị tắt.