Từ Lightroom đến WordPress: tạo hình ảnh tối ưu hóa cho SEO

WordPress là phần mềm sở hữu 25% thị trường website. Các website lớn như The New York Times, CNN và Forbes đều sử dụng WordPress để vận hành website của họ.

WordPress dành cho người phát triển web, Adobe Lightroom dành cho nhiếp ảnh gia. Trong hướng dẫn này, bạn sẽ học cách sử dụng hai công cụ mạnh mẽ này song hành. Bạn sẽ học cách lấy hình ảnh từ Lightroom và đưa vào website trên nền WordPress một cách nhanh chóng và dễ dàng. Quan trọng nhất, chúng tôi sẽ làm điều đó theo phương pháp thân thiện với SEO để hình ảnh của bạn được người xem tìm thấy.

SEO hình ảnh cho người mới bắt đầu

Tối ưu hóa bộ máy tìm kiếm (còn được gọi là SEO) là tập hợp các thiết kế có liên quan, xuất bản và thực hành quản lý dữ liệu giúp các website được tìm thấy. Sự thật là không có bất kỳ phép màu nào khi nói đến SEO cho hình ảnh. Tất cả chủ yếu là bổ sung nội dung cho ảnh của bạn để máy tính hiểu chúng.

Thông tin semantic

Hãy nghĩ theo cách này: bạn nhập chuỗi truy vấn tìm kiếm vào bộ máy tìm kiếm mà bạn chọn. Bộ máy tìm kiếm hiển thị cho bạn danh sách các trang kết quả mà nó nghĩ là phù hợp với điều bạn đang tìm kiếm. Bộ máy tìm kiếm sử dụng các crawler (trình thu thập thông tin) — các chương trình máy tính cùng với những thuật toán — tự động dò tìm web và tạo danh sách các website phù hợp với từ khóa.

Bộ máy tìm kiếm có thể cho biết hình ảnh trên website nhưng không dễ xác định mô tả của hình ảnh là gì, vì vậy chúng tôi cần bổ sung dữ liệu cho hình ảnh, một dạng dữ liệu mà bộ máy tìm kiếm có thể hiểu được. Loại dữ liệu này được gọi là thông tin semantic: đó là thông tin giúp tạo nên ý nghĩa cho các ảnh riêng lẻ trong ngữ cảnh với nhau và phần còn lại của website. Chúng tôi sử dụng các trường metadata (siêu dữ liệu) để chuyển tải dữ liệu ngữ nghĩa này.

Google tìm một số tag ẩn trong HTML của chúng ta để giúp tìm hình ảnh. Chúng ta có thể thêm titles, tags và alt text vào code của website của chúng tôi để giúp bộ máy tìm kiếm lập chỉ mục website của chúng ta theo cách dễ dàng nhất có thể. Không bảo đảm rằng việc bổ sung thông tin semantic sẽ giúp bạn đưa website của mình lên trang đầu của kết quả tìm kiếm, nhưng thực hiện một số bước SEO cơ bản chắc chắn có thể giúp tăng cơ hội của bạn. Nó cũng chỉ là những dữ liệu tốt!

Dưới đây là 4 phần chủ đạo để tối ưu hóa SEO cần thêm vào hình ảnh của bạn:

Tên các file

Nếu bạn không làm gì khác, hãy bảo đảm rằng bạn đổi tên hình ảnh của bạn theo ý mô tả về chúng. Một tên file đơn giản như "resizing-images-tutorial.jpg" là một cải thiện lớn so với "IMG_9052.cr2". Sử dụng một tên file với một số từ mô tả về nó sẽ gia tăng cơ hội được tìm thấy.

Khi export file từ ​​Lightroom, tôi thích thực hiện việc này bằng cách sử dụng phần "File Naming" của cửa sổ export. Hãy nhớ rằng chúng ta muốn đổi tên hình ảnh đã export, chứ không phải file gốc. Tìm phần File Naming và chọn Rename To. Sau đó chọn tùy chọn dropdown chứa "custom name" để chúng ta có thể thêm văn bản tùy chỉnh của riêng mình.

