CSS 的 if() 搭配 變數系統 或 attr() ，讓我們能直接用 CSS 判斷條件或 HTML 屬性自動達成樣式變化，在某些情況下不再需要寫任何 JavaScript。 範例 我們可以用不同 class 搭配變數不同的值，再加上 if 和 else 判斷來自動設定 background-color 的值： :root { --color: #333; } .element { background-color: if( style(--color: #fafafa): black; style(--color: #ed5fe8): #000a75; else: white); } .dark { --color: #fafafa; } .esport { --color: #ed5fe8; } 你可以注意到，寫複數個判斷條件還可以實現「else if」的效果。 但直接使用的缺點也很明顯，就是直接判斷變數的值太不直觀了，所以我們還可以用上 attr() 來改良。 用 attr() 優化 if() 的判斷條件 這裡我們使用 attr() 搭配 if() 判斷狀態（data-status）來給不同的值，程式寫起來就會直觀很多。 <div class="container"> <div class="card" data-status="success"></div> <div class="card" data-status="warning"></div> <div class="card" data-status="success"></div> <div class="card" data-status="error"></div> <div class="card" data-status="warning"></div>...

SE Ranking 分析了Google AI Overviews（AIO）在美國五個州的表現（科羅拉多、德州、加州、紐約和華盛頓特區）。 報告顯示，AI Overviews的出現率在各州差異不大，約佔查詢總數的30%。雖然整體來源相似，但在處理在地化查詢時，會納入該州特有的網域。研究也發現，查詢字詞越長越可能觸發AI Overviews，且內容越長的AI Overviews引用的來源越多。Google.com是引用次數最多的來源，Reddit和Quora也重新回歸成為主要的引用來源。 且AIO幾乎都會跟其他 SERP 功能一起出現（99.25%），最常見的是PAA（98.5%）。 引用的方式持續演變 平均引用來源數：在所有州中，AI Overviews 平均引用 13.34 個來源，各州之間的差異極小（13.28 到 13.41）。 最大引用來源數：休士頓和洛杉磯的單一回覆最多引用了 95 個連結。丹佛、紐約和華盛頓特區的最高引用連結數分別是 77、87 和 82。 引用連結數的分佈：最常見的回覆包含 6 到 14 個連結，這可能代表 Google 演算法使用的「最佳範圍」。包含 0 或 1 個連結的回覆很少見，不到 0.5% 的案例，這可能表明需要一定數量的來源來提供高品質且可信的摘要。包含超過 21 個連結的回覆頻率會穩步下降。在各州中，包含 8-9 個連結的回覆最為常見。加州和紐約最常見的是 8 個連結的回覆 (6.57%-6.56%)，而德州和科羅拉多最常見的是 9 個連結的回覆 (6.59%-6.60%)。華盛頓特區則在 6 個連結 (5.64%) 和 12 個連結 (5.84%) 的回覆頻率上較高。 與回覆長度的關係：AI Overview 回覆的長度與引用的來源數量呈現強烈的正相關：回覆越長，包含的來源越多。例如，長度少於 600 字元的回覆平均引用 5.31 個來源，而長度在 6600-7200 字元範圍的回覆則引用 28 個來源。 主要引用的網站 在所有研究的五個州中，Google.com 是被引用最多的網站。這個結果也被酸是 Google 的圍牆花園（walled garden）效應。 Google.com 出現在近 44% 的回覆中。 其他排名前十的被引用網站（在各州幾乎相同）包括 YouT...

準備好你的擴充功能檔案。 註冊開發人員帳戶。 上傳擴充功能檔案。 填寫相關資訊。 提交審核。 前陣子 manifest_version 從 2 強制升級成 3，我認為是一個很好的入坑時機點，直接學新的版本就好了，所以試著上傳小工具給官方，也當作一次學習。 1. 準備好程式碼與各項設定 chrome 擴充功能的設定都會寫在 manifest.json 裡面，包含擴充功能的名稱、簡單描述、各種檔案的路徑。 { "manifest_version": 3, "name": "__MSG_extensionName__", "version": "1.0.0", "description": "__MSG_extensionDescription__", "default_locale": "en", "permissions": [ "storage", "activeTab", "tabs" ], "host_permissions": [ "<all_urls>" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon12...

YouTube 在土耳其、台灣和巴西測試 Beta 版熱推功能。觀眾可以熱推你在 7 天內上傳的影片，協助頻道觸及更多新觀眾。 如何開啟熱推功能？ 此功能目前只有 Beta 版本，你的頻道訂閱人數需要介於 500 到 50 萬之間且居住地為台灣、巴西或土耳其的 YouTube 合作夥伴計畫創作者。 如果你符合資格，在 YouTube 工作室中前往「營利」→「粉絲熱推」，就可以看到如上圖的介面。 熱推機會 影片發布後 7 天內，按讚的粉絲就會得到熱推機會，但不是所有影片都符合資格。 熱推帶來的好處 頻道的粉絲可以熱推你最新上傳的影片，讓其他使用者知道內容值得一看。每週熱推積分最高的影片會登上國家/地區專屬排行榜，並按照該國家/地區的觀眾熱推程度排名，顯示在 YouTube 各個地方，進一步提高影片的曝光度。 登榜後 7 天內，影片也會標上「熱推徽章」（前 100 名）。使用者可以熱推該頻道過去 7 天內發布的影片，無須付費，但次數有限（3 次）。不過，使用者也可以付費購買更多熱推次數。 需注意的地方 要熱推某部影片，目前看起來只能透過手機app，一般平台沒有辦法。另外，品牌帳戶也沒辦法熱推別人。 熱推積分會因訂閱人數而有不同，我自己的頻道1次熱推得到的積分為6250分。（免費熱推1次最高可以得到7500分，50萬人的頻道1次可能只有50分） 點擊熱推之後，沒有辦法收回，頻道主也不知道是誰熱推。 我的看法 這是什麼課金買曝光的手段？但我很好奇它的呈現方式是什麼，畢竟現在的「發燒影片」只有類似徽章的功能；我也很好奇居住地為何選這三處？直播中、首播前之類的情況熱推會發生什麼事？ 雖然吃相難看，但又多了一種支持頻道主的方法我還蠻高興的。 熱推功能（官方介紹） 。

每個做 SEO 的人都知道 E-E-A-T 是「經驗」、「專業度」、「權威性」、「可信度」，而且它對網站很重要，但它不是你可以「加入」網頁的東西。 本圖片由AI生成 John Mueller：添加這些沒有任何意義 John Mueller 在前幾天的 Search Central Live NYC 曾說過： 「E-E-A-T 是我們評估頁面品質的方法之一。這是我們告訴第三方品質評估人員在評估頁面品質時要注意的因素，也是我們在認為查詢或一組頁面涉及更關鍵的特定主題時考慮的因素，我們稱它們為 YMYL。有時 SEO 人員會來找我們，提到他們已將 E-E-A-T 添加到他們的網頁中。但事實並非如此，很抱歉，您無法在網頁上添加這些。這沒有任何意義。」 「從實際角度來看，考慮這一點很重要，特別是當你發布有關關鍵主題的內容時，並考慮如何突出顯示你已經在做的事情，以便用戶清楚地了解。但是如果您正在創作餅乾食譜內容，則不需要在側邊欄中添加類似 [該作者已經製作餅乾 27 年了] 的內容。我想大多數人都能夠理解。 」 實際經驗 我在以前重建企業電子報（B2B產業，非YMYL）的時候，曾經實驗過不同作者會對排名造成什麼影響，結果是沒有影響。 就算作者名稱用「行銷部」而不是專業的顧問人員，創建出來的文章也能排名第一。我才知道 Google 對於非 YMYL 網頁根本不在乎作者是誰。 當然 E-E-A-T 還是可以對使用者友善做出貢獻，且做成某種架構也能對爬蟲友善。但要記住，權威、專業、可信度這類東西「加入」網頁，只是自我感覺良好的行為。 那 E-E-A-T 到底要怎麼做？ 我們要做的不是把它「加入」網頁，而是往這個方向「經營」，例如：該內容與該網站的相關性要一致、積極參與活動、主動回答問題……等。 千萬要記住，是別人給你的品牌評價，而不是你自己說自己很專業。

我想，許多數位行銷人員都在忙著做 GEO（Generative Engine Optimization）。其中一個工作環節是察看到達頁面與來源，而來源需要不斷更新 filter，因此，在這裡記錄一下目前的 filter： (.*chatgpt\.com.*|.*perplexity.*|.*gemini\.google\.com.*|.*copilot\.microsoft\.com.*|.*openai\.com.*|.*claude\.ai.*|.*writesonic\.com.*|.*grok\.com*|.*x\.ai*|.*copy\.ai.*|.*deepseek\.com.*|.*huggingface\.co.*|.*bard\.google\.com*) 什麼是 GEO？ 簡單來說，GEO 的目標就是使用者與 AI 互動時，參考的答案是來自你的網站或是直接提及你的品牌。 在 AI 驅動的搜尋引擎和內容生成工具日益普及的今天，數位行銷人員面臨著前所未有的挑戰。傳統的 SEO 側重於優化網站以提高在搜尋結果中的排名，而 GEO 則更進一步，旨在確保當使用者與 AI 互動時，AI 提供的答案來源於你的網站。 要做到這一點非常困難，除了網站內容的格式之外，還要做到 off-page SEO 與「Offline SEO」。聽起來是很簡單的名詞，但真要實行則動搖成本與時間，員工要能理解公司為何要增加他們的實體工作量，方向性也要正確且與 CXO 同步。 在這裡我們不討論方法，畢竟各行各業都不一樣，簡單又暴力用一句話來說就是：「增加社會影響力」。 AI 的快速進展 A：人有兩隻腳，AI 有八隻腳。 B：你確定 AI 只有八隻腳？ AI 就是你以為它有 n 隻腳，隔天突然又變成 n+2 隻腳，AI 的進展就是這麼快。 2024 年還在 n8n，2025 年 3 月就已經 Agent 和 MCP 了。更別說各大廠牌的 AI 版本也一直在更新。 我們需要不斷學習，才能跟上 AI 技術的「舊資訊」（不是開玩笑）。 總結 GEO 是以前就有的名詞，在那個時候 AI 資訊的正確率和效率還不是很高，因此行銷人員可以無視；但因 AI 的發展越來越好，不僅能提供方法，還生出了搜尋引擎，行銷人員不得不面對它，未來要到 AI 工具平台買廣告欄...

其實 HTML 已經有內建 Popover API 了，在某些簡單的場合下，你可以考慮直接用 HTML 和 CSS 就能寫出燈箱（彈出視窗）效果。 本圖片由AI生成 popovertarget 在 button 加上 popovertarget 對應燈箱的 id。 建立一個有 id 的元素，作為燈箱使用。 大功告成！ 疑？就這樣？ 對，就是這麼簡單。再來只要用 CSS 美化就好了。 See the Pen pure HTML popup by cj ( @cjzopen ) on CodePen . ::backdrop 這個 CSS 語法可以設計開啟燈箱的時候，燈箱以外的區域，例如背景顏色。 :popover-open 當你有多個 HTML 原生燈箱元素時，可以用這個語法先設計出 default 燈箱。 @starting-style 你可以用這個語法搭配 transition 做出開啟彈出視窗時的過場動畫。 要注意的缺點 不過，原生 Popover API 有個明顯的缺點：當你點擊 ::backdrop 關閉 popover 時，這個點擊事件會「穿透」到底層元素，導致下方的按鈕或其他元素也意外被觸發。

很久以前看到有人用 CSS 的 padding-box 與 border-box 涵蓋範圍的不同做出 border，現在讓我們一起來運用這個技巧。 padding-box padding-box 指定這個背景只應用於元素的內邊距（padding）。也就是說如果元素有內邊距，這個顏色將填充內邊距；如果沒有，它可能不會顯示任何可見的效果，或者被下層的 background 覆蓋。實際也是如此，因為 0 0 表示漸層的起點和終點都在同一位置，所以它只是一個單一的顏色。 簡單來說，linear-gradient(var(--bg-color) 0 0) padding-box 是用來蓋掉內部顏色的。 border-box border-box指定這個漸層只應用於元素的包含邊框（border）的區域，但因為內部被padding-box那段原始碼蓋掉了，所以只會看到邊框的部分。 最後，加上 border dashed 把 border-box 那一段漸層蓋過去就大功告成了。 See the Pen Untitled by cj ( @cjzopen ) on CodePen . 另外，你想做一個齒輪的話，把用來蓋掉顏色的padding-box那部分拿掉，就會變成齒輪了。 用途 除了可以裝飾一些資訊物件之外，最常用的地方就是按鈕。 但我想要實線邊框 前面也提到最後一步是用 border 的顏色蓋掉漸層，所以只要把 border 的顏色設定成 transparent 就可以了。

color-mix() 讓開發者不用再開其它程式，直接在 CSS 中混合兩種顏色。明明是在寫原始碼，但卻有成為調色大師的感覺。 語法說明 color-mix() 的參數有這些： color-mix(in [color space], [顏色1] [比例1], [顏色2] [比例2]) 。 color space：包含 srgb、srgb-linear、display-p3、prophoto-rgb、lab、oklab、xyz、xyz-d50、xyz-d65、hsl、hwb、lch、oklch…等，若使用的是hsl、hwb、lch、oklch這些非線性空間的時候，還會多一個「路徑」參數（shorter hue、longer hue、increasing hue、decreasing hue）。 顏色1、顏色2：兩種要混合的顏色，當然，你也可以在這裡使用 color-mix()。 比例：指定各顏色所佔的比例，通常以 % 表示。 如果只提供一個顏色的比例，則另一個顏色會自動補足 100%；若兩個比例都沒寫，則會都是 50%。 若兩個比例相加超過 100%，則 最終顏色1比例= 顏色1 / 顏色1+顏色2 ， 最終顏色2比例= 顏色2 / 顏色1+顏色2 。 兩個顏色的比例相加小於 100% 的話，最終顏色還要與（100% – sum）的透明色混合。沒錯，可以混出透明效果。 color-mix(in srgb, red, blue); /* 等於 color-mix(in srgb, red 50%, blue 50%) */ color-mix(in srgb, red 40%, blue); /* blue 的比例會自動視為 60% */ color-mix(in oklch shorter hue, transparent, blue 80%); /* 路徑沒寫的話，預設為 shorter hue */ color-mix(in oklch, red, color-mix(in srgb, yellow, red) 60%); /* 在 color-mix() 裡面塞 color-mix() */ 但要注意，color-mix() 裡面不能使用 calc，兩個顏色的比例也不能都是 0%。 另外，也可以自訂 color space...

是否有在第一次串接 Firebase 的database時，明明照著步驟做卻一直失敗的經驗？這裡提供簡易的範例。 這裡的寫法是在 script module type 引入 CDN。並且使用的是 Realtime Database Realtime Database 這個資料庫的格式就跟JSON一樣，你可以在存進資料時設定欄位路徑，像是 all/member 。 資料上傳 除了要注意Firebase免費的Spark方案的每日流量和同時訪問數的限制之外，還要注意write和read的權限設定。 // Import the functions you need from the SDKs import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js"; import { getDatabase, ref, push, set } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-database.js"; // Your web app's Firebase configuration const firebaseConfig = { apiKey: "*********", authDomain: "專案id.firebaseapp.com", projectId: "專案id", storageBucket: "專案id.firebasestorage.app", messagingSenderId: "123456789", appId: "123456789:web:f96e474ce78f56f78a509f" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const database = getDatabase(app); // Function to write data ...

你是否也和我一樣，常常不知道什麼時候放假不用上班？本頁面幫你列出今年和明年所有的假日，讓你排休更方便。 使用說明與產生資料 點擊按鈕就會產生資料（預設自動點擊產生），在7月之後可以查詢明年的資料。 資料規則： 若放假日（法定放假的節日）是在週六或週日的話則文字會淡一點。 取得今年資料 註：中華民國政府補班新制：2025年行政院人事行政總處 宣布 ，未來「只補假、不補班」，所以2026年開始沒有補班日。

自從Google收購了YouTube以來，平台不斷地更新，這些更新不僅僅是為了改善Google的搜尋結果（SEO），也為了提升YouTube本身的功能與多樣性（數位行銷，像是與 Google Merchant Center 結合）。 且在2023年第一次在台灣舉辦的Google Search Central Live Taipei 2023中也暗示影片SEO將會越來越重要。（我當初看大家的心得都沒人寫這一點，是在藏招嗎？）你也可以從 Google SERP 發現，YouTube影片是相對容易出現的。 YouTube持續改進的策略 首先，不得不提YouTube在影片結構化資訊方面的強大功能。只要影片有正確的文字格式，YouTube能自動生成關鍵影格，這讓使用者能輕鬆瀏覽影片，快速找到重要的片段。對於內容創作者來說，這大大提升了影片的搜尋性與觀眾的互動性；對於技術SEO來說，有效減少作業時間，只要把東西丟到平台上就好，還能加上各國語言的字幕。 而直播聊天室的功能也越來越多，雖然效能的問題還是沒有解決，但確實是有在進步的。 YouTube幾年前開始學別的平台的「聊天室送禮功能」也能增加觀眾觀看直播的黏著度。 此外，YouTube Shorts的推出是對TikTok病毒式行銷的有力回應。YouTube不願讓短影片的市場被TikTok獨佔，YouTube利用廣告收入政策與曝光度讓Shorts成為創作者接觸更廣大觀眾的利器，讓YouTube在龐大的平台基礎上，成功融入短影片的潮流。 廣告格式的創新與應對Adblock的策略 在廣告方面，YouTube做了一系列變革，更新多種廣告的呈現方式與格式，同時也積極應對Adblock這類廣告攔截工具（讓Adblock使用者的載入時間大幅度提升）。這些變革不僅有效提高了廣告的曝光率，還讓廣告主更準確地觸及目標受眾與產品的直接連結，為YouTube帶來了可觀的廣告收益。 YouTube的社群功能強化 YouTube不僅限於影片下方的評論區與直播聊天室，也將 強化自身的「社群」 。這個功能讓創作者擁有自己的專屬空間，成為討論影片、分享粉絲創作、以及與志同道合的觀眾建立聯繫的中心。 More than just comments, Communities: Your very own corner of the in...

在評估競爭對手的 SEO 技術時，請記住，如果只專注於他們在做什麼對他們有用的事情，那麼您就會忘記建立更好和原創的東西。 搜尋引擎不需要「副本」 如果您試著依樣畫葫蘆做出類似的文本、設計元素、內部鏈接、架構並獲得相同的反向鏈接，那麼搜尋引擎就更沒有理由顯示您的網站。 為什麼？因為搜尋引擎不需要同一頁面的兩個版本。 如果您添加那些內容是因為競爭對手擁有這些內容，密切模仿他們的成功，那麼您實際上只是在承認他們擁有更好的內容、設計或體驗。 關注他們遺漏的內容或他們正在做哪些與搜尋意圖無關的事情，並始終追蹤他們和您自己的改動。 搜尋引擎只需要其網站的一個版本。如果你創造了更好的體驗，這可能意味著你脫離了那些相似的副本設計，你可能會在榜首位置擊敗它們。 網站架構 也許改善架構並不會讓你的SEO變好，但你可以觀查別人是如何運用架構來拓展自己的相關內容，讓網站更豐富。並試著分類並找到適合自己的架構去拓展內容： 產品頁面。 部落格文章。 登陸頁。 常見問題和資訊。 其它。 另外，你也可以從 menu、sitemap、robots.txt 查看他們優先考慮哪些資料夾和頁面，他們主打哪些關鍵字和主題，以及哪些對他們來說不重要。您可能會發現沒想到的新短語和關鍵字，以及建立您自己網站的更好方法。甚至可以為新的 PPC 活動提出想法。 專有名詞 另外，解釋人們已經知道的事情會浪費他們的時間。如果人們想要知道更多資訊，您絕對可以使用行話之外的內部連結指向專門的帖子，然後他們看完之後可以返回上一頁。這並不是讓使用者操作變麻煩，而是讓有需要的人再去觀看就可以的設計，而且這種方式「可以讓需要的使用者多看一頁」，更可以豐富你的網站內容。 請永遠要記得你的目標是讓使用者更深入了解你的網站，而不是讓他們看一頁就跑了。看的頁面越多，對你的業務感興趣的機率越大。 言下之意就是不要看到很酷炫的更多資訊跳出來，就跟風去一起用，並不是每個網站都適合。