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à thế nào?

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:

• Để 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.

Kỹ thuật chèn hình ảnh vào web

Đâ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.

1. Chọn tên file ảnh thích hợp

Tên file ảnh nên đặt theo nguyên tắc có lợi cho SEO, cụ thể:

• Tên file đặt theo cụm từ mô tả nội dung của ảnh, nên để tiếng Việt không dấu (hoặc tiếng Anh), các tiếng trong cụm từ được phân cách bằng dấu gạch giữa (-), chứ không nên dùng dấu gạch dưới (_), và cũng không nên viết liền tù tì nhau.
  => Chẳng hạn, với ảnh chụp về du thuyền du lịch thì đặt tên thế này là đúng cách: du-thuyen-tren-vinh-ha-long.jpg
  => Còn tên này là không tối ưu: image-12.jpg

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.

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:

• Mô tả cụ thể nội dung của ảnh (đúng chức năng của thẻ này), nhưng nên ngắn gọn. Người dùng cần biết ảnh ở vị trí đó nội dung như thế nào.
• Nên chứa từ khóa, nếu phù hợp. Đây là cơ hội để thực hiện SEO, vì vậy hãy đưa từ khóa ít nhất vào 1 tấm ảnh trong toàn bài viết, có thể đưa vào nhiều ảnh nếu nội dung có liên quan đến từ khóa.
• Không nhồi nhét từ khóa vào Alt Text, không ai thích bị spam, và Google cũng vậy.
• Cân nhắc sử dụng thuộc tính longdesc="" hình ảnh phức tạp và cần mô tả dài dòng (chi tiết trong phần dưới).

3. Title của hình ảnh

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.

3. Thêm chú thích cho ảnh (caption)

Đâ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ẻ

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.

3. Long descriptions

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.

4. EXIF data

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.

5. Thông tin mang tính địa phương (GEO location)

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ể.

6. Tạo sitemap hình ảnh

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:

• Loại ảnh (type)
• Chủ đề (subject)
• Nội dung thẻ Alt text
• Tiêu đề hình ảnh (title)
• Vị trí địa lý (geographic location)
• V.v...

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.