本文屬於是語冰的直男翻譯了屬於是，僅供粉絲參考，英文原味版請臨幸Your Website's URLs Can and Should Be Beautiful。

圖片

製作優雅URL 的關鍵是平衡簡潔和清晰。

可以肯定的是，沒有人會用「二階思維」思考URL。頂多看過就過，僅此而已。我們點過一個又一個的鏈接，卻從不考慮瞥一眼瀏覽器的URL 地址欄。我們只是假設URL 是有效的，並且會帶我們去詩和遠方。事實上，Chrome 和Safari 等瀏覽器甚至已經完全隱藏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 伺服器編寫的，而不是為Web 衝浪者編寫的。無論您盯著這些URL 看多久，您都找不到任何關於其動機或目的地的真正線索，例如哪個產品與 65847135468 的ID 相關聯。找出答案的唯一方法是點擊連結並希望它是您要查找的內容，這可能會令人沮喪、頭大且耗時。

值得慶幸的是，您現在更有可能看到這樣的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 中的預設設定）可以提供有用的、人性化的上下文，讓您在去那裡之前了解會發現什麼。舉個栗子，根據該論壇主題的「slug」— best-blues-albums-of-2023 可以合理地假設，如果您去那裡，您會發現某些不錯的音樂推薦。

簡而言之，高顏值的URL 使您的網站更易於存取和用戶友好，同時還提供某些SEO 優勢。但是，即使您的CMS 配置為創建高顏值的URL，您仍然可以使它們變得更好、更漂亮。

簡潔vs 清晰

設計高顏值URL 的關鍵是平衡簡潔和清晰。換而言之，一個好的URL 很短，但不會短到掩蓋它所指向的內容。換而言之，一個好的URL 包含足夠多相關資源的資訊以使其有用，但資訊不會過載，以至於它會拖延並變得豬頭。（我只想說，這通常更像是藝術而不是科學。）

請瞥一眼Derek Severs 的網站。與鮮明的設計相得益彰，它的URL 幾乎短得滑稽可笑：

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

瞄一下第一個URL，您可能永遠不會猜到它是為了Useful Not True 這本書而設計的（因此其slug 是 /u）。Sivers 為這種短URL 提供若干原因，從實用（它們易於記憶和分享）到美觀（它們看起來更好）。雖然我尊重並贊同Sivers 對效率和減少數位污染的渴望，但其網站的URL 走得太遠了；它們當然很簡短，但除了本人之外，任何人都無法一目了然。（此外，隨著其網站與時俱進，我想知道它是否仍能夠記住其所有URL。）

某些URL 可能很短。在許多網站上看到這樣的URL 是非常標準的：

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

您幾乎本能地看到 /about 或 /faq，且一目了然，它們分別用於網站的「關於我們」和「常見問題」頁面。它們不需要多餘的解釋或上下文。事實上，看到這些URL 的加長版幾乎可以秒懂是錯誤設計：

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

從技術上講，這些加長版比精簡版不那麼模棱兩可，但這是不必要的，而且它們現在看起來因為豬頭而豬頭—— 尤其是如果它們還有其他子頁面。在這兩個URL 中，哪個顏值比較高呢？

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

我的個人心證是，優雅無須多言。

URL 的美化方式

那麼，創建優雅的URL 同時仍然牢記簡潔和清晰的平衡的最佳方法是什麼？以下是我刻骨銘心的若干提示，適用於我正在處理的任何網站，無論是Opus 還是其他地方。

1. URL 分段（URL Segments）要吝嗇

URL 中的每個 / 都表示一個分段，這有助於識別網站的結構。儘管許多網站在資料庫而不是檔案系統上運行，但URL 分段意味著類似於伺服器上的資料夾和檔案的層次結構。為了保持URL 簡短，您自然希望將分段數量保持在最低限度。這樣做會迫使您真正考慮如何建立建立網站。可能需要像這樣需要大量分段的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

但是，我敢打賭，您可以找到某些方法來簡化和縮短它們，使網站更易於瀏覽和理解。（注意：這涉及網站結構開發和內容組織，這可能是其自身的系列部落格文章。）

當URL 包含大量分段時，我經常發現產生的頁面內容非常單薄且分散，很難證明其合理性。這種方法可能有某些SEO 福利，但作為用戶，遇到無聊的頁面很頭大，而如果將所有這些內容收集到一個頁面中會更方便。

回到上面的URL，該組織真的在 Lincoln 有這麼多地點，以至於Havelock 需要專屬URL 嗎？內布拉斯加州有這麼多地方，Lincoln 需要自己的頁面嗎？您能用某些簡潔的東東來代替嗎，例如 domain.com/locations/havelock。

