我想，許多數位行銷人員都在忙著做 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 就能寫出燈箱（彈出視窗）效果。 popovertarget 在 button 加上 popovertarget 對應燈箱的 id。 建立一個有 id 的元素，作為燈箱使用。 大功告成！ 疑？就這樣？ 對，就是這麼簡單。再來只要用 CSS 美化就好了。 See the Pen pure HTML popup by cj ( @cjzopen ) on CodePen . ::backdrop 這個 CSS 語法可以設計開啟燈箱的時候，燈箱以外的區域，例如背景顏色。 :popover-open 當你有多個 HTML 原生燈箱元素時，可以用這個語法先設計出 default 燈箱。

很久以前看到有人用 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 ...

資料規則： 若放假日（法定放假的節日）是在週六或週日的話則文字會淡一點。補班日也只顯示週六或週日的補班日（應該也沒有平日的補班日）。 取得今年資料

自從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 活動提出想法。 專有名詞 另外，解釋人們已經知道的事情會浪費他們的時間。如果人們想要知道更多資訊，您絕對可以使用行話之外的內部連結指向專門的帖子，然後他們看完之後可以返回上一頁。這並不是讓使用者操作變麻煩，而是讓有需要的人再去觀看就可以的設計，而且這種方式「可以讓需要的使用者多看一頁」，更可以豐富你的網站內容。 請永遠要記得你的目標是讓使用者更深入了解你的網站，而不是讓他們看一頁就跑了。看的頁面越多，對你的業務感興趣的機率越大。 言下之意就是不要看到很酷炫的更多資訊跳出來，就跟風去一起用，並不是每個網站都適合。

其實這件事大家心裡應該都有個底，但沒有百分之百的證據，而Google對於流量下降的解說有些許的更新，我們可以從中觀察出網站內的網頁是會互相影響的。 流量下降的解說更新 請記住，排名不是靜態的。Google的搜尋結果本質上是動態的，因為開放網路本身隨著新的和更新的內容而不斷變化。這種持續的變化可能會導致自然搜尋流量的增加或減少。 排名小幅下降 小幅下降是指頂部結果中的排名發生小幅變化（例如，排名從 2 下降到 4）。在 Google Search Console 中，可能會看到流量大幅下降，但曝光總數卻沒有大幅變動。 位置的小波動可能隨時發生（包括返回位置，而無需執行任何操作）。事實上，如果您的頁面已經表現良好，Google建議避免進行徹底的更改。 排名大幅下降 排名大幅下降是指您發現多種術語的排名前十的結果顯著下降（例如，排名從前 10 下降到第 29 位）。 在這種情況下，請對整個網站（而不僅僅是單一頁面）進行整體自我評估，以確保它有用、可靠且以人為本。如果您對網站進行了更改，則可能需要一段時間才能看到效果：某些更改可能會在幾天內生效，而另一些更改可能需要幾個月的時間。例如，Google的系統可能需要幾個月的時間才能確定某個網站現在正在產生長期有用的內容。一般來說，您可能需要等待幾週，再次在 Google Search Console 中分析您的網站，看看您的努力是否對排名位置產生了有益的影響。 請記住，Google無法保證您對網站所做的更改會對搜尋結果產生明顯影響。如果有更多高品質的內容，它的排名將會繼續在SERP中領先。 不實用內容的影響 再加上之前提到的，Google有在 實用內容和 Google 搜尋結果常見問題 中提到：移除不實用的內容，是否能提升我其他內容的排名？ 我們的系統主要是在網頁層級運作，以便盡可能顯示最實用的內容，即使該內容所在網站同樣代管不實用的內容也不例外。話雖如此，要是網站中有特別多不實用的內容，可能會讓網站的其他內容在 Google 搜尋中的成效降低，但影響程度不一。移除不實用的內容，可能有助於提升其他網頁的成效。 結論就如同開頭所說的，網站內的網頁是會互相影響的。

日本近期流行的「ライブ会場を沸る」或是稱為「フロアを沸かす」的迷音AI短片，是怎麼製作生成的？下面我們用英文和影片帶你一步一步做，完全不用動腦。 （続いて英語でステップバイステップで説明します。操作手順動画も用意しているので、頭を使わずに簡単にできます。） 操作步驟 steps: Enter to Viggle AI's Discord server (https://discord.gg/viggle). Select any of these rooms named "animate" and click to enter. Type "/" to bring up a list of commands. Select "animate" from the list of commands. Upload your image. motion_prompt: type "$lil_yachty_stage_entrance". background: select "From template". finetune: select "On". Hit Enter or click on the submit button to send the command. Wait for approximately 1 to 5 minutes for the AI animation to be generated. 日本語操作手順： Viggle AIのDiscordサーバーに入る(https://discord.gg/viggle)。 任意の「animate」ルームを選択して、クリックして入る。 "/"を入力して、コマンドのリストを表示し、「animate」を選択します。 コマンドのリストから「animate」を選択します。 画像をアップロードします。 motion_prompt: "$lil_yachty_stage_entrance"を入力します。 background：「From...

