SEO-friendly URLs with dynamic suffixes

SEO starts with the file name. Google uses the URL path and the file name to understand your images and videos.

For example, consider the following image of the Eiffel Tower.

The image URL ideally should have "Eiffel Tower" in the file name. This is more SEO-friendly than a generic file name, e.g., DSC1234.jpg.

When you cannot modify the file names of already stored images, ImageKit helps you create dynamic SEO-friendly URLs.

For example, let say you have the following image of the Eiffel Tower.

https://ik.imagekit.io/demo/DSC1234.jpg

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:

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.extension

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

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.

// 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"
/>