Cách Tối Ưu Hình Ảnh Sản Phẩm Trên Website Bán Hàng Chuẩn SEO

SIKIDO hướng dẫn cách chèn ảnh vào sản phẩm, cách chọn từ khóa, viết mô tả, đặt ảnh đại diện,... Giúp người quản trị website khai thác triệt để những công dụng, tính năng của website. Tạo nên các sản phẩm chuẩn seo để mang lại lợi ích cho doanh nghiệp.

Cách tối ưu hình ảnh sản phẩm trên website bán hàng chuẩn SEO

1. Số lượng hình trên 1 bài viết

Google khuyến khích và cũng đánh giá cao những bài viết có chèn hình ảnh và video để bài viết sinh động hơn, nội dung được dễ hiểu hơn.
Thông thường, mỗi bài viết khoảng 1000 từ nên có tối thiểu 3 hình trở lên để người dùng không nhàm chán khi đọc. Tuỳ vào nội dung của bài mà hình sẽ nhiều hay ít. Ví dụ một bài hướng dẫn sử dụng thường sẽ có nhiều hình hơn một bài blog thông thường.

Tuy nhiên, bạn không nên lạm dụng chèn quá nhiều hình cho một bài viết sẽ làm chậm tốc độ tải trang của website, đôi khi nó còn tạo cảm giác bài viết không mang được nhiều giá trị cho người đọc. Trong những trường hợp bắc buộc phải sử dụng nhiều ảnh như bài hướng dẫn sử dụng bạn cần tối ưu kích thước và dung lượng ảnh tốt nhất để cải thiện tốc độ tải trang.

2. Đặt tên hình ảnh trước khi cập nhật lên website

Hình ảnh là một trong những yếu tố của SEO Onpage, nó thúc đẩy quá trình đưa từ khóa lên trang nhất kết quả tìm kiếm Google. Do vậy, bạn không thể nào tải và lưu ngay ảnh với tên đã có sẵn bởi tên của những ảnh này thường đặt tự do, không có nghĩa và không theo nguyên tắc nào cả. Bắt buộc bạn phải tối ưu tên ảnh trước khi tải lên website với các quy tắc đặt tên sau:

- Đặt tên ảnh không dấu và phải có gạch nối giữa các từ. Ví dụ: cách tối ưu hình ảnh.jpg nên đặt thành cach-toi-uu-hinh-anh.jpg

- Hình ảnh phải chứa từ khóa: Ví dụ: từ khóa bài viết là giày thể thao cho nữ bạn không nên đặt tùy ý như jdabd00023.jpg mà nên đặt thành giay-the-thao-cho-nu.jpg

- Tên hình ảnh không nên chứa các ký tự lạ và các ký tự đặt biệt như #, $, /, *, ?

Ví dụ: So sánh 2 cách đặt tên từ 2 website cho thuê xe du lịch sau có thể thấy được với cách đặt tên ở website số 2 phù hợp với quy tắc đặt tên. Google không thể nào đọc được hình ảnh nên nhờ vào cách đặt tên Google sẽ hiểu được hình ảnh này đang cho biết điều gì. Do đó đặt tên theo từ khóa, tên ảnh có nghĩa là cách giúp Google nhanh chóng nhận biết website bạn hơn.

3. Kích thước hình ảnh phải chuẩn trên website

Sử dụng hình ảnh trên website không đơn giản là chèn hình vào bài viết. Bạn cần phải kiểm tra kích thước, dung lượng hình. Bởi hình ảnh là một trong những nguyên nhân khiến website tải chậm.

Việc giảm kích thước hình sẽ giúp bạn giảm dung lượng hình, đồng thời sẽ có một số cách giúp bạn giảm được dung lượng nhưng vẫn giữ nguyên kích thước như mong muốn.

3.1 Kích thước và dung lượng hình bao nhiêu là ổn?

Nếu là các bài tin tức, hướng dẫn bình thường, kích thước hình nên tối thiểu là 500px và tối đa là 700px.
Với hình sản phẩm, hình dự án, cần có kích thước lớn một chút là 800px đến 1000px.
Khi up lên website, bạn có thể điều chỉnh hình hiện ra có kích thước nhỏ, và khi người xem nhấn vào xem chi tiết, sẽ thấy được hình lớn. Ảnh đại diện bài viết website là 1200x630px để chia sẻ ảnh lên Facebook.

