我們一起聊聊優(yōu)雅 URL 的設(shè)計哲學
本文屬于是語冰的直男翻譯了屬于是，僅供粉絲參考，英文原味版請臨幸 Your Website’s URLs Can and Should Be Beautiful。
圖片
制作優(yōu)雅 URL 的關(guān)鍵是平衡簡潔和清晰。
可以肯定的是，沒有人會用“二階思維”思考 URL。頂多看過就過，僅此而已。我們點過一個又一個的鏈接，卻從不考慮瞄一眼瀏覽器的 URL 地址欄。我們只是假設(shè) URL 是有效的，且會帶我們?nèi)ピ姾瓦h方。事實上，Chrome 和 Safari 等瀏覽器甚至已經(jīng)完全隱藏 URL。這是一個錯誤，因為精心制作的 URL 有某些美麗且值得欣賞的東東。
雖然但是，在過去，URL 看起來像亂碼的情況屢見不鮮：
- 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
這些“URL 丑八怪”的問題在于，它們是為 Web 服務(wù)器編寫的，而不是為 Web 沖浪者編寫的。無論您盯著這些 URL 看多久，您都找不到任何關(guān)于其動機或目的地的真正線索，比如哪個產(chǎn)品與 65847135468 的 ID 相關(guān)聯(lián)。找出答案的唯一方法是單擊鏈接并希望它是您要查找的內(nèi)容，這可能會令人沮喪、頭大且耗時。
值得慶幸的是，您現(xiàn)在更有可能看到這樣的 URL：
- domain.com/blog/category/music/page/4
- domain.com/products/view/awesome-product-title
- domain.com/forums/topic/best-blues-albums-of-2023
像這樣的高顏值的 URL（這是 WordPress 等 CMS 中的默認設(shè)置）可以提供有用的、人性化的上下文，讓您在去那里之前了解會發(fā)現(xiàn)什么。舉個栗子，根據(jù)該論壇主題的“slug” —— best-blues-albums-of-2023 可以合理地假設(shè)，如果您去那里，您會發(fā)現(xiàn)某些不錯的音樂推薦。
簡而言之，高顏值的 URL 使您的網(wǎng)站更易于訪問和用戶友好，同時還提供某些 SEO 優(yōu)勢。但是，即使您的 CMS 配置為創(chuàng)建高顏值的 URL，您仍然可以使它們變得更好、更漂亮。
簡潔 vs 清晰
設(shè)計高顏值 URL 的關(guān)鍵是平衡簡潔和清晰。換而言之，一個好的 URL 很短，但不會短到掩蓋它所指向的內(nèi)容。換而言之，一個好的 URL 包含足夠多相關(guān)資源的信息以使其有用，但信息不會過載，以至于它會拖延并變得豬頭。（我只想說，這通常更像是藝術(shù)而不是科學。）
請瞄一眼 Derek Severs 的網(wǎng)站。與鮮明的設(shè)計相得益彰，它的 URL 幾乎短得滑稽可笑：
- sive.rs/u
- sive.rs/pnt
- sive.rs/shc
瞄一下第一個 URL，您可能永遠不會猜到它是為了 Useful Not True 這本書而設(shè)計的（因此其 slug 是 /u）。Sivers 為這種短 URL 提供若干原因，從實用（它們易于記憶和分享）到美觀（它們看起來更好）。雖然我尊重并贊同 Sivers 對效率和減少數(shù)字污染的渴望，但其網(wǎng)站的 URL 走得太遠了；它們當然很簡短，但除了本人之外，任何人都無法一目了然。（此外，隨著其網(wǎng)站與時俱進，我想知道它是否仍能夠記住其所有 URL。）
某些 URL 可能很短。在許多網(wǎng)站上看到這樣的 URL 是非常標準的：
- domain.com/about
- domain.com/contact
- domain.com/faq
您幾乎本能地看到 /about 或 /faq，且一目了然，它們分別用于網(wǎng)站的“關(guān)于我們”和“常見問題”頁面。它們不需要多余的解釋或上下文。事實上，看到這些 URL 的加長版幾乎可以秒懂是錯誤設(shè)計：
- domain.com/about-us
- domain.com/contact-us
- domain.com/frequently-asked-questions
從技術(shù)上講，這些加長版比精簡版不那么模棱兩可，但這是不必要的，而且它們現(xiàn)在看起來因為豬頭而豬頭 —— 尤其是如果它們還有其他子頁面。在這兩個 URL 中，哪個顏值更高呢？
- domain.com/about/team
- domain.com/about-us/our-team-members
我的個人心證是，優(yōu)雅無須多言。
URL 的美化方式
那么，創(chuàng)建優(yōu)雅的 URL 同時仍然牢記簡潔和清晰的平衡的最佳方法是什么？以下是我刻骨銘心的若干提示，適用于我正在處理的任何網(wǎng)站，無論是 Opus 還是其他地方。
1. URL 分段（URL Segments）要吝嗇
URL 中的每個 / 都表示一個分段，這有助于識別站點的結(jié)構(gòu)。盡管許多站點在數(shù)據(jù)庫而不是文件系統(tǒng)上運行，但 URL 分段意味著類似于服務(wù)器上的文件夾和文件的層次結(jié)構(gòu)。為了保持 URL 簡短，您自然希望將分段數(shù)量保持在最低限度。這樣做會迫使您真正考慮如何構(gòu)建構(gòu)建網(wǎng)站。可能需要像這樣需要大量分段的 URL：
- 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
但是，我敢打賭，您可以找到某些方法來簡化和縮短它們，使網(wǎng)站更易于瀏覽和理解。（注意：這涉及網(wǎng)站結(jié)構(gòu)開發(fā)和內(nèi)容組織，這可能是其自身的系列博客文章。）
當 URL 包含大量分段時，我經(jīng)常發(fā)現(xiàn)生成的頁面內(nèi)容非常單薄且分散，很難證明其合理性。這種方法可能有某些 SEO 福利，但作為用戶，遇到無聊的頁面很頭大，而如果將所有這些內(nèi)容收集到一個頁面中會更方便。
回到上面的 URL，該組織真的在 Lincoln 有這么多地點，以至于 Havelock 需要專屬 URL 嗎？內(nèi)布拉斯加州有這么多地方，Lincoln 需要自己的頁面嗎？您能用某些簡潔的東東來代替嗎，比如 domain.com/locations/havelock。
2. Slug 不需要匹配標題
我之前在解釋為什么 domain.com/about 比 domain.com/about-us 更優(yōu)雅時簡單提到這點。可以假設(shè)，即使頁面的標題是“關(guān)于我們”，-us 也是多余的。在此基礎(chǔ)上，請瞄一下下列博客文章的 URL：
- 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
很有可能，這些 URL slugs 基本上是帖子標題，但經(jīng)過了 URL 格式化（比如，轉(zhuǎn)換為小寫字母，去掉標點符號，用破折號替換空格）。如果您點擊了第一個 URL，那么可以肯定的是，該帖子的標題將是“這是我的第一篇博客文章”。但僅僅因為這是標題，并不意味著它也需要成為 slug。您可以縮短和簡化帖子的標題，同時仍能捕捉到其標題的含義：
- domain.com/blog/very-first-blog-post
- domain.com/blog/shawshank-redemption-review
- domain.com/blog/some-recent-comic-book-faves
有人可能會爭辯說，這些精簡版的 URL 缺乏加長版 URL 的個性，情況可能就是如此。如果您認為既臭又長的 URL 是您網(wǎng)站品牌的內(nèi)在特征，那么請您務(wù)必繼續(xù)使用它們。如果 SEO 是一個問題，請確保您的 URL 仍然包含任何相關(guān)的關(guān)鍵字。
值得一提的是，我對我所有的 URL 都使用這種方法，尤其是那些用于我的評論的 URL。以我對 Slowdive 最新專輯的評論為例。頁面標題是“Everything Is Alive by Slowdive （Review）”，但這是評論的 URL：
- opuszine.us/reviews/everything-is-alive-slowdive-2023-dead-oceans
沒有必要在 slug 中重復(fù) review，因為它已經(jīng)是一個 URL 分段。因此，我的評論 slug 遵循這個慣例：發(fā)行標題、藝術(shù)家姓名、發(fā)行年份和出版商/唱片公司/工作室。這會導(dǎo)致 URL 如下所示：
- 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
雖然但是，也有若干注意事項。舉個栗子，自行發(fā)行的專輯中不會有任何標簽信息。如你所見，這種約定可能會導(dǎo)致冗長的 URL。但目標是確保用戶確切地知道正在審查的內(nèi)容，如果 slug 較短或與帖子的標題完全匹配，這可能是不可能事件。
3. 停止使用“停頓詞”（偶爾）
“停頓詞" —— 包括“a”、“an”、“in”、“is”、“the”和“was” —— 是不會真正為 URL 增加任何價值的單詞，尤其從 SEO 的角度來考慮（盡管它們不是主要因素）。它們往往是冠詞、介詞、連詞和代詞。因此，通常可以刪除它們以簡化 URL，就像我在上面的若干示例中所做的那樣。
但請記住，優(yōu)雅的 URL 會告知用戶并為它們提供有用的上下文。這意味著，有時刪除停頓詞可能會導(dǎo)致 URL 變得更糟，因為它們是荒謬的，甚至具有誤導(dǎo)性。比較：
- domain.com/blog/i-ate-my-family
- domain.com/blog/my-kid-annoying
- domain.com/blog/practicing-drums-hard
對應(yīng)的仍然存在停頓詞的版本：
- domain.com/blog/i-ate-with-my-family
- domain.com/blog/my-kid-is-not-annoying
- domain.com/blog/practicing-drums-can-be-hard
這兩組博客文章一龍一豬。
我經(jīng)常會從 slug 中刪除所有停頓詞，看看它是什么樣子的。如果它是荒謬的或誤導(dǎo)性的，那么我會添加一兩個停頓詞。或者我可能會重寫標題，這樣它就不會包含那么多的停頓詞，這通常會設(shè)計出一個更簡潔的 slug —— 甚至可能是一個更好的標題。
4. 不要糾結(jié)那個優(yōu)雅的 URL
一旦您確定了一個優(yōu)雅的 URL 并發(fā)布了您的博客文章、產(chǎn)品或頁面，那就別再管它了，即使那天晚上在夢中出現(xiàn)了一個好十倍的 URL。把時間留給其他事情。
它們被稱為永久鏈接（permalinks）是有原因的；它們應(yīng)該是永久性的。網(wǎng)絡(luò)已經(jīng)太短暫了，網(wǎng)站消失了，鏈接腐爛了。如果您絕對必須更改網(wǎng)站的某個 URL，請務(wù)必添加從舊 URL 到新 URL 的“301”重定向。（有幾種不同類型的重定向，但“301”重定向表示它是永久重定向，它會提醒搜索引擎更新其索引。）
您可能會認為這聽起來像是很多愚蠢、迂腐的工作。畢竟，如果您的 CMS 已經(jīng)在生成高顏值的 URL，為什么還要為此徒增壓力呢？如果您的網(wǎng)站的 URL 不那么簡潔，那有什么大不了的？
從功能上講，這可能無關(guān)緊要。但這些建議都是創(chuàng)建一個精心制作的、精心設(shè)計的網(wǎng)站的一部分，為您發(fā)布到網(wǎng)絡(luò)上的內(nèi)容感到自豪，并減少數(shù)字污染（用德里克·西弗斯的術(shù)語）。
優(yōu)化圖像、使用語義 HTML 和避免深色模式都表明您關(guān)心用戶體驗，制作精美簡潔且上下文豐富的 URL 也是如此。用戶可能永遠不會（有意識地）注意到這些努力，但它們幾乎肯定會注意到它們的缺席，即使它們不能完全闡明怎么做或為什么。
我承認，我對漂亮 URL 的偏愛源于這樣一個事實，即我一直覺得 URL 非常神奇。您在瀏覽器的 URL 欄中輸入 https://，然后是一串字母、數(shù)字、破折號、下劃線、句點和斜杠，然后您就會被帶到另一個潛在的新聞、信息和資源寶庫。
URL 就像地圖軌跡、路標和咒語一樣，都合二為一。如果有可能在不犧牲任何效用或功能的情況下使它們更高效、更美觀，那么我真的想不出有什么理由不花點時間這樣做。
