有些網頁在 SERP 的標題 <title> 會被 Google 大幅度改寫，而實際的運作機制又是什麼呢？SEO 又是否會被影響？ Google 如何生成新的網頁標題： 我們已經知道 Google 會改寫標題的頭尾（把產品或企業名稱加在標題結尾或開頭），但這次的改動比起前者更進一步，可能整句都會被重寫或刪除。 根據 Google 公開的說明頁面 和他們之後提供的 補充說明 可以得知，他們確實在 8 月 16 日推出了新的網頁標題生成系統，並會從該網頁的主視覺標題、一般標題、h1 或 h2 h3 之類的標籤內容，或者使用樣式而變得大而突出的內容，進而產生新的網頁標題文案。 更甚者，可能還會參考頁面中的其他文字、使用指向該頁面連結中的文字，或是自己改年份加項次來「改善」該頁面原本的標題。 但實際上改變不止侷限於 Google 公開的方式，還包含 直接截短 、 刪除句中的某些關鍵字 。用這個網誌來舉例的話，〈簡單理解LCP、FID、CLS三個網站使用體驗核心指標是什麼、對SEO的影響、改善案例〉這篇的標題因為太長了，便會被 Google 截短只剩下〈簡單理解LCP、FID、CLS三個網站使用體驗核心指標是什麼〉。 所以，我們可以簡單歸納出原本和現今的標題改動方式： 在前面或後面加上品牌名。 直接截斷。 截取網頁內容資訊（通常是大標）。 增加搜尋相關關鍵字在標題中。 刪除不必要的關鍵字或行銷術語後重新排列。 改年份或加項次（第1季 第2季）來區別重覆標題。 使用指向該頁面連結中的文字（極少）。 上述情況有時候會同時出現。 順帶一提，Google 認定「品牌名」的方式，經過我自己的實驗是和首頁的 title 大有關聯，另外還會參考各網頁 title 像產品名的重覆字詞。而 title 整體太長的話，除了常見的「...」結尾之外，也可能會直接把品牌名刪除；而比較特別在結尾有「雙品牌」的標題，也見過其中一個品牌名被移到最前面的情況。所以請小心命名，避免關鍵字被當成品牌名的一部分而遭 Google 刪改或移動。 另外，Google 對於品牌名的區隔符號比較偏好「-」而不是「|」，括號也有高機率會被更改。 ...

最大公因數、最小公倍數計算機 請輸入數字 1 和數字 2 之後，按下「計算」按鈕，或新增數字 3、4…，看要計算幾個數字， 就可以得到最大公因數(1,2,...) 和最小公倍數[1,2,...]。 數字 1: 數字 2: 增加輸入框 刪除輸入框 計算

若你在優化任何非網站的網址(Office文件、PDF、留言、Email、Google 我的商家、SERP結構化資料如 FAQ 中的網址)，除了在網址使用 #id (錨點)之外，Scroll to Text Fragment 或許是另一個可以考慮的方式。 URL Scroll to Text Fragment 是什麼？ 它的功能是在網址中設定文字，使用者點擊網址進入網頁後，可能看到被強調的文字，並將畫面移動到該文字處，文字高度在畫面中間。這並不是什麼新功能，早在 chrome 80 以後就出現在以 chrome 為核心的瀏覽器之中了。 如何創建？ 複製醒目顯示文字連結 在 chrome 90 之後的版本，網頁上選取（反白）文字之後按右鍵，就會出現「 複製醒目顯示文字的連結 」的功能，點擊該功能產生的連結，貼到任何除了該連結頁面之外的地方，被點擊後就可以產生上一段文字提到的效果。如果沒有該功能，可能是被設定成關閉，網址列輸入 chrome://flags 並按下enter後，找到 Copy Link To Text 後就能開啟該功能（enabled）。 如何關閉？ 但是，在最新版本的 chrome 中， chrome://flags 已經找不到 Copy Link To Text 這個指令了，換句話說就是沒辦法關閉這個功能，還請注意。 文字反白之後右鍵即可看見該功能   連結的架構與DIY 若不想透過 chrome 附加的功能直接設定使用的話，自己也可以設計出這種特殊網址，方法與錨點類似，不過是加上「 #:~:text= 」 完整結構： https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix] 方法1 整段文字： 只使用 textStart 的話是最簡單的使用方式： #:~:text=文字 ，它會當成要 highlight 的所有文字，就像 {這個連接} 的範例一樣。 方法2 文字區段： 你也可以打上兩段文字： #:~:text=文字1,文字2 ，分別代表開頭和結尾，它會找尋這一區段的文字 highlight，這裡也用 {這個連接} 示範一次。 方法3 多段文字： 可以使用「&」區隔： #:~:text=文字1&text=文字2 。但是個人不建議這樣做，畫...

