WordPress is a piece of software that powers as much as 25% of the web’s websites. Major websites like The New York Times, CNN, and Forbes all use WordPress to power their websites.
What WordPress is to web developers, Adobe Lightroom is to photographers. In this tutorial you’ll learn how to use these two powerful tools together. You’ll learn how to take your images from Lightroom and into a WordPress driven site quickly and easily. Most importantly, we’ll do it in a way that’s SEO-friendly so that your images get discovered.
Image SEO For Beginners
Search engine optimization (also known as SEO) is a set of inter-related design, publishing, and data management practices that help web pages to be found. The truth is, there isn’t really any magic to SEO when it comes to images. It all boils down to adding context to your pictures in a way that that makes sense to computers.
Semantic Information
Think of it this way: you enter a search query into the search engine of your choice. The search engine shows you a list of pages that match what it thinks you’re looking for. Search engines use crawlers—computer programs and algonrhithms— that explore the web automatically and build listings of sites that match keywords.
A search engine can tell that images are on a webpage, but it can’t easily determine what’s an image depicts, so we need to supplement it with additional data, a kind that it can understand. This kind of data is called semantic information: it’s information that helps build meaning for individual photographs in context to each other and the rest of the webpage. We use metadata fields to transmit this sematic data.
Google looks to some of the tags hidden in our HTML to help find images. We can add things like titles, tags, and alt text in our website’s code to help a search engine index our site as easily as possible. There’s no guarantee that by adding sematic informating you’ll be able
to move your site to the first page of Google’s results, but taking a
few basic SEO steps can definitely help your chances. It’s also just good data hygene!
Here are four key pieces of SEO optimization information to add to your images:
File names
If you do nothing else, make sure that you rename your images in a way that describes them. A simple filename like “resizing-images-tutorial.jpg” is a massive improvement over “IMG_9052.cr2.” Using a filename with some words that describe it will improve its chances of being found.
When exporting from Lightroom, my favorite way to do this is to use the “File Naming” section of the export window. Keep in mind that we want to rename the exported image, not the original file. Find the File Naming section and check the Rename To box. Then choose a dropdown option that includes “custom name” so that we can add our own custom text.
The last step is to add the custom text. For the web, it’s best to separate the words in a filename using dashes instead of spaces. Customize each image’s file name for the best results.
Alt Text
Alternative text, or “alt text”, is used to provide a text description of the contents of an image. Remember that a search engine can’t determine what’s in an image (yet) so we need to help it by using alt text.
You’ll probably never see alt text; the important part is that a search engine will.
Alt text is placed in the same bit of HTML that contains your images. Use it to add a description of the image. A short description of the contents of an image is critical for SEO-friendliness. If writing code isn’t you’re thing, no worries; we’ll look at how to add this alt text using WordPress in the next section of this guide.
Having alt text for your images is also crucial to the visually impaired. Screen reading software designed to help those who have full or partial loss of sight will read the alt text in place of an image. Amherst College has a great guide to optimizing your web pages for accessibility.
Titles
An image’s title should also be contained in the HTML tag. The title should be an even shorter version of the description, with only a few words that signal the content of an image.
Titles are another piece of the puzzle for helping search engines index our site. WordPress contains a title field that will help our SEO efforts.
Captions
Think of a caption as the text that shows immediately after an image that provides further commentary. Captions aren’t added directly to an image tag directly, but certainly do supplement it. In HTML5, the <figcaption> tag is part of the <figure> group, which is even better. You can learn more about how to write effective captions in Dawn Oosterhoff’s Caption, Description, Title, ALT: How to Add Semantic Information to Images. Writing a strong caption is one of the most under-rated skills, one that’s useful for every photographer!
HTMLQuick Tip: Consider Wrapping Your Code With a “figure” ElementSam Berson
Digital Asset ManagementCaption, Description, Title, ALT: How to Add Semantic Information to ImagesDawn Oosterhoff
Mapping Metadata from Lightroom to WordPress
Now that we understand the pillars of image SEO, let’s look at how to add them easily and quickly to our WordPress-driven site. We can carry forward an image’s title and caption from our Lightroom catalog to WordPress.
In the Lightroom Library module, find the metadata panel on the right side. You can see the image title and caption.
When you’re exporting an image from Lightroom, make sure that you’re including “all metadata.” This will ensure that the title and caption are saved to the JPEG image and will be read and included by WordPress.
Upload to WordPress
Once you’ve exported a neatly named image file with a title and caption set, you’re ready to upload it to WordPress. Go to the WordPress Media Library and upload this image as you normally would. The uploaded image will carry through the same title and caption that we set in the Lightroom metadata panel!
You’ll need to manually add alt text to images once they reach WordPress. Unfortunately, there isn’t a field in Lightroom that maps to “alternative text” in WordPress. Remember that this is the text hidden in the HTML code that will help search engines find and index our images.
After setting the alt text, press Update to save the image. When you insert it into a post or page, WordPress will carry through the metadata and include the metadata we’ve added in the HTML code.
These steps are a major aid for optimizing an image for the web. We can also go one step further by resizing and compressing images for the web.
Resizing for the Web
Getting images ready for the web is about more than just loading them up with keywords and dropping them in WordPress. We also need to think about the file size and dimensions. Remember that a huge portion of the internet connected population isn’t lucky enough to be on a great broadband connection, and we should consider their experience as well.
mobiForge recently wrote that the average webpage file size is larger than the entire 1993 classic video game Doom. This isn’t inherently a bad thing, but is a great reminder that webpages are more full of multimedia and large images than they’ve ever been. It serves as a great reminder that we should always optimize your image file sizes.
When we’re ready to send images to the web, there are two key factors to optimize for: dimensions, and quality. Let’s look at how to perfect both.
Dimensions
The dimensions of a digital image are the length and width of the image, measured in pixels. An image said to be “600 by 400 pixels” is inferred to be 600 pixels in width and 400 pixels in height.
Images captured with my Canon 6D are 5472 x 3648 pixels. By the time you see them on Tuts+, they’re constrained in the layout to 850 pixels on the long side. Theoretically, I could upload the full image, but no matter what it’s going to appear at a maximum of 850 pixels.
This effect is exactly why I always resize my images to a web-friendly format. My viewers don’t have monitors that show every single pixel, so it only makes sense to resize the image and save them the load time.
What’s the correct dimensions for an image on the web? The answer is, “it depends on where it’s going.” If you’re using WordPress, check the documentation for your theme for the image widths supported. The developer determines how images will appear in a WordPress theme. If documentation isn’t available, try out a site like PiliApp to do your own measurements on an image on the site you’ll be publishing to.
Quality
High quality images use more disk space. The more detailed and colorful an image is, the larger the file will be. Although our image archive should include these full quality images, preparing an image for the web means making trade-offs between quality and file size. Giving up a bit of quality leads to a much faster load time for the viewer.
When exporting in Lightroom, you can use the Quality slider to adjust the output quality of an image. It’s a 0-100 scale, with a 0 quality image rendering the smallest file size. A 100 quality image maximizes both quality and file size.
One of my favorite ways to control file size is to use the “Limit File Size To” option. I frequently use this option when I’m exporting images to publish on Tuts+, given that Tuts+ has a limit of 150 kilobytes for images in articles.
Using the “Limit File Size To” option bypasses the quality slider altogether. Instead of choosing a quality between 0 and 100, you can simply set a maximum file size (in kilobytes) and Lightroom will choose a quality setting for you.
From my experience, when using the quality slider for web images, I typically will leave the quality setting in the 60-75 range. This seems to be the sweet spot for file size and image quality. Increasing the slider far beyond that yields a much larger file without much visual difference.
If you want to learn more about the keys to resizing images for the web, check out my write-up from last year, How to Export JPGs for the Web from Adobe Photoshop Lightroom. While the focus of this tutorial is the metadata for SEO, image size is still an essential part of being search-friendly.
Recap & Keep Learning
In this tutorial, we’ve covered how to pick the low-hanging fruit for exporting images from Lightroom to a WordPress website. Make no mistake; this won’t instantly shoot your site to the top of Google for common terms, but it will go a long way in helping someone find your images.
It’s worth noting that there are several WordPress plugins, or add-on’s, that can automate this process. However, plugins that aren’t frequently updated can open your site to security vulnerabilities. You also have to count on a developer maintaining the plugin’s compatibility with new versions of WordPress. Two popular plugins include WP/LR Sync and LR/Blog.
If you want to learn more about WordPress, the Tuts+ code section has a wealth of content for modifying and extending WordPress. The photo and video section also has some extensive coverage of Adobe Lightroom if you want to sharpen those skills.
Finally, SEO is an ever-changing area of research. Google constantly updates their algorithm used to find the pages that they think match the search query the best. There’s a ton of bad advice and “tips” for SEO out there. My go-to source for SEO is the Moz Blog. The geniuses at Smashing Magazine also have a great write-up on how to build an SEO optimized website.
What are you doing to get your images ready for the web? Let me know in the comments section.
