Image gallery SEO

We have 2 methods to improve gallery SEO. You can use one or both.

1. ImageGallery schema

If you want search engine index your images in galleries, you have to map gallery and your pages. Here is steps

1. Go to Gallery list, click SEO button.
2. Choose Page type, then page that you added current gallery.
3. Enable XO Gallery SEO in your theme customizer

After this, your page (that you choose in step 3) will has this schema:

{
  "@context": "http://schema.org/",
  "@type": "ImageGallery",

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

For more information about ImageGallery schema, you can check here.

2. Inline HTML

By default, the gallery starts with this HTML:

<div class="xo-gallery" data-id="1"></div>

Then the script will load your images dynamically into this tag. If you don't want the schema method, we have an option with <img tags here so search engine can read it:

1. Go to the app settings and enable "Add image tag to HTML embed code (improve SEO)"
2. Use XO Gallery section to load your gallery (Other publish methods will not have inline HTML)

Then your HTML will look like this

<div class="xo-gallery" data-id="1">
    <div><img src="https://cdn.shopify.com/s/files/1/0048/2272/8817/files/img1.jpg" alt="Alt text or title will be here" loading="lazy" width="1280" height="1919" /></div>
    <div><img src="https://cdn.shopify.com/s/files/1/0048/2272/8817/files/img2.jpg" alt="Alt text or title will be here" loading="lazy" width="1280" height="1919" /></div>
</div>

Alt text

If the alt text is blank, we use the title for alt text here.