Bước cuối cùng là thêm văn bản riêng. Đối với web, tốt nhất là tách các từ trong tên file bằng dấu gạch ngang thay vì dấu cách khoảng trắng. Thay đổi tên file của từng ảnh để đạt kết quả tốt nhất.

Alt Text

Alternative Text (nội dung thay thế) hoặc "alt text", được sử dụng để mô tả nội dung của hình ảnh. Hãy nhớ rằng một bộ máy tìm kiếm không thể xác định những gì trong một hình ảnh (chưa xác định được) vì vậy chúng ta cần phải giúp nó bằng cách sử dụng alt text.

Có thể bạn sẽ không bao giờ thấy alt text; đó là phần quan trọng với một bộ máy tìm.

Alt Text được đặt trong cùng một bit của HTML chứa hình ảnh của bạn. Sử dụng alt text để bổ sung mô tả cho hình ảnh. Mô tả ngắn về nội dung của hình ảnh rất quan trọng giúp thân thiện với SEO. Nếu code không phải là điều bạn có thể làm, không phải lo lắng; chúng ta sẽ xem làm sao để thêm alt text bằng cách dùng WordPress ở phần tiếp theo của hướng dẫn này.

Có alt text cho hình ảnh của bạn cũng rất quan trọng đối với người khiếm thị. Phần mềm đọc màn hình được thiết kế để giúp những người bị mất hoàn toàn hoặc một phần thị lực đọc alt text của hình ảnh. Amherst College có bài hướng dẫn tuyệt vời để tối ưu hóa khả năng truy xuất cho các website của bạn.

Titles (tiêu đề)

Title của hình ảnh cũng phải chứa trong HTML tag. Title phải là một phiên bản ngắn hơn của desciption (mô tả), chỉ bằng một vài từ để cho biết nội dung của ảnh.

Title là một phần khác của mảnh ghép để hỗ trợ các bộ máy tìm kiếm lập chỉ mục website của chúng ta. WordPress có trường title sẽ hồ trợ nỗ lực SEO của chúng ta.

Caption (phụ đề)

Hãy coi caption là văn bản hiển thị thức thời sau khi một hình ảnh cung cấp thêm phần bình phẩm. Caption không thêm trực tiếp vào image tag, nhưng dĩ nhiên bổ sung nó. Trong HTML5, thẻ là thuộc về nhóm , thậm chí còn tốt hơn. Bạn có thể tìm hiểu thêm về cách viết caption hiệu quả trong bài Dawn Oosterhoff's Caption, Description, Title, ALT: How to Add Semantic Information to Images. Viết caption rõ ràng là một trong những kỹ năng bị đánh giá thấp nhất, nhưng đó là kỹ năng hữu ích cho các nhiếp ảnh gia!

• HTML
  Quick Tip: Consider Wrapping Your Code With a “figure” Element
  Sam Berson
• Digital Asset Management
  Caption, Description, Title, ALT: How to Add Semantic Information to Images
  Dawn Oosterhoff

Ánh xạ metadata từ Lightroom đến WordPress

Bây giờ chúng ta đã hiểu các yếu tố quan trọng khi SEO hình ảnh, hãy xem làm sao để dễ dàng và nhanh chóng thêm chúng website trên nền WordPress của chúng tôi. Chúng tôi có thể chuyển tiếp title và caption của hình ảnh từ danh mục Lightroom của chúng tôi đến WordPress.

Trong mô-đun Thư viện Lightroom, tìm bảng siêu dữ liệu ở bên phải. Bạn có thể xem tiêu đề hình ảnh và chú thích.

Khi bạn xuất hình ảnh từ Lightroom, hãy đảm bảo rằng bạn đang bao gồm "tất cả siêu dữ liệu". Điều này sẽ đảm bảo rằng tiêu đề và chú thích được lưu vào hình ảnh JPEG và sẽ được đọc và đưa vào bởi WordPress.

Tải lên WordPress

Khi bạn đã xuất một file hình ảnh được đặt tên gọn gàng có tiêu đề và bộ chú thích, bạn đã sẵn sàng tải nó lên WordPress. Truy cập Thư viện phương tiện WordPress và tải lên hình ảnh này như bình thường. Hình ảnh được tải lên sẽ có cùng tiêu đề và chú thích mà chúng tôi đã đặt trong bảng siêu dữ liệu của Lightroom!

