- Irvinglab 爾文實驗室
- Posts
- 🚀 網站 = 建立成本 x 維護成本｜Shopify 版型升級注意事項｜爾文開發的 Chrome 瀏覽器 SEO 外掛｜重新學習 WordPress｜Open AI 推出 SearchGPT
🚀 網站 = 建立成本 x 維護成本｜Shopify 版型升級注意事項｜爾文開發的 Chrome 瀏覽器 SEO 外掛｜重新學習 WordPress｜Open AI 推出 SearchGPT
💎 科技工具分享 - Tella 全方位螢幕錄製工具，讓您在 Mac 和 Windows 上輕鬆創建精彩的產品演示、教程和課程，可以錄製完後直接分享連結，超級方便
Irving Chen
July 29, 2024
Irvinglab 爾文實驗室
~ 此篇內容頗豐，記得看到最後，相信會有收穫 ~
我眼中的網站：網站 = 建立成本 x 維護成本
一般最常被忽略與忽視的是「維護成本」，其中「成本」的定義：包含時間成本、人力成本、金錢成本等，這概念適用於所有建站方式，無論是使用架站平台還是工程師開發。以下我們以 Shopify 架站時，升級版型或更換版型為例：
🚀 Shopify 版型升級或更換注意事項 2024
我主要分成三個大項目執行與確認，盡可能每個細節都要找到，以防在版型升級後出現嚴重的問題，至少關鍵的產品頁、購買流程、優惠資訊等要顧好，遇過最棘手的情況是從版型 Shopify 1.0 → 版本 Shopify 2.0。因此每個環節都要邊檢視邊紀錄，並跟相關執行團隊保持同步更新步驟與演練，讓整個任務順暢完成。
🍎 執行項目一：Shopify Theme 版型
自訂佈景主題的設定按照舊版型重新設定在新版型，Theme settings 和 App embeds 算比較好執行，通常最需要麻煩的是轉移一般頁面範本 Page Template 和產品頁範本 Product Template。
網頁頁面當初建立的方式
若使用的是 Shopify 版型自訂佈景主題範本建立各種頁面範本：那升級版型時就麻煩多了，必須手動人工逐一設定還有必須等新版型發布後，才能套用範本，相當費時費力。
若使用的是 Shopify App 頁面編輯器：例如 PageFly Page Builder 等，那升級版型時輕鬆多了，幾乎無痛轉移、頁面直接套用 PageFly 自動生成的頁面範本，只是有可能需要稍微更新一些範本中的排序設定即可。
全站自訂的程式碼
很多我們自己手動撰寫的程式碼如 Liquid、CSS、JavaScript 等都必須找出來，然後設定到新版型「對的地方」中。
找出之前不同的人進入網站中分別客製化的程式碼，無論是 HTML / CSS / JavaScript 或 Liquid 等，都要嘗試套用在新版型中。由於新舊版型的程式碼架構隨著迭代的版本越多差異越大，所以在轉移時還是有可能造成工時的拉長。
🍎 執行項目二：Shopify App
不同的 Shopify App 在安裝與移除的設定方式都不完全相同，先將所有 App 列出，並逐一排查與找出初次安裝的方式與過程，透過其線上文件、操作影片、客服詢問以獲得更多的了解，這樣才能在升級新版型時不會遺漏關鍵步驟
所有 Shopify App 都需要逐一檢查，必要時「需要重新設定」
有些 Shopify App 完全不用動作
有些 App 只會指定安裝到特定版型，所以新版型要重新安裝到「未發布的新版型」
有些 Shopify App 必須等到升級完版型後才能設定
部分 App 安裝步驟比較瑣碎，會需要「手動置入程式碼」
有些自己客製化的 Shopify App 記得要轉移程式碼
部分 App 沒有提供讓我們能安裝在「開發商店」中，亦即不讓我們安裝在 Sandbox 環境下執行測試
🍎 執行項目三：網站追蹤碼
網站分析工具和投放廣告的程式碼也相當重要，別忽略啊。轉移到新版型後要記得在上線後立即測試是否正常運作。追蹤碼的設定也要預先確認當初的設定是手動設定，還是部分是靠 Shopify 內建整合功能或其它 Shopify App 設定。
常見的追蹤碼
GA（Google Analytics）：可以手動設定也可以直接在 Shopify 綁定帳號快速完成
GSC（Google Search Console）：通常 GA 驗證過後，GSC 可以直接驗證，但需要 GA 最高權限的人執行
Meta Pixels（Facebook Pixels 臉書像素）：可以手動設定也可以直接在 Shopify 綁定帳號快速完成
Google Ads 廣告追蹤碼
Google Ads Remarketing 再行銷追蹤碼
GTM（Google Tags Manager）：有些追蹤碼會直接設定在 GTM 中，所以會以為沒安裝，例如 GA、Google Ads 等可以直接透過 GTM 設定
其它
Twitter Analytics
Microsoft Clarity
Hotjar
…
以上內容會持續更新在此文章中，歡迎蒐藏與隨時回來閱讀：Shopify 版型升級或更換注意事項
Irvinglab 是擁有豐富實戰經驗的的網頁設計公司也是 Shopify Partner，擅長以品牌為中心的電子商務及企業網站和部落格設計，專攻 Shopify 和 WordPress 網站設計與建置
一步一腳印，踏實又穩重
💧 爾文為自己開發的 Chrome 瀏覽器 SEO 外掛 2024
💧 爾文為自己開發的 Chrome 瀏覽器 SEO 外掛：Irvinglab SEO Essence Extractor 萃取冰滴
💧「萃取冰滴」，我喜歡這個名稱，極簡貼切想表達的意思
使用過很多有關 SEO 的 Chrome 瀏覽器外掛，雖然功能都相當不錯，但我發現自己用來用去最常需要查看的資訊就那幾項，例如頁面標題、頁面描述、網址、社群預覽圖片網址等，想說將所有資訊與功能集中在一個畫面、減少滑鼠點擊的次數，讓我一鍵就看完多便利，於是就針對需求自己打造一款屬於自己工作時最需要用的 SEO 外掛，名稱為「 Irvinglab SEO Essence Extractor 萃取冰滴」
大概用三天開發就上架，然後大概不到一天的審核時間就正式出現在 Chrome Web Store 線上應用商店，開放所有人都可以安裝！
放心，是免費的，我會持續優化內容與排版、新增實用功能、分享資訊與資源在此外掛中，之後會錄製影片講解我都如何使用此外掛，歡迎安裝並隨時來信給我回饋與許願，我會吸收評估 ^^
💧 簡介：旨在幫助網站管理員和 SEO 專業人士快速獲取網頁的重要 SEO 資訊
💧 特色功能
快速擷取 SEO 資訊：一鍵擷取並顯示網頁的 Meta Title、Meta Description、Canonical URL 等關鍵 SEO 資訊
顯示語言資訊：自動偵測並顯示網頁的語言設定
Robots.txt 連結：快速連結到網站的 Robots.txt 檔案，以檢查網站爬蟲設置
Open Graph 標籤：顯示網頁的 Open Graph 標籤，包括 og:image、og:type、og:site_name、og:title、og:description、og:url 等
查詢 IP 地址：內建按鈕可查詢並顯示使用者的當前 IP 地址
一鍵複製：所有擷取的資訊均可一鍵複製，方便用於報告或其他用途
Sitemap 擷取：自動偵測並顯示網站的 Sitemap 連結，方便檢查網站結構
標題數量統計：顯示網頁中 H1 – H6 標題的數量，方便檢查內容結構
簡潔介面：直觀的使用者介面，資訊一目了然
持續新增與優化，敬請期待！
🍉 2024 年重新學習 WordPress
探索 WordPress 6.6 全新介面與功能，令人感到煥然一新的是自訂佈景主題的設定，滿滿的現代簡約風格，搭配幾乎白底的古騰堡編輯器，在撰寫文章或規劃排版時用起來格外舒適。
前往了解更多：WordPress 6.6
其他參考資料：WordPress 更新紀錄 Releases
🍉 Open AI 即將推出 SearchGPT，直球對決 Google Search 和另一個 AI 智慧搜尋引擎 - Felo Search
SearchGPT
Open AI 即將推出 SearchGPT，直球對決 Google Search 和另一個 AI 智慧搜尋引擎 - Felo Search，太期待
Felo Search 使用體驗已經相當不錯，搜尋結果結果除了直接給答案，也附上資料來源、相關問題、相關圖片、相關影片等，有點類似 Google Search Generative Experience (SGE) ，但 Felo 比 SGE 更簡潔扼要的呈現。接下來就看 Open AI 的 SearchGPT 表現了
備註：Google SGE 在國外已經不斷進展，但在台灣還沒看見個影子。
Felo Search
💎 互動網頁程式：線上課程推薦指數 ⭐️⭐️⭐️⭐️⭐️
可以入門網站基礎的架構與開發，網頁元素精準的掌控，刻出簡單有趣，視覺好看的網頁與小動畫，也會講基本的架構手法，讓你做出來的網頁易於維護也能讓工程師接手。
將 HTML/CSS 融會貫通，輕鬆入門，順暢進階
從零紮實入門 JavaScript 程式與動畫基礎到進階互動
入門 Vue.js 掌控資料與顯示的前端框架
整合應用 - 整合應用網頁技術與數學原理，完成有設計感的互動性網站
💎 科技工具分享 - Tella
Irving 爾文會在每次分享電子報時分享一個我正在使用或精選蒐藏的軟體工具，包含各種領域類別如 UIUX 設計、網站、電商、行銷、社群、AI 等。
設計 Design
Tella：全方位螢幕錄製工具，讓您在 Mac 和 Windows 上輕鬆創建精彩的產品演示、教程和課程，可以錄製完後直接分享連結，超級方便！尤其可以用在跟客戶或客服講解說明使用，省下不少另約會議時間，無論是團隊內部或外部溝通、錄製線上課程使用、線上簡報等都適用！
若對電子報有任何想法或建議，可以填寫回饋表單，我會納入評估作為優化的方向，提供更優質的內容 ^^
Teamwork makes the team work
💎 Line 學習社群
Shopify 網站設計與架站學習交流
分享主題從網站規劃、設計到建立等相關內容，透過學習交流與經驗分享，讓彼此成長更加快速，主要以 Shopify 建立電商網站為主。
WordPress 網站設計與架站學習
學習 WordPress 網站設計與架站，分享實作經驗與交流。
SEO 資源彙整與學習
閱讀 SEO 就像喝水一樣，習慣建立與自然地吸收。
成為網頁設計師
邁向網頁設計師之路，了解網頁設計的基本概念與實作經驗交流與分享，無論是行銷人、工程師、平面設計師等想要了解更多「網頁設計」都歡迎加入討論。
Learning by Reading → Learning by Doing → Learning by Sharing
Irving 爾文
專注網頁設計與架站平台、SEO 搜尋引擎優化，深度研究品牌行銷、UX 策略與數位產品、電商經營等領域，熱衷科技、設計與文字創作、社群分享。
#藝術 #設計 #科技
★ Founder of Irvinglab 爾文實驗室
★ Web Design Lead / Senior Web Designer / SEO Manager
★ 專精 Shopify 電商網站設計與架站
★ 專精 WordPress 品牌網站和部落格建置
★ 工作經歷大小型公司 (包含品牌方與代理商)、網頁設計接案公司、數位行銷公司、新創 Saas 軟體公司等
➤ 聯繫方式：Line 官方帳號 | Channel 線上交談
➤ Email：[email protected]
降低資訊落差，幫助所有人做出最佳判斷，符合現階段的需求與成本考量，以提出最佳解決方案
Reply