What's in a File Naming Taxonomy?

Undoubtedly there will be a point in your future when you are outputting your hard work onto the front end of a website. You could already be there, or you could be a developer behind the curtain where the front end is a legendary magical place. Regardless of the language you are using or the masterpiece you are creating, you have files, hopefully, tons of files. How do you tell them apart without opening each and every one? You’ve used a file naming taxonomy to name them.

Let’s get this part out of the way:

1. There is no single file naming taxonomy to rule them all, this is not Lord of the Rings.
2. Each programming language and environment will have its own rules around structure, form, and organization, I will never ask you to deviate from that.
3. I humbly ask you to take my words as a recommendation to start a conversation, not the law.
4. I am a fan of long, descriptive file names, especially with images, you may not be and that’s ok. There are times when short file names are the only way to go, there are times you want to be more descriptive.
5. I’m an optimist. Yes, I live and breathe SEO but more importantly, I believe if there is anything you can possibly do to enhance your success with any search engine, you should consider it.

How many times have you opened a folder and seen something like this?

Remember later, this filename is brant-soler-what-file-naming-taxonomy-screenshot-screenshots.png.

Yes, I understand taking a screenshot of screenshots may, perhaps, open a black hole somewhere in the universe, please forgive me. How easy is it to tell one from another? How do I know which one is a screenshot of information I needed versus a screenshot of a sauerkraut recipe? That’s right, I don’t. Why? Because I neglected to deploy a file naming taxonomy to these images. Imagine if these files were dependencies and I needed to link to them while writing a program! Ouch!

Ok, here’s where the rubber meets the road…

You need to design file naming taxonomies for the work you are doing, you may have one handy to adopt, if not, here’s how you build one. There are three components to a file naming taxonomy, how you THINK about it, how you USE it, and how you DESCRIBE it.

Conceptualizing Filenames

Thinking about a file name is rather straightforward. What parts do you want to include in the file name? Here are some common elements:

• The name of the company you work for.
• The name of the project you are working on.
• The name of the program you are working on.
• Your name.
• Where the file is going to live when it is complete if it is a front-end file. IE: web, social platform, intranet, etc.
• The actual use of the image.
• How the image relates to the content on the page.
• How the file is to be used within the program.
• More than I can list here.

So how do you choose which elements you want to string together? That depends on what is most important to you and your goals. The last thing you want is a file name with over 80 characters! As the majority of my work is on the front end, here are some ideas in brackets, separated by dashes like train cars:

This is for images used all across a website:
[company name]-[image location]-[image use]

This is for images used on a single web page:
[company name]-[image location]-[page name]-[image use]

This is for an image used on social media when a page is linked:
[company name]-[social platform]-[image use]

This is for a video file uploaded to YouTube:
[company name]-youtube-[video title]

I have an idea of what you are thinking: “What? Do you pay attention to file names you upload to YouTube? Why?” The reality is, you will never see the file name again, you will see a shortened link and have the opportunity to embed this special link into any page you wish to upload it to. Here’s the kicker, the file name you upload will always persist within the system. If there is a chance, any chance at all, that this filename is used for the internal search engine, why not give it some love?

Using File Naming Taxonomies

There was once a time when I recommended using both dashes and underscores in file names for the front end. Life was a little simpler then because I could use the train analogy above and say “use dashes to separate your words and use underscores to separate your ideas”. Check out this wisdom direct from Google: Keep a simple URL structure. I believe this also applies to images, after all, if you were visiting this page “Architecture & Concepts” and looked at the coding behind the image “Pulumi Programming Model Diagram” you would see the file naming taxonomy used is [company name]-[image-use].

If you don’t want to click on the second link, the file name is https://www.pulumi.com/images/docs/pulumi-programming-model-diagram.svg. This is a perfectly formed two-part filename. Here is example file names based on our four examples above:

This is for images used all across a website:
pulumi-web-logo.svg

This is for images used on a single web page:
pulumi-web-fundamentals-platypus-scientist.png

This is for an image used on social media when a page is linked:
pulumi-twitter-fundamentals-platypus-scientist.png

This is for a video file uploaded to YouTube:
pulumi-youtube-what-is-infrastructure-as-code-introduction-to-pulumi.mov

Describing Files

This is exclusively for front end files. Everything a user will see, that is important for the context of the page needs to include an ALT tag. At your discretion, you could also use these values for tooltips, they can benefit SEO as you are providing more contextual information about what an object is. Just don’t go overboard and give every single file an ALT and HTML title!

Long ago in a galaxy far, far away, when underscores were allowed in addresses and file names…

It was easy to write a little script to grab the final component of a file name and create the ALT and HTML title tags from it. Here is an example:

pulumi_youtube_what-is-infrastructure-as-code-introduction-to-pulumi.mov

Simply iterate over the filename in reverse until you reach the first underscore. Clip every character forward to the period into a string for further processing. Here is what we would be left with:

what-is-infrastructure-as-code-introduction-to-pulumi

Next, capitalize the first letter and find & replace the dashes with periods. Don’t forget to include a subroutine that will recognize the company name and capitalize it. Here is what we would be left with:

What is infrastructure as code introduction to Pulumi

Next drop this string into the ALT tag and you’ve automated the creation of ALT tags. Snazzy.

Returning to Now

Now, you can enforce a strict file naming convention and run the process in a different way. Define the file naming taxonomy that will be output to the front end, like this:

This is for images used on a single web page: [company name]-[image location]-[page name]-[image use]

Here you can use the [page name], likely the page title, to pattern match within the file name and capture the image use by iterating from the end of the [page name] to the period. Don’t forget to clean your string before using it for your ALT or title tags!

How is this SEO?

There are three ways this touches on SEO. First, as a human, you are the search engine when you are digging through your file structure to catalog what is where so when you need to call it up, you can find it quickly. Secondly, when you give Google a descriptive file name to work with, what is related and relevant, you have a greater chance of that image being available in Google image search. The more images you have in Google search, the more value you are providing for Google. If you were Google, wouldn’t that be something to celebrate and reward? Third, when your image is output on the web, you’ve (hopefully) provided the ALT tag for screen readers and you are well on your way to ensuring your website meets W3 Accessibility Guidelines.

What do you think? Give it a try and tell me about it below. How did you alter the above to fit your project? What was the outcome?