一本書能不能被翻開,封面往往比書名更關鍵,內容寫得再扎實,封面沒能抓住目光,讀者連翻開的機會都不會給。網站上的文章也是同一套邏輯:訪客在文章列表往下滑、或在 LINE、Facebook 看到朋友分享出來的連結時,第一眼決定要不要點進去,靠的多半不是標題,而是那張縮圖。這張圖在 WordPress 裡叫「精選圖片」,它同時身兼兩個角色:一個是文章列表、分類頁上的站內縮圖,另一個是分享到社群平台時被抓取的站外封面。多數 WordPress 主題都會用到這張圖,可是精選圖片設定該用多大尺寸、要在區塊編輯器的哪裡動手,不少人其實沒真正搞懂,結果設定完,不同地方看起來還是不太一樣。這篇先把建議尺寸與比例講清楚,再帶你在編輯器裡把圖一步步設好,最後拆解設定明明沒錯、顯示卻怪怪的時候該往哪裡查。
精選圖片在網站上,其實同時扮演兩個角色
精選圖片不是單一用途的裝飾圖,它同時扮演兩種身分。第一種是「站內」的角色,是文章列表頁、分類存檔頁上代表這篇文章的縮圖,有些主題甚至會把它放進首頁的精選內容區塊或作品集頁面;第二種是「站外」的角色,這篇文章被分享到社群平台,或被 Google 收錄進搜尋結果與探索版位時,平台抓去當預覽封面的也是同一張圖。WordPress.com 官方支援文件明確列出精選圖片會出現的位置,涵蓋部落格列表、搜尋結果、作品集頁、首頁精選區塊,以及社群分享的預覽畫面。
站內跟站外對圖片顯示的要求並不完全一樣,這也是後面「該設多大」會有一個折衷答案的原因,同一張圖片要同時服務兩邊,尺寸得取一個兩邊都過得去的公約數。

站內看到的:列表縮圖與文章首圖
同一張精選圖片,在「文章列表頁」與「分類存檔頁」多半以縮圖形式排排站出現,尺寸不大,重點是讓讀者一眼認出這篇在講什麼。但在「單篇文章」的顯示位置就要看主題設計,有些主題會把它放大當成標題上方的首圖,有些主題完全不顯示,關鍵在主題有沒有把 the_post_thumbnail() 這個函式放進文章樣板裡輸出。WordPress 官方 Theme Handbook 說明,精選圖片能不能在前台顯示,決定權在主題本身有沒有呼叫這個函式、放在哪個位置。所以看不到精選圖片不代表設定失敗,得先確認主題有沒有支援與輸出這個位置,這個狀況後面排錯章節會再細看。
站外看到的:社群分享與 Google 探索的縮圖
精選圖片同時是文章被分享出去時的封面來源。分享到 Facebook、LINE 這類社群平台時,平台會透過網頁裡的 Open Graph 標籤抓圖,其中 og:image 這個標記就是指定要抓哪一張圖當預覽封面,寬高則另外由 og:image:width、og:image:height 標記告訴平台。除了社群分享,精選圖片也有機會被 Google 探索選來當候選縮圖,Google Search Central 的官方文件說明,探索版位會參考網頁上用 schema.org 或 og:image 標記指定出的具代表性大圖,來決定要不要、以及用哪張圖當縮圖顯示。站外這條線先點出來,尺寸該取多少,留給下一節細講。
精選圖片要多大?1200×630 像素是目前公認的答案
精選圖片建議尺寸是 1200×630 像素,比例約 1.91:1,這不是哪個外掛隨口訂的數字,是把社群分享與搜尋探索兩邊的規格收斂出來的公約數。三邊規格各有各的門檻:Meta 官方文件建議連結分享用的圖像至少 1200×630 像素、比例盡量維持 1.91:1,檔案不能超過 8MB;Google Search Central 官方文件則建議探索版位的縮圖至少寬 1200 像素、總像素超過 30 萬、比例採 16:9;多數 WordPress 主題預設裁切的區塊也落在這個橫向長方形的範圍附近。1200×630 剛好同時通過前兩道門檻,又不偏離主題預設太多,才會變成目前公認照抄就對的答案。
為什麼不是正方形,也不是特別瘦長的比例?
1.91:1 算下來是一個明顯偏橫向的長方形,不是正方形,也不是特別瘦長的寬螢幕比例,原因在於它剛好落在 Meta 與 Google Search Central 兩邊要求的交集,Meta 要 1.91:1、Google 探索要 16:9,兩者相差不遠,取中間值都吃得下。用正方形圖投去分享,平台在預覽時會把左右硬裁掉一塊,常見的後果是主體被切到只剩一半;用特別瘦長的比例放進列表縮圖,又容易在窄版位被腰斬只剩中間一小條。實際設計精選圖片時,重點主體與文字盡量集中在畫面中段,別頂到最邊緣,因為不同版位的裁切邏輯不會完全一樣,擺在正中央才禁得起各種裁法。Google Search Central 也提醒,og:image 避免放文字量很大的圖,文字塞太滿,反而不利於被探索版位選中當縮圖。

