擺脫亂碼網址,5個步驟優化網址架構,讓使用者體驗更好

每次寫完一篇文章,最後一個步驟就是縮短網址複製貼上到社團裡。(若好奇為什麼要貼到社團,可以參考流量來源文章 – 為什麼該開始寫部落格?Blog 經營的第 1 個月

進行複製貼上網址動作時,總是覺得網址變得又長又複雜!重點是這一大串亂碼網址,居然顯現不出預覽內容!一開始以爲是 Line 與自己對話關係,後來測試,才發現亂碼網址在辨識上會有機率性識別錯誤!

有無網址預覽圖示意
預覽圖出不來

那個當下我意識到這是非常嚴重的事情,而且對於使用體驗上極度不友好。(我要是別人,發給我一拖拉庫的網址,就像給我看作品集還要先下載完1XX. mB 檔案大小才能看的感受差不多,是我會快速略過,誰想浪費時間啊!)

又想到,每篇文章都是作者花好幾個小時辛苦打出來的,結果一個網址小連結就讓人覺得不容易複製,看起來觀感不好,簡直功虧一簣。

『 這篇文章,除了分析網址為什麼會有一大串亂碼原因,
也提供在規劃文章分類架構的取捨,以及說明其中互相影響的關係。』


 — Cora 千錘百鍊的第 008 篇文章   —

網址後面為什麼跟一大串亂碼?


根據瀏覽器不同,會有不同的編碼機制,所以看到的亂碼,其實是中文編碼後的樣子

之前在後台設定文章固定網址時,SEO 外掛建議把關鍵字包含在網址裡面,可以提升 SEO 計算分數。因此每篇文章在檢查時,我都會刻意把中文關鍵字放入到網址內,但這個做法,也讓這個網址產生了一些問題:

中文越多因編碼關係連結會越長,無法閱讀的字數也就更多
❷ 識別過長網址時,可能不會出現預覽圖
可以用額外生成短網址來解決,但短網址通常有時效
自已不好辨認以外,google 爬蟲🐞也需要多爬幾層才能識別辨認,網址層級越多,蟲蟲🐞要多爬幾層。

➙ 綜合以上幾點,在取捨外掛上的 SEO 計分,還是整體易用性考量,我選擇把中文關鍵字從網址移除掉。

更改網址的影響與步驟

首先,開始拆解網址到底是怎麼組成的,發現除了子網域以外,/後面是一串數字,/英文-英文-中文關鍵字。如果以 UI 切圖命名邏輯來說,這樣看起來似乎太多層級,除非分很多類別,不然很少需要分多層,為了確認我的疑惑是不是對的,做了以下整理:

➙ 網址的分類是不是有規律可循?以及網址層級多寡會影響什麼嗎?

網址層級會影響 google 爬蟲🐞,網址階層盡量以 3 層為主:
層級越多,意味者你的資料藏得越深,爬蟲也越辛苦多找一層。

網址層級


❷ 避免使用中文,針對區域性地區下關鍵字。
雖然中文的網址,呈現便於華人記憶,但會因為編碼問題,造成網址過於複雜。

中文網址轉貼至其他地方


最常聽到,使用者體驗 (User Experience) 因素
就像上面說的,網址過長或許可以用縮短網址來解決,但縮短網址會有使用期限的問題此外要轉成短網址,要先複製一大串網址再貼到縮短網址的地方進行轉址。(需要額外多幾個步驟來完成這件事情,個人有點懶)

如果不考慮用縮短網址來解決的話,那今天網址貼到 line 或 Facebook,中文字將自動變成亂碼,一方面可能像一開始所說,會有機率預覽不出圖片,一方面如果有人覺得你文章不錯,想要分享給朋友時,複製貼上一大串,少個字多一個字,分享的網址並不完整,導致瀏覽失敗,是不是就失去推廣你網頁的機會了?



➙ 開始進行網址修改吧!

如何修改預設永久網址規則?

由於一開始架站對於許多地方都是使用預設狀態,後來我發現文章固定網址顯示格式地方,在日期做了打勾,於是我把它換成另一個模式。

子網域 + 文章分類 + 文章關鍵字
❷ 子網域 + 文章標題
其實我覺得這邊看每個人網站資訊架構怎麼規劃,沒有硬性說一定要用哪一個,像我原本是先用把所有文章資訊架構分類好,現在又改用 只顯示網站的文章名稱,除了更加簡潔,也考慮到 google 爬蟲不用爬太多層。

wordpress後台 ➙ 設定 ➙ 永久網址

解決了永久網址規則,如何自訂後方文章分類?

由於每個文章分類對應預先分好的分類,但是隨著文章的產出,分類肯定需要調整,而且一開始也以為分類越多越好,發佈文章後就在分類那邊重複勾選,導致分類亂七八糟,於是為了讓網址整齊與能統一管理好文章,我把文章分類全部重新整理,以及預想一下接下來可能會有的文章分類。

在中文分類歸類完,記得也要補上英文,方便選擇 永久網址規則時辨別對應英文。

圖片來源,均來左或下方社團連結內

解決文章分類層級,如何設定簡單好記的網址代稱?
不知道有沒有發現,每篇文章都有寫“Cora 第 00X 篇文章”,原本單純方便自己管理,便於記住寫了幾篇,但現在用數字作為網址代稱也挺合適(尤其適合懶人)

舉例:這次寫文章是第 8 篇,那我的文章固定網址就改成 008,數字每篇文章都不一樣,也不會重複,就算每篇前面分類都一樣,但是在數字不重複情快下,間接的不只分享別人方便,你自己寫文章也更好記憶!

文章內的網址代稱設定



Ⓓ 若心疼外掛計算SEO分數,麵包屑比中文網址更好的選擇
其實在一開始改掉中文網址時,曾糾結是否要捨棄SEO分掛計算分數。而出於補償心理,找資料時發現麵包屑設定是可以對 SEO 加分的!

麵包屑(Breadcrumb):用來顯示文章的分類層級。

不是只有網址,而是瀏覽的時候也方便可以返回其他相關的分類,實測過後我發現這對於使用者體驗也挺不錯,可以找一下佈景主題中有一個叫 Breadcrumb 英文,點擊進去可以自定義相關設定,可以設定是否要顯示,以及哪些頁面不要顯時,而設定完成後實際透過 google搜尋,如下圖紅框中顯示:

麵包屑(Breadcrumb)實際樣子

最後做一張有含有中文網址&純英文網址的比較表格囉,至於如何取捨就看大家了。

含有中文網址 & 純英文網址比較圖

以上整理資料來源自:小心網址變遺址!您該知道符合SEO優化友善網址方法麵包屑 Breadcrumbs 怎麼灑?讓訪客及Google爬蟲找對路?!網頁SEO優化入門,看這一篇就夠了

話家常的 Mur mur

又到了說心底話時間。

我發現自己是個愛搗騰的人,尤其才寫部落格一個月,一下想要開始改佈景主題,一下又冒出很多個不同系列文章(腦子想一堆,但動作很遲緩,殊不知產量還是很不夠!)

不過終歸還是生產一篇我覺得跟使用者體驗切身相關的文章,雖然網址在寫文章時只是一個傳遞的小連結,但經歷自己多次複製貼上後,深刻感悟到額外生成短網址的麻煩,與每次都要想文章固定網址要怎麼轉英文,加上挑剔自己生產的東西(哪怕是網址都不能太差的毛很多個性),在自己改完網址的同時,不知不覺也把文章分類重新梳理了一遍,就有了這篇文章。

有一個蘿蔔🥕多個坑的感覺,解決了網址的層級,為了一致性,連文章分類也一併處理了。

眼看2020年過了三分之二,真是令人惶恐又帶點刺激又充滿擔憂,原本打了一堆文不對題的廢話,又默默刪掉了,留著以後幾篇說吧~最後,還是希望文章有一小點點幫助到對細節比較有要求的人,以及同時也有人(就是我)跟你們一樣惶恐又擔憂又愛想很多的人,希望我的文章能一起陪伴度過2020年底吧~🤝🏻。


這篇文章有幫助到您嗎?歡迎留言跟我說 ~

Hi ,我是 Cora – UI 設計師,興趣畫室內3D渲染圖,提供設計相關服務 (點擊去瞧瞧作品),今年過著自由接案的間隔年生活,歡迎來找我聊天。

如果想找人說說話,也剛好喜歡寫文字的我,不侷限任何事情或單純發設計案子給我,在下方留言區輸入電子郵件並認真寫下內容,我真的會在收到信息後仔細回覆您哦 😉

喜歡文章免費 👏 按 5 下 Like 及點擊『收藏』,我將收到鼓勵與有機會得到錢錢!祝順心,下篇見了

2 thoughts on “擺脫亂碼網址,5個步驟優化網址架構,讓使用者體驗更好”

  1. 新的版面很好看,顏色也喜歡!
    說來中文網址真的煩就煩在他轉貼到其他地方會變亂碼
    不過不知道為什麼大家這麼推崇Orz
    看了這篇文章有點被生火改回短一點的網址(?

    1. 看到留言,先發現為什麼上午5點居然是醒著 XD?
      其實我也不清楚為什麼中文網址大家推崇原因,個人真的覺得有點麻煩(有可能是因為帶入中文關鍵字SEO提升?
      可以試試看規劃成短網址,但感覺會是個浩大的工程啊~我自己就搞了挺久,但後續只要帶入網站連結改個數字很快的!供你參考囉:)

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top