Simple Filename Conventions for Web & SEO

JsKnox
2 min readApr 4, 2023

--

And stop banging your head trying to remember the name of dsc_1234_APPROVED-header Photos1#untitled##.tiff

It takes time, but pays dividends. The following recommendations provide a simple framework to get you started.

Basic Rules

  1. All lowercase.
    ex: logo.png > Logo.png
    avoids loss due to forgotten capitalization
  2. Dashes to separate words.
    ex: 2023-annual-report.pdf > 2023_annualreport.pdf
    this improves readability and cursor word selection
  3. No special characters (no spaces, underscores, capitals, accents, etc).
    ex: country-espana.pdf > country.España_.final.pdf
    ensures universal / web-safe compatibility
  4. Start with broad/common words and become more specific.
    ex: smith_bob_portrait.jpg > portrait-of-bob-smith.jpg
    ensures like-kind items stay together when viewing file list
  5. Assume the reader is blind. Use the filename to indicate the content of the file/image. Do not use the filename to indicate purpose.
    ex: photo-beach-sunset.jpg > homepage-promo-best.jpg
    this improves accessibility and SEO

Lists / Dates

  1. Dates begin with the year (4 digits), then month (2 digits), then day (2 digits).
    ex: progress-2023-01-02.pdf > progress-january-2-2023.pdf
    ensures items retain order when sorting
  2. Ensure you have enough digits (ex: if the list could have more than ten items, use two digits)
    ex: photo-shoot-01.jpg > photo-shoot-1.jpg
    otherwise item 10 shows before item 1

Other tips

Strictly enforce the conventions. Even a small deviation can snowball into a mess. Come to an agreement on naming conventions EARLY. It is very difficult to change file names throughout a website after-the-fact. You may consider prefixing all photos with photo- and all logos with logo- so they can be easily grouped. Try to keep the names short; fewer than six words.

--

--

No responses yet