ORON
回科技觀點
網站製作12 分鐘閱讀

favicon 與網站名稱:Google 搜尋結果顯示錯了怎麼改

搜尋自家公司名,結果列上顯示的是一長串網頁標題配灰色地球?網站名稱與 favicon 的設定規則與排查順序一次說清楚。

favicon 與網站名稱:Google 搜尋結果顯示錯了怎麼改

把自己公司的名字丟進 Google 搜尋,看看第一筆結果長什麼樣子。有些公司看到的是乾淨的品牌名加一顆自家 logo 的小圖示;有些公司看到的是「首頁 - 歡迎光臨OO企業有限公司官方網站」這種從網頁標題直接截來的一長串字,旁邊配一顆灰色的地球。兩者都排在第一名,但使用者在那一排搜尋結果裡,認出來的機率差很多。

這兩個東西有正式名稱:一個叫網站名稱(site name),一個叫 favicon。Google 從 2022 年 10 月先在行動版搜尋結果放上網站名稱與站標,之後桌機版也跟進。它們不是排名因素,改了不會讓你從第三頁跳到第一頁,但它們決定了「已經排上去的那一筆結果,別人願不願意點」。而且這是少數花半天就能處理完、處理完就長期有效的項目。

黃色牆面上掛著兩排外型一模一樣的深色信箱,每一格只靠一張小標籤區分,象徵搜尋結果裡每一筆都長得差不多、只能靠名稱與小圖辨認

Photo by Jahanzeb Ahsan on Unsplash

網站名稱是怎麼被決定的

很多人以為搜尋結果上顯示的名字是 Google 隨便抓的,其實有明確的訊號順序。Google 官方文件說得很清楚:首頁上的 WebSite 結構化資料是最主要的依據,其次才參考 og:site_name、首頁的 <title>、標題元素以及首頁上的其他文字。

最小可用的寫法是在首頁加一段 JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "品牌簡稱",
  "alternateName": ["英文簡稱", "example.com"],
  "url": "https://example.com/"
}
</script>

name 和 url 是必填,url 要填網域或子網域的首頁網址。alternateName 可以放多個,依偏好順序排列,通常拿來放簡稱或英文縮寫。

比語法更容易出錯的是幾個條件限制,這些是中小企業官網最常踩到的:

  • 標記必須放在網域或子網域的根首頁。放在 /news、/zh/index.html 這種路徑不算數,子目錄也不能有自己的網站名稱。常見狀況是公司首頁其實是 example.com/home,或是網域根目錄直接轉址到某個語系頁,這時候就要確認轉址的目的地是否被視為首頁。
  • 一個網域只會有一個網站名稱。www 與 m 子網域會被當成與主網域等價;其他子網域則各自獨立,若子網域首頁沒有標記,可能會沿用網域層級的名稱。
  • 重複的首頁要標一樣的內容。HTTP 與 HTTPS、www 與非 www 如果都還活著,每一個版本的結構化資料都要一致,否則 Google 可能抓到你沒預期的那一版。
  • 首頁必須可被檢索。被 robots.txt 擋住、掛了 noindex、或是整站躲在登入頁後面,網站名稱就生不出來。
  • 已經有 WebSite 區塊就直接補進去,不要另外再寫一段,兩段互相打架反而麻煩。

命名本身也有講究。Google 的建議是用「簡潔、大家認得出來」的名稱,不要塞描述性的長句。雖然官方沒有給硬性字數上限,但名稱太長在某些裝置上會被截斷,所以「OO實業股份有限公司-專業金屬加工製造商」這種寫法,不如直接寫公司慣用的品牌簡稱。另外,首頁上實際出現的名稱文字,最好跟結構化資料寫的一致,訊號才不會互相稀釋。

老式活字印刷的木頭字模整齊排放在分格木盤裡,象徵網站名稱是由一組固定、要前後一致的字樣組成

Photo by Shaun Meintjes on Unsplash

Google 顯示的名字不是你要的那個,怎麼辦

這是最常見的求助情境:標記明明寫了,搜尋結果上卻還是顯示舊名稱、或顯示一整串網頁標題。Google 不會因為你寄信抗議就手動幫你改,但官方給了一個由淺入深的排查順序,照著走通常能解決:

  1. 確認 WebSite 標記裡寫的確實是你要的名稱,語法沒有錯誤。
  2. 檢查首頁其他地方的文字有沒有用同一個名稱,不要標記寫簡稱、頁面上全是全名。
  3. 檢查轉址。如果首頁會轉到另一個可被檢索的網址,顯示的名稱會以轉址目的地為準。
  4. 確認 HTTP 與 HTTPS、www 與非 www 版本用的是同一組名稱。
  5. 以上都對還是沒換,就加 alternateName,這是官方建議的下一個最有效動作。
  6. 再不行,把小寫網域(例如 example.com)放在 alternateName 的最後一項。
  7. 最後手段,才是把小寫網域直接設成 name。官方明講這是不得已時才用。