dark mode 的CSS寫法一直以來都不是很方便，在偵測使用者作業系統是不是dark mode的時候，我們可以用prefers-color-scheme來另外寫一套CSS。現在多了另一種寫法 light-dark() 。 prefers-color-scheme prefers-color-scheme寫法如下，當然還有很多東西要考慮，例如border、hightlight…等等，但為了方便說明，只用文字和背景顏色舉例。 :root { --text-color: #333; --background-color: #eee; } @media (prefers-color-scheme: dark) { :root { --text-color: #efefef; --background-color: #222; } } 新的語法 light-dark() light-dark()可以搭配color-scheme使用達到自動偵測使用者作業系統是不是dark mode： :root { color-scheme: light dark; --text-color: light-dark(#333, #efefef); --background-color: light-dark(#eee, #222); } 除此之外，還可以用input讓使用者自己選擇要不要用dark mode： :root { /* 偵測使用者作業系統 */ &:has(input[name="scheme"][value="light dark"]:checked) { color-scheme: light dark; } /* 不用 dark mode */ &:has(input[name="scheme"][value="light"]:checked) { color-scheme: light; } /* 使用 dark mode */ &:has(input[name="scheme"][value="dark"]:...

Google一直致力於減少無益和非原創內容，近期更是如此。 根據Google官方的評估，結合此次更新和先前的努力，搜尋結果中的低品質、非原創內容將減少40%。若再加上核心更新可能會有大量的排名波動：Google宣稱，由於這次更新相當複雜，相較於一般核心更新，排名的波動更大，因為不同系統會全面更新並相輔相成。 大規模內容濫用 Goole 試圖禁止那些使用自動化工具產生的內容來操作搜尋排名，無論是 AI 還是真人都抓。 例如，提供的內容假裝有答案，但其實對使用者沒有用。 網站聲譽濫用 即受信任的網站託管低品質的第三方內容，以利用託管網站的良好聲譽。 除此之外，Google 也稍微降低了「連結」的重要性。 不再強調連接「重要」 Google的SEO指南的內容有稍做修改： 舊版本：Google uses links as an important factor in determining the relevancy of web pages. 新版本：Google uses links as a factor in determining the relevancy of web pages. 為連結操作所建立的內容 強調內容如果是為了操作連結和其它排名訊號，是沒有用的。 我們姑且猜測這句話的意思是PBN（一個專門為連結到另一個網站並提高其自然搜尋可見性而創建的網站。這個想法是「饋送」網站將連結資產傳遞回主網站，這將提高其權威性，從而提高其排名能力）。 與傳出連結相關的新訊號 任何意圖操縱 Google 搜尋結果排名的連結都可能被視為垃圾連結。這包含任何操縱指向您網站的連結或從您網站發出的連結。 結論 Google除了注意到AI工具的濫用之外，也對於連結好壞的判定更嚴格，甚至不惜降低重要性。 除了劣質的反向連結之外，刻意操作的反向連結和濫用的內部連結也會被Google抓出來重新審視。至於方法和判斷基準，還是那句老話：「對使用者有用、可解決使用者問題」。而反向連結也是很理想的看法：內容很優質，自然會有人分享你的網頁。 以上內容，我想我們可以濃縮成「使用者意圖」與「不要濫用排名訊號」。在AI技術越來越發達的現在，真正能提供使用者想要的訊息或解方的網頁內容，才是最重要的。 相關連結 Google處理搜尋中的垃圾內容、低...

你維護的網站的網頁數是否有上千頁或上萬頁？如果答案是YES的話，一定會存在History SEO這個問題，因此會有人提出許多意見。 什麼是History SEO？ History SEO並不是一個官方正式的名詞，你可以想成網站長久維護下來產生的重覆內容、錯誤資訊、已經沒有在經營的產品……等等所產生的SEO負面問題。 另外，爬蟲的效能也有限，這也是為什麼網頁速度很重要的原因，速度越慢，爬蟲每天在你的網域爬到的頁面數量就越少。因此，也有人會有網站瘦身的想法。 為何要重視這個問題？根據 Google的常見問題 之中，有一段話寫得很明確： 移除不實用的內容，是否能提升我其他內容的排名？ 我們的系統主要是在網頁層級運作，以便盡可能顯示最實用的內容，即使該內容所在網站同樣代管不實用的內容也不例外。話雖如此，要是網站中有特別多不實用的內容，可能會讓網站的其他內容在 Google 搜尋中的成效降低，但影響程度不一。移除不實用的內容，可能有助於提升其他網頁的成效。 常見的例子就是官方新聞稿或是blog文章，這些網頁可能代表著整個企業的歷史軌跡，刪除是不被高層主管允許的，所以不得不留下來。因此產生一些改善做法： 1. 更新內容 我認為這是最有效的方法，不但不用再新增頁面，也能讓舊內容因更新而起死回生，如果主管同意的話。 2. 網頁合併 相似內容且意圖相同的網頁可以考慮合併，但此種方法的困難點除了轉址之外就是主管同意的可能性很低，畢竟合併也代表有網頁會被刪除。 3. canonical 將相似或相同意圖的網頁用canonical指向同一個網頁，可以解決許多問題，但這樣做其實不正確，如同下面 John Mueller 所說的一樣，不如直接重定向。 且做起來非常耗費時間，你必須決定哪些網頁需要canonical到別的頁面，而那個目標頁面又是哪一頁。而且，有一些人認為（未必正確），太多canonical指向的那個目標頁面，會讓爬蟲覺得好像沒有那麼重要，或是刻意操作。 4. noindex 不讓這些網頁出現在搜尋結果中。 5. unavailable_after 設定日期，讓爬蟲知道這個頁面在設定的日期之後就已經不重要了，這個設定也不會在日期之後出現在搜尋結果中。使用方法可以參考Google的 說明文件 。 6. robots.txt 有些人...