發表文章

目前顯示的是 九月, 2015的文章

Blogger 自訂網址使用 CloudFlare Flexible SSL 設定 HTTPS

圖片
在上一篇「Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗!」,已經對為什麼要使用 HTTPS 做了約略的說明。這篇我們就實際的運用 CloudFlareFlexible SSL,來幫自己的「Blogger自訂網址 ( 網域 )」設定HTTPS』。

使用 CloudFlare 必須要有自己的網址,如果有需求購買網址,可以考慮使用有兩步驟驗證設定的「NameCheap」;在 Blogger 中自訂網址的設定,也可以參考「Blogger 自訂網址綁定自有域名」的設置說明。如果你還沒註冊 CloudFlare,可以前往「註冊申請 CloudFlare CDN 網址綁定 DNS 設定 」觀看 DNS 的設置方法。



CloudFlare Flexible SSL 的設定,在測試時使用了三個網址分別測試幾種結果,而「Step 2.」的 Flexible SSL 設定 Always use https,是最為方便快速的方式,HTTP 網址會自動跳轉到 HTTPS 上頭 ( 強制 301 轉向 ),並在 Blogger 的行動版網頁「?m=1、?m=0」中,也能夠正確對應。

考量到「Crypto」頁籤,「HTTP Strict Transport Security (HSTS)」設定時的複雜性,建議使用「Step 2.」或「Step 4. (*『建議採用』2015/11/09 新增 )」的 Flexible SSL 設定方式即可。另外,在本篇的「小結」部份,也有對解除 SSL 做相關說明。

Blogger 的設定,除了一定要備份原始範本之外,也可以新創一個子域網綕,來做練習。在子域網誌中,匯入原始備份的範本,並套用 CloudFlare Flexible SSL,成功運行 HTTPS 綠色圖章之後,再將範本複製到平常在使用的網誌之中使用。

由於目前使用 CloudFlare CDN,在網路尖峰時間往往 ping 值會過高,這部份 CloudFlare 與中華電信在網路銜接上還在拉扯,詳情可見「這裡」。所以,對網站速度有要求的朋友,要使用 CloudFlare 的 Flexible SSL 部署 HTTPS,還需多做斟酌。



文章更新 (* 2017/01/10 ):
[教學] Blogger 自訂網址套用 CloudFlare Flexible S…

[教學] 註冊申請 CloudFlare CDN 網址綁定 DNS 代管設定

圖片
CloudFlare 為一家提供內容傳遞網路 ( Content Delivery Network,CDN ) 的服務企業;藉由分佈於全球各地的數據中心,供給 CloudFlare 代管 DNS 的主機,將網站的緩存檔案,自動分發至鄰近地區的節點,以加速載入網頁資料來改善訪客使用體驗。

CloudFlare 的 DNS 在銜接時相當流暢,從原本的 DNS 代管供應商,托管至 CloudFlare 不需要一分鐘。在 DNS 接入後,網站資料也幾近於即時更新的狀態,不會有過時資訊的產生。

CloudFlare 在代管 DNS 後,主機的 ip 位址即更換為 CloudFlare 提供的 ip 位址。若是在家自架主機,有需求隱藏自己的主機 ip 位址,也可運用 CloudFlare DNS 保護隱私。




除了更替了 ip 位址,CloudFlare 也能幫忙主機做一些功能性的幫助。例如:防止 DDoS 攻擊、支援 IPv6,並在主機臨時出問題時也能提供暫存資料,以確保網站能夠長期在線。

另外,DNS 的設定頁面在操作上也相當便利,是使用托拉的方式開啟或關閉當作切換 CloudFlare 的功能,而在單一帳戶也提供記錄數百萬條 DNS 資料;若升級到「Business plan」,也能自定義自己的 nameserives 名稱。

而不久前,在做「測試」時大陸地區只有香港一個數據中心。才一個月的時間,CloudFlare 在中國大陸地區又陸續增加了好幾個數據心中;相信日後使用 CloudFlare 時,會越來越快、越來越好用。




CloudFlare 除了免費的 CDN 與 DNS 代管,也提供 Security、SSL、Analytics、Apps 與優化設定供用戶使用。以下則是相關的 CloudFlare註冊CDN網址 ( 網域 ) 綁定 DNS代管設定教學,若你也想加入 CloudFlare 懷抱,不妨將本篇當作參考資料。



(16/07/22)文章更新:
CloudFlare 目前已新增台北數據路由中心,網站連線情況較撰文當時還要穩定了許多。


設置流程註冊 CloudFlare CDNCloudFlare DNS 代管設定 ( NameCheap、Name.com )
相關連結 CloudFlare 官網「https://www.cloudflare.com/

[教學] Blogger 文章中任意位置加入Google AdSense 廣告

圖片
Blogger 網誌模板範本應用教學:早前,介紹了在「Blogger 繼續閱讀隱藏廣告和物件」,是運用 blogspot 本身的「read more 繼續閱讀 ( <!--more--> )」在文章頁面自動擺放廣告。這篇則介紹於 Blogger 文章中隨意任意位置快速擺放 GoogleAdSense廣告的方法。

同樣的,我們會利用到 HTML 範本中的「文章主體 ( <data:post.body/> )」,並在安裝幾行 Div 與 JavaScript 之後即可完成設定;以後,只要在撰寫文章時,從「撰寫」切換到「HTML」模式,並在任意位置放入「<!-- adsense -->」,廣告就會順利推送。




當然,如果你希望廣告在推播到自己的網誌時,能夠有多一點的變化,也可以參考「Blogger 放置 Google AdSense 自訂廣告尺寸大小自適應網站安裝 Google AdSense 回應式廣告,三分鐘搞定!」這兩篇文章的廣告使用方式,做更靈活的配置運用。



