301轉址配圖

301轉址Redirect是什麼?網域轉址要怎麼設定?

WordPress 架站必備知識 – 30x 轉址的用途與差異

撇開轉址有 30x 的差異,其實設定上也有許多種變化,以 asperlab.club 轉 google 為範例,以下三種為我們常見的手法:

  • 縮網址轉址:於網域”/“後面加入自訂名稱轉址,如:http://asperlab.club/google -> http://www.google.com
  • 子網域轉址:自訂子網域名稱進行轉址,如:http://google.asperlab.club -> http://www.google.com
  • 主網域轉址:直接把主網域轉過去,如:http://asperlab.club -> http://www.google.com

上面這三種手法,可以混用,也多半能夠設定要 301 還是 302 轉址的選項。

且依照提供不同的服務特性,能做的轉址功能也不太一樣,有的 Web hosting 廠商會提供(如:Bluehost),有的則是購買 Domain Name 服務商(如:GoDaddy)會提供,當然想要自己使用 WrodPress 外掛來轉址,或找外面的轉址服務,也是一種作法。

而縮網址的原理示意如下圖,如果想要自行建置縮網址的服務,會需要兩樣服務,一為 DNS 伺服器,一為網站伺服器,我們先假設這兩個服務在不同主機上面,說明可以參考下方步驟。

  1. 使用者在網站中點選了http://go.asperlab.club/google 這個網址。
  2. DNS 伺服器,告知使用者伺服器子網域 A 紀錄,指向哪台網頁伺服器。
  3. 使用者連到網頁伺服器,請求網頁伺服器主機提供 go.asperlab.club/google 頁面。
  4. 網頁伺服器查了一下身上的設定檔,發現這個是轉址到 http://www.google.com 這網站。
  5. 讓使用者接收到網頁伺服器告知的轉址資訊,轉址到 http://www.google.com 網站。
縮網址運作流程示意圖
縮網址運作流程

上面這個案例,融合了縮網址搭配子網域轉址的作法,下面案例會分別使用 GoDaddy、Bluehost 與 Rebrandly 不同介面進行說明。

縮網址轉址

縮網址轉址的使用情境如下:

  • 不想自行架設網頁伺服器,或購買虛擬主機..等相關服務,雖然 WordPress 有外掛可以提供轉址,只是要建置 WrodPress 網站勢必得付出一筆虛擬主機費用。
  • 行銷人員想要蒐集使用者的資訊,如那些裝置點了這個連結、什麼樣的人點了這個連結…等,進而產生報表。
  • 如果轉址的數量比較大,可以考慮此法,管理上有專門的平台,會較便利。

目前市面上,很多廠商均有提供相關服務,他起源於縮網址,如:BitlyLihi.ioReurlRebrandly…等,儘管提供的附加價值都略有不同,但核心概念都是一樣的,把網址縮短、變好看。

這邊推薦的會是以 Rebrandly 為主,搭配子網域客製化轉址,利用他的功能,你可以作出類似像這樣的轉址:http://go.asperclub.club/google -> http://www.google.com 也就是前述範例的縮網址。

使用自己專屬網域客製化的結果,是不是讓人感到很專業呢?

使用 Rebrandly 進行客製化縮網址轉址(子網域與縮網址搭配)

為什麼要使用 Rebrandly 呢?因為免費版的方案,就能使用自己的網域名稱來轉址,最多可以用五百個縮網址,對個人架站而言,已十分足以應付了。

Rebrandly 方案示意圖
Rebrandly 方案

首先需要到 Rebrandly 網站註冊一組帳號,點選網頁右上方的”Sign up”按鈕

進入 Rebrandly 首頁示意圖
進入 Rebrandly 首頁

接著填入帳號、註冊信箱與密碼,接著點選”Create account”建立帳號

Rebrandly 註冊示意圖
Rebrandly 註冊

註冊成功後,系統會發一封註冊確認信給你

提醒接收確認信示意圖
提醒接收確認信

到信箱收信,點選”Verify email”按鈕進行驗證

驗證信示意圖
驗證信

接著會跳出一個嚮導,引導你進行設定使用,點選第一步”1. Add a branded domain”

這邊指的就是你所購買的網域名稱

設定初始畫面示意圖
設定初始畫面

因為已經有購買網域名稱了,所以我們點選”Connect a domain”

讓 Rebrandly 連接既有網域名稱示意圖
讓 Rebrandly 連接既有網域名稱

填寫主網域名稱,這邊以 asperlab.club 為例,輸入完成後,點選”Next”

