Skip to main content

SEO & performance

Optimize your galleries for search engines and fast loading times to improve visibility and user experience.

SEO optimization​

The most effective way to help search engines understand and index your gallery images.

Setting up schema markup​

  1. Go to your Gallery list and click the SEO button on any gallery
  2. Choose the Page type where your gallery is published
  3. Select the specific page that contains your gallery
  4. Enable XO Gallery SEO in your theme customizer (App embeds section)

What this creates​

Your page will include structured data that search engines can read:

{
  "@context": "http://schema.org/",
  "@type": "ImageGallery",
  "associatedMedia":[
    {
      "@type":"ImageObject",
      "caption":"Alt text or title will be here",
      "contentUrl": "https://cdn.shopify.com/s/files/..."
    }
    // ... more images
  ]
}

Benefits:

  • Images can appear in Google Image search results
  • Rich snippets may show in search results
  • Better indexing of visual content
  • Improved local SEO for business galleries

Learn more about ImageGallery schema.

Method 2: Inline HTML tags​

Alternative SEO method that adds actual <img> tags to your page HTML.

Enabling HTML image tags​

  1. Go to Settings > General settings
  2. Enable "Add image tag to HTML embed code (improve SEO)"
  3. Use XO Gallery sections to publish your gallery (required for this method)

HTML output​

Instead of just a placeholder div, you'll get:

<div class="xo-gallery" data-id="1">
    <div><img src="https://cdn.shopify.com/..." alt="Alt text" loading="lazy" width="1280" height="1919" /></div>
    <div><img src="https://cdn.shopify.com/..." alt="Alt text" loading="lazy" width="1280" height="1919" /></div>
</div>

Benefits:

  • Search engines can crawl image content directly
  • Works with all SEO tools and analyzers
  • Fallback content if JavaScript is disabled
  • Better accessibility for screen readers

SEO best practices​

Image optimization​

  • Add alt text to every image for accessibility and SEO
  • Use descriptive titles that include relevant keywords
  • Choose meaningful filenames before uploading
  • Enable filename as title in settings for consistency

Content strategy​

  • Write compelling descriptions for images when relevant
  • Use galleries to support your content rather than as standalone pages
  • Include galleries in relevant blog posts to increase engagement
  • Create themed galleries around specific topics or keywords

Technical SEO​

  • Enable lazy loading to improve page speed
  • Use appropriate image sizes for faster loading
  • Set up proper URL structure for gallery pages
  • Include galleries in your sitemap (handled automatically)

Performance optimization​

Image optimization​

File size management​

  • Maximum recommended size: 2-3 MB per image for web use
  • Compression: Use tools like TinyPNG before uploading
  • Format selection: WEBP for modern browsers, JPEG for compatibility
  • Dimensions: Upload images at 2x your display size for retina screens

Thumbnail settings​

  1. Go to Gallery settings > Images section
  2. Set Thumbnail width based on your layout:
    • Grid galleries: 300-500px
    • Masonry galleries: 400-600px
    • High-res displays: 600-800px
Image quality vs. speed

Larger thumbnails mean better quality but slower loading. Test different sizes to find your optimal balance.

Loading performance​

Lazy loading​

  • Enable by default in gallery settings
  • Disable only if needed for above-the-fold galleries
  • Test on mobile where connections may be slower

Load more feature​

For galleries with many images:

  1. Enable Load more in gallery settings
  2. Set initial load to 8-12 images
  3. Use "Load 6 more" or similar increments

Appear effects​

  • Use sparingly - they look great but can impact performance
  • Test on slower devices to ensure smooth animations
  • Consider disabling on mobile for better performance

Page speed optimization​

  • Above the fold: Disable lazy loading for immediate visibility
  • Below the fold: Keep lazy loading enabled
  • Multiple galleries: Consider load more or pagination

Selective loading​

Enable "Enable XO Gallery for specific pages" in settings to:

  • Load gallery code only where needed
  • Reduce JavaScript bundle size on other pages
  • Improve overall site performance

SEO & Performance tips​

For SEO: Always add alt text and use schema markup For speed: Optimize image sizes and enable lazy loading

Congratulations! You've mastered all XO Gallery features. Check out our FAQs for common questions and solutions.