Comment on page
SEO-friendly image URL
Give your images an SEO-friendly name without modifying the actual file name in the storage
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
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.
https://ik.imagekit.io/demo/DSC1234.jpg
You can dynamically use eiffel-tower.jpg as the file name using
ik-seo
parameter. For example:https://ik.imagekit.io/demo/ik-seo/DSC1234/eiffel-tower.jpg
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
.extensionIf 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
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
Javascript
React
Vue.js
// Without ik-seo
var imageURL = imagekit.url({
path: "/default-image.jpg",
urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/",
transformation: [{
height: 300,
width: 400
}]
});
// With ik-seo
var imageURL = imagekit.url({
path: "/default-image/seo-friendly-file-name.jpg",
urlEndpoint: "https://ik.imagekit.io/your_imagekit_id/ik-seo",
transformation: [{
height: 300,
width: 400
}]
});
// Without ik-seo, urlEndpoint has been defined in parent IKContext
<IKImage
path="/default-image.jpg"
transformation={[{
height: 300,
width: 400
}]}
/>
// With ik-seo
<IKImage
urlEndpoint="https://ik.imagekit.io/your_imagekit_id/ik-seo"
path="/default-image/seo-friendly-file-name.jpg"
transformation={[{
height: 300,
width: 400
}]}
/>
// Without ik-seo, urlEndpoint has been defined globally
<ik-image
path="/default-image.jpg"
:transformation="[{height:300,width:400}]"
/>
// With ik-seo
<ik-image
path="/default-image/seo-friendly-file-name.jpg"
:transformation="[{height:300,width:400}]"
urlEndpoint="https://ik.imagekit.io/your_imagekit_id/ik-seo"
/>
Last modified 2yr ago