設置流程找查需要置入程式代碼的 HTML 區段使用程式代碼包覆「文章主體 ( <data:post.body/> )」文章撰寫時放入「<!-- adsense -->」廣告的方式
設置前準備 若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設定教學 Step 1 找查需要置入程式代碼的 HTML 區段 前往 Blogger 後台,點選【範本 \ 編輯HTML】




在程式碼頁框裡面用滑鼠左鍵點一下,並按下鍵盤組合件【Ctrl + f】 ( 按著 Ctrl 再按一下 f ) ,在出現的搜尋框中輸入 [ <data:post.body/> ] 並按下鍵盤【Enter】




此時,在程式碼區間 ( 如果範本沒有改的太亂 . . ) ,可以找到三處有「<data:post.body/>」的程式碼片段。

第一個「<data:post.body/>」為 "行動模板" 的程式碼,如果模板改的很亂不確定是否為手機段的區間;可以在「<data:post.body/>」上方搜尋是否有「<b:includable i…

解決 Blogger 標題、描述於 Google 搜尋「?m=*」網址重複

圖片
使用 Blogger「行動服務」,開啟了「行動版範本」之後,若曾在 Google 中使用「site:網誌名稱.blogspot.tw」搜尋自己的 Blogger 文章,應該能察覺到,同一篇文章在 Google搜尋時,可能有標題描述網址重複出現「?m=1?m=0」的問題!

從電腦 ( 桌機 ) 版的搜尋者角度,試著觀察重複文章連結的網址結構;一般電腦版網站的網址結尾為「.html」,行動版 ( 手機版、移動版 ) 網站的網址結構則為「.html?m=1」或是「.html?m=0」,以上兩者皆為重複的部份。(*「.html?m=0」為「.html?m=1行動版網頁」切換回電腦版後所顯示的格式。)



在 Google Webmaster ( Search Console ) 設定中,如果沒特意挑除「.html?m=*」類型的網址。那麼,在每一次寫新文章時,就有一定的概率導致重複文章,出現於搜索結果中。

重複文章在搜尋頁面中出現,會讓文章權重比下降,進而造成文章在搜索結果上,有較為不理想排名。

你可能會想,怎不用 robots.txt 直接移除「?m=*」類型的網址就好了。行不通!因為若在 robots.txt 做了移除「?m=*」的動作,描述的部份會顯示如下圖的狀態。(* 左圖為正常,右圖因為在 robots.txt 中不索引「?m=*」類型網址,於 Google 搜尋中無法顯示網頁描述的部份。 )




而且,原本會在 Google 搜尋中顯示的「網站連結 (* 網站內的連結單元,由 Google 經由演算後產生的網站連結,『站長無法自行「啟用」網站連結。瞭解詳情』 )」也會消失 (* 如上圖左的:聯絡我們、版權聲明。) 。從上圖右與下圖的電腦版皆可觀察到,無法顯示網站連結。




關於 SEO ( 搜尋引擎最佳化 ),應該是每位站長都在關注的議題;若你的 Blogger 網誌在 Google 搜尋頁面中,也想剔除重複「?m=*」類型網址的文章標題及描述,不妨參考本篇的方法來做相關的佈署設置。



注意事項:
在做本篇設置前,請先閱讀完整篇文章後再做設定。並在動手試做時,先找一篇比較少人在看的文章做實驗,免除文章全數在 Google 搜尋中完全找不到的風險!


前置作業 註冊並提交 sitemap.xml 給 Google Webmaster,Blogger 的 sitemap.…

[密技] FeedBurner 設定 Blogger iTunes Podcast Media RSS

圖片
若你的 Blogger 網誌,有需求製作音頻單元,提供訪客更多元的學習資源。可以運用 FeedBurneriTunes Podcast ( 播客 ) 功能,燒製有聲 Media RSS;藉由 iTunes 的播送,豐富讀者除了在文字外的感官覺受。

iTunes Podcast Media RSS 製作時 ,需準備一個「網路外連 mp3 音源檔」;另外,如果在 iTunes Podcast 上播放時想顯示專輯封面,也可以預備一張「網路外連等比例 jpg 圖檔」,當作封面材料。




若你為第一次使用 FeedBurner,可以參考「FeedBurner 將 RSS 作者前 noreply@blogger.com 改為自己的 Email 地址 Step1.」註冊一個帳號,並確認 RSS 供稿為「RSS 2.0 ( http://blogname.blogspot.com/feeds/posts/default?alt=rss )」。好的,接下來,我們動工吧!



相關連結 FeedBurner:「https://feedburner.google.com/



設置前準備 一個網路外連 mp3 音源檔
一張網路外連正方形 jpg 圖檔
確認 RSS 供稿為「http://blogname.blogspot.com/feeds/posts/default?alt=rss」類型



設置流程FeedBurner 設定在 iTunes 中顯示圖片Blogger 加入 mp3 外連檔、播放器,確認音源檔成功推播iTunes 訂閱 FeedBurner Media RSS
設定教學 Step 1 FeedBurner 設定在 iTunes 中顯示圖片 在設置頁面,點選「Analyze 〉Configure Stats」,將「 Item enclosure downloads (podcast downloads)」打勾,再按下「Save」儲存。




選擇「Optimize 〉Smart Cast」,將「Include iTunes podcasting elements」打勾,於「Podcast image location:」填上圖片位址,並在「Create podcast enclosures from links to」選擇「any rich media file」。

「Podcast…

繼續閱讀: