Like many publishers on the web, here at POPSUGAR we pay close attention to SEO traffic and performance. One of many tricks we learned long ago was including a name or description of an image in the image URL itself. For example, the following image is part of a Leonardo DiCaprio slideshow.
https://media1.popsugar-assets.com/files/thumbor/g-REm8JYskVumst4SUXUGIAu3jw/fit-in/1024×1024/filters:format_auto-!!-:strip_icc-!!-/2016/03/21/629/n/1922398/aee62ec258f74088_GettyImages-516700486/i/Funny-Leonardo-DiCaprio-Pictures.jpg
Including a small description in the URL can give the search engine a little more information about the photo.
Unfortunately, this can become problematic for a couple of reasons. First of all, you would need to know the information about the image before creating the file on S3. Also, if the editor later decided to change the description, we would have to find all the places that image is referenced, and change them to point to the new file or renamed file. If you’ve cached multiple cuts of that image for different devices, your headache has now increased further.
So one obvious solution is to have your webserver rewrite the file name, but that undermines image caching at your CDN edge point, unless of course, you could somehow add that logic at the edge. Enter AWS Lamda@Edge: With a very small chunk of Javascript code, we rewrite every image URL to match the underlying filename in S3, preserving our edge cache and allowing our CMS to generate whatever filename is appropriate for the image as decided by the editor. This allows us to keep and change our nice SEO image names without having to sacrifice edge cache performance.
In the future, as Lamda@Edge capabilities mature, we plan to move more image functionality to the edge, allowing us to serve more device optimized images. We also intend to use it to make intelligent caching decisions about HTML and other content types.
This post originally appeared at https://engineering.popsugar.com/Image-SEO-AWS-LambdaEdge-43932970.