Rebrandly 填寫主網域示意圖
Rebrandly 填寫主網域
  1. 由於這個主網域是由 GoDaddy 代管,系統會詢問是否有為一個乾淨的網域名稱,有無其他網站在使用中,這邊我們依照下圖進行選擇,選擇 “No, it’s being used for my website, blog, etc…” 因為我們確實也有拿它來作為部落格用途。
  2. 接著 Subdomain 子網域名稱部分,可以取一個自己喜歡的,這邊用”go”,表示未來只要是 go.asperlab.club 下的連結,就代表了轉址用途。
  3. 確認都沒問題後,點選”Next”繼續。
建立一個 subdomain 用於轉址示意圖
建立一個 subdomain 用於轉址

設定完成後,會跳出一個 DNS 紀錄新增說明,請我們新增一筆 A 紀錄。

要求新增 A 紀錄示意圖
要求新增 A 紀錄

我們到 GoDaddy 的 DNS 記錄管理介面,依照要求新增一筆 A 記錄,輸入完成後點選”儲存”。

GoDaddy 新增 A 記錄示意圖
GoDaddy 新增 A 記錄

新增完後,可以看到 go.asperlab.club 這個子網域出現在其中了,但前面的燈號呈現灰色,表示尚未生效。

新增完成子網域示意圖
新增完成子網域

生效後子網域前面的燈號會變成綠燈。

子網域可正常運作示意圖
子網域可正常運作

接著來建立一筆新的轉址連結

新增轉址連結
  1. 填入目的網址
  2. 填入縮短的名稱(當然也能用系統自動產生的,但這樣就失去意義了)
  3. 確認都沒問題後,點選”Create link”建立連結
設定連結示意圖
設定連結

完成後便會呈現出以下畫面,接著只要輸入 http://go.asperlab.club/google 就會轉到 http://google.com 囉。

設定完成示意圖
設定完成

使用 Bluehost 的設定轉址範例(主網域與縮網址搭配)

這是使用 Bluehost 的網域名稱管理服務,前提是要將 NS 紀錄指向 Bluehost。

使用 Bluehost 後台操作很簡單,依序填入想要轉址的網域與目的網址就可以了,示意圖如下。

Bluehost 轉址設定
Bluehost 轉址設定

下面這邊也是使用 Google 作示範,用主網域來做縮網址轉址。

假設今天我想要大家輸入 http://asperlab.club/google 能自動轉到 http://www.google.com 就是依照下面步驟操作就可以了,你說簡不簡單呢?

由於只是暫時性的,所以選擇 302 轉址,如果是永久要這樣用的,記得選擇 301。

設定轉址到 Google 首頁示意圖
設定轉址到 Google 首頁

加入後會提示新增成功的說明如下

新增轉址成功示意圖
新增轉址成功

如此一來,只要你輸入 http://asperlab.club/google 就能轉到 http://www.google.com 了。

子網域轉址

子網域轉址,這個功能其實使用 GoDaddy 就可以達到目的,當然如果網域名稱伺服器給 Bluehost 管理的情況下,也是可以做到。

使用子網域轉址的時機如下:

  • 單純想要進行為數不多的轉址
  • 管理越少數平台越好,可能只有使用 Bluehost 虛擬主機服務或 GoDaddy 的網域名稱管理,不想管太多平台

這邊以 GoDaddy 作為範例,登入 GoDaddy 後,選擇”管理網域”的選項。

登入 GoDaddy 後選擇管理網域示意圖
登入 GoDaddy 後選擇管理網域

點選”…”後,再點選”管理DNS”

進入 GoDaddy 管理後台

往下捲動,可以看到轉址下有兩個選擇,一個是網域,一個是子網域。

PS: GoDaddy 的主網域轉址功能比較陽春,如果要細緻一點,可能要另尋他法,如使用前述的 Bluehost 的 DNS 代管服務。

點選子網域旁邊的”加入”即可

設定子網域轉址示意圖
設定子網域轉址

這邊示範 test.asperlab.club 轉址到 https://tw.yahoo.com/

依序輸入設定後,點選”儲存”即可。

GoDaddy 設定轉址示意圖
GoDaddy 設定轉址

可以發現 DNS 紀錄出現一筆新的 A 紀錄,稍後五分鐘即會生效。

輸入 test.asperlab.club 後,便會轉到 https://tw.yahoo.com/

確認設定完成畫面
確認設定完成畫面

主網域轉址

主網域轉址使用情境如下:

  • 用在網站搬家換網域的時候,如 asper.tw 要改成 asperlab.club。
  • 也可使用於縮網址轉址服務,不過一般若使用 WordPress 的話,會搭配外掛。

由於 GoDaddy 的主網域轉址僅有直接轉址功能,下面示範以 Bluehost 為主。

與前面的 Bluehost 操作差不多,只是在 “/” 後面沒有加上任何字眼,這邊的範例,是將 asperlab.club 轉到 https://tw.yahoo.com。

設定主網域轉址示意圖
設定主網域轉址

新增完成後,可以看到下面多了一筆紀錄,如此一來,只要輸入 asperlab.club 就會轉到 tw.yahoo.com 了

新增完成畫面
新增完成畫面

301 轉址(Redirect)

看過了上面的介紹,對於轉址的應用,應該比較不會陌生了,相信大家都有去餐廳吃飯的經驗。

有時去餐廳吃飯,遇上喜歡的店家搬家了,餐廳門口就會貼上本店感謝各位客戶的愛護與支持,因為某因素,店址遷到OOO地方。

你不會因為這家店搬去其他地方而影響對他的評價。

同樣的道理,每一個網站,搜尋引擎都有對他的評價,假設我們今天要換門牌,例如 asperlab.club 想要換成 asper.tw 了,但不希望影響到搜尋引擎對網站的評價有所改變,那麼使用 301 轉址就是一個最佳做法,告訴尋引擎 asper.tw 就是 asperlab.club ,除了把所有到 asperlab.club 的客人轉到 asper.tw 這個網域去以外,連帶搜尋引擎評價也會一起帶過去。

至於搜尋引擎評價有什麼呢?包含了網站的關鍵字排名、網站的排序…等資訊。

302 轉址(Redirect)

使用 302 轉址的情境比較不同,他屬於暫時性的轉址,所以不會影響網站的評價排名,對於進行 AB 測試的時候很有用。

什麼是 AB 測試呢?

今天有一間餐廳原本生意不錯,可是想要實驗看全新的菜單,看看客人能否接受,因此針對某一批客人使用全新的菜單來試水溫,但並不影響老饕們對於既有菜單的喜愛,可能實驗結束後,會根據結果對既有菜單有所調整。

302 轉址在 Bluehost 上的設定與 301 無異,只是把選項改成 302 即可。

WordPress 架站必備知識 – 404 頁面運用大公開

什麼叫做 404 頁面

404 頁面其實有點像是施工告示牌,告訴你此路不通的概念。

像是 asper.tw 如果你在網址後面隨便打一個不存在的網址,如下圖所示,可以發現它會提示跟你說,這個頁面不存在。

asper.tw 的 404 頁面

這個頁面的用意是告訴你,網站沒有這個頁面,當然也可以設計一個屬你自己的 404 頁面。

其實 404 還有很多兄弟

除了 404 以外,還有許多不同的網頁狀態碼,這些狀態碼主要的用途,就是告訴你什麼地方錯了。

像是紅綠燈一樣,指示你該走還是該停。

4xx 錯誤的狀態碼,主要是說明客戶端的錯誤為主。

像是 403 是未經授權的錯誤,什麼意思呢?就像你到別人家,樓下警衛把你給攔下來,說你不是這裡的住戶,不可以自己隨便進入人家家裡,就是 403 的概念。

不過最常見的還是以 404 為主,畢竟有時寫部落格把文章連結改掉了,或者刪除文章,有些人把連結儲存在我的最愛中,點到的原始連結已經連不到,就會跳出 404 的錯誤。

在 Bluehost 上,可以自訂自己要什麼樣的錯誤畫面

Bluehost 自訂錯誤畫面示意圖
Bluehost 自訂錯誤畫面

如何運用 404 增進體驗

人家說佛要金裝,人要衣裝,也同樣適用在 404 錯誤上。

一個好的 404 錯誤頁面,除了可以降低使用者的挫折感以外,還可以增進品牌形象。

臉書的 404 頁面是用一個包紮的比讚大拇指手勢替代、而 Google 的 404 為一個壞掉的機器人圖案、Dropbox 則為在可愛風格的插畫下方說明這個網站頁面不存在,可以洽詢服務中心或討論區、而 github 為使用它的吉祥物告訴你要開啟的網頁不存在,並提供了搜尋列讓你可以尋找其他專案、蘋果官網也類似這種做法…等。

可以發現,一個好的 404 頁面,能夠傳遞以下訊息:

  • 品牌意象 – 讓你看到品牌的吉祥物、風格畫面
  • 清楚的說明 – 告訴使用者為什麼會看見這畫面
  • 引導下一步 – 讓使用者知道接下來該怎做,如:搜尋其他站內資訊、點選服務中心的連結之類的

如果套用在部落格上,其實只要簡單、明確告知頁面不存在即可,並提供下一步的指示。

Leave a Comment

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