Về dung lượng, để đảm bảo tốc độ tải trang tốt thì dung lượng ảnh không nên vượt quá 100KB. Bởi nếu một bài viết có một hình nặng 200KB là hoàn toàn ổn, nhưng một bài viết có 10 hình, mỗi hình là 200KB, điều đó thật sự không ổn tí nào.
Vì vậy, tối ưu kích thước và dung lượng hình ảnh theo các tiêu chuẩn trên là điều cần thiết phải làm trước khi up ảnh lên website.

3.2 Cách resize – điều chỉnh kích thước hình trước khi up lên website
Windows có sẵn công cụ hỗ trợ cho việc xử lý ảnh, khá là dễ sử dụng cho những người không chuyên là Paint
Ở đây chúng ta có 1 bức hình lấy từ website ảnh miễn phí là pexel.com. Hình này khá lớn với dung lượng là 13.1MB và kích thước là 5472×3317. SIKIDO sẽ hướng dẫn bạn thay đổi kích thước hình ảnh bằng Paint.

B1: Bạn mở hình với Paint.

B2: Bạn chọn Resize.

B3: Paint cho 2 lựa chọn chỉnh kích thước, theo phần trăm, hoặc theo pixel. Ở đây tôi sẽ chọn Pixel.
Bạn nhớ nhấn vào ô “Maintain aspect radio”, để khi bạn điều chỉnh chiều ngang thì chiều dài cũng sẽ được điều chỉnh theo, khiến hình không bị méo.
Như vậy với hình bên trên, tôi sẽ nhập Horizontal – chiều ngang là 500 pixel:

B4: Nhấn OK rồi bấm Save.
Sau khi chỉnh kích thước, hình dung lượng của hình sẽ giảm xuống.

3.3 Cách giảm dung lượng nhưng vẫn giữ nguyên kích thước ảnh
Đây là cách tối ưu hình ảnh bắt buộc phải có khi up ảnh lên website. Trong một số trường hợp như ảnh chụp từ màn hình bạn muốn dung lượng ảnh giảm những vẫn giữ nguyên được kích thước để người dùng nhìn rõ hơn, lúc này sử dụng phương pháp nén ảnh là phù hợp nhất.

Hiện nay, có rất nhiều công cụ, phần mềm hỗ trợ nén ảnh trực tuyến bất kỳ ai cũng có thể dễ dàng sử dụng. Dưới đây là một số website hỗ trợ nén ảnh được đánh giá khá tốt dành cho những người không chuyên bạn có thể tham khảo qua:

+ https://imagecompressor.com
+ https://compressjpeg.com
+ https://www.websiteplanet.com/

Ví dụ: Kích thước ban đầu của ảnh là 649 x 409 với dung lượng ảnh là 192KB. Với kích thước này bạn có thể sử dụng để up lên website, tuy nhiên dung lượng ảnh này lại quá cao so với tiêu chuẩn. Do đó cần giảm dung lượng ảnh dưới 100KB.
Để thực hiện, bạn truy cập vào một trong ba website ở trên (ba website này có cách sử dụng tương tự nhau). Sau đó tải ảnh cần giảm dung lượng lên.
Nén xong, bạn có thể tải ảnh về sử dụng hoặc kiểm tra lại kỹ hơn trong file lưu trữ. Kết quả cho thấy ảnh được nén vẫn giữ nguyên size 649 x 409 nhưng dung lượng đã giảm còn 75KB.
Với cách thực hiện này giúp hình ảnh đăng tải trên website vẫn đảm bảo đủ kích thước để nhìn rõ thông tin mà dung lượng lại được tối ưu tốt nhất, không gây ảnh hưởng đến tốc độ tải trang.

4. Sử dụng định dạng nào tốt nhất cho ảnh trên website, JPG hay PNG?

JPG là định dạng rất phổ biến hiện nay. Sử dụng định dạng JPG giúp bạn giảm dung lượng hình ảnh xuống thấp, nhưng chất lượng hình ảnh cũng sẽ bị giảm theo.
Do đó nếu bài viết của bạn không cần hình ảnh chất lượng quá tốt ví dụ như các bài tin tức, bạn nên dùng JPG.
Ngược lại nếu đó là trang bán sản phẩm, cần hình ảnh chất lượng, rõ ràng để khách hàng dễ tham khảo, bạn dùng ảnh định dạng PNG.

