Image Gallery SEO

PhotoSwipe does not force any HTML markup, you have full control. Simplest markup is a list of thumbnails that link to large image, simplest example:

<a href="large-image.jpg">
    <img src="small-image.jpg" alt="Image description" />
</a>
...

If you have long caption that doesn't fit in alt or it just contains HTML tags, you may use <figure> and <figcaption>:

<figure>
    <a href="large-image.jpg">
        <img src="small-image.jpg" alt="Image description" />
    </a>
    <figcaption>Long image description</figcaption>
</figure>
...

You can go further and use Schema.org markup for ImageGallery and ImageObject, it should look like this:

<div itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>

        <!-- optionally use this method to store image dimensions for PhotoSwipe -->
        <meta itemprop="width" content="300">
        <meta itemprop="height" content="600">

        <figcaption itemprop="caption description">
            Long image description

            <!-- optionally define copyright -->
            <span itemprop="copyrightHolder">Photo: AP</span>
        </figcaption>
    </figure>

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Long image description</figcaption>
    </figure>

    ...

</div>

If you don't want thumbnails to be visible on page, e.g. you have 50 images in gallery and you show just first 3 thumbnails + link "view all images (50)", you definitely should use Schema.org markup and you should have all 50 links (with text in contents of link element instead of thumbnail) in DOM (you may hide them with display:none). Example:

<div itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image-1.jpg" itemprop="contentUrl">
            <figcaption itemprop="caption description">Long image description 1</figcaption>
        </a>
    </figure>

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image-2.jpg" itemprop="contentUrl">
            <figcaption itemprop="caption description">Long image description 2</figcaption>
        </a>
    </figure>

    ...

</div>

In all above cases, large-image.jpg will be perfectly indexed. The caption element will be crawled even if you hide it with display:none, just keep the text relevant, non-spammy – don't stuff it with keywords.

Additional recommendations

• Keep alt attribute short and descriptive. Leave long description for caption element.
• Google image publishing guidelines.
• Use Google or Yandex structured data testing tool to validate your Schema.org markup.
• High-resolution images rank better, usually 1680px on a wider side is more than enough.
• Image caption that is visible on initial page load will always rank better than hidden one. A good example of gallery layout that manages to keep both thumbnails and caption visible initially on page is the new Guardian gallery page.
• Optimize images size and format:
  
  • Good guide by Ilya Grigorik.
  • Tools: for Mac there is ImageOptim, for Windows – FileOptimizer or JPEGmini (limited lite version). Also, there are a lot of server-side/command-line tools like ImageMagick or jpegtran.
  • If you serve different images for high-DPI (e.g. retina) screens, reduce their JPEG quality to 20-40% to save file size, good article about this.
• You don't need to create image sitemap if you have links to images or/and valid Schema.org markup, but it can help you track how well they are indexed.
• Feel free to use srcset or <picture> for thumbnails.
• Be careful with number of thumbnails on a gallery page, slow page load speed can hurt rankings.
• Search engines index the direct link to the image file quite well, especially with Schema.org markup. But having a separate HTML page for each image is better when it has a descriptive and unique title, description and comments.

Know how this page can be improved? Please suggest an edit!

</> with <3 in by @dimsemenov