Blogger 官方免費幫自訂網址升級 HTTPS！ 設定處理流程注意事項整理

這真的是最好的新年禮物了，過年前夕在「FB 社團」 +Vista Cheng 分享了「Blogger站長看過來：自訂網域的網誌，也可以支援HTTPS囉」 ，原來官方悄悄開始測試，可以讓自訂網域直接升級 HTTPS，這代表：

• 不用付錢，Blogger 免費提供我們網站 SSL 憑證
• 瀏覽器網址可以直接出現綠色鎖頭圖示，有助於 SEO 排名
• 不必再倚賴第三方伺服器，例如 Cloudflare，可以大大提升網站的速度

就像公辦都更總比自己找建商張羅一切來得方便，除了以上這些優點，官方幫我們處理 HTTPS 這件事，可以省下很多原本要處理的事。

藉著過年期間本站也升級為 HTTPS 了，順便整理一下 Blogger 幫我們都更的便利之處，以及其他的注意事項。

WFU 必須說，「Google 對 Blogger 的重視超乎一般人的想像」，自訂網址可升級 HTTPS 這件事，不但讓 Blogger 與免費部落格的差距越拉越遠，甚至我覺得花錢自架站的 CP 值遠低於 Blogger。套句熱門 Slogan，「你怎能不愛 Blogger」！

(圖片出處: goodfreephotos.com)

一、Blogger 測試版後台

2018.4.20 補充：現在 Blogger 官方已經正式開放此功能，不必進入測試版後台,
直接從後台就可設定了。


1. 測試版後台

這個功能其實官方還在測試中，尚未正式發佈，不過可以從這裡看到選項：

• Blogger 測試版後台

根據官網說明「Introducing Blogger... in draft」，實驗性的功能會先出現在測試版後台，等測試都沒問題後，再發佈到「正式版後台」。

所以沒事到測試版後台晃晃，運氣好就可以看到 Google 工程師在為我們研發什麼功能了。


2. 設定步驟

進入測試版後台 → 設定 → HTTPS → HTTPS 可用性 → 是




出現上圖黃色訊息，代表官方開始進行轉換，需要一段時間，有可能一下子，也可能超過十分鐘，轉換期間網站會無法進入。我測試了兩個網站，狀況如下：

• www.wfublog.com：不到 2 分鐘
• blogger.wfublog.com：十幾分鐘

我的猜測是，「WFU BLOG 主站」的流量相對較大，為了不影響營運，官方會優先處理。而「Blogger 中文論壇」流量很低，所以可以慢慢來沒關係。


3. HTTPS 轉址

上圖的「HTTPS 重新導向」，在官方作業完成之前，選項是無法設定的。等作業完畢，請務必將「HTTPS 重新導向」設定為「是」：

• 因為升級 HTTPS 之後，我們的網站會同時存在兩種網址：HTTP 與 HTTPS
• 這代表我們製造了兩個一模一樣的網站
• 那麼就會有內容重複的問題，可參考「重複內容對網站 SEO 會有什麼影響」
• 而「HTTPS 重新導向」設定為「是」後，HTTP 網站會被 301 轉址到 HTTPS 網站
• 這樣子 HTTP 網站就不會被搜尋引擎視為另一個網站了

二、官辦都更的優點

1. HTTP 連結

首先「BLOGGER 終於支援 HTTPS」詳細說明了 HTTPS 的各種優點。

不過這篇也提到：

只要切換為 https 模式，網頁中的所有連結，例如 js/css/jpg/html...，全部都要走 https，否則就會被判訂為 "混合內容"...請參考官網的中文教學：「修正網誌的混合內容」。

但是 WFU BLOG 轉換為 HTTPS 的結果，發現官方幫我們做了好多事：

• 網站各處的超連結就算是 HTTP，都不會被判訂為「混合內容」，瀏覽器網址依然可以出現綠色鎖頭！！
• 舊文章會留著多年前的 PICASA 圖床連結(HTTP 開頭)，官方會自動幫我們改為雙斜線開頭 "//"，因此不會成為「混合內容」
• 如果文章使用外部圖床(HTTP 開頭)，官方不會將網址改為雙斜線，但會產生 HTTPS 開頭的暫存圖片(放在 proxy)

這代表 Google 非常努力的在推動 HTTPS，讓我們舊文章各處的 HTTP 網址，無論是超連結或是圖片網址，不必再手動一一更改，就能無痛轉換為 HTTPS 網站！真的是非常感謝官方的付出。


2. 動態產生的連結

經過觀察，如果 HTTP 超連結網址是用 JS 動態產生，不會影響綠色鎖頭。

但如果 HTTP 圖片網址是用 JS 動態產生，那麼就不會出現綠色鎖頭，因為網頁被判定存在混合內容。

如果讀者的網站沒有裝什麼額外的外掛，一般不會出現這樣的狀況。但只要曾裝過外掛，就可能需要扮演柯南，逐一找出「混合內容」的出處到底在哪，研究如何解決。

三、轉換 HTTPS 的注意事項

以下列出目前我觀察到，轉換 HTTPS 後需要處理的要點。

1. 找出混合內容

官方提供的說明「修正網誌的混合內容」非常詳細，可按照教學處理，以下提供我的處理範例：




「Blogger 中文論壇」這個頁面的綠色鎖頭消失了，因為部分圖片使用了 JS 動態產生，且圖片網址是舊時代 PICASA 圖床，還沒使用 HTTPS 的網址。

使用 Chrome 瀏覽器 → 按 F12 → 切換到「Console」分頁，就可看到上圖的錯誤訊息，明確指出有 6 處同樣的混合內容(Mixed Content)，錯誤原因為載入了這張圖片：

• http://4.bp.blogspot.com/.../s100/blogger-community-orange.png

接著我們得靠經驗，看這張圖片是在文章、還是範本中產生，然後在那個地方，把網址改成 https 開頭，或是改成雙斜線開頭 "//" 都可，就能處理掉這個錯誤。


2. 簡易處理方式

可能需要修改的地方很多，這些 HTML 標籤都需要檢查：

• link
• script
• iframe
• video
• audio

在範本中一處處尋找很費事，以下提供簡易的處理方式。但修改範本之前，建議先閱讀「備份範本的訣竅」系列文章。

儲存範本後，使用編輯軟體開啟範本檔：

• 使用「替換字串」(replace all)功能，一次替換範本中所有字串
• 將字串 "http://" 全部置換為 "//"
• 另存新版本後，網站使用新的範本內容即可

3. 簡易方式後遺症

需要注意的是，這方法無法保證 100% 有效，也許可解決多數狀況，但可能會有這些情形：

• 因為不知道第三方程式是怎麼寫的，也有可能讓某些外掛、js 當掉。若出問題的話，如果沒有 debug 能力，建議請專家處理。
• 簡易替代字串的作法，是假設這些網址都能支援 HTTPS。實際上並非所有網站都支援 HTTPS，所以硬要消除「混合內容」的結果，就會造成載入不支援 HTTPS 的網址時失效。所以修改完後，仍須檢查 Chrome 的 Console 有無產生錯誤訊息，某些網址無法載入。
• 另一種後遺症是，例如某些網站的網址原本是 HTTP，並沒有支援 HTTPS，但外連被我們改成雙斜線 "//" 之後，將來連過去會強制跳到 HTTPS 網址，那麼這些連結就會變成 404 狀態了。
• 範本開頭的 html 標籤，這裡原有的 "http://" 網址字串不要更改，否則使用 FB 偵錯工具會報錯。

所以必須回頭逐一檢查所有的超連結 A 標籤，如果這個網站未支援 HTTPS，請手動將 "//" 改回 "HTTP://"，而這樣的修改不會影響到「混合內容」的判定。


4. 讚按鈕

FB 讚按鈕是依照網址來儲存數據，而 HTTP 與 HTTPS 會被視為不同網站，導致升級為 HTTPS 後，所有文章的讚數會歸零。

其實讚數是浮雲，相信多數站長可接受 HTTPS > 讚數。

如果網站文章數很多，又希望能保留這些讚數當作回憶，那麼可再找 WFU 處理。


5. G+ 留言板

順帶一題，G+ 留言板也是依照網址來儲存資料，因為本站沒使用，所以不知道轉換 HTTPS 後會不會異常。不過既然是自家產品，我相信就算現在有問題，將來官方測試完畢後，正式版 HTTPS 也會修正 G+ 留言板的問題。

四、後續動作

既然 HTTP 與 HTTPS 對搜尋引擎而言是兩個不同的網站，那麼很重要的，在 HTTPS 轉換完畢後，我們需要重新提交網站地圖，幫助 Google 建立網站索引，以利於轉換 SEO。




一進入「網站管理員(Google Search Console)」就看到上圖提醒，要我們增加 HTTPS 網站。

如需要「網站管理員」、提交索引的操作，可參考這兩篇文章：

• Google 網站管理員的活用方法﹍我的例行待辦事項
• Blogger 提供新的網站地圖(sitemap)格式﹍一勞永逸的提交方法

五、總結

過去所寫的「Blogger 自訂網址使用 HTTPS 是一條不歸路，請考慮周全」，原因在於 HTTPS 需要藉助第三方服務，而第三方將來要出什麼招我們無從猜測，命運掌握在別人手中是很可怕的一件事。萬一發生第三方無法存續、或價碼無法負擔之時，也就是我們網站的終結之日。

現在 Blogger 官方跳出來處理自訂網域的 HTTPS，也就是 Google 願意承擔我們的 SSL 憑證費用，那麼之前「不歸路」的擔憂就完全消失了。

現在起我們可以開心使用 HTTPS，網站有裝「聯絡表單」、「搜尋」工具的站長，除了將來瀏覽器不會出現「不安全」圖示，可以讓訪客填寫時更加安心，網站更值得信賴，而且「綠色鎖頭」圖示似乎也讓網站看起來更尊爵不凡呢！

更多「資訊安全」相關文章：

更多 Blogger 相關文章：