5. Cách tối ưu hình ảnh chuẩn SEO trên Google

5.1 - Luôn luôn chèn và SEO hình ảnh

SEO hình ảnh tốt sẽ giúp người đọc hiểu bài viết của bạn tốt hơn. Câu nói “Một bức ảnh hơn ngàn lời nói” có lẽ không thích hợp với Google nhưng rất đúng trong trường hợp này. Đó là khi bạn muốn biến bài viết 1000 từ nhàm chán trở nên hấp dẫn hơn.

- Minh họa điều bạn chia sẻ qua bảng, sơ đồ dòng dữ liệu (data flow diagram)

- Hay đơn giản chỉ là khiến bài đăng trên mạng xã hội trở nên hấp dẫn

Bên cạnh sử dụng Internal Link hay External Link, bạn hoàn toàn có thể tăng tỷ lệ người dùng click vào bài viết nhờ Meta Description. 

>>> XEM THÊM: https://ads.sikido.vn/meta-description

SIKIDO khuyên bạn nên chèn hình ảnh vào bất kỳ bài viết online nào để khiến chúng lôi cuốn hơn.
Thêm vào đó, tìm kiếm hình ảnh ngày càng quan trọng.
Điều này được nhận định là xu hướng ở hiện tại và chắc chắn trong tương lai của Google trong việc tìm kiếm.
Do vậy, làm tốt SEO hình ảnh sẽ giúp bạn kiếm được kha khá traffic đấy.
Nếu bạn muốn có nội dung “bắt mắt” thì bạn càng phải ưu tiên công việc SEO hình ảnh trong list công việc của mình.
Google Images gần đây đã thay đổi giao diện thương hiệu mới. Bạn cũng sẽ thấy bộ lọc mới, dữ liệu meta và thậm chí là cách thể hiện nguồn/tác giả của hình ảnh.

Bộ lọc mới cực xịn này cho thấy Google đang dần hiểu hình ảnh gồm những gì và hình ảnh đó sử dụng trong ngữ cảnh như thế nào.

5.2- Tìm đúng ảnh

Tốt hơn hết là dùng ảnh gốc, tự chụp hơn là stock photo. Hình ảnh bài viết cần liên quan đến chủ đề.
Nếu bạn chọn hình ảnh ngẫu nhiên chỉ để lấy đủ dấu chấm xanh trên Yoast SEO thì bạn đang sai lầm rồi đấy.
Hình ảnh nên phản ánh chủ đề bài viết hay mô tả mục đích của bài viết. Cố gắng đặt hình ảnh gần đoạn nội dung liên quan nhất.
Nếu bạn có hình ảnh chủ lực hoặc hình ảnh muốn tranh hạng, hãy để nó ở phần đầu bài viết (nếu hợp lý)
Có một lý do đơn giản cho việc ưu tiên SEO hình ảnh là …
Hình ảnh đi liền với nội dung liên quan sẽ giúp bạn tối ưu thứ hạng cho từ khóa tốt hơn.
Cách thay thế hình ảnh
Trong trường hợp bạn không có hình ảnh riêng thì làm thế nào?
Vẫn còn nhiều cách khác để tìm ảnh độc quyền mà không cần tới stock photo.

1. Flickr.com là kho ảnh tuyệt vời và bạn có thể dùng Creative Commons image. Và đừng quên ghi nguồn tác giả.
2. Sử dụng hình ảnh trên những trang như Unsplash. Tránh xa stock photo, chọn hình nào thật một chút.
3. Tự thiết kế hình ảnh cho mình với nguồn logo, icon từ Flaticon.com và Freepik.com

Hình ảnh có con người thật thường giống stock photo trừ khi hình đó do bạn tự chụp. Và nếu bạn có thể tự chụp hình thì quá lý tưởng rồi.  Chẳng cần lo lắng vấn đề bản quyền.
Ngoài hình ảnh, bạn có thể thay thế bằng illustrations (ảnh minh họa), biểu đồ và đặc biệt là GIF. (GIF – loại này đang cực kỳ thịnh hành)