看到一篇 談論1997年至今的 UX 發展 的翻譯文章，原文的作者是Mark Hurst，看完之後心有戚戚焉，推薦給大家一起看，力道雖然沒有「 真正發生過的恐怖IT故事 」強，但也一樣是很無奈的現況。 KORONE FALCON PUNCH 文章從1997年至今分成3個10年去描述 UX 產業的變遷。 UX 的定義已經從原本的 user experience，漸漸被 user exploitation 取代，網站不再以便利性為目標，而是網站擁有者的目的為目標：試圖以各種方式誘導或阻止使用者在網站上做某些事情。 就像中文的「設計」一樣，英文可以翻譯成 design，也可以翻成 calculating。 真實案例 該文用 Amazon Prime 和紐約市疫苗網站為例子： The cancellation procedure is long, and consists of six separate pages. On each separate page, the consumer is nudged toward keeping their Prime membership, even though they have began a procedure to end the agreement. ...This uncertainty is further strengthened by having to scroll through the page, which is full of text and graphics to show how cancelling the membership will mean the loss of many benefits. In the single biggest public health crisis in the world, New York can't build a usable vaccine website. The telephone - 1950s technology - is our best option, after 25 years of web development. Shameful. 從 UX 設計領導者 Amazon 帶頭墮落，默默道...

你是否有想過，max/min font size 的解法？能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！ 文章目錄： vw 基本運用 極限問題 max()、min()、clamp() container-type與cqi 為何使用 vw？ 在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用： vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外，也能搭配 calc 使用： h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題（max or min font size） 這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。 設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中： 以前的做法：Media Query 下面為使用的例子： h1,.h1{ font-size: 3.5vw; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; } } @media (max-width: 480px) { h1,.h1{ font-size: 16px; } } 這樣子設定...

在檢查網址中的「涵蓋範圍」，發現方式新增了參照網頁（Referring page），讓網站管理者知道Google是用哪些方式得知這個頁面。 數據說明 參照網頁可能直接連到該URL，或者是連到該頁面的上一層或更上層。如果不存在任何值，並不意味著不存在任何引用頁面，只是此訊息可能此時對 網址檢查工具 不可用。 也就是說，對於較新的頁面，參照網頁可能不會有數據，這是很正常的。Google 新增這個欄位也顯示出他們是用多種方式來得知網頁的存在並抓取。 什麼是參照網頁？ 其實就是 GA 中的「 參照連結網址 」，意思是使用者進到你的網頁的來源網址，search console 會自動辦識這些流量來自哪裡。通常是連結，當然也有可能會是瀏覽器書籤、最愛、email 或手機app等，這大概也是為什麼不一定會有數據的原因之一吧。 頻繁更新 近期 Google Search Console 一直在更新，說不定是受到 Bing 更新的打擊(x)，例如「涵蓋範圍」也更新成只剩下近3個月的資料、新增「檢索統計資料」等等功能，以及對於 CWVs 的相關更新 ，我們可以期待它的功能和數據將越來越豐富與完整。

之前，通常都是知識頁面獨霸的情況比較多，所以才會看到許多B2B的網站會寫一些「什麼是xxx」之類的知識型內容企圖攻佔排名。 而在9月20日之後，產品介紹或網站首頁出現在搜尋結果中的機率變得越來越高，原因其實很簡單： 使用者意圖 。 使用者需求排名(Needs Met rating) 回去看 Google guideline 的修改記錄，的確有修改過部分的 頁面品質 和 需求滿足 (Needs Met)之間的關係說明。(guideline包含Page Quality、Understanding Mobile User Needs、Needs Met) 再加上之前 Google Search on 宣布的那些東西，未來的SEO並不像過去讓內容完整、有用，讓網頁速度快速那麼簡單。 使用者意圖 如同一開始提到的，可能沒什麼內容可言的登陸頁面(landing page)，也會出現在搜尋結果第一頁，只因為它對使用者而言是有用的。 使用者搜尋某個關鍵字是想要求知、購買、前往、求職或其它意圖，網站管理員搞錯方向的話，可能再努力也不會讓公司獲利提升。 重覆內容的取捨 自從2019年Google為了搜尋結果多樣性，讓同網域的網頁最多(通常)只顯示2筆，讓重覆內容的問題更被放大。 重覆內容的網頁有許多解決辦法，像是從軟到硬性的方式： 群組化：網頁互連、製造相關性、網址階層化 映射：利用 canonical 標籤，讓頁面權重只給單一頁面 合併：內容集中到同一頁 群組化 利用超連結或階層讓爬蟲了解這些內容的相關性，由Google自己去判斷。像是在內文中加上某個詞的說明連結，或是把某個相關事物加上連結在另外一頁討論，可以吃到子目錄的好處。 映射(canonical) 可以將權重無痛交付給某一頁，但Google未必會如你的意只把指向的那頁顯示在搜尋結果中，它還是有可能會把其它頁面顯示在SERP中。 合併 合併勢必可以吃到「段落排名」的好處，甚至有人試圖把使用者搜尋旅程縮短至1~3頁。 這三種方法各有好壞，但最終仍要回到使用者意圖，填滿使用者不需要的內容用處不大，不是用了之後排名就一定會提升。 網站速度 其實一直都是SEO指標，只是會再看得更仔細。2021年5月之後，Google會將新的 Core Web Vitals納入網頁排名因素。 簡單理解 Core Web Vitals 的 LC...

你已經熟悉這個以消費者為觀察核心的 Google Analytics 4 介面了嗎？ 相信不少人應該跟我一樣，在導入 GA4 之後，第一件事就是想辦法趕快把自訂事件和轉換設定好，但要怎麼設定？事件標籤、事件動作怎麼都不見了？ 從 GTM 介面直接新增自訂事件 在beta版消失之後，GTM的自訂事件介面變得比較簡單。首先，代碼設定選擇「Google Analytics (分析)」裡面的「GA4 事件」。 接著，在評估 ID 欄位填寫你的GA4評估 ID。 如果你不知道「評估 ID」在哪裡，你可以在GA4介面的「管理」→「串流」→「網頁串流詳情」找到它。 之後，自己想一個「事件名稱」填入欄位中，這裡我們取名為「edm_link_click」，並在下方的參數欄位填入要追蹤的參數（參數名稱隨便取，這裡取名「link_text」是為了讓大家知道，如果已經有同名的GA4參數，旁邊會出現一個勾勾）。 我想要寫在網頁上 如果想要把事件寫在網頁上，跟以前的GA有點像，在要觸發的地方將事件名稱push進dataLayer： window.dataLayer.push({'event': 'edm_link_click'}); 接著，到GTM介面的觸發條件區域先建立「自訂事件」，事件名稱要跟上面的code一樣填寫「edm_link_click」，接著一樣在代碼設定裡新增GA4事件，「觸發條件」就是前面建立的自訂事件。 當然，dataLayer.push 跟以前一樣能push其它參數，官方的 例子 也有提到。 回到 GA4 介面 待 GA4 收到資料之後，點擊「報表」→「參與」→「事件」，查看自己在 GTM 設定的「edm_link_click」有沒有出現在資料當中。 點擊該事件進去看相關的詳細資料，這樣子一個基本的自訂事件就算大功告成了。（自訂維度出現在資料中的時間並不固定，有可能數小時，也有可能一週之後才出現） 而詳細的數據必需到左列的「探索」或是到 Looker Studio（舊稱Google Data Studio）自己拉維度和指標才行。 定義內部流量 進到「資料串流」，選擇你要設定的串流名稱。 點擊「更多代碼設定」。 點擊「定義內部流量」，設定你的IP。traffic_type 值用預...

更新於2021-02-17 在「Google Presents: Search On 2020」中，Google提到在現代大量的資訊裡，AI 如何以新的方式幫助人們理解世界，讓搜尋結果更貼近需求。 其中，Google 談到了BERT的運用程度、拼字檢查、子項目，與一種基於段落(passage-based)的索引方式。這裡就段落進一步討論…… 段落排名(passages ranking) 因為有時候搜尋的答案可能會藏在網頁段落的深處，而這個段落並不是該頁面的主題，導致這個頁面雖然有提到該解答，但不會出現在搜尋結果中。而Google最近在排名方面取得了突破：不僅可以索引網頁，還可以索引頁面中的各個段落。 Google通過理解特定段落的相關性，而不僅僅是整個頁面，就能找到被埋沒在網頁角落但更貼近使用者需求的資訊。而這項技術也在全世界的搜尋中使用，預計將改善(影響)所有搜尋結果的7％。 有無使用新系統的差異。圖片來自Google blog 聽起來像是網頁主題要從一致性轉向多樣性，但好在有人更進一步地對相關人士詢問詳情。 Google對於段落系統的說明 SEL 為此直接詢問Google的發言人： Google仍在為整頁編制索引，但是Google的系統在確定最相關的內容時會考慮段落的內容和含義，而以前Google主要是從整體來看整個頁面。 這更像是排名的變化：Google不會在頁面上索引各個段落，但是最好將其劃分為頁面上的內容，並為排名目的更好地顯示這些段落。 儘管主題仍然是重要因素，但除了主題之外與之稍有不同或總體上不太相關的內容，該新系統也有助於識別並傳遞給查詢有特別匹配的使用者。 「精選摘要」標識了Google確定與查詢相關的文檔中最相關的段落；而新系統通過理解段落來確定任何網路文檔的相關性。 這對於使用者正在尋找的特定訊息如果隱藏在頁面的單個段落中而不是該頁面的主要主題的查詢中很有幫助，Google的新系統可以將這一點放大，並將該頁面的排名提高。 新系統將於今年晚些時候開始推廣，並在美國以英語開始，而後推廣於全世界。 另外也有人詢問 Google 的 Martin Splitt 關於段落排名的優化問題，他的回答是：網站管理員其實不需要做任何事情，而標題元素(h1,h2,h3...)確實能傳達頁面不同部分的含義，...

