Blogger with Cloudflare, HTTPS and OpenGraph

今天把部落格升級成只支援 HTTPS 了！

之前 Blogger 早就支援 HTTPS 了，不支援使用自訂網域的站台。最簡單的解決方式就是透過 CDN 業者（如 Cloudflare）來幫忙處理使用者到部落格這一段連線。Cloudflare 部分的設定很簡單，就是把自己網域的 name server 轉到 Cloudflare ，針對特定網址啟用 CDN，並設定好要套用 SSL 連線的網站 pattern，細節可以參考：

[教學]Cloudflare 免費不限流量CDN、DNS代管，網站全球加速、減輕伺服器負擔

另外，在 Blogger 端則需要注意網站上是否有載入非 HTTPS 連線的物件，如圖檔/script/iframe 等等，最好是一起設定成使用 HTTPS 連線來載入。Chrome 的developer console 會顯示不安全的部分，可以參考修改之。主要參考如下：

[教學] BLOGGER 自訂網址套用 CLOUDFLARE FLEXIBLE SSL 設定全流程
How To Migrate From HTTP To HTTPS On Blogger Blog With Custom Domains

我主要改掉了圖檔的連結 tag 和幾個內嵌 iframe，並修改 blogger template search widget 李的連結，改成 data:blog.searchUrl.https，並且關掉導覽列。blogger template 裡關於 url 的 tag 幾乎都多了 https 的屬性可以使用，我在修改 opengraph 屬性時，用到不少。

之前參考以下資訊作了 facebook opengraph的meta data屬性支援：

[1] http://www.wfublog.com/2015/04/facebook-meta-og-setting-thumbnail-title-description-author.html
[2] http://philotech1982.blogspot.tw/2014/12/metatagsforbloggersharing.html
[3] http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html
[4] https://gist.github.com/pathawks/1343315
[5] https://developers.facebook.com/tools/debug/og/object/

這次就順便重新整理，加上 HTTPS 的部分並移到前面，取代掉 all-head-content 這部分的 blogger template ，因為這部分 template 不會自動產生 HTTPS 連結。最後的成果如下：


另外也順便調整了版面寬度和 title 格式。之後可能會再加上 logo，或再調整樣版。