2. Slug 不需要符合標題

我之前在解釋為什麼 domain.com/about 比 domain.com/about-us 更優雅時簡單提到這一點。可以假設，即使頁面的標題是“關於我們”，-us 也是多餘的。在此基礎上，請瞄準下列部落格文章的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 基本上是貼文標題，但經過了URL 格式化（例如，轉換為小寫字母，去掉標點符號，用破折號替換空格）。如果您點擊了第一個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 是您網站品牌的內在特徵，那麼請務必繼續使用它們。如果SEO 是一個問題，請確保您的URL 仍然包含任何相關的關鍵字。

值得一提的是，我對我所有的URL 都使用這種方法，尤其是那些用於我的評論的URL。以我對Slowdive 最新專輯的評論為例。頁面標題是“Everything Is Alive by Slowdive （Review）”，但這是評論的URL：

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

沒有必要在slug 中重複 review，因為它已經是一個URL 分段。因此，我的評論slug 遵循這個慣例：發行標題、藝術家姓名、發行年份和出版商/唱片公司/工作室。這會導致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

雖然但是，也有若干注意事項。舉個栗子，自行發行的專輯中不會有任何標籤資訊。如你所見，這種約定可能會導致冗長的URL。但目標是確保用戶確切地知道正在審查的內容，如果slug 較短或與貼文的標題完全匹配，這可能是不可能事件。

3. 停止使用「停頓詞」（偶爾）

「停頓詞" —— 包括「a」、「an」、「in」、「is」、「the」和「was」 —— 是不會真正為URL 增加任何價值的單詞，尤其從SEO 的角度來考慮（儘管它們不是主要因素）。它們往往是冠詞、介詞、連接詞和代名詞。因此，通常可以刪除它們以簡化URL，就像我在上面的若干範例中所做的那樣。

但請記住，優雅的URL 會告知用戶並為它們提供有用的上下文。這意味著，有時刪除停頓詞可能會導致URL 變得更糟，因為它們是荒謬的，甚至具有誤導性。比較：

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

對應的仍然存在停頓詞的版本：

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

這兩組部落格文章一龍一豬。

我經常從slug 中刪除所有停頓詞，看看它是什麼樣子的。如果它是荒謬的或誤導性的，那麼我會添加一兩個停頓詞。或者我可能會重寫標題，這樣它就不會包含那麼多的停頓詞，這通常會設計出一個更簡潔的slug —— 甚至可能是一個更好的標題。

4. 不要糾結那個優雅的URL

一旦您確定了一個優雅的URL 並發布了您的部落格文章、產品或頁面，那就別再管它了，即使那天晚上在夢中出現了一個好十倍的URL。把時間留給其他事情。

它們被稱為永久連結（permalinks）是有原因的；它們應該是永久性的。網路已經太短暫了，網站消失了，連結腐爛了。如果您絕對必須更改網站的某個URL，請務必新增從舊URL 到新URL 的「301」重新導向。（有幾種不同類型的重定向，但「301」重定向表示它是永久重定向，它會提醒搜尋引擎更新其索引。）

您可能會認為這聽起來像是很多愚蠢、迂腐的工作。畢竟，如果您的CMS 已經在產生高顏值的URL，為什麼還要為此徒增壓力呢？如果您的網站的URL 不那麼簡潔，那有什麼大不了的？

從功能上講，這可能無關緊要。但這些建議都是創建一個精心製作的、精心設計的網站的一部分，為您發佈到網路上的內容感到自豪，並減少數位污染（用德里克·西弗斯的術語）。

優化圖像、使用語義HTML 和避免深色模式都表明您關心用戶體驗，製作精美簡潔且上下文豐富的URL 也是如此。使用者可能永遠不會（有意識地）注意到這些努力，但它們幾乎肯定會注意到它們的缺席，即使它們不能完全闡明怎麼做或為什麼。

我承認，我對漂亮URL 的偏好源於這樣一個事實，即我一直覺得URL 非常神奇。您在瀏覽器的URL 欄中輸入 https://，然後是一串字母、數字、破折號、下劃線、句點和斜杠，然後您就會被帶到另一個潛在的新聞、資訊和資源寶庫。

URL 就像地圖軌跡、路標和咒語一樣，都合而為一。如果有可能在不犧牲任何效用或功能的情況下使它們更有效率、更美觀，那麼我真的想不出有什麼理由不花點時間這樣做。