在一般情況下，往下滑動(往上撥)的時候，網址列和底部選單會收起消失，反之往上滑動則會出現。 overflow hidden 但在某些情況下，網頁設計師會將 html 和 body tag 的 CSS 設定成 overflow:hidden。 這時候網址列和底部選單不管怎麼滑動都不會消失，造成部分內容被擋住看不到也點不到，記得要多留一些空白空間。

如果你的網頁跟我一樣在9/30突然在Google SERP 消失，在 search console 把該網頁「要求建立索引」就可以解決。 網頁在9/30出現異常 以下為Google 在twitter的解釋 : We are currently working to resolve two separate indexing issues that have impacted some URLs. One is with mobile-indexing. The other is with canonicalization, how we detect and handle duplicate content. In either case, pages might not be indexed.... If a previously indexed page has gone, it might be the mobile-indexing issue, where we’re failing to select any page at all to index. If the canonical issue is involved, URL Inspector may show the URL as a duplicate & the Google-selected canonical will be different from it…. There’s no action to take with these issues on the part of site owners. We apologize for the issues here and are working rapidly to resolve them. We’ll update this thread as each is corrected. 總之，就是講一些大家都知道的規範，然後對於出現此問題深表歉意，並正在迅速解決這些問題。 而大多數網頁的確也在這之後復原。 10月20日，Google再次回應， 說它們已修復99%出問題的網頁 。 要求建立索引 「要求建立索引」是在Google search console中一種提交網頁給Google的方式，...

在 html 下 scroll-behavior: smooth 的好處如同它的語意，若使用者點擊頁面的描點超連結時，不會讓使用者「瞬移」，而是會產生如同在 JavaScript 寫 scroll animation 一樣的體驗，對使用者的操作相對友善。但當使用者在進入頁面時，網址就帶有描點(#)，可能會事得其反，破壞使用者體驗。 CSS 的載入方式 如果是傳統的直接載入或內嵌方法就可以跳出不用看了，但若是在 load 之後才用 JavaScript 載入，就有可能造成初始畫面位置並非描點的位置。比如出現下列這種情況： <link rel="preload" href="style.css" as="style"> <script> window.addEventListener("load", function() { var prload_css = document.querySelectorAll('link[as="style"]'); var i = 0; for (i; i < prload_css.length; ++i) { prload_css[i].rel='stylesheet'; } }); </script> 網址可能帶有 #title，預期讓使用者一開始看到 #title 元素在畫面之中，但 load 前後 #title 的位置不一樣，產生進入頁面且載入後，畫面往下滑動到比預期更下面的地方，讓 scroll-behavior: smooth 變成使用者體驗的殺手。 accesskey 操作 這個影響不大，只是當使用者鍵盤操作的時候，畫面會有一瞬間滑向該連結的效果出現。

justify-content flex-start center flex-end stretch space-around space-between space-evenly align-items (use align-self when one item) flex-start center flex-end stretch baseline align-content (容器需要給高度才有作用) height: auto height: 26rem flex-start center flex-end stretch space-around space-between space-evenly 1 height:7.5 2 height:10 3 height:auto 4 height:auto 5 height:auto 並沒有用到 flex-direction 和 order 等等的屬性，所以沒有寫在裡面。 又或者，你可以在 codepen 操作： See the Pen CSS flex by cj ( @cjzopen ) on CodePen . 希望這些簡易的按鈕能對你有幫助。