5.3- Chuẩn bị hình ảnh cho bài viết

Thay đổi kích thước ảnh chuẩn SEO
Tốc độ tải vô cùng quan trọng trong UX và SEO.
Trang load càng nhanh thì càng dễ truy cập và index. Hình ảnh ảnh hưởng rất lớn đến tốc độ tải trang, đặc biệt khi bạn dùng ảnh lớn nhưng lại hiển thị nhỏ.
Ví dụ hình ảnh có độ phân giải 2500×1500 pixels nhưng bạn chỉ để hiển thị 250×150 pixels và vẫn phải tải lên toàn bộ ảnh.

Giải pháp ở đây là bạn nên scale (thay đổi kích cỡ) hình ảnh muốn hiển thị trước khi upload.
WordPress cũng hỗ trợ bằng cách tự động cung cấp hình ảnh dưới nhiều kích cỡ sau khi tải. Tuy nhiên, làm vậy chỉ có thể điều chỉnh kích cỡ hiển thị hình ảnh. Chứ không có nghĩa là bạn có thể thay đổi kích cỡ file.
Đúng vậy! Có lẽ trước giờ bạn vẫn lầm tưởng điều này phải không?
Chưa kể, sau khi chọn scale kích cỡ hình ảnh trên wordpress, tên hình ảnh bạn đặt trước đó chắc chắn thay đổi. Và tất nhiên, giai đoạn tối ưu hình ảnh khi đặt tên file ảnh cũng không còn tác dụng.

Sử dụng responsive image
Responsive image được hiểu đơn giản là dạng hình ảnh tương thích với nhiều kích thước màn hình khác nhau.
Nó có thể tải theo từng loại kích thước màn hình. Ví dụ, nó có thể phù hợp với màn hình hiển thị lớn. Và đặc biệt, bạn vẫn có thể xem hình ảnh này đầy đủ trên màn hình hiển thị nhỏ hơn thay vì bị mất đi một số phần như hình ảnh thông thường.
Nhưng kích thước và chất lượng của responsive image vẫn tương tự như bạn đang xem trên màn hình lớn.

Dạng hình ảnh này cũng rất cần thiết cho SEO. Và nếu bạn dùng WordPress thì nền tảng này đã mặc định thêm tính năng này kể từ phiên bản 4.4.
Hình ảnh này có thuộc tính srcset, giúp hiển thị hình ảnh khác nhau trên mỗi màn hình độ rộng khác nhau – vì thế, nó đặc biệt có ích khi SEO tương thích với thiết bị di động.

5.4- Thêm hình ảnh vào bài viết

Tuy Google đã nhận diện hình ảnh tốt hơn nhưng bạn cũng không nên ỷ y quá nhiều vào Google. Hãy cung cấp ngữ cảnh cho hình ảnh được sử dụng, càng nhiều càng tốt.
Giờ hình ảnh của bạn đã sẵn sàng sử dụng nhưng đừng vội quăng chúng vào bài viết. Như đã nói, đặt hình ảnh gần content phù hợp sẽ giúp ích rất nhiều để đảm bảo nội dung liên quan đến hình ảnh và ngược lại.

- Caption
Caption hình ảnh là dòng chữ đi kèm theo hình ảnh trên trang. Tại sao caption lại quan trọng trong SEO hình ảnh?
Bởi vì người dùng đọc caption khi đọc lướt qua bài viết. Mọi người thường scan heading, hình ảnh và caption khi đọc lướt qua trang.

Vậy bạn có cần caption dưới tất cả hình ảnh không?
Không cần thiết. Vì đôi lúc hình ảnh được dùng với mục đích khác. Bạn cũng nên xác định mình có muốn dùng hình ảnh cho SEO hay không.
Bạn cần dựa trên nhu cầu thực tế để tránh tối ưu hóa quá liều. Bạn chỉ nên thêm caption hợp lý dưới góc độ người dùng.
Nghĩ về người dùng trước chứ đừng thêm caption chỉ để SEO hình ảnh.

- Alt text và title text

