Image Naming Conventions for Increased Findability and SEO
Image Search is one aspect of Web Development typically overlooked by the vast majority of developers. While it may seem a distant second to the primary goal of Search, it’s actually not that far off. Image naming conventions, when properly applied, can aid in a sites Search, Searchability and Findability.
Typical image naming conventions in Web Development include image-01.png or even worse blargherghdadurpdedoo.png; while they do serve as a unique identifier and therefore conform to their primary purpose, they can be utilized for much more by providing machine-readable text that can be understood by bots when crawling your site(s). Bots have no clue what the below image is:
<img src="http://example.com/images/23432asaere.png"
But bots will have a clue if your image is titled as such:
<img src="http://example.com/images/jordan-dunking-vs-lakers.png"
Bots crawling your site will now index this image with reference to “Jordan Dunking vs. Lakers”, which provides an extremely more relevant and detailed description than “23432asaere”.
Apply the kiss Principle here: don’t overthink your file names, thereby (even if not intentional) spamming keywords via your file names. I like to rely on two or three word names for images.
Image Naming Rules
- Separate words with hyphens (
-) - Using at most two or three keywords
- Use only alphanumeric characters and hyphens in file names, not underscores (
_), spaces ( - Use descriptive Directory Naming Conventions in tandem with Image Naming Conventions
Added Benefits of Precise Image Naming Conventions
Image Naming Conventions also will aid in a sites Information Architecture, organizing files and directories to benefit your development team, as well as users and bots. Your team can also use them to track document versions, like so:
<img src="screenshot-issue-11-04-2009-001" />
Adding Precise Image Naming Conventions to Workflows
Adding image naming conventions to your workflow(s) is extremely easy and should not be overthought. Simply think about what an image is before you name it. If the image is part of a set, think about suffixing a number to the end of all the images in the set, or putting them all into a directory, that aptly names the set. It’s really that simple, and you’ll greatly benefit by making this part of your development process instead of a post development afterthought.