Các bước thực hiện SEO hình ảnh, Tối ưu hình ảnh chuẩn SEO, Alt hình ảnh là gì, Chỉnh ảnh chuẩn SEO, Chú thích ảnh seo, Tối ưu hình ảnh cho website tất tần tật có trong bài viết này.
Các bước thực hiện SEO hình ảnh. Thuộc tính alt cung cấp thông tin thay thế cho một hình ảnh nếu một người sử dụng vì một lý do nào đó không thể xem nó (vì kết nối chậm, một lỗi trong các thuộc tính src, hoặc nếu người dùng sử dụng một trình đọc màn hình).
Trong HTML, hình ảnh được định nghĩa với thẻ img
Thẻ img là trống rỗng, điều đó có nghĩa rằng nó chỉ chứa các thuộc tính, và không có thẻ đóng. Để hiển thị một hình ảnh trên một trang, bạn cần sử dụng thuộc tính src. Src là viết tắt cho "nguồn". Giá trị của thuộc tính src là địa chỉ URL của hình ảnh bạn muốn hiển thị. Cú pháp để xác định một hình ảnh:
URL trỏ đến vị trí nơi mà hình ảnh được lưu trữ. Một hình ảnh có tên là "boat.gif", nằm trong thư mục "hình ảnh" trên "www.w3schools.com" có URL: http://www.w3schools.com/images/boat.gif. Trình duyệt hiển thị hình ảnh nơi mà các thẻ img xảy ra trong tài liệu. Nếu bạn đặt một thẻ hình ảnh giữa hai đoạn văn, trình duyệt sẽ hiển thị đoạn văn đầu tiên, sau đó hình ảnh, và sau đó đoạn thứ hai. HTML hình ảnh - Thuộc tính Alt
Thuộc tính alt yêu cầu chỉ định một văn bản thay thế cho một ảnh, nếu hình ảnh không thể được hiển thị. Giá trị của thuộc tính alt là một văn bản tác giả định nghĩa: Thuộc tính alt cung cấp thông tin thay thế cho một hình ảnh nếu một người sử dụng vì một lý do nào đó không thể xem nó (vì kết nối chậm, một lỗi trong các thuộc tính src, hoặc nếu người dùng sử dụng một trình đọc màn hình). HTML Images - Đặt độ cao và chiều rộng của một hình ảnh Các thuộc tính chiều cao và chiều rộng được sử dụng để xác định chiều cao và chiều rộng của một hình ảnh.
SEO hình ảnh là việc chỉnh sửa hình ảnh về kích thước, chất lượng, và dung lượng file, cũng như đưa các thông tin liên quan lên trang khi sử dụng ảnh đó trên website.
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:
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.
Đâ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:
Tôi sẽ bắt đầu với những tiêu chí trong mã trên: tên ảnh, alt text, title. Sau đó là đến những gì mà người dùng nhìn thấy ngay khi xem trang.
Tên file ảnh nên đặt theo nguyên tắc có lợi cho SEO, cụ thể:
File ảnh có tên: du-thuyen-tren-vinh-ha-long.jpg
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.
Write your alt tags like if you had to describe them to someone who is blind...
— Sean Work (@seanvwork) May 1, 2014
Nói như vậy nghĩa là nghĩa là bạn phải dùng từ ngữ đơn thuần để giúp họ hiểu được nội dung. Chẳng hạn khi bạn chèn 1 file ảnh về chiếc du thuyền trong mã lệnh:
thì dòng “Du thuyền màu trắng trên vịnh Hạ Long” đó sẽ được hiển thị thay thế, khi việc tải ảnh không thực hiện được (chẳng hạn do bị sai url). Như dưới đây, tôi cố tình nhập sai url của ảnh, và bạn thấy ngay dòng Alt text hiện ra thay vào chỗ đó.
Việc sử dụng Alt text là một trong những tiêu chí SEO On-Page. Nếu bạn dùng công cụ SEO Audit, như SEOquake thì khi chạy sẽ thông báo nếu ảnh không có Alt text.
Ngoài việc dùng cho đủ, bạn còn cần viết Alt Text cho đúng, cho hay mới đạt hiệu quả tối ưu hóa. Một số điểm cần lưu ý khi thực hiện:
Thuộc tính title="" có tác dụng như dòng chỉ dẫn (tooltip) xuất hiện khi người dùng di chuột qua ảnh. Xem minh họa dưới đây.
Thực tế thì thuộc tính này không ảnh hưởng trực tiếp đến kết quả SEO, vì các công cụ tìm kiếm không đọc nó. Tuy vậy, dòng chỉ dẫn này khi xuất hiện hợp lý và đúng chỗ sẽ giúp cải thiện trải nghiệm của người dùng, nên cũng gián tiếp đem lại lợi ích cho việc SEO website.
Vì vậy, nếu bạn bỏ qua cũng không sao. Còn nếu có thể, thì chỉ cần đưa 1 đoạn text ngắn mô tả ảnh vào title là được. Nhiều người thường copy luôn đoạn văn với Alt Text cho nhanh, hoặc đưa dòng “nhấp chuột để phóng to ảnh” để thông báo về chức năng phóng to (nếu có).
Sau 3 tiêu chí trên (tên file, alt text, title) trong mã code, tiếp đến bạn cần tối ưu những tiêu chí mà người dùng nhìn thấy trực tiếp.
Đây là dòng chú thích thường nằm phía dưới tấm ảnh, để giải thích tóm tắt về nội dung bức ảnh đó.
Bản chất đây là 1 đoạn văn bản, nhưng được định dạng (sử dụng CSS) sao cho đi liền với tấm ảnh, có thể đặt trong cùng 1 khung chữ nhật để phân tách với nội dung chính của trang.
Nhưng tại sao Caption lại quan trọng với SEO hình ảnh?
Vì người dùng thường đọc Caption khi xem lướt nội dung bài viết. Thực tế, họ thường lướt nội dung các tiêu đề, các ảnh, và các dòng chú thích ảnh.
Neilpatel - 1 bậc thầy về SEO đã nhận định tầm quan trọng của chú thích ảnh:
Dòng chú thích ảnh (caption) được đọc trung bình 300% so với nội dung trang. Vì vậy, việc quên sử dụng chú thích, hay sử dụng không đúng cách nghĩa là bạn đã bỏ lỡ cơ hội tương tác với một lượng rất lớn độc giả tiềm năng.
Cá nhân tôi khi viết Blog cho website Carly, cũng chưa trú trọng đúng mức tới phần chú thích này. Cũng một phần bởi phải bổ sung thêm 1 ít mã code. Phần nữa trước đây chưa hiểu đúng vai trò, nên cũng hơi lơ là trong việc sử dụng.
Tất nhiên, giờ khi đã hiểu rõ hơn, thì tôi sẽ cố gắng ứng dụng & chỉnh sửa bổ sung cho hình ảnh của những bài viết trước.
Ghi chú: Từ bản HTML5, có thẻ
Nhưng liệu chúng ta có cần thêm chú thích cho tất cả các ảnh trong bài viết? Không cần! Bởi vì đôi khi ảnh dùng để phục vụ mục đích nào đó, mà không cần giải thích gì thêm. Chỉ sử dụng chú thích nếu bạn thấy việc đó hữu ích cho người đọc. Đừng làm chỉ để phục vụ SEO hình ảnh.
Kỹ thuật này liên quan đến bố cục nội dung web. Khi bạn đưa 1 tấm ảnh lên web, bạn cần sắp xếp nội dung văn bản một cách hợp lý quanh đó. Trong đoạn văn phía trên và phía dưới ảnh, trong thẻ tiêu đề gần đó, hay thậm chí trong nhan đề của bài viết, càng có sự liên quan đến ảnh thì việc sử dụng ảnh đó càng hiệu quả.
Điều này cũng có nghĩa là bạn cần sử dụng ảnh đúng chỗ, minh họa phù hợp cho mạch văn đang diễn ra. Người dùng đọc văn bản, kết hợp xem ảnh cùng chủ đề, sẽ thu thập được thông tin sâu hơn. Đó chính là trải nghiệm tốt mà việc làm SEO hướng tới.
Lưu ý: không sử dụng hình ảnh lạc chủ đề.
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ờ.
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.
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.
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ể:
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.
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).
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?
Bạn có thể sử dụng thuộc tính srcset="" trong thẻ để trình duyệt chọn đúng ảnh có kích cỡ nhỏ nhất phù hợp với kích thước màn hình. Kích thước ảnh nhỏ nghĩa là giảm thời gian tải trang, đồng nghĩa với tối ưu hóa Google.
Lấy ví dụ, bạn có file ảnh tên là image.jpg, kèm theo 3 file ảnh được thu nhỏ kích thước có tên và chiều rộng tương ứng là
Khi đó, bằng cách sử dụng thuộc tính scrset hợp lý, trình duyệt sẽ lựa chọn file ảnh nhỏ nhất trong 3 file trên để hiển thị, mà vẫn đảm bảo phù hợp với kích thước màn hì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.
Nói như trên thì hơi lạm dụng từ ngữ, nhưng tôi muốn dùng đúng thuật ngữ để đảm bảo tính chính xác. Và tôi sẽ giải thích ngay dưới đây.
Đây là kỹ thuật dùng dữ liệu có cấu cấu trúc (structured data) để tối ưu hóa, mục đích là để hình ảnh trên trang web lọt được vào “đoạn trích nổi bật” của Google, cùng với những thông tin có tính hấp dẫn cao khác như: số điểm đánh giá, số lượng người đánh giá, ngày đăng bài viết…
Chẳng hạn, bạn nhìn đoạn trích dưới đây (khi tìm hiểu về cách làm chả giò Miền bắc), sẽ thấy hình ảnh có tính hấp dẫn thế nào với người dùng. Rõ ràng nó làm cho kết quả nào có kèm hình ảnh nổi bật hơn hẳn với những trang không kèm ảnh. Và đó chính là mục đích của việc làm SEO hình ảnh nói riêng và tối ưu hóa website nói chung.
Để hình ảnh được Google đưa vào trong kết quả tìm kiếm không có gì đảm bảo. Tuy vậy, bạn cần biết cách thực hiện để trang web có đoạn trích nổi bật. Các kỹ thuật được tôi nêu chi tiết trong bài viết về về chủ đề Rich Snippets và Schema Markup.
Thực tế là sẽ có 2 mục tiêu, có thể cùng đạt được chỉ 1 hoặc cả 2:
Nếu bạn thực hiện việc cấu trúc dữ liệu hợp lý, hình ảnh sẽ hiển thị trong đoạn trích nổi bật (như minh họa ở trên), có thể trên cả trang kết quả máy tính lẫn phiên bản mobile, hoặc chỉ 1 trong 2. Tất nhiên, không thể đảm bảo chắc chắn được rằng Google sẽ cho hiển thị, nhưng cơ hội sẽ cao nếu bạn thực hiện tốt các kỹ thuật với Schema Markup. Và bạn có thể kiểm tra mã code xem đã hợp lý chưa, bằng công cụ này của Google.
Thực ra đây có thể xem là cách tối ưu hóa hình ảnh trên website trở nên thân thiện với những nền tảng mạng xã hội.
Facebook sử dụng Open Graph để tích hợp đoạn trích của các website lên mạng xã hội này. Cụ thể, khi bạn chia sẻ lên Facebook một url của website, sẽ thấy xuất hiện bản xem trước gồm ảnh đại diện, tiêu đề và mô tả tóm tắt, như hình dưới:
Để đưa hình ảnh này lên, cần đưa vào thẻ
của trang ivivu.com mấy dòng lệnh, trong đó có 2 dòng quan trọng sau:
Bạn có thể áp dụng tương tự với mạng Twitter (code khác). Do mạng này không thông dụng ở Việt Nam, nên tôi không đi vào chi tiết thêm nữa.
Với những hình ảnh phức tạp và cần mô tả dài dòng hơn, thì bạn có thể sử dụng thuộc tính long description, kèm theo đường dẫn đến đoạn mô tả chi tiết cho hình ảnh đó.
Ví dụ: mã code sau cho mô tả dài về bức họa nổi tiếng về nàng Mona Lisa
Ghi chú: Với HTML5, thuộc tính này không bị bỏ đi, nhưng cũng không được khuyến khích sử dụng nhiều. Do đó, tôi chỉ liệt kê để bạn tham khảo thêm, và tùy ý sử dụng nếu thấy cần thiết.
Exif là viết tắt của từ “Exchangeable Image File Format”. Exif data là dữ liệu thông tin về một hình ảnh như: ngày giờ chụp, vị trí chụp, kích thước ảnh, loại camera sử dụng… Những thông tin này được lưu tự động khi chụp bằng máy ảnh kỹ thuật số, và được đi kèm với file ảnh đó.
Google cũng có thể sử dụng EXIF data trong thuật toán xếp hạng của mình.
Trong video clip này (tiếng Anh), Google nói rằng EXIF có thể là một tiêu chí xếp hạng ảnh. Do đó, bạn nên giữ thông tin này nguyên vẹn, trừ khi bạn quyết định phải bỏ đi để giảm kích thước file ảnh khi tối ưu.
Nếu bạn muốn hình ảnh trên trang web của mình được xếp thứ hạng cao với những từ khóa mang tính địa phương (localized keywords), hãy tìm cách đưa tên địa phương đó vào hình ảnh, và những vị trí khác.
Chẳng hạn với ảnh du thuyền ở trên, nếu doanh nghiệp của bạn kinh doanh du thuyền tại Hạ Long, thì cần đưa thêm tên địa danh này vào tên file (du-thuyen-tren-vinh-ha-long.jpg), vào thẻ Alt Text (Du thuyền 4 tầng màu trắng trên vịnh Hạ Long), cũng như vào thuộc tính caption, hay dòng chú thích của ảnh.
Thực ra đây là một cách ứng dụng kỹ thuật SEO Local, rất hiệu quả cho doanh nghiệp cung cấp sản phẩm dịch vụ hướng tới 1 địa phương cụ thể.
Nếu bạn biết cách làm, hoặc có thể đề nghị người lập trình web làm, thì bạn nên cân nhắc việc tạo sơ đồ hình ảnh cho toàn website của bạn, dạng file là images_sitemap.xml. Việc này sẽ có lợi về mặt SEO vì các Search Engine dễ lập chỉ mục theo dõi.
Bước này không bắt buộc, và cũng không nhiều bên thực hiện. Tuy nhiên, nếu muốn làm SEO chuyên nghiệp và bài bản, chắc chắn bạn sẽ quan tâm. Điều này đặc biệt hữu ích cho những site mà vai trò của hình ảnh lớn, chẳng hạn như các website về thương mại điện tử bán hàng.
Những thông tin chứa trong file sitemap cho hình ảnh:
Bạn có thể tự tạo file này, nhưng theo tôi nên dùng công cụ có sẵn sẽ tiết kiệm thời gian công sức nhiều hơn, chẳng hạn như Screaming Frog SEO Spider (phần mềm cài trên máy tính)
Sau khi tạo xong, bạn tải lên thư mục gốc là xong, tương tự như cách làm với file sitemap.xml
Thực ra, vẫn còn một số biện pháp nữa có thể áp dụng để SEO hình ảnh. Nhưng số đó liên quan nhiều đến kỹ thuật và hơi khó thực hiện, mà bài viết cũng đã khá dài, nên tôi sẽ bổ sung thêm nếu cần thiết.
Hiện tại chúng tôi đang có chương trình khuyến mãi thiết kế web được thiết kế logo miễn phí + tên miền + hosting + hướng dẫn quảng cáo seo tổng thể marketing online miễn phí. Hãy liên hệ chúng tôi để biết thêm chi tiết.