檔案大小也要顧到,太大反而拖慢網站
尺寸抓對了不代表檔案就會小,一張 1200×630 的圖如果沒壓縮,原始檔案動輒好幾 MB,對頁面載入速度是負擔,行動網路環境下感受尤其明顯。Meta 官方文件訂出的 8MB 是分享圖片的上限,但那只是底線,不是建議值,實務上把精選圖片壓到遠低於這個數字比較保險,格式上 JPEG 對照片類圖像壓縮效率高,WebP 則能在同樣畫質下把檔案再壓小一截。上傳前用圖片編輯工具或線上壓縮服務先處理過,比事後才發現網站變慢再回頭補救省事得多。
區塊編輯器裡,精選圖片設定分成這幾步
弄懂尺寸與比例之後,接下來是動手設定。在最新版的區塊編輯器裡,精選圖片的設定介面固定在同一個地方,整個流程可以拆成幾個具體動作,一步步照做就不會漏掉關鍵欄位。
精選圖片欄位,就在文章設定面板裡
精選圖片的欄位在區塊編輯器右側的「文章」設定面板裡,不是在內文的區塊庫裡找。打開頁面設定側欄後,往下捲動就能看到「精選圖片」這個區塊,如果一時找不到,留意畫面右上角的偏好設定選項有沒有把這個區塊收合或藏起來。WordPress.com 官方支援文件把精選圖片的設定介面固定放在頁面或文章設定側欄,這是唯一真正的精選圖片入口,跟編輯器裡另一個外觀相似的「封面」區塊是兩回事,差異留到後面章節拆解。

圖片來源:新上傳,或從媒體庫挑一張現成的
點開「設定精選圖片」之後,最常用的兩條路是從媒體庫挑一張既有圖片,或直接上傳新檔案。除此之外還有一條比較少人注意的捷徑,先在內文插入一張圖片區塊,選好圖之後,從區塊的選項選單裡直接選「設為精選圖片」,不必再跳回設定面板重新選一次,兩條路徑殊途同歸,選哪一條看當下手邊素材放在哪裡比較方便。

手邊沒有合適的圖,AI 也能直接生成一張
如果臨時找不到合適的圖,精選圖片的選圖選單裡除了媒體庫、上傳、Google 相簿、Pexels 圖庫,也有一個「用 AI 生成」的選項,會依文章內容直接產生候選圖,不滿意也能重新下提示詞再生成一次。要注意的是,這項 AI 生成功能來自 Jetpack AI,必須網站有安裝並連接 Jetpack、且啟用區塊編輯器與 Jetpack 相關區塊,選單裡才會出現這個按鈕,不是每個自架 WordPress 網站都內建;如果選單裡沒看到「生成圖片」的選項,代表網站還沒接上 Jetpack AI,照前一個作法手動挑圖即可。
上傳前的裁切,把重點對準想強調的位置
如果原始照片的比例跟建議尺寸差很多,比較保險的做法是上傳前先用圖片編輯軟體裁好,把想強調的主體放進畫面中段。如果圖片已經上傳完成才想調整,區塊主題的精選圖片區塊本身也能在設定裡調整長寬比與縮放模式,常見的三種是鋪滿裁切(Cover)、完整顯示(Contain)、直接拉伸(Fill)。前兩種都能維持圖片原本的比例不變形,拉伸模式則會把圖片硬塞進設定的框架裡,容易讓畫面看起來變形走樣,盡量避免用這個模式。
替代文字,寫給看不到圖的人與程式看
精選圖片設定的最後一步容易被忽略,就是替代文字(Alt Text)。這段文字是給螢幕閱讀器的使用者聽的,也是圖片本身因為網路不穩、載入失敗時,畫面上唯一還看得到的說明,它同時是這張圖片在頁面上少數會被以純文字形式讀取的地方。內容照實描述畫面本身在拍什麼、呈現什麼場景就好,不需要硬塞關鍵字進去,寫得準確,比堆字更有用。
精選圖片和封面圖片,有什麼差異?
精選圖片設定到這裡已經走完一輪,但區塊編輯器裡還有一個經常被搞混的地方。「封面」區塊外觀同樣是一張大圖疊上文字,很容易被誤以為就是精選圖片,結果設定了封面卻忘記設精選圖片,文章列表頁看不到縮圖;或者兩邊都放了同一張圖,畫面上同一張圖出現兩次,讀起來很奇怪。
兩者的差別在於它們屬於不同層級的元素。封面是內文的版面元素,可以插在文章任何位置,插了幾次就出現幾次,單純是排版用的視覺區塊;精選圖片則獨立於內文之外,是代表整篇文章的欄位,只會有一個,由主題決定要不要輸出、輸出在哪裡。要排除同一張圖出現兩次的狀況,檢查方法很直接,如果內文開頭用封面區塊放了一張大圖,精選圖片欄位又選了同一張,拿掉其中一邊、只留一邊即可;通常會留精選圖片,因為它同時要負責列表縮圖與社群分享封面兩件事,封面區塊反而可以省略或換一張不同的圖。