驗證工具也要挑對。Rich Results Test 並不支援網站名稱,要用 Schema Markup Validator 這類結構化資料檢查工具看語法,再用 Search Console 的網址檢查工具確認首頁抓得到,並送出重新檢索。

favicon 的規格,比你想的寬鬆也比你想的嚴格

favicon 就是搜尋結果、瀏覽器分頁、書籤列上那顆小圖。Google 對它的要求其實不複雜:

  • 必須是正方形,長寬比 1:1,至少 8x8 像素;官方建議用大於 48x48 的尺寸,在各種版位才顯示得好看。
  • 格式很寬鬆:BMP、GIF、ICO、PNG、JPEG、PPM、TIFF 都收。
  • 要在首頁的 header 放 <link>,例如 <link rel="icon" href="/favicon.ico">。rel 可接受 icon(shortcut icon 基於歷史因素也收)、apple-touch-icon、apple-touch-icon-precomposed。href 可以是相對或絕對網址,檔案放在 CDN 上也沒問題。
  • 網址要穩定,不要三天兩頭換路徑。
  • 一個主機名稱一顆 favicon。news.example.com 算另一個站,子目錄則共用網域的 favicon。
  • Googlebot-Image 要抓得到 favicon 檔,Googlebot 要抓得到首頁,兩者都不能被擋。

條件全部符合,也不保證一定會顯示——官方自己這樣寫。真正會讓小圖變成預設灰色地球的,通常是這幾件事:圖不是正方形、小於 8x8、favicon 或首頁被擋住不給爬、網址一直換、或是首頁其實放在子目錄。還有一種情況是圖片內容被判定為不適當,這時 Google 會直接換成預設圖示。

設計上有個現實問題:那顆圖在搜尋結果裡大約只有十幾像素見方。把整個橫式商標連同公司全名縮進去,結果就是一團看不出來的灰色方塊。比較實際的作法是只取商標的主體圖形、或是一個辨識度高的字,去掉漸層與細線,並且在淺色與深色背景下都看一次——瀏覽器的深色模式會讓某些深色描邊的圖示整個消失。

木桌上放著一支銅框放大鏡,象徵逐項檢查首頁原始碼與搜尋結果顯示狀況的排查過程

Photo by Alexandr Popadin on Unsplash

半小時就能做完的自我檢查

不用等廠商報價,老闆自己或行銷同事就能先跑一遍:

  1. 開無痕視窗,搜尋 site:你的網域,同時用手機和電腦各看一次,記下目前顯示的名稱與小圖。手機版和桌機版的呈現不完全一樣,兩邊都要看。
  2. 打開首頁原始碼(瀏覽器按右鍵檢視原始碼,用 Ctrl+F 搜關鍵字),確認三件事:有沒有 "@type": "WebSite" 的 JSON-LD、有沒有 og:site_name、有沒有 rel="icon"。缺哪一項就補哪一項。
  3. 把 favicon 的網址直接貼到瀏覽器開開看,確認檔案真的存在、而且是正方形。很多網站是改版後舊路徑失效,自己沒發現。
  4. 用結構化資料驗證工具檢查語法,確認沒有打錯引號或逗號。
  5. 在 Search Console 用網址檢查工具送出首頁重新檢索。
  6. 等。 官方說重新檢索與處理可能要數天到數週,內頁也要重新被檢索過才會跟著換名稱。改完隔天沒變不代表失敗,排進行事曆兩週後再看一次就好。

把它放在待辦清單的哪個位置

平心而論,網站名稱與 favicon 不會改變流量結構。它們不是排名因素,也不會讓詢問單自己長出來。但它們有三個特性,值得放進每次改版的收尾檢查表:一次設定、長期有效;成本極低,通常是工程師十五分鐘的事;影響面比想像中廣——同一顆圖會出現在瀏覽器分頁、書籤列、使用者的歷史紀錄裡,不只是搜尋結果。

特別值得注意的是品牌搜尋的情境。當客戶是聽同事講了你的公司名、回座位打開 Google 直接搜公司名,那一刻螢幕上通常會同時出現你的官網、你的 104 職缺頁、幾個商業資料庫的公司登記頁、也許還有一兩個同名的其他公司。這種時候,能不能讓對方一眼認出「這一筆才是官方的」,靠的就是那個名字跟那顆圖。

如果你的官網是這一兩年做的,這兩項通常已經處理好,花十分鐘確認就好。如果官網是五年前建的、中間換過主機或改過網址結構,這兩項有相當高的機率是斷掉的。建議的動作很單純:這週先用上面的檢查清單跑一遍,把缺的項目列成一張清單丟給網站維護的窗口,一次處理完,然後兩週後再搜一次自己的公司名驗收。

想把這些做到你的網站上?

不論是快速上線的模板建站、客製官網或後台系統,留個訊息,我們會回你「能做+報價+時程」。

加 LINE 詢問