Bạn sẽ cần phải thêm alt text theo cách thủ công vào hình ảnh khi họ truy cập WordPress. Thật không may, không có một trường trong Lightroom ánh xạ tới "alt text" trong WordPress. Hãy nhớ rằng đây là văn bản ẩn trong mã HTML sẽ giúp bộ máy tìm kiếm tìm và lập chỉ mục hình ảnh của chúng tôi.

Sau khi đặt alt text, nhấn Cập nhật để lưu hình ảnh. Khi bạn chèn nó vào một bài viết hoặc trang, WordPress sẽ thực hiện thông qua siêu dữ liệu và bao gồm siêu dữ liệu mà chúng tôi đã thêm vào trong mã HTML.

Các bước này là một trợ giúp chính để tối ưu hóa hình ảnh cho web. Chúng tôi cũng có thể tiến thêm một bước nữa bằng cách thay đổi kích thước và nén hình ảnh cho web.

Thay đổi kích thước cho Web

Bắt hình ảnh sẵn sàng cho web không chỉ là tải chúng lên bằng từ khóa và thả chúng trong WordPress. Chúng tôi cũng cần suy nghĩ về kích thước và kích thước file. Hãy nhớ rằng một phần lớn dân số kết nối internet không đủ may mắn để có được kết nối băng thông rộng tuyệt vời và chúng tôi cũng nên xem xét trải nghiệm của họ.

mobiForge gần đây đã viết rằng kích thước file website trung bình lớn hơn toàn bộ trò chơi video cổ điển năm 1993 Doom. Đây không phải là một điều xấu, nhưng là một lời nhắc nhở tuyệt vời rằng các website có đầy đủ các hình ảnh đa phương tiện và hình ảnh lớn hơn bao giờ hết. Nó phục vụ như một lời nhắc nhở tuyệt vời rằng chúng ta nên luôn luôn tối ưu hóa kích thước file hình ảnh của bạn.

Khi chúng tôi sẵn sàng gửi hình ảnh lên web, có hai yếu tố chính để tối ưu hóa cho: thứ nguyên và chất lượng. Hãy xem làm thế nào để hoàn thiện cả hai.

Thứ nguyên

Kích thước của hình ảnh kỹ thuật số là chiều dài và chiều rộng của hình ảnh, được đo bằng pixel. Một hình ảnh được cho là "600 x 400 pixel" được phỏng đoán có chiều rộng 600 pixel và chiều cao 400 pixel.

Ảnh được chụp bằng Canon 6D của tôi là 5472 x 3648 pixel. Vào thời điểm bạn nhìn thấy chúng trên Tuts +, chúng bị ràng buộc trong bố cục tới 850 pixel ở mặt dài. Về mặt lý thuyết, tôi có thể tải lên hình ảnh đầy đủ, nhưng không có vấn đề gì nó sẽ xuất hiện ở mức tối đa là 850 pixel.

Hiệu ứng này chính xác là lý do tại sao tôi luôn đổi kích thước hình ảnh của mình thành định dạng thân thiện với web. Người xem của tôi không có màn hình hiển thị từng pixel, vì vậy, chỉ cần thay đổi kích thước hình ảnh và tiết kiệm thời gian tải.

Kích thước chính xác cho hình ảnh trên web là gì? Câu trả lời là, "nó phụ thuộc vào nơi nó đi." Nếu bạn đang sử dụng WordPress, hãy kiểm tra tài liệu cho chủ đề của bạn để biết chiều rộng hình ảnh được hỗ trợ. Nhà phát triển xác định cách hình ảnh sẽ xuất hiện trong một chủ đề WordPress. Nếu tài liệu không có sẵn, hãy thử một website như PiliApp để thực hiện các phép đo của riêng bạn trên một hình ảnh trên website mà bạn sẽ xuất bản.

Phẩm chất

Hình ảnh chất lượng cao sử dụng nhiều không gian đĩa hơn. Hình ảnh càng chi tiết và đầy màu sắc thì file càng lớn. Mặc dù kho lưu trữ hình ảnh của chúng tôi phải bao gồm những hình ảnh chất lượng đầy đủ này, việc chuẩn bị hình ảnh cho web có nghĩa là tạo ra sự cân bằng giữa chất lượng và kích thước file. Việc cung cấp một chút chất lượng sẽ dẫn đến thời gian tải nhanh hơn nhiều cho người xem.

Khi xuất trong Lightroom, bạn có thể sử dụng thanh trượt Quality để điều chỉnh chất lượng đầu ra của hình ảnh. Đó là thang điểm 0-100, với hình ảnh chất lượng 0 hiển thị kích thước file nhỏ nhất. Hình ảnh chất lượng 100 sẽ tối đa hóa cả chất lượng và kích thước file.

Một trong những cách yêu thích của tôi để kiểm soát kích thước file là sử dụng tùy chọn "Giới hạn kích thước file đến". Tôi thường xuyên sử dụng tùy chọn này khi tôi xuất hình ảnh để xuất bản trên Tuts +, với điều kiện Tuts + có giới hạn 150 kilobyte cho hình ảnh trong bài viết.

Sử dụng tùy chọn "Giới hạn kích thước file đến" sẽ bỏ qua toàn bộ thanh trượt chất lượng. Thay vì chọn chất lượng từ 0 đến 100, bạn có thể chỉ cần đặt kích thước file tối đa (tính bằng kilobyte) và Lightroom sẽ chọn cài đặt chất lượng cho bạn.

Từ trải nghiệm của tôi, khi sử dụng thanh trượt chất lượng cho hình ảnh trên web, tôi thường sẽ để cài đặt chất lượng trong khoảng 60-75. Đây có vẻ là điểm thú vị cho kích thước file và chất lượng hình ảnh. Tăng thanh trượt vượt xa mức đó mang lại một file lớn hơn nhiều mà không có nhiều sự khác biệt về thị giác.

Nếu bạn muốn tìm hiểu thêm về các khóa để thay đổi kích thước hình ảnh cho web, hãy xem bài viết của tôi từ năm ngoái, Cách xuất JPG cho Web từ Adobe Photoshop Lightroom. Trong khi trọng tâm của hướng dẫn này là siêu dữ liệu cho SEO, kích thước hình ảnh vẫn là một phần thiết yếu của việc tìm kiếm thân thiện.

Tóm tắt & Tiếp tục học tập

Trong hướng dẫn này, chúng tôi đã giới thiệu cách chọn trái cây treo thấp để xuất hình ảnh từ Lightroom sang website WordPress. Không phạm lỗi; điều này sẽ không ngay lập tức quay website của bạn lên đầu Google cho các thuật ngữ phổ biến, nhưng nó sẽ đi một chặng đường dài trong việc giúp ai đó tìm thấy hình ảnh của bạn.

Cần lưu ý rằng có một số plugin WordPress, hoặc phần bổ trợ, có thể tự động hóa quá trình này. Tuy nhiên, các plugin không được cập nhật thường xuyên có thể khiến website của bạn gặp phải lỗ hổng bảo mật. Bạn cũng phải dựa vào một nhà phát triển duy trì khả năng tương thích của plugin với các phiên bản mới của WordPress. Hai plugin phổ biến bao gồm WP/LR Sync và LR/Blog.

Nếu bạn muốn tìm hiểu thêm về WordPress, mục Tuts+ code có nội dung phong phù về thay đổi và mở rộng cho WordPress. Mục photo và video cũng có chứa nhiều nội dung của Adobe Lightroom nếu như bạn muốn trau chuốt các kỹ năng đó.

Sau cùng, SEO là một lĩnh vực nghiên cứu liên tục thay đổi. Google liên tục cập nhật thuật toán họ dùng để tìm các trang mà họ nghĩ phù hợp nhất với truy vấn tìm kiếm. Bên ngoài có rất nhiều lời khuyên không tốt và "thủ thuật" cho SEO. Nguồn tham khảo tốt nhất của tôi cho SEO là Blog Moz. Các kỳ tài tại Smashing Magazine cũng có một bài viết rất hay về cách xây dựng một website tối ưu hóa SEO.

Bạn sẽ làm gì để làm cho hình ảnh của mình sẵn sàng trên web? Hãy cho tôi biết trong phần bình luận.