Unlimited After Effects and Premiere Pro templates, stock video, royalty free music tracks & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Photo & Video
  2. Metadata

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

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Digital Asset Management for Photographers (Learning Resource Guide).
How to Organize Your Photos in WordPress With WP Real Media Library
Getting Started With Photos for OS X

Vietnamese (Tiếng Việt) translation by Thai An (you can also view the original English article)

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.

Custom Name - Sequence
Sử dụng tùy chọn custom name để giúp tên file của bạn có cơ hội được tìm thấy cao hơn. Một vài từ mô tả nội dung của hình ảnh sẽ rất hiệu quả.

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.
Image alt text
Alt text của hình ảnh cũng phải được đặt trong HTML. Alt Text sẽ mô tả ngắn gọn về hình ảnh. Chúng tôi có thể đặt alt text này trong WordPress Media Player và WordPress sẽ tự động thêm nó vào.

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.

Image title text
Bạn cũng nên đặt title của hình ảnh trong HTML bằng thẻ "title =" trong cùng block hình ảnh. Lần nữa, WordPress làm cho điều này trở nên dễ dàng.

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!

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

Include metadata on export
Đảm bảo rằng khi xuất một hình ảnh, bạn bao gồm siêu dữ liệu trong file. Điều này sẽ làm cho siêu dữ liệu đó có sẵn trong 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!

Image Uploaded to WordPress
Cuối cùng, thành quả lao động của chúng ta! Tiêu đề và chú thích mà chúng tôi

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.

Alt text
Alt Text sẽ cần được thêm vào hình ảnh trong Thư viện phương tiện WordPress.

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.

Web Size Simulation
Mô phỏng này minh họa cho hình ảnh 10 megapixel ban đầu lớn như thế nào so với cách nó xuất hiện trên web. Xem trước hình ảnh lớn mà bạn thấy là phiên bản thu nhỏ của hình ảnh đầy đủ, 10 megapixel mà tôi đã chụp. Trong inset, kích thước đã được so sánh với cách nó xuất hiện trên Tuts +. Một hình ảnh 10 megapixel có chiều rộng đầy đủ có chiều rộng trên 4000 pixel, trong khi nó xuất hiện trong các bài viết Tuts + chỉ với 850 pixel ở phía dài. Đây là một minh họa tuyệt vời về lý do tại sao thay đổi kích thước là rất quan trọng.

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.

Image quality comparison
So sánh chất lượng hình ảnh này cho thấy một số khác biệt tinh tế giữa các cài đặt chất lượng khác nhau. Một số khác biệt có thể được quan sát thấy trong các chi tiết tốt hơn, cũng như các màu sắc trên bầu trời. Lưu ý rằng trong hình ảnh chất lượng thấp nhất, có một số "dải" trên bầu trời (đường tinh tế) trong khi hình ảnh có chất lượng cao hơn. Hình ảnh chất lượng 25 đã cho tôi một hình ảnh 91kb, trong khi hình ảnh chất lượng 100 là một hình ảnh 366kb. Đó là tất cả về việc tìm kiếm sự cân bằng về 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.

Limit File Size screenshot
Hộp "Giới hạn kích thước file" có thể được sử dụng thay vì thanh trượt chất lượng. Khi bạn chọn hộp trong cửa sổ xuất, chọn kích thước file tối đa cho hình ảnh của bạn và Lightroom sẽ làm cho nó hoạt động.

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.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.