SEO-friendly image URL

ImageKit helps you create SEO-friendly URLs dynamically
Image SEO starts with the file name. Google uses the URL path as well as the file name to understand your images.
For example, consider the following image of the Eiffel Tower:
The image URL should have "Eiffel Tower" instead of "DSC1234.jpg". 
Bad image URL
https://ik.imagekit.io/demo/DSC1234.jpg
SEO-friendly image URL
https://ik.imagekit.io/demo/eiffel-tower.jpg
Dynamic SEO suffix (ik-seo)
When you cannot modify the file names of already stored images, ImageKit helps you create SEO-friendly URLs dynamically.
For example, let say you have the following image of the Eiffel Tower.
1
https://ik.imagekit.io/demo/DSC1234.jpg
Copied!
Here, https://ik.imagekit.io/demo/ is your URL-endpoint.
You can dynamically use eiffel-tower.jpg as the file name using ik-seo parameter. For example:
1
https://ik.imagekit.io/demo/ik-seo/DSC1234/eiffel-tower.jpg
Copied!
So the following URL:

https://ik.imagekit.io/demo/ik-seo/DSC1234/eiffel-tower.jpg 
will fetch the same image as:

https://ik.imagekit.io/demo/DSC1234.jpg
Essentially
your-url-endpoint/old-file-name.extension 
becomes:
your_url_endpoint/ik-seo/old-file-name/seo-friendly-file-name.extension
Accessing file that is stored in a nested folder
If your file is stored inside a nested folder e.g.
https://ik.imagekit.io/demo/path/of/folder/old-file-name.jpg
You can still dynamically add an SEO-friendly suffix like this:
https://ik.imagekit.io/demo/ik-seo/path/of/folder/old-file-name/seo-friendly-file-name.jpg
Examples
Let's say we have the following URL:
https://ik.imagekit.io/your_imagekit_id/default-image.jpg
We want to change the file name from default-image.jpg to seo-friendly-file-name.jpg
So the new URL becomes
https://ik.imagekit.io/your_imagekit_id/ik-seo/default-image/seo-friendly-file-name.jpg
Let's do this using the client-side SDKs:
Javascript
React
Vue.js
1
// Without ik-seo
2
var imageURL = imagekit.url({
3
    path: "/default-image.jpg",
4
    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/",
5
    transformation: [{
6
        height: 300,
7
        width: 400
8
    }]
9
});
10
​
11
// With ik-seo
12
var imageURL = imagekit.url({
13
    path: "/default-image/seo-friendly-file-name.jpg",
14
    urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/ik-seo",
15
    transformation: [{
16
        height: 300,
17
        width: 400
18
    }]
19
});
Copied!
1
// Without ik-seo, urlEndpoint has been defined in parent IKContext 
2
<IKImage
3
  path="/default-image.jpg"
4
  transformation={[{
5
    height: 300,
6
    width: 400
7
  }]}
8
/>
9
  
10
// With ik-seo
11
<IKImage
12
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id/ik-seo"
13
  path="/default-image/seo-friendly-file-name.jpg"
14
  transformation={[{
15
    height: 300,
16
    width: 400
17
  }]}
18
/>
Copied!
1
// Without ik-seo, urlEndpoint has been defined globally 
2
<ik-image 
3
  path="/default-image.jpg"
4
  :transformation="[{height:300,width:400}]"
5
/>
6
​
7
​
8
// With ik-seo
9
<ik-image 
10
  path="/default-image/seo-friendly-file-name.jpg"
11
  :transformation="[{height:300,width:400}]"
12
  urlEndpoint="https://ik.imagekit.io/your_imagekit_id/ik-seo"
13
/>
Copied!
​

Private images

Next - ✨Features

Default Images

Last modified 7mo ago

Copy link

Contents

ImageKit helps you create SEO-friendly URLs dynamically

Dynamic SEO suffix (ik-seo)

Accessing file that is stored in a nested folder

Examples