發表文章

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

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

圖片
在上一篇「 Blogger 使用 SSL HTTPS ? Cloudflare TLS 初體驗! 」,已經對為什麼要使用 HTTPS 做了約略的說明。這篇我們就實際的運用 CloudFlare Flexible 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 ):

[教學] 註冊申請 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 CDN CloudFlare DNS 代管設定 ( NameCheap、N

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

圖片
Blogger 網誌模板範本應用 教學 :早前,介紹了在「 Blogger 繼續閱讀隱藏廣告和物件 」,是運用 blogspot 本身的「read more 繼續閱讀 ( <!--more--> )」在文章頁面自動擺放廣告。這篇則介紹於 Blogger 文章中隨意 任意位置 快速擺放 Google AdSense   廣告 的方法。 同樣的,我們會利用到 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/> 」為 "行動模板&qu

解決 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 搜尋中完全找不到的風險! 前置作

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

圖片
若你的 Blogger 網誌,有需求製作音頻單元,提供訪客更多元的學習資源。可以運用 FeedBurner 的 iTunes Podcast ( 播客 ) 功能,燒製有聲 Media RSS ;藉由 iTunes 的播送,豐富讀者除了在文字外的感官覺受。 iTunes Podcast Media RSS 製作時 ,需準備一個「網路外連 mp3 音源檔」;另外,如果在 iTunes Podcast 上播放時想顯示專輯封面,也可以預備一張「網路外連等比例 jpg 圖檔」,當作封面材料。 若你為第一次使用 FeedBurner,可以參考「 FeedBurner 將 RSS 作者前 [email protected] 改為自己的 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 podc

繼續閱讀: