This article belongs to Shiyu Bing and was translated by a straight man. It is for reference only by fans. Please visit Your Website's URLs Can and Should Be Beautiful for the original English version.

picture

The key to making elegant URLs is to balance simplicity and clarity.

To be sure, no one thinks about URLs using "second-order thinking." At most, I’ve just seen it and passed it by, that’s all. We click on link after link but never consider taking a glance at the browser's URL address bar. We just assume that the URL is valid and will take us somewhere far and away. In fact, browsers like Chrome and Safari have even hidden URLs entirely. This is a mistake, because there is something beautiful and admirable about a well-crafted URL.

Although, in the past, it was not uncommon for URLs to look garbled:

• domain.com/blog/archive.php?cat_id=25&page=4
• domain.com/products/view/?product_id=65847135468
• domain.com/forums/view_topic.phtml?topic_id=25874

The problem with these "ugliest URLs" is that they are written for Web servers, not Web surfers. No matter how long you stare at these URLs, you won't find any real clues as to their motivation or destination, such as which product is associated with the ID 65847135468. The only way to find out is to click on a link and hope it's what you're looking for, which can be frustrating, confusing, and time-consuming.

Thankfully, you're now more likely to see URLs like this:

• domain.com/blog/category/music/page/4
• domain.com/products/view/awesome-product-title
• domain.com/forums/topic/best-blues-albums-of-2023

High-profile URLs like this (which are the default in CMSs like WordPress) can provide useful, human context so you know what to expect before you go there. For example, based on the "slug" of this forum thread - best-blues-albums-of-2023 it's reasonable to assume that if you go there you'll find some good music recommendations.

In short, a good-looking URL makes your website more accessible and user-friendly, while also providing certain SEO benefits. But even if your CMS is configured to create pretty URLs, you can still make them better and prettier.

Simplicity vs. clarity

The key to designing a great-looking URL is to balance simplicity and clarity. In other words, a good URL is short, but not so short that it obscures the content it points to. In other words, a good URL contains enough information about the resource to make it useful, but not so overloaded with information that it drags on and becomes a hog. (Suffice it to say, this is often more art than science.)

Please take a look at Derek Severs' website. To complement the stark design, its URL is almost comically short:

• sive.rs/u
• sive.rs/pnt
• sive.rs/shc

Looking at the first URL, you might never guess that it's for the book Useful Not True (hence the /u slug). Sivers provides several reasons for such short URLs, ranging from practical (they're easier to remember and share) to aesthetic (they look better). While I respect and agree with Sivers' desire for efficiency and reducing digital pollution, the URLs to his website go too far; they are certainly brief, but incomprehensible to anyone but me at a glance. (Also, as its website evolves with the times, I wonder if it can still remember all of its URLs.)

Some URLs may be short. It's pretty standard to see URLs like this on many websites:

• domain.com/about
• domain.com/contact
• domain.com/faq

You'll almost instinctively see /about or /faq, which are used for the website's "About Us" and "FAQ" pages respectively. They require no extra explanation or context. In fact, when you see the extended version of these URLs, you can almost instantly understand that it is a wrong design:

• domain.com/about-us
• domain.com/contact-us
• domain.com/frequently-asked-questions

Technically, these longer versions are less ambiguous than the shortened versions, but that's unnecessary, and they now look like they're a pig for their own sake - especially if they have other subpages. Among these two URLs, which one is more beautiful?

• domain.com/about/team
• domain.com/about-us/our-team-members

My personal testimony is that elegance needs no words.

How to beautify URLs

So, what's the best way to create elegant URLs while still keeping in mind the balance of simplicity and clarity? Here are a few tips that stick with me and apply to any site I'm working on, whether it's Opus or elsewhere.

1. Be stingy with URL Segments

Each / in the URL represents a segment, which helps identify the structure of the site. Although many sites run on a database rather than a file system, URL segmentation implies a hierarchy similar to the folders and files on the server. To keep URLs short, you naturally want to keep the number of segments to a minimum. Doing this will force you to really think about how you build your website. You might want a URL that requires a lot of segmentation like this:

• domain.com/about/locations/usa/nebraska/lincoln/havelock
• domain.com/clothing/movies/star-wars/shirts/short-sleeve
• domain.com/catalog/toys/robots/transformers/autobots/dinobots

However, I bet you can find some ways to simplify and shorten them to make the site easier to navigate and understand. (Note: This involves website structure development and content organization, which could be its own series of blog posts.)

When a URL contains a large number of segments, I often find that the resulting page content is very thin and fragmented, making it difficult to justify. This approach may have some SEO benefits, but as a user, encountering boring pages is overwhelming, and it would be more convenient to collect all this content into one page.

Going back to the URL above, does the organization really have so many locations in Lincoln that Havelock needs a dedicated URL? With so many places in Nebraska, does Lincoln need its own page? Could you replace it with something concise like domain.com/locations/havelock?

2. Slug does not need to match the title

I mentioned this briefly before when explaining why domain.com/about is more elegant than domain.com/about-us. It can be assumed that -us is redundant even if the title of the page is "About Us". On this basis, please take a look at the URL of the following blog article:

• domain.com/blog/this-is-my-very-first-blog-post
• domain.com/blog/i-finally-saw-the-shawshank-redemption-and-heres-my-review
• domain.com/blog/ive-been-reading-comic-books-recently-and-these-are-some-of-my-favorites

Chances are, these URL slugs are basically post titles, but URL-formatted (i.e. converted to lowercase, punctuation removed, spaces replaced with dashes). If you clicked on the first URL, it’s a safe bet that the title of the post would be “This is my first blog post.” But just because it's a title, doesn't mean it needs to be a slug too. You can shorten and simplify your post's title while still capturing the meaning of its title:

• domain.com/blog/very-first-blog-post
• domain.com/blog/shawshank-redemption-review
• domain.com/blog/some-recent-comic-book-faves

One might argue that these shortened versions of URLs lack the personality of longer versions, and that may be the case. If you believe that smelly, long URLs are an intrinsic feature of your website brand, then by all means continue to use them. If SEO is an issue, make sure your URLs still contain any relevant keywords.

It's worth mentioning that I use this approach for all my URLs, especially those for my comments. Take my review of Slowdive's latest album, for example. The page title is "Everything Is Alive by Slowdive (Review)", but this is the URL of the review:

• opuszine.us/reviews/everything-is-alive-slowdive-2023-dead-oceans

There is no need to repeat review in the slug because it is already a URL segment. Therefore, my review slug follows this convention: release title, artist name, release year, and publisher/label/studio. This results in a URL that looks like this:

• opuszine.us/reviews/winks-kisses-20th-anniversary-deluxe-edition-airiel-2023-feeltrip-records
• opuszine.us/reviews/ergo-proxy-shuko-murase-2006-manglobe
• opuszine.us/reviews/saviour-machine-1993-intense-records

Although, there are some precautions. For example, self-released albums will not have any label information. As you can see, this convention can lead to lengthy URLs. But the goal is to make sure the user knows exactly what is being reviewed, which may not be possible if the slug is shorter or exactly matches the title of the post.

3. Stop using “stop words” (occasionally)

"Stop words" - including "a", "an", "in", "is", "the" and "was" - are words that don't really add any value to the URL, especially from an SEO perspective considerations (although they are not major factors). They tend to be articles, prepositions, conjunctions and pronouns. Therefore, they can often be removed to simplify the URL, as I did in several of the examples above.

But remember, elegant URLs inform users and provide them with useful context. This means that sometimes removing stop words can make URLs worse because they are nonsensical or even misleading. Compare:

• domain.com/blog/i-ate-my-family
• domain.com/blog/my-kid-annoying
• domain.com/blog/practicing-drums-hard

The corresponding version still has stop words:

• domain.com/blog/i-ate-with-my-family
• domain.com/blog/my-kid-is-not-annoying
• domain.com/blog/practicing-drums-can-be-hard

These two sets of blog posts are one dragon and one pig.

I often remove all stop words from the slug to see what it looks like. If it's ridiculous or misleading, then I'll add a pause word or two. Or I might rewrite the title so that it doesn’t contain as many pause words, which usually results in a cleaner slug — and maybe even a better title.

4. Don’t get hung up on that elegant URL

Once you identify an elegant URL and publish your blog post, product, or page, forget about it, even if a URL ten times better appears in your dream that night. Make time for other things.

They're called permalinks for a reason; they're supposed to be permanent. The web is already too ephemeral, with sites disappearing and links rotting. If you absolutely must change a URL on your site, be sure to add a "301" redirect from the old URL to the new URL. (There are several different types of redirects, but a "301" redirect means it's a permanent redirect, which alerts search engines to update their indexes.)

You might be thinking that sounds like a lot of silly, pedantic work. After all, if your CMS is already generating great-looking URLs, why add stress to it? What’s the big deal if your website’s URL isn’t concise?

Functionally, this probably doesn't matter. But these tips are all part of creating a well-crafted, well-designed website, taking pride in the content you post to the web, and reducing digital pollution (to use Derek Sievers' terminology).

Optimizing images, using semantic HTML, and avoiding dark mode all show that you care about the user experience, as does crafting beautifully concise and contextually rich URLs. Users may never notice these efforts (consciously), but they will almost certainly notice their absence, even if they can't quite articulate how or why.

I'll admit that my preference for pretty URLs stems from the fact that I've always found URLs to be magical. You type https:// into your browser's URL bar, followed by a string of letters, numbers, dashes, underscores, periods, and slashes, and you're taken to yet another potential treasure trove of news, information, and resources.

URLs are like map tracks, signposts, and mantras, all rolled into one. If it's possible to make them more efficient and more beautiful without sacrificing any utility or functionality, then I really can't think of a reason not to take the time to do so.