Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Preserving image filenames in Sanity CDN URLs for SEO visibility

6 replies
Last updated: Apr 28, 2021
Hey everyone 👋 long-time lurker, first-time poster. I’ve been building sites and templates with Gatsby/Sanity together for a while now and along the way a fair few clients have asked me how to preserve image filenames in generated CDN URLs for SEO visibility. I’ve got as far as manipulating the 
originalFilename
, but I can’t find anything on how Sanity manages filename generation when exporting imagery out to and hosting on the CDN. If anyone has any experience in this realm your help or advice would be much appreciated
Mar 22, 2021, 11:07 AM
Hi
user H
👋 The CDN lets you add 
/someFilename.jpg
 at the end of an image/file URL, while still working with the usual parameters (and things like webp format support).
This should allow you to add the 
originalFilename
(or any other field you’ve prepared for this) at the back of a URL as follows:
<https://cdn.sanity.io/images/><projectId>/<dataset>/<hashedFileName>/<originalFilename>?<params>
Does that help?
Mar 22, 2021, 11:49 AM
Thank you, that’s really good to know! Are you able to confirm if the images including the 
originalFilename
are indexed by Google?
For example:

<https://cdn.sanity.io/images/><projectId>/<dataset>/98767cd8f798987.../Cats-in-suspicious-clothing.jpg?w=800&h=450&fit=crop
^ If I search for “cats in suspicious clothing”, am I likely to find some variant of this Sanity CDN-hosted image?
Mar 22, 2021, 11:54 AM
Never mind, I wrote a component that inserts the original filenames into fluid URLs. End result is that the full filename is available in the src/srcset &lt;img&gt; attributes, but the images look and work the same as they did. Thanks for the help!
Mar 22, 2021, 1:30 PM
Awesome intel here pals! 🙏
Apr 16, 2021, 5:20 PM
user M
Is there a way to add 
/someFilename.jpg
when using Gatsby image?
Apr 21, 2021, 4:00 PM
user A
You could enrich your fluid URLs with 
/someFilename.jpg
(as 
originalFilename
), e.g.
  const {
    asset: { fluid, description, originalFilename, title }
  } = image; // Sanity image data

  const fluidKeys = Object.keys(fluid);
  const fluidEnriched = {};

  if (fluidKeys?.[0]) {
    fluidKeys.forEach((fluidKey) => {
      let value = fluid?.[fluidKey]?.toString();

      if (value.includes(`.jpg`)) {
        value = value.replace(/.jpg/g, `.jpg/${originalFilename}`);
      } else if (value.includes(`.png`)) {
        value = value.replace(/.png/g, `.png/${originalFilename}`);
      } // other filetypes

      fluidEnriched[fluidKey] = value;
    });
  }
Then

import Img from "gatsby-image";

<Img fluid={fluidEnriched} />
Apr 28, 2021, 9:26 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?