部落格文章修改發佈日期對 SEO 的影響
最近一位客戶的 SEO 流量掉很多，在協助尋找原因的過程中，詢問是否曾經為了 SEO 而做過哪些動作。因為有不少站長可能從網路接觸一些 SEO 文章，除了內容不一定正確，也可能該手法已經過時，所以有必要釐清客戶是否不小心做了哪些動作導致被處罰。 客戶表示「如果是以前寫的舊文章...
繼續閱讀全文常用程式碼片段的管理技巧及使用工具
協助前端架站久了之後，有許多常見的小工具會用到，代表需要安裝的程式碼中，有一部份是重複性高的，例如： FB 讚、分享按鈕 各種社群分享按鈕 FB 留言板等等 能重複使用的程式碼自然較有價值，即使是不能 100% 套用，但只要修改一部份就能用在新的情境，也是可節省大量時...
繼續閱讀全文讓 Google Photo 實現各種相簿畫廊或輪播效果
Google 相簿由於官方的用意並非設計來當作圖床，那麼想要自行製作各種 Google Photo 工具相當不容易，例如在網頁上展示各種畫廊圖片排版效果、或是利用 Google Photo 來輪播等等。 主要是官方不提供任何輕易取得圖片外連的方法，如同這篇「 Google 關...
繼續閱讀全文Adsense 申請 + 廣告無法顯示的各種疑難雜症整理
最近一兩年詢問如何申請 Adsense 的案例越來越多，跟以往相較之下可說是門檻提升不少，這代表 Google 透露出這樣的訊息： Adsense 申請資格已經不像 5~10 年前那麼容易 投放(買)廣告的業主增加速度，遠不及想要擺放廣告的網站增加速度 供給小於需求的情況...
繼續閱讀全文什麼案子需要簽約？什麼情況不需要簽約？
一般來說簽約主要是對客人，不過最近遇到的狀況不太一樣，一位配合的設計師可能是金額比較大，為了求保障因此要求簽約。 雖然我接案一向沒有簽約，但設計師的要求其實我完全可以理解，這是所處的環境不同，背後的含意算是有滿多東西可以講的。 (圖片出處: pxhere.com )
繼續閱讀全文從任意網站(痞客邦、WP)無痛搬家到 Blogger，不影響 SEO 搜尋排名
之前這篇讀者提問「 Blogger 網址買了很後悔，可以再搬到新網址嗎？ 」，當時想到的解決辦法是把文章搬到新的 Blogger 網址，然後舊的 Blogger 做搬家畫面導向新網站，花幾個月的時間慢慢移轉 SEO。 後來熟悉「 Google Cloud Platform 架...
繼續閱讀全文使用 Google Apps Script 爬網頁資料，解析 HTML 及操作 DOM 的技巧
前陣子接到的需求，要使用爬蟲程式撈特定網站資料回來，那麼利用 Google 試算表是不錯的選擇，除了每個儲存格的容量最多有 50000 個字元，還可用 Google Apps Script(以下簡稱 GAS) 執行爬蟲程式、處理各種細節。 不過撈完網頁內仍後，如何解析 HTM...
繼續閱讀全文Blogger 文章自動產生目錄大綱區塊
今年的 Blogger 架站案例中，好幾個都要求在文章中製作一個區塊，裡面擺放多個錨點超連結，點擊後可跳到文章中對應的大標題。 雖然每個案例的客製執行效果都不同，有的將這個區塊放在側邊欄浮動，有的希望每個錨點分別出現在自訂位置，有的希望所有錨點集中在文章開頭，不過目的都是相同...
繼續閱讀全文讓 RWD 表格能自動排序
過去為網頁表格的處理寫了不少文章，例如「 自適應 RWD 表格 」、「 讓網頁表格自動排序 」。 後來發現，效果比較好的 RWD 表格，因為手機的表格形式跟網頁已經完全不一樣，那麼在行動版將無法做到自動排序。 有次無意間在手機看到 NBA 的統計數據表格，算是比較傳統的 ...
繼續閱讀全文Google Cloud Platform 架設 WordPress 心得整理﹍HTTPS + FTP + 永遠免費方案
最近處理客戶需求得使用 WP 作業一段時間，想到「 Google Cloud Platform 雲端平台 」(以下簡稱 GCP) 提供了一年免費測試的服務，剛好可以來研究看看。 而且如果測試網站流量不大，那麼 GCP 還有「 一律免費 」方案，符合條件時也是有可能架設的 WP...
繼續閱讀全文jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大
在網頁上展示相簿圖片可以有幾種作法，最常見的是使用輪播效果，過去介紹過幾個知名的 jQuery 外掛(使用 CDN)： 最熱門 jQuery 圖片輪播外掛 Owl Carousel 過場效果華麗的 jQuery 圖片輪播外掛 Camera 優雅又八面玲瓏的 jQuery ...
繼續閱讀全文使用 Gmail API 讓郵件插入圖片及 HTML﹍Google Apps Script 障礙排除 + 實作範例
上一篇說明完「 使用 Gmail API 寄信簡易管道 」流程，接著要實作利用 Gmail API 在郵件中插入圖片。 其實處理純文字郵件就已經挺複雜麻煩了，然而跟本篇相比，還算是小巫見大巫。啃了大量的郵件通訊格式資訊後，結果發現就算是使用完全正確的格式，Gmail API ...
繼續閱讀全文前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳，有效節省儲存空間﹍實作範例
以前處理過一個客製系統，有多處需要註冊會員上傳圖片： 會員頭像 證件留底 設施環境介紹照片 由於使用者各種年齡層都有，不是每個人都網路世代，懂得先壓縮 JPG 檔再上傳，那麼上傳的圖片檔案可能會超出工程師想像。大部分中高齡使用者可能直接從手機選了圖片就上傳，也不會知道...
繼續閱讀全文Blogger 可以在行動裝置發佈文章+上傳圖片的 APP 整理
Blogger 社團這則「 討論串 」詢問 "是否有什麼app可以編輯好圖文然後上傳"，原本認為這是很困難的事，因為年初 Google 宣布「 Picasa 關閉上傳圖片的 API 」，導致現在 Blogger 發文軟體已經沒有用處了，例如知名的 Open L...
繼續閱讀全文協助自架站、WP 搬家到 Blogger 流程紀錄
前陣子接到幾個需求，部落格想要從自架站、WordPress 搬到 Blogger，找上本站尋求協助。嚴格來說這比較不尋常，因為我在「 Blogger 是否搬家到 Wordpress 的比較 」曾提到，部落格成長週期有三階段：免費部落格平台 → Blogger → 自架站。那麼從自...
繼續閱讀全文CSS 撰寫技巧及規範﹍維護心得整理
前端開發 CSS 寫久了之後，發現幾個麻煩的地方： 命名字串想破頭，要避免重複，又得能正確理解 日後維護修改時，要找到正確的區塊位置得花不少時間 壓縮過的 CSS 碼無法閱讀、不易維護，好閱讀的 CSS 碼太冗長 因此決定研究一套方便維護 CSS 碼的作法，本篇心得比...
繼續閱讀全文使用 Gmail API 寄信的簡易管道及障礙排除﹍Google Apps Script 實作範例
最近研究 Gmail API 才發現，處理郵件是一件非常麻煩的事，操作 Gmail API 可說是我目前為止，所有經手過的 API 之中最難搞的一個。 如果可接受比較簡化的功能、不一定要使用 Gmail API 的話，那麼 Google Apps Script(以下簡稱 GA...
繼續閱讀全文讓網頁表格自動排序﹍實作範例教學 (HTML 線上產生器)
之前寫過一篇「 讓網頁表格能自動排序﹍TableSorter 安裝懶人包 」，只要安裝這個外掛就能達到排序的效果，看起來非常方便。 但最近接到的需求除了要讓表格排序，還得讓案主知道怎麼做出表格來，這下就麻煩了，因為很多站長其實不熟悉 HTML 碼，自然也不知道表格 Table...
繼續閱讀全文利用科學數據，決定網頁是否安裝特定外掛，優化網站配置﹍實作範例
過去我們網站擺放的各種外掛、小工具，一開始是如何決定的呢？是因為個人喜好，還是因為別的網站有裝，還是猜測訪客應該需要？ 如果不確定為何而裝，那麼想必站長們都知道，外掛裝越多，網頁載入速度越慢，那麼究竟哪些外掛該移除呢？ 還有，我們會在網站各處擺放各種想推廣的文章連結，你知...
繼續閱讀全文統計歸納網站所有連結的點擊成效﹍GA 事件追蹤器(會員加值文章)
2023.3.27 公告： 從 2023.7.1開始舊版 GA 將失效，請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 上一篇「 GA 事件追蹤器 」的免費版功能比較少，本篇的版本可以做到這些事： 排除 Blogger 站長自己的點擊 對小工...
繼續閱讀全文網站管理員提交文章時，出現「網址不在 Google 服務中」訊息怎麼辦？
最近接獲線報，表示使用 Google 網站管理員(新版 Search Console)，在上方搜尋框輸入網址查詢時，出現了訊息「網址不在 Google 服務中」。案主表示： 之前利用檢索都可以順利在Google建立索引，但從前幾天開始即使送出需求，網頁也一直無法建立索引，不曉...
繼續閱讀全文在部落格側邊欄安裝 Instagram 小工具，顯示九宮格圖片
2020.7.14 公告： Instagram 官方宣布在 2020 六月底舊的 API 失效，所以本篇的工具已無效用，需要新的工具請參考「 利用 Instagram 基本顯示 API 取得圖片 」。 前陣子接到一個需求，希望在網站側邊欄擺放 IG 小工具，能顯示 9 張圖...
繼續閱讀全文蘋果新聞訂閱制，從 SEO 觀點看背後的真正意圖為何
前陣子蘋果網路新聞實施會員訂閱制，在網路界造成一股轟動，不過我並沒有看好，原因可參考「 部落格是否要加入內容付費平台 (Medium) 的考量 」。台灣目前還不具備訂閱制的成熟客觀環境，當先驅者會非常辛苦。 後來在 PTT 瀏覽器版看到這篇「 蘋果日報台灣 免申請會員便可瀏覽...
繼續閱讀全文Blogger 無法使用 Open Live Writer 後，寫文章有什麼替代方案？
Open Live Writer (以下簡稱 OLW) 是很多 Blogger 站長愛用的部落格寫作軟體，主要是上傳圖片的流程比較方便。不過 Google 宣布 2019/3/15「 永久關閉 Picasa 上傳圖片的 API 」之後，再也沒有管道可以用程式上傳圖片到 Picas...
繼續閱讀全文各種「網頁失效連結」檢測工具評價分析及使用心得
以往都是使用「 Google 網站管理員 」定期檢查有無索引錯誤，也就是內部有沒有 404 無效連結。由於以前覺得文章數跟大站相比不算多，不怎麼注意外部連結會失效的問題，不過最近「 Google+ 關閉 」、「樂多」停業後，網站會產生大量的無效連結，覺得也該是時候來檢查一下網站的...
繼續閱讀全文查詢網站所有連結的點擊成效﹍GA 事件追蹤器
2023.3.27 公告： 從 2023.7.1開始舊版 GA 將失效，請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 我們的網站可能裝了各式各樣的小工具，例如： 首頁的輪播 側邊欄的標籤、熱門文章、精選文章... 文末的相關文章、延伸閱讀...
繼續閱讀全文網頁出現看不見的特殊字元或方框時，該如何處理？
有時我們會在網頁上看到亂碼，或是一堆方框，代表那些字元因為系統沒有對應的字型，或是字型不含這些編碼，所以無法顯示出來。 這次遇到的案例很特別，手機上會看到無法顯示字元的 "方框符號"，網頁版卻看不到，以下來看看如何找出原因及解決。 (圖片出處: pix...
繼續閱讀全文Google Domains 台灣可以使用了﹍購買 + 轉移網域(Godaddy) + DNS 設定心得
幾年前在「 Godaddy 購買網址 」，一次買五年+隱私保護折價券，平均起來一年不到 USD 10。然而幾年過去，Godaddy 上市了，續約折價券沒了，隱私保護貴得離譜，網址續約不斷漲價。 雖說用起來滿穩定的，但續約的 CP 值低得可憐，所以近一兩年在網址到期前，我不斷觀...
繼續閱讀全文Blogger 或部落格使用 Markdown 加快寫作速度的各種方案優劣分析
前陣子有讀者在「 Blogger 文章相關工具 」留言，詢問 Blogger 使用 Markdown 撰寫所發生的問題。雖然以前大致瞭解過 Markdown 的用法，但沒發表過相關文章，那麼現在就藉機會整理一下相關資料。 許多 Markdown 愛用者會希望 Blogger ...
繼續閱讀全文Blogger 網站如何追蹤 Google Analytics 點擊事件的成效？
2023.3.27 公告： 從 2023.7.1開始舊版 GA 將失效，請改用 GA4 並閱讀這篇「 GA4 如何追蹤自訂事件的成效及建立報表 」。 之前接到一個需求，想在 Blogger 網站監測連結點擊的成效，收集不同優惠方案的點擊數據。 只要網站有安裝 Google ...
繼續閱讀全文前端操作 Apps Script 上傳檔案到 Google Drive 並取得連結﹍實作範例
先前示範過「 操作 Github API 上傳檔案 」的作法，這次介紹如何操作 API 上傳檔案到 Google Drive。 實際上，如果真的使用 Google Drive API 來上傳檔案有些麻煩，因為需要走 oAuth2 驗證權限、每次都需取得 Access Toke...
繼續閱讀全文千萬別用 Wix、Weebly 這一類架站平台，將來想搬家都不行
前陣子接到一個搬家需求，想要從 Wix 搬到 Blogger。其實 Wix 風評很差過去已有耳聞，例如我在「 是否痞客邦、WordPress 的 SEO 比 Blogger 好，有這樣的事嗎？ 」說過，Wix 的內容都是用 JS 產生，對 SEO 而言很糟糕。 而客人表示要 ...
繼續閱讀全文為何 Blogger 封存頁面(archive)不該被索引？
用 Google 搜尋自己網站名稱時，如果權重還不錯的話，可能會有 2~6 個額外的「 網站連結 」 (sitelink)。如不清楚這是什麼意思，可參考這篇「 認識搜尋結果的 Sitelinks 」。 由於這 6 個額外的 sitelink 連結無法自行決定，我常常搜尋自...
繼續閱讀全文SEO 紅利還剩多少空間可以操作？為何部落格不需要在意 SEO 架構？
接到的 Blogger 商業架站需求中，常會附帶要求加強 SEO，其中有些甚至希望改善 Blogger 的 SEO 架構。 從這些站長提供的背景故事中，發現某些共同現象： 以前搜尋結果大多在第一頁，但近期排名越來越後面，甚至快要搜尋不到了 。 於是 開始懷疑自己做錯了什...
繼續閱讀全文網頁 API 測試工具整理﹍免費線上服務 + 軟體
前端開發工程師常需要串接各種第三方服務，例如 FB API、Google API 等。如果直接寫程式呼叫 API，可能會花不少時間 debug，來排除各種意想不到的錯誤。 Google 與 FB 很體貼開發者，官方大部分都有提供線上 API 測試工具，例如： FB Gra...
繼續閱讀全文讓 FB 社團文章能依「貼文主題」分類﹍實作記錄
FB 社團長久以來給我的印象一直都不太好，因為實質上只是個大型塗鴉牆，除了 Google 搜尋不到，再怎麼有內容的分享、再優質的討論串，2~3 天後就沉得不見蹤影。對於資訊的分類、保存、去蕪存菁，都不具備一個正常討論區該有的功能。 直到近期看到不少 FB 社團有「貼文主題」的...
繼續閱讀全文不是使用 CC0 圖片就沒事，若要「商業使用」請注意這些案例
製作「 CC0 免費圖庫搜尋引擎 」幾年下來，「 留言板 」累積了不少提問，其中有很多商業使用的相關問題，代表使用者會擔心 CC0 圖片仍有侵權問題。 這樣的考量是正確的，因為 CC0 圖片雖然標榜「可商業使用」，但請注意以下的邏輯： 「CC0 圖片可商業使用」不等於「所...
繼續閱讀全文利用 Github API 上傳檔案﹍操作範例心得整理
「 Github 」是免費架設靜態網頁的好選擇，同時也提供了完善的 API，不必手動操作，用程式就能更新網頁，也能管理 Github 上的所有檔案。 本篇整理如何利用 Github API 上傳檔案的流程，並提供前端操作的範例程式碼。 (圖片出處: flickr.com ...
繼續閱讀全文如何用 Javascript 複製文字﹍跨瀏覽器相容 iOS
最近接到的需求類似「點擊按鈕後自動複製折價券代碼」這樣的功能，因此研究了一下如何實現前端利用 Javascript 複製文字。 多年前曾在「 如何用語法保護網頁文章著作權 」多篇系列文寫相關功能，但這些年網頁技術進展很快，HTML5 新的 api 讓複製文字變得相當簡單。 ...
繼續閱讀全文Google+ 關閉對 Blogger 的影響整理
相信每個人最近都會收到一封 Google 寄來的郵件「您的 Google+ 個人帳戶將於 2019 年 4 月 2 日停用」，而不少 Blogger 站長們對這個訊息感到恐慌，紛紛詢問是否會造成什麼影響，例如圖片會不會不見？Blogger 是不是會收起來？ 由於 Blogg...
繼續閱讀全文主流 CC0 圖庫已不再宣告「CC0 條款」，原因究竟為何？
去年「 CC0 免費圖庫搜尋引擎 」有忠實使用者傳來訊息提醒，收錄的 CC0 圖庫之中，「攝圖網」(699pic.com) 有照片為 VRF 授權，並非 CC0 授權。 詳細檢查了一下何謂 VRF，根據「 官方條款 」內容，以及該網站的「 免費用戶使用權限 」，使用圖片需要註...
繼續閱讀全文FB 社團初期如何增加成員人數﹍心得整理
前陣子成立新的 FB 社團「 Blogger 經營學習資源分享 」，心情跟當初成立「CC0 免費圖庫」粉絲團一樣，擔心一開始人數少，會影響新成員加入意願，還找出一套「 FB 粉絲團快速互助增加按讚數攻略 」。 但 FB 社團可不一樣，用粉絲團那一套衝人數是行不通的，因此花了不...
繼續閱讀全文網頁安裝思源宋體﹍CSS 最佳化實作 + 展示頁面
上一篇「 網頁安裝思源黑體﹍載入速度最佳化實作 」已說明了 Google Fonts 的中文字型處理技術原理，本篇直接說明如何安裝「思源宋體」。 最佳化的要點為： 手動拆解官方 CSS 檔內容，逐一加入 font-display: swap 參數 把所有 CSS 內容塞...
繼續閱讀全文為何 Flickr 會刪除免費圖片額度？原來 Google 關閉了這個服務
Flickr 去年底發佈了這項震撼彈「 不給錢就刪圖！Flickr宣布終止1TB免費空間服務，免費用戶將只能保存1000張照片、其餘照片全數刪除 」，截止日期是 2019/2/5，在那之後 Flickr 會將免費版圖片刪除到剩下 1000 張。 2 年前曾在「 其實 Goog...
繼續閱讀全文直接修改 Blogger 上傳的圖片網址參數(Picasa 圖床)，就能改變尺寸、進行裁切、加強 SEO
從 Blogger 上傳的圖片、甚至 Google 相簿其實都是放在 Picasa 圖床， 詳細原理可參考「 其實 Google 相簿依然是 Picasa 」。 而 Picasa 圖床有著全世界其他圖床都沒有的技術，只要修改網址參數就能改變圖片尺寸，以及其他各種功能。 在...
繼續閱讀全文網頁安裝思源黑體﹍CSS 最佳化實作 + 展示頁面
前陣子與朋友討論網頁安裝「思源黑體」的效果，有強者大大告知現在載入字型檔時，會拆成上百個小檔案。研究後發現這真是 Google Font 技術上的一大進步，「思源黑體」也正式成為我的選項之一。 以我個人的看法，微軟正黑體作為網頁內文主要字型的話稍微偏細，思源黑體視覺效果比較適...
繼續閱讀全文網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析
過去在「 網頁中文字型除了微軟正黑體, 還有這些好選擇！ 」曾提過，網頁若使用「作業系統」以外的字體，由於中文字型檔案太大，會影響網頁載入速度。 後來 Google Fonts 免費讓「 讓思源黑體可直接外連 」，使用 Google 的 CDN 伺服器肯定比自己找網頁空間的連...
繼續閱讀全文如何運用 FB 社團外掛進行推廣﹍網頁版 + 電子郵件
FB 粉絲團到達一定規模後，成立 FB 社團有很多好處，可讓(相同興趣的)粉絲交流共同關注的主題，話語權不再是單一來源。 萬事起頭難，無論是粉絲團或社團，初期如何增加粉絲數、或成員，都是會傷透腦筋的一件事。 本篇會說明如何利用 FB 官方提供的社團外掛工具，在自己網站增加...
繼續閱讀全文
