2/20/2018

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

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

A+
blogger-custom-domain-official-https-upgrade.jpg-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. 測試版後台

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


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

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


2. 設定步驟

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

blogger-custom-domain-official-https-upgrade-1.jpg-Blogger 官方免費幫自訂網址升級 HTTPS! 設定處理流程注意事項整理


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


我的猜測是,「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-custom-domain-official-https-upgrade-2.jpg-Blogger 官方免費幫自訂網址升級 HTTPS! 設定處理流程注意事項整理

「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。


blogger-custom-domain-official-https-upgrade-3.jpg-Blogger 官方免費幫自訂網址升級 HTTPS! 設定處理流程注意事項整理

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

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




五、總結


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

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

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


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


更多 Blogger 相關文章:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

10 則留言:

  1. 报告一个情况。开户https后,人在大陆,不开通翻墙通道,原先可以访问的现在也无法访问了。不知道是什么原因。是不是https协议的网络传输被我大陆区给封锁了。那么又有什么对付方法没?

    回覆刪除
    回覆
    1. 等多久了呢?官方作業要一段時間
      原本有使用第三方伺服器嗎?例如 couldflare 都要關閉

      刪除
    2. 我想到你之前有在「Blogger 中文論壇」https://blogger.wfublog.com/2018/01/blogspot.html 問過其他狀況,也許是 DNS 設定問題所引起。由於 DNS 非我專長,如果無法解決的話,可能要去官方論壇發問:https://productforums.google.com/forum/#!forum/blogger

      或是看看這個討論串能否解決你的問題 https://productforums.google.com/forum/#!topic/blogger/KZe1f2HyvqQ;context-place=topicsearchin/blogger/https$20dns

      刪除
  2. 多谢,确实是DNS的问题,我增加了一条ghs.google.com的A记录,应该是可以了。

    回覆刪除
  3. 我使用翻译来阅读您的博客。

    回覆刪除
  4. 我還是忍住等待谷歌正式推出好了

    回覆刪除
    回覆
    1. 其實現在就可以轉換了
      如果擔心 DNS 設定問題,正式推出時,DNS 若原本設定有問題,同樣都要解決的~ XD

      刪除
  5. 萬分感謝WFU大,真的太實用了。
    自創立網站以來,一直是看您的文章才有信心留在Blogger。
    (雖然買了SSL下去,才發現Google有提供此佛心服務,但結果是好的就行了)

    回覆刪除
    回覆
    1. 不客氣~ 感謝支持
      原來你有買 SSL,應該是使用了 cloudflare,以後就可省下這筆昂貴的費用了 :)

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP