Optimizing your images is one thing, but optimizing a page filled with images really is another. Of course, there is a certain overlap in how to optimize a single image and a gallery. In this post, I will go over the things you need to take into account when using photo galleries on your website.
Social sharing of galleries
I have been testing social sharing of galleries on Twitter and Facebook but found that all the good stuff like Twitter Gallery Cards have disappeared.
Twitter and multiple images
The ‘Summary Card with Large Image’ replaces the deprecated Gallery Card, which allowed you to share photo galleries via Twitter as well. Currently, this isn’t possible. If you want to show multiple images in a Tweet (or Facebook post for that matter), you’ll have to upload these manually.
My recommendation when sharing a page that contains a photo gallery as the primary content of that page, is to upload three or four images from that gallery to Twitter, which will result in a tweet like this:
— World Press Photo (@WorldPressPhoto) February 18, 2016
The fact that you have to upload these images to Twitter seems to fit the ‘all your content belongs to us’ trend in social media ;)
Facebook photo albums
Facebook allows you to add photo albums. As Google and Facebook have little overlap, you might want to consider creating a Facebook album for your photo gallery as well. Promote it separately. I totally understand that you primarily want your photo gallery on your website and your website only. From my personal experience, I can tell you that a proper Facebook album also works well. Be sure to add the right title and description. Your Facebook page might have a different audience than your website. Be sure to test this for your own content.
The title of your photo gallery
The one thing everyone can control is the title of your gallery. It’s the title of the page. And it’s the title that will most probably show up in Google’s search result pages as well. In our WordPress SEO article, we already mentioned that you should make sure the title is topical, and contains the keyword you want to optimize that gallery for.
In the article, and in our plugin’s content analysis, we recommend adding that keyword early in the title, which Google seems to like. Besides that, scanning the search result becomes easier with the desired keyword as one of the early words.
Introductory content for your gallery
Every time we discuss taxonomies, categories or things like that, we mention introductory content. Like your category pages, a photo gallery is a collection of things. It doesn’t matter if these collections contain posts or images, you want to tell your visitor (and Google) what the common ground for your collection is.
Explain why you set up the gallery:
- Are these photos from a certain event?
- Are these photos of a certain product?
My gut feeling tells me these are the two main reasons to set up a photo gallery (feel free to add yours). Describe the event or product and by all means link to other pages that contain more in-depth information about the topic. Your introductory content should be the glue that connects all the separate items together, but shouldn’t have to be the main content you want to rank with for a certain topic. If it is, your gallery is probably illustrative and not the main part of your page’s content.
The obvious: alt tags, captions, and file names
There are similarities in optimizing images and photo galleries. You have to make sure your alt tags are descriptive. For better scanning and a text to accompany the images in your gallery, you want to add captions. For more information on how to do this, I’d like to point you to my article on image SEO.
If you want to go all the way, every single image in your photo gallery needs to have a unique, descriptive file name. In practice, this will probably almost never be the case. It’s a lot of work and depending on the subject of your gallery, there will be matching subjects. Most galleries will have filenames like
sunflowers.jpg will work better in the end. In reality, you’ll understand that this might be a bit too much hassle to be workable.
AMP and its carousel markup for galleries
We have been talking about AMP a lot lately. AMP has a way to deal with galleries as well. I have been testing this with a default WordPress gallery and the AMP plugin by Automattic. It creates a carousel of your gallery, which actually works pretty nice. This is done by adding the
amp-carousel tag, which helps “displaying multiple similar pieces of content along a horizontal axis; meant to be highly flexible and performant.” Examples can be found here.
The code for that would look something like this:
<amp-carousel width=300 height=400> <amp-img src="my-img1.png" width=300 height=400></amp-img> <amp-img src="my-img2.png" width=300 height=400></amp-img> <amp-img src="my-img3.png" width=300 height=400></amp-img> </amp-carousel>
Example taken from the ampproject.org website, by the way. The WordPress plugin creates just that for you.
The only thing that seems to fail sometimes is scaling. This is not an odd issue I think, as AMP prefers set dimensions. I’m sure this will be fixed over time. Overall this is a really nice solution for displaying galleries in accelerated mobile pages.
When I was looking into similar plugins for Joomla! and Drupal, I found this piece of information telling me it’s coming to Lullabot’s Drupal AMP module later on. Weeblr released a Joomla! plugin called WbAMP, but I can’t locate any information on how it deals with images or, more specific, photo gallery handling there. Anyone tried this one already?
Wrapping things up
I understand that there are things in this post you can’t ‘just’ implement like that. Changing every single file name to match the subject of the image is a lot of work. I would recommend against doing that for your existing photo galleries, but it might be something to test in future ones. Always add introductions to your galleries, and make sure your captions and alt texts are correct. Just remember that it’s the entire page you want to rank, not just that single image!