SEO & performance
Optimize your galleries for search engines and fast loading times to improve visibility and user experience.
SEO optimization
Method 1: ImageGallery schema (Recommended)
The most effective way to help search engines understand and index your gallery images.
Setting up schema markup
- Go to your Gallery list and click the SEO button on any gallery
- Choose the Page type where your gallery is published
- Select the specific page that contains your gallery
- 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
- Go to Settings > General settings
- Enable "Add image tag to HTML embed code (improve SEO)"
- 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
- Go to Gallery settings > Images section
- Set Thumbnail width based on your layout:
- Grid galleries: 300-500px
- Masonry galleries: 400-600px
- High-res displays: 600-800px
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:
- Enable Load more in gallery settings
- Set initial load to 8-12 images
- 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
Gallery placement
- 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.