精選圖片設定好了,為什麼各處顯示還是不一致?
精選圖片跟封面分清楚,也設定好了,接下來要面對另一種常見狀況。設定沒有錯,但每個地方看起來卻不太一樣,是設定完精選圖片之後很常見的困惑。常見成因並不只一種,可以照下面幾種狀況對照,找到跟自己情況最像的那條,直接動手檢查。
列表縮圖被裁到奇怪的位置
文章列表頁用的縮圖尺寸,常見命名是「Thumbnail」,預設是裁切模式,會以圖片正中央為基準裁掉多餘的部分。如果照片裡的主體原本就偏在畫面一邊,不是置中構圖,裁切之後很容易出現主體被切到只剩一半的狀況。最直接的解法是換一張主體置中的圖重新設定;也可以到後台「設定」>「媒體」,取消勾選「將縮圖裁切成指定的精確尺寸」,把預設的硬裁模式改成等比例縮放,讓圖片完整顯示、不再裁掉邊緣。

分享到社群時,看到的還是舊圖或根本沒圖
社群平台會依網址把抓到的預覽圖存起來當快取,換了精選圖片之後,拿同一個網址再分享一次,平台顯示的常常還是換圖前抓到的舊版本,不是設定沒生效,是快取沒更新。解法是用平台官方的分享偵錯工具重新抓取一次該網址,Meta 提供的 Sharing Debugger 工具,貼上網址、按下重新抓取,就能讓平台丟掉舊快取、重新讀取現在的精選圖片。如果分享出去本來就完全沒有圖,通常是網站缺少 Open Graph 標記,多數 SEO 外掛都能自動補上這組標記,先確認網站有沒有裝這類外掛並啟用相關設定。
手機和電腦看到的裁切比例不一樣
這種狀況多半是正常現象,不是設定錯誤。WordPress 會依裝置與版位自動輸出好幾種不同尺寸的圖片版本,透過 srcset 標記讓瀏覽器依螢幕大小挑合適的版本載入;區塊主題的精選圖片區塊本身也能針對不同版面各自設定長寬比與縮放模式。桌機看到的可能是一張橫幅,手機看到的可能是同一張圖的不同裁切結果,本來就不保證完全一致。只要圖片主體沒有被明顯切掉,看起來還是同一張圖在講同一件事,通常不需要特別處理。
這篇文章,前台完全沒出現精選圖片
先排除最底層的可能。如果連編輯器的設定面板都找不到「精選圖片」這個欄位,代表主題本身沒有宣告支援這個功能,得先確認主題有沒有加上 add_theme_support( 'post-thumbnails' ) 這行宣告,WordPress 官方 Theme Handbook 寫明這是必要條件,沒有這行,連設定介面都不會出現。如果設定面板有欄位、也確實設定了,前台卻還是看不到圖,問題通常出在樣板本身沒有把輸出位置放進去,經典佈景主題的樣板檔案裡沒有呼叫 the_post_thumbnail(),或區塊主題在對應的樣板裡漏放了「精選圖片」這個區塊。這種情況要到外觀底下的樣板編輯畫面,檢查對應的文章樣板有沒有包含精選圖片的輸出區塊;有能力調整程式碼的話,也可以直接檢查主題檔案裡是否缺了這行函式呼叫。
精選圖片不是隨手塞一張圖交差了事,它是文章在列表頁、搜尋結果、社群分享,每一個被看見的場合共用的第一印象,設定得潦草,吃虧的是每一次曝光。花點時間把尺寸與比例定下來、替代文字寫清楚,養成固定用同一套模板出圖的習慣,比事後一篇一篇回頭補救划算得多。