Alt text (hoặc Alt tag) được thêm vào hình ảnh để làm nội dung miêu tả trong trường hợp hình ảnh vì lí do nào đó không thể hiển thị.
Wikipedia định nghĩa:
“Trong trường hợp hình ảnh không hiện lên cho người dùng, có thể do họ tắt hình ảnh trên trình duyệt web hoặc đang sử dụng screen reader (thiết bị đọc màn hình) vì hình ảnh bị hư. Alternative text sẽ đảm bảo không làm mất đi thông tin hay chức năng nào.”
Đảm bảo thêm alt text vào mỗi hình ảnh bạn dùng và alt text bao gồm cụm từ SEO chính của trang đó (nếu có thể). Quan trọng nhất là mô tả trong hình có gì để cả công cụ tìm kiếm và người dùng đều hiểu.
Càng có nhiều thông tin liên quan xung quanh hình ảnh thì công cụ tìm kiếm càng cho rằng hình này quan trọng.
Một vài trình duyệt hiển thị title text dưới dạng “tooltip” (chú thích khi rê chuột đến hình ảnh). Title text cho hình ảnh cũng tương tự nên có rất nhiều người sử dụng alt text cho cả title. Và ngày càng có nhiều người bỏ sót luôn hai phần này.

5.5- Thêm cấu trúc dữ liệu hình ảnh

Thêm cấu trúc dữ liệu vào trang có thể giúp công cụ tìm kiếm hiển thị hình ảnh của bạn trên rich result.
Dù Google tuyên bố dữ liệu có cấu trúc không có ích trong việc tăng hạng nhưng nó sẽ giúp có được danh sách dài hơn trên Image Search.
Thực tế còn hơn thế nữa.
Ví dụ nếu bạn có công thức trên trang và bạn thêm cấu trúc dữ liệu vào hình ảnh. Google sẽ có thể đánh dấu hình ảnh của bạn nhằm thông báo hình ảnh này thuộc về một công thức. Google Image hỗ trợ cấu trúc dữ liệu ở các dạng sau:

- Sản phẩm
- Video
- Công thức

Bạn cần tuân thủ nhiều hướng dẫn của Google nếu muốn hình ảnh xuất hiện trên rich result trong mục tìm kiếm hình ảnh.
Lưu ý: Thuộc tính hình ảnh là bắt buộc. Và nhờ vào đó, hình ảnh có thể crawl hoặc index được.

>>> Bạn có thể tìm thêm thông tin tại Structured Data General Guidelines của Google.

- OpenGraph và Twitter Card
Ở trên SIKIDO có đề cập sử dụng hình ảnh trong những bài chia sẻ trên mạng xã hội. Nếu bạn thêm tag hình ảnh sau vào phầntrong HTML như thế này:Thì chắc chắn hình ảnh của bạn sẽ xuất hiện trong bài chia sẻ trên Facebook (và OpenGraph được sử dụng cho Pinterest)Yoast SEO plugin cũng có hỗ trợ phần Social.Tại đây bạn có thể xem trước bài đăng Facebook hay Twitter.Hãy đảm bảo hình ảnh chất lượng cao như hình gốc được sử dụng trong bài viết. Vì nền tảng mạng xã hội thường dùng hình ảnh chất lượng cao hơn và kích thước hình lớn hơn.Nếu bạn thiết lập đúng xong hết nhưng vẫn không tải được hình, hãy thử dùng URL Debugger để xử lý. 

- Canh lề hình ảnh
Hình ảnh không bao giờ được nằm bên trái và phá vỡ mạch cấu trúc như hình bên dưới:
Tối ưu cả bố cục lề của các hình ảnh
SIKIDO nghĩ rằng có nhiều nghiên cứu ủng hộ điều này. Nhưng bạn hãy thử đặt mình vào vị trí người đọc. Đừng canh hình sang trái.
Bạn có thể dùng hình có độ rộng bằng cột chữ. Điều này cũng không có vấn đề gì, thậm chí còn làm nổi bật hình hơn.

Trên đây là cách tối ưu hình ảnh trên website và chuẩn SEO trên Google. Cùng đón đọc những bài viết tiếp theo về Kiến thức website trên phần TÀI LIỆU của website SIKIDO.VN nhé!

Xem thêm các bài viết hữu ích từ SIKIDO

- SEO tổng thể là gì

- Yếu tố đánh giá độ khó dễ của dự án SEO

- Lợi ích của SEO cho Doanh nghiệp