Sanity image filename changes not reflecting on production site

10 replies
Last updated: Nov 2, 2021
I renamed a lot of product images in the studio to make them SEO compatible.Apparently the name changes aren't reflected in the transferred files of the production site though.

I have tried to redeploy clearing cache and have searched through media to check that no other files with the names ending up in production (f.e.
bc4ade6a97553e67ac0e2c336f27004c8c7cd07c-1000x1000.png
) still exist.
Are file name changes only cosmetic for the Studio or do I possibly need to take certain additional steps?
AI Update

I understand your frustration! The filename changes you're making in Sanity Studio are indeed cosmetic for the Studio interface only - they don't automatically change the actual CDN URLs that your production site uses.

Here's what's happening: When you upload an image to Sanity, it's stored with a hash-based filename (like bc4ade6a97553e67ac0e2c336f27004c8c7cd07c-1000x1000.png). This hash is based on the file's content and ensures cache efficiency - it never changes unless the actual image file changes.

The Solution: Vanity Filenames

Sanity supports what's called "vanity filenames" for SEO purposes. You can append your SEO-friendly filename to the end of the hash-based URL, and it will still work perfectly!

The format is:

https://cdn.sanity.io/images/<projectId>/<dataset>/<hashedFileName>/<your-seo-filename.png>?<params>

For example:

https://cdn.sanity.io/images/yourproject/production/bc4ade6a97553e67ac0e2c336f27004c8c7cd07c-1000x1000.png/product-name-seo-friendly.png?w=800

Implementation Steps

  1. Query the original filename from your image asset documents (it's stored in the originalFilename field or you can use a custom field you've designated for SEO-friendly names)

  2. Append it to your image URLs when building them in your frontend code. If you're using @sanity/image-url, you'll need to manually append the vanity filename to the generated URL.

  3. Update your image URL builder to include this filename. For example:

    const imageUrl = urlFor(image).url() + '/' + image.asset.originalFilename

The beauty of this approach is that the hash portion remains unchanged (so caching works perfectly), but search engines see the SEO-friendly filename in the URL path, which is exactly what Google's image SEO guidelines recommend.

Important notes:

  • You don't need to re-upload images or clear caches
  • Just update how your frontend code constructs the image URLs
  • All image transformation parameters (like ?w=800&auto=format) continue to work normally after the vanity filename
  • The dl parameter you found is different - it forces a download with that filename, but doesn't change the URL for SEO purposes

So to answer your question directly: yes, the Studio filename changes are cosmetic, but you can achieve your SEO goals by implementing vanity filenames in your frontend code!

Show original thread
10 replies
Any input on this?

gatsby-source-sanity
is used in this case.
Hey Leo! Circling back to this. Sanity will always generate a random asset name. For SEO purposes, you can use the
originalFilename
property, as mentioned in this comment. You can find the original filename under
<asset>.originalFilename
. More on the asset object here .
Hey
user M
, thank you for the reply! How exactly should that then be used with
gatsby-source-sanity
?The comment you have linked to doesn't seem to indicate how to actually achieve that solution. I guess it would be possible to construct a url yourself (f.e. through
@sanity/image-url
) and that would mean not relying on the Sanity helper function or the source plugin (directly) for the image?
Ah, that's a good question. I'm not sure on that one, actually. Let me ask internally.
Ah, that's a good question. I'm not sure on that one, actually. Let me ask internally.
Thank you 🙂
It seems like this is really similar to what Christopher was looking to do in this thread. Can you try passing the original name as a parameter?
user M
I think he meant more that being able to pass the original filename as a parameter would be nice to have for the future and that he solved it another way without specifying what his workaround was.
user L
Do you mind me asking, what that workaround was?
I'm actually pulling the images through GraphQL, loading them into an array, and then doing a "lookup" (array key) --not ideal.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?