Làm thế nào để tối ưu hóa hình ảnh trong WordPress, giúp cải thiện tốc độ load và SEO cho website?
Tôi sử dụng hình ảnh để làm bài viết của mình trông trực quan và sinh động hơn. Nó giúp tôi thu hút sự chú ý người đọc một cách dễ dàng. Đôi khi một screen-shot (ảnh chụp màn hình) có thể làm một công việc tốt hơn rất nhiều so với mô tả bằng văn bản. Đó là lý do tại sao chúng ta nên thêm những screen-shot hữu ích vào bài viết. Hình ảnh chủ yếu được sử dụng để cải thiện trải nghiệm của độc giả. Nhưng đồng thời chúng cũng có thể mang lại cho bạn một lượng truy cập không hề nhỏ từ công cụ tìm kiếm khổng lồ Google Image Search. Tất cả những gì các bạn cần làm là tối ưu hóa hình ảnh theo đúng cách.
Tham khảo thêm:
- Sử dụng định dạng WebP cho hình ảnh trong WordPress
- 10 Công cụ tối ưu hóa hình ảnh giúp cải thiện tốc độ load
Các bước tối ưu hóa hình ảnh trong WordPress
Dưới đây là vài điều nên làm để hình ảnh của bạn thân thiện hơn với công cụ tìm kiếm, đồng nghĩa với việc giúp các bài viết (có chứa hình ảnh đó) cải thiện thứ hạng.
Giảm kích thước file ảnh
Hình ảnh quá nặng có thể làm cho website của bạn load chậm, ảnh hưởng tới trải nghiệm của độc giả và có hại cho SEO. Nhiều người sẽ không có đủ kiên nhẫn để ngồi chờ hình ảnh được load đầy đủ. Họ sẽ sử dụng nút “Back” trên trình duyệt, làm tăng bounce rate của website.
WordPress có sẵn tùy chọn cho phép bạn chỉnh kích thước hình ảnh trong trình soạn thảo bài viết. Nhưng thực sự nó không làm thay đổi dung lượng của hình ảnh, nó chỉ thay đổi kích thước trong HTML mà thôi. Kết quả là, các trình duyệt vẫn phải tải hình ảnh lớn trước rồi sau đó mới thay đổi kích thước của chúng. Vì vậy, để đảm bảo hình ảnh không ảnh hưởng đến thời gian load web, bạn nên nén để giảm thiểu dung lượng của hình ảnh mà không làm giảm chất lượng hiển thị.
Tôi đang sử dụng plugin ShortPixel để tự động nén hình ảnh cho blog WP Căn bản. Bạn cũng có thể sử dụng các plugin khác như reSmush.it Image Optimizer hoặc Robin Image Optimizer để giảm dung lượng hình ảnh, cho phép website tải nhanh hơn.
Đặt tên file ảnh đúng cách
Rất nhiều người có thói quen đặt tên file hình ảnh có dạng “image001.jpg”. Kiểu đặt tên như thế này thực sự làm mọi việc trở nên khó khăn khi xác định nội dung của hình ảnh. Vì vậy, sẽ tốt hơn nếu bạn sử dụng một cái tên có liên quan và mô tả chính xác nội dung của hình ảnh.
Ví dụ, bạn sử dụng bức ảnh của một cô gái trong bài viết về SEO WordPress. Tên của nó nên được đặt là “wordpress-seo” thay vì “sweet-girl”. Một điều quan trọng nữa là bạn nên sử dụng dấu gạch nối để phân tách các từ riêng biệt trong tên của hình ảnh (“wordpres-seo” tốt hơn là “wordpressseo”). Tuyệt đối không đặt tên hình ảnh bằng tiếng Việt có dấu, vì nó rất dễ gây ra lỗi 404 (do mã hóa link) cho hình ảnh khi bạn chuyển host.
Định dạng hình ảnh
Đây không phải là một vấn đề nghiêm trọng. Nhưng nếu bạn thực sự quan tâm về chất lượng hình ảnh và thời gian load web thì nên cân nhắc để sử dụng định dạng hình ảnh thích hợp. Dưới đây là danh sách các định dạng phổ biến nhất và mục đích sử dụng của chúng:
- JPG/ JPEG – Được sử dụng cho các hình ảnh như ảnh chụp, không đòi hỏi chất lượng cao.
- PNG – Được sử dụng cho các hình ảnh đồ họa như banner, logo… đòi hỏi độ sắc nét cao.
- GIF – Được sử dụng cho hình ảnh động.
Ngoài ra, có một định dạng mới – WebP, thậm chí còn nhẹ hơn JPG/ JPEG khá nhiều. Nếu website của bạn không đòi hỏi hình ảnh với chất lượng cao thì WebP là sự lựa chọn hợp lý nhất để tăng tốc độ load.
Thêm Alt-Text
Alt-Text là cách viết ngắn gọn của Alternative Text (văn bản thay thế). Đây là phần quan trọng bậc nhất trong vấn đề SEO hình ảnh.
Khi chúng ta thấy hình ảnh của hiển thị trên website, chúng ta sẽ ngay lập tức nhận ra tất cả những gì mà hình ảnh muốn diễn tả. Nhưng bot tìm kiếm không thể hiểu được những hình ảnh này một cách dễ dàng. Hầu hết các công cụ tìm kiếm đều dựa trên văn bản để xác định nội dung, chúng không thể đọc được hình ảnh. Alt-Text giúp bot có thể nhanh chóng hiểu được nội dung của hình ảnh.
Hình ảnh cần có thời gian để tải. Lúc đầu, nó sẽ hiển thị một không gian trống thay vì hình ảnh. Nếu bạn không có bất kỳ văn bản thay thế nào thì độc giả và bot tìm kiếm sẽ không hiểu điều gì đang xảy ra với các khoảng không gian trống đó.
Tham khảo thêm: Tự động tạo alt-text cho hình ảnh trong WordPress
Thêm chú thích (Caption)
Một chú thích (caption) hay và mô tả chính xác nội dung sẽ giúp cho hình ảnh của bạn trở nên hấp dẫn hơn. Vì vậy, đừng quên thêm một chú thích cho hình ảnh nếu nó cần thiết, mặc dù chú thích có thể không ảnh hưởng đến xếp hạng trên công cụ tìm kiếm.
Tóm lại
Những điều tôi vừa nói ở trên được diễn tả ngắn gọn như trong screen-shot dưới đây:
Nhìn qua có vẻ như bạn sẽ phải làm rất nhiều công việc chỉ để tối ưu hóa hình ảnh. Nhưng trên thực tế nó không khiến bạn mất quá nhiều thời gian đâu. Một khi bạn làm cho nó trở thành thói quen, mọi việc sẽ rất dễ dàng. Nếu bạn đang vận hành một website sử dụng nhiều hình ảnh hoặc một trang chuyên về nhiếp ảnh thì đây là những việc bạn bắt buộc phải làm.
Bạn có bất cứ lời khuyên nào khác để giúp tối ưu hóa hình ảnh trong WordPress, tốt cho SEO? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)
Mình thấy dung lượng ảnh trên wpcanban chỉ tầm 10 kb mặc dù là đuôi PNG
Mình edit ảnh bằng Photoshop, size ảnh chỉ khoảng 300×200 nhưng khi xuất ra PNG thì dung lượng cũng khoảng 120-130 kb, nếu tối ưu thì vẫn còn rất cao, chỉ tối ưu được khoảng 10-20% thôi, đâu đó khoảng 100 kb. Không biết có cách nào tối ưu lại chỉ còn 10-20 kb như web của Hiếu không nhỉ?
Bạn search trên blog với từ khoá “ShortPixel” và “WebP” là sẽ thấy câu trả lời nhé. :P
Làm thế nào để chọn ảnh thumbnail wordpress bằng link ngoài vậy AD
Googlw có mà bạn: https://goo.gl/wV8mz3
Mình cài plugin thì nó lấy link up thẳng lên host
Làm bằng code thì mỗi khi thêm vào functions.php là bị lỗi
Cảm ơn bạn về bài viết, ^^ có những lúc đọc được cái gì đó hữu ích thật vui
Mình muốn hỏi là hình anh ở trang chủ mình không bằng nhau giờ chỉnh thế nào cho nó nhìn các mục đồng đều cho đẹp nhỉ, không biết mình nghịch gì giờ ảnh hiện thị ở trang chủ cái to cái nhỏ.
Bạn tham khảo bài viết này để tạo lại ảnh thumbnail xem sao nhé: https://wpcanban.com/wordpress/thu-thuat-wordpress/chinh-sua-kich-thuoc-anh-thumbnails-khi-thay-theme-wordpress.html :P
Chào các bạn : mình làm về trung tâm gia sư. Các bạn chỉ bảo giúp mình vấn đề này nhé
Mình mới học Seo. Các bạn chỉ giáo giúp mình điều này nhé. Mình có web mã nguồn wordpress. Không rõ
phần trang chủ (Chèn Code H1 – Trung tâm gia sư hà nội ) Nhưng mà phần Title của trang chủ : Trung tâm gia sư hà nội – Tìm gia sư giỏi – Gia sư sư phạm. Vậy cái đó thì cái nào được ưu tiên hơn. Title và H1 của trang chủ mình cũng ko rõ nữa. Khi sead google từ khóa ” trung tâm gia sư hà nội ” mình đứng thứ 10 nhưng nó không hiện đủ hết phần title mà mình đặt. Mình có nên sửa H1 giống với title không ? Hay nó không ảnh hưởng gì ?
Còn nữa. Mình được bạn khác hương dẫn ( ko phải Seo Pro nhé ) bảo rằng trong bài viết cứ Tags thât nhiều và tẹt ga tất cả các từ khóa liên quan đến chủ đề ” gia sư ” ( gọi là nhóm từ khóa chung – dán vào tất cả các bài viết trong site ) còn trong các bài viết triển khai thêm Tags riêng liên qua trực tiếp đến nội dung chủ đề bài mình viết. Như vậy Tags có ổn không mọi người. 2 vấn đề này mình hoang mang quá
Hai cái này bạn có thể để khác nhau cũng được nhé. Title mà bạn nói được khai báo bởi plugin Yoast SEO, còn cái nằm trong thẻ H1 là hàng cuối cùng trên trang chủ của bạn. Bạn nên chuyển thẻ H1 lên logo thì sẽ tốt hơn, giống như cách mà blog của mình đang làm. Bạn không nên tag quá nhiều các từ khóa liên quan đến chủ đề gia sư nhé, chỉ chọn một vài từ liên quan trực tiếp đến nội dung bài viết thôi. Nếu bạn làm như lời người kia nói thì rất nhiều khả năng sẽ bị Google phạt vì tội nhồi nhét từ khóa. :)
Mới làm web lại nên quên mất cách tối ưu hình ảnh, Google ra liền bài của Boss Hiếu :D
Chú mày spam vừa thôi. Bị Akismet nó cho vào blacklist rồi đó. :P
Bác dùng plugin nào để tạo bình chọn 5 ngôi sao thế ?
Là plugin KK Star Ratings: https://wordpress.org/plugins/kk-star-ratings/ bạn nhé. :P
Cảm ơn bạn Trung Hiếu, mình cũng đang cần plugin bình chọn 5 sao
Mình thì dùng phần mềm convert hàng loạt trước khi đưa lên cho nó nhẹ nhàng cái đường truyền, 56 kbs diaup :D
Tốc độ thật bá đạo. :D
Ở cái xóm này toàn thằng biết về mạng nên mới bị thế, mk ! chúng nó toàn phang nét cắt để chơi mình, cứ phải chống lại bọn IT khác thật khó chịu =))
Sống chung với lũ. :D
Quá chuẩn bác ơi,mình cũng thường làm như vậy.Nhưng không lúc nào mình up lên host,chỉ up lên trang của google thôi.Vác cho hỏi cái luôn là làm sao chỉnh được chữ.xem chi tiết,từ khóa chèn link,bài viết liên quan thành màu xanh vậy
Ok. Mình sẽ cố gắng fix cho bạn ngay trong sáng nay. :)
Ngoài những cách trên, mình còn dùng thêm plugin Smush.it để giảm dung lượng file ảnh.
Trong bài viết có nhắc đến đấy bạn. :)
Bài viết hay quá bác ạ. Cảm ơn bác nhiều nhé :)