最近才在上方的網址列發現站內搜尋這個功能…… 網址列站內搜尋功能展示 操作方法 只要在網址列輸入該網域後，再空一格就會出現站內搜尋的功能；而且，就算是使用 Google CSE 的站內搜尋網站也會出現。但是，並不是每個網站都能這麼順利出現這個功能。 輸入後出現的搜尋結果頁面 網站實裝猜測 我自己原本猜測是跟 WebSite 這個結構化資訊或使用者本身常不常去有關，但就算有設定也常去了，也不見得百分之百會出現這個功能，所以 chrome 的依據到底是什麼其實沒那麼肯定。 站內搜尋結構化資料 站內搜尋的結構化資料範例如下，其本上每個網站只有 url 和 target 欄位值不一樣而已，但要注意只需加在網站首頁就好了，不要每一頁都加。 { "@context": "https://schema.org", "@type": "WebSite", "url": "https://test.example.com", "potentialAction": [{ "@type": "SearchAction", "target": "https://test.example.com/search?q={search_term_string}", "query-input": "required name=search_term_string" }] } 你也可以看 Google 寫的 網站連結搜尋框 ，基本上大同小異。 有了這個設定，說不定還能在 SERP 出現搜尋欄，雖然一樣是不一定會出現，但怎麼想都賺。 Firefox 的建議網頁 順帶一提，如果使用一樣的方式在 Firefox 網址列操作的話，跟 Chrome 不同，會出現「建議網頁」。 Firefox 網址列的建議網頁

如果你在改善網站速度，對這句話想必一定很眼熟（沒錯，就是 PageSpeed Insights），但到底什麼是 next-gen？簡單來說就是 WebP、AVIF、JPEG2000、JPEG XR 等格式的圖片。 WebP WebP 目前是這四種格式中支援度最廣的格式，且支援去背和透明度。 它除了 IE11 之外，基本上都支援；而 safari 則要看版本夠不夠新（macOS 11）。 WebP 的瀏覽器支援度 另外，它有一個很像的名詞叫 WebM 影片格式： WebM 是一個由 Google 資助的專案（WebP 也和 Google 有關），目標是構建一個開放的、免著作權費用的影片格式檔。該影片格式能提供高品質的影片壓縮以配合 HTML5 使用。（ wiki ）用途基本上一樣是為了改善網頁載入速度。 AVIF Netflix 聲稱 AVIF 將會是下一代的圖像編碼演算法，並稱它對於他們的影音串流媒體網站而言，是取代 JPEG 格式的最佳選擇。 不過，相較於 2010 年就出現的 WebP，2019 年才誕生的 AVIF 支援度在2023年之後才追趕上來。 AVIF的瀏覽器支援度 JPEG 2000 JPEG 2000 比前兩者更早出現，副檔名是 .jp2 或 .j2c，跟 AVIF 一樣在當年被吹捧成下一代圖像的壓縮標準，但至今幾乎沒有網站在用，也只有 safari 有支援，其它瀏覽器完全不想理它。 JPEG2000 的瀏覽器支援度 JPEG XR、JPEG XL JPEG XR（JPEG extended range）是基於由 Microsoft 所開發的 HD Photo 的圖像格式，所以……基本上只有 IE9~IE11 和舊版本的 Edge 支援。 IE 專屬的 JPEG XR JPEG XL 則發表於 2017 年，但就目前為止的支援度是慘不忍賭，完全沒有瀏覽器支援。 實際運用 基本上，還是要靠 HTML 的 picture 來使用最安全，或者是寫程式判斷瀏覽器支援度，然後載入相對應的圖片格式。個人認為，目前使用 WebP + jpg/png/gif 的應對方式就夠了，頂多再加個 AVIF，但效益如何就自己判斷了。 再來就是 server 端有沒有設定宣告的問題。舉例來說，如果你是用 web.config 設定網站的話

什麼是 favicon？ favicon 是 favorites icon 的縮寫，中文通常稱為頁面圖示（page icon）或網站圖標（website icon）；簡單一點來說，就是瀏覽器最上面各分頁會出現的圖案。 像我這個網站的favicon 是位可愛的吸血鬼 favicon 除了可以用傳統的 ico 檔，也可以用 png 檔，甚至可以用 SVG 檔。 為何要特地用 SVG 檔？ 用一般圖檔就好了，何必要再創作一個 SVG 檔呢？因為 瀏覽器有 dark mode 的存在 ，這個模式可能會讓網頁的 favicon 看不清楚，這就是我推薦使用 SVG 檔的原因，因為我們可以很輕易地在 SVG 檔中塞 CSS 語法進去調色，別的檔案格式沒有這種能力。 看到一看就知道沒去背的白底 icon 會讓我很焦慮， 以下為簡單的例子： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> <style> path{fill:#2858aa;} @media (prefers-color-scheme: dark) {path{fill: #23A6DE;}} </style> <path d="example"/> </svg> 「 prefers-color-scheme : dark」就是在 dark mode 下呈現的樣貌，寫法跟 media query 一樣。我們可以在括號範圍內設定一個比較亮的顏色（fill: #23A6DE）才不會讓使用者看不清楚。 favicon HTML 設定 在 HTML 的 head 標籤裡照這樣設