使用圖片是一個(gè)不錯(cuò)的主意，它能讓讀者更好地理解你的文章，或者更好地了解你提供的產(chǎn)品或服務(wù)。老話說(shuō)得沒(méi)錯(cuò)，“一圖勝千言”，盡管這可能在谷歌的情境下并不適用。但是當(dāng)你需要為一千個(gè)枯燥的文字增添色彩，用圖表說(shuō)明你的意思，或者讓你的社交媒體帖子更具吸引力時(shí)，這句話確實(shí)是對(duì)的。

這是一個(gè)簡(jiǎn)單的建議：在你寫(xiě)的每篇文章或創(chuàng)建的每個(gè)頁(yè)面中都添加圖片，讓它們更吸引人。此外，隨著搜索領(lǐng)域的迅速變化，不再只依賴于文本，向頁(yè)面添加視覺(jué)元素會(huì)有利于你的搜索引擎優(yōu)化。

視覺(jué)搜索仍然是方程式的重要組成部分，就像幾年前谷歌對(duì)搜索未來(lái)的愿景已經(jīng)顯而易見(jiàn)一樣。但隨著人工智能和其他多媒體技術(shù)的興起，優(yōu)化你的圖片（以及視頻）將使搜索引擎和用戶更容易找到你。努力優(yōu)化你的圖片可能會(huì)為你帶來(lái)可觀的流量。

當(dāng)你進(jìn)入谷歌圖片搜索時(shí)，你會(huì)注意到現(xiàn)在它帶有過(guò)濾器、元數(shù)據(jù)和歸因。這向我們表明，谷歌越來(lái)越了解圖像的內(nèi)容以及圖像如何融入更大的背景中。

尋找合適的圖片

圖像 SEO：這張圖片并不是在說(shuō)“歡迎來(lái)到我們的公司”，而是在說(shuō)“歡迎來(lái)到一家公司”。

最好使用原創(chuàng)圖片——你拍攝的高質(zhì)量照片——而不是庫(kù)存照片。你的團(tuán)隊(duì)頁(yè)面需要展示你實(shí)際團(tuán)隊(duì)的照片。而不是右邊這個(gè)人，或者他的其他庫(kù)存照片朋友之一。

你的文章需要一張與其主題相關(guān)的圖片。如果你添加了一個(gè)隨意的照片只是為了在 Yoast SEO 內(nèi)容分析中得到一個(gè)綠色的指示燈，那你就錯(cuò)了。這張圖片應(yīng)該反映出文章的主題，或者在文章中起到說(shuō)明作用。此外，盡量將圖片放在相關(guān)文本附近。如果你有一個(gè)核心圖片或者你想要排名的圖片，盡量將其放在頁(yè)面頂部，如果可能的話，而不讓其顯得不自然。所有這些都有一個(gè)簡(jiǎn)單的圖像 SEO 原因。一張帶有相關(guān)文本的圖片在其優(yōu)化的關(guān)鍵詞上排名更高。但我們將在本文稍后討論圖像 SEO。

備選方案

你的網(wǎng)站上沒(méi)有原創(chuàng)圖片嗎？還有其他找到獨(dú)特圖片的方法。例如，F(xiàn)lickr：Creative Commons 和 Unsplash 是很好的圖像來(lái)源，因?yàn)槟憧梢允褂?Creative Commons 圖像。記得檢查一下限制條件，并在使用其圖像時(shí)注明原始攝影師。我們的博客文章為你提供了一個(gè)獲取優(yōu)秀圖片的概述。避免明顯的庫(kù)存照片。如果你一定要使用庫(kù)存照片，選擇看起來(lái)更真實(shí)的照片。但不管你使用什么，你可能會(huì)發(fā)現(xiàn)帶有人物的圖片通?？雌饋?lái)像是庫(kù)存照片。除非你自己拍攝了照片，這（在我們看來(lái)）總是最好的主意。

明顯的圖片替代方案是插圖或圖表，這正是 Yoast 我們經(jīng)常使用的。此外，還應(yīng)該提到的是動(dòng)態(tài) GIF 圖片，這在今天非常流行。

圖像 SEO：動(dòng)態(tài) GIF 圖片現(xiàn)在非常流行

動(dòng)態(tài) GIF 圖片很酷但加載慢

盡管動(dòng)態(tài) GIF 圖片很受歡迎，但要適度。它會(huì)使你的文章更難讀，因?yàn)閳D像的運(yùn)動(dòng)會(huì)分散讀者的注意力。而且，更重要的是，它們可能會(huì)減慢你的頁(yè)面加載速度。

為文章中的圖片做準(zhǔn)備

一旦你找到了合適的圖片——照片、插圖或圖表——下一步就是為你的網(wǎng)站對(duì)其進(jìn)行優(yōu)化。所以在添加圖片之前，有幾件事情你需要考慮：

選擇正確的文件名

是的，我們是認(rèn)真的。圖像 SEO 從文件名開(kāi)始。你希望谷歌知道圖像是關(guān)于什么的，甚至不看它。所以，在圖像文件名中使用你的關(guān)鍵詞。這很簡(jiǎn)單：如果你正在寫(xiě)一篇關(guān)于巴黎圣母院的文章，并使用一張顯示巴黎圣母院日出的圖片，文件名不應(yīng)該是 DSC4536.jpg。一個(gè)合適的文件名應(yīng)該是 notre-dame-paris-sunrise.jpg。這樣，照片的主要主題（也許是你的文章）就在文件名的開(kāi)頭。

選擇正確的格式

對(duì)于圖片來(lái)說(shuō)，沒(méi)有適合所有情況的正確格式。它取決于圖片的類型以及你想要如何使用它。簡(jiǎn)而言之，我們建議：

• 對(duì)于較大的照片或插圖，選擇 JPEG。它會(huì)以相對(duì)較小的文件大小為你提供色彩和清晰度方面的良好結(jié)果；
• 如果你想在圖像中保留背景透明度，使用 PNG；
• 或者使用 WebP 而不是 JPEG 和 PNG。它會(huì)以較小的文件大小提供高質(zhì)量的結(jié)果。你可以使用像 Squoosh 這樣的工具將你的圖像轉(zhuǎn)換成 WebP；
• 對(duì)于標(biāo)識(shí)和圖標(biāo)，使用 SVG。借助 CSS 或 JavaScript，你可以管理 SVG 格式的圖像。例如，調(diào)整大小而不會(huì)失去質(zhì)量。 如果你知道你的大部分受眾使用特定的瀏覽器或設(shè)備，檢查一下這些瀏覽器在 CanIuse.com 上是否支持你首選的格式。當(dāng)你選擇了正確的名稱和格式后，就該調(diào)整大小和優(yōu)化你的圖像了！

為圖像 SEO 縮放

加載時(shí)間對(duì)用戶體驗(yàn)和整體 SEO 非常重要。網(wǎng)站加載得越快，用戶和搜索引擎訪問(wèn)頁(yè)面就越容易。圖片在加載時(shí)間中有著很大的影響，特別是當(dāng)你上傳一個(gè)巨大的圖像來(lái)顯示它的小尺寸時(shí)。例如，一個(gè) 2500×1500 像素的圖像以 250×150 像素的大小顯示。

即使它顯示得更小，整個(gè)圖像仍然需要加載。因此，將圖像調(diào)整到你想要顯示的尺寸。WordPress 在上傳后會(huì)自動(dòng)為你提供多個(gè)尺寸的圖片。不幸的是，這并不意味著文件大小也被優(yōu)化了；這只是圖像顯示的尺寸。所以，考慮一下你上傳圖片的尺寸！

使用響應(yīng)式圖片

這對(duì) SEO 也很重要。如果你使用 WordPress，它會(huì)自動(dòng)完成，因?yàn)樗?WordPress 4.4 版本中默認(rèn)添加了此功能。圖片應(yīng)該具有 srcset 屬性，這樣可以根據(jù)屏幕寬度為每個(gè)屏幕加載不同的圖片，這對(duì)移動(dòng)設(shè)備尤其有用。

減少文件大小

圖像 SEO 的下一步是確保你的縮放圖像被壓縮。這樣，它將以最小的文件大小提供。值得注意的是，WordPress 確實(shí)會(huì)壓縮你上傳的圖像。但不幸的是，這種自動(dòng)壓縮通常不足以依賴它。

當(dāng)然，你可以導(dǎo)出圖像并嘗試不同的質(zhì)量百分比。但我們更喜歡使用最高質(zhì)量的圖像，特別是考慮到移動(dòng)設(shè)備和臺(tái)式設(shè)備上高分辨率屏幕的普及。

你仍然可以通過(guò)去除 EXIF 數(shù)據(jù)等方式減小這些圖像的文件大小。我們建議使用像 ImageOptim 或 Squoosh、JPEGmini、jpeg.io 或 Kraken.io 這樣的工具。

當(dāng)你優(yōu)化了你的圖像后，你可以使用 Google PageSpeed Insights、WebPageTest.org 或 Pingdom 等工具測(cè)試你的頁(yè)面。

提高核心 Web 體驗(yàn)中的 LCP

在 CSS 中為圖像指定寬度和高度可以顯著改善你網(wǎng)站的用戶體驗(yàn)和整體性能。通過(guò)為圖像設(shè)置顯式尺寸，你可以優(yōu)化布局，并在圖像加載時(shí)防止內(nèi)容移位。這種做法對(duì)于改善核心 Web 體驗(yàn)非常重要，包括最大內(nèi)容渲染時(shí)間（LCP）。

當(dāng)你在 CSS 中為圖像定義寬度和高度屬性時(shí)，瀏覽器可以在完全加載圖像之前分配所需的空間。這使得瀏覽器可以更準(zhǔn)確地呈現(xiàn)內(nèi)容，并避免意外的布局移位，這對(duì)用戶來(lái)說(shuō)非常令人沮喪。

將圖像添加到文章中

雖然谷歌正在改進(jìn)識(shí)別圖像中內(nèi)容的能力，但你不應(yīng)該僅依靠它們的能力。一切都取決于你為圖像提供的上下文——所以盡量提供盡可能多的信息！我們將在下面討論如何做到這一點(diǎn)。

當(dāng)你的圖片準(zhǔn)備好使用時(shí)，不要隨便把它放到文章中的任何位置。如前所述，將其添加到與相關(guān)文本內(nèi)容接近的地方會(huì)幫助很多。這確保了文本與圖像的相關(guān)性與用戶和谷歌所喜歡的一致。

字幕

圖片字幕是指伴隨圖片出現(xiàn)在頁(yè)面上的文字。如果你看一下本文中的圖片，它就是每個(gè)圖片下方灰色框中的文本。為什么字幕對(duì)圖像 SEO 很重要？因?yàn)槿藗冊(cè)跒g覽文章時(shí)會(huì)使用它們。人們傾向于在瀏覽網(wǎng)頁(yè)時(shí)掃描標(biāo)題、圖片和字幕。早在 1997 年，Jakob Nielsen 就寫(xiě)道：

“增強(qiáng)掃描的元素包括標(biāo)題、大字體、粗體文本、突出顯示的文本、項(xiàng)目符號(hào)列表、圖形、字幕、主題句和目錄?！?/p>

你需要為每個(gè)圖片都添加字幕嗎？不需要，因?yàn)橛袝r(shí)圖片還有其他用途。決定你是否也要將其用于 SEO。你只應(yīng)該在訪客認(rèn)為有必要添加字幕的情況下才添加。首先考慮訪客，不要僅僅為了圖像 SEO 而添加字幕。

替代文本

替代文本（或 alt 標(biāo)簽）是添加到圖像中的文本，因此如果因任何原因圖像無(wú)法顯示給訪客，描述性文本將在那里。我們無(wú)法比維基百科更好地解釋：

“在讀者無(wú)法查看圖像的情況下，例如因?yàn)樗麄冊(cè)诰W(wǎng)絡(luò)瀏覽器中關(guān)閉了圖像，或者由于視覺(jué)障礙而使用屏幕閱讀器，替代文本確保沒(méi)有丟失任何信息或功能?！?/p>

替代文本用于增強(qiáng)你網(wǎng)站的可訪問(wèn)性。因此，請(qǐng)確保為你使用的圖像添加替代文本。此外，考慮在適當(dāng)?shù)那闆r下包含該頁(yè)面的 SEO 關(guān)鍵短語(yǔ)。不要將每個(gè)圖像的替代文本都填滿關(guān)鍵字。最重要的是，請(qǐng)描述圖片中的內(nèi)容，以便搜索引擎和用戶理解。圖片周圍的相關(guān)信息越多，搜索引擎就會(huì)認(rèn)為這個(gè)圖片越重要。

然而，請(qǐng)記住，并不是每個(gè)圖片都需要替代文本。相反，請(qǐng)將替代文本視為你內(nèi)容的一部分，并在有意義的地方添加它。例如，如果你使用的是純粹用于裝飾的圖片，那么該圖片就不需要替代文本。在這種情況下，添加替代文本對(duì)讀者沒(méi)有任何價(jià)值。另一方面，如果你使用了一個(gè)帶有統(tǒng)計(jì)數(shù)據(jù)的圖片，比如說(shuō)——上個(gè)月搜索冰淇淋的人數(shù)，那么這個(gè)信息應(yīng)該在替代文本中反映出來(lái)。你可以在 W3 的文章中找到替代文本的指導(dǎo)。

標(biāo)題文本

一些瀏覽器在懸停在圖像上時(shí)會(huì)顯示標(biāo)題文本作為“工具提示”。Chrome 顯示的標(biāo)題文本是預(yù)期的。圖片的標(biāo)題都很相似，許多使用標(biāo)題的人都復(fù)制替代文本。但越來(lái)越多的人完全不使用它們。為什么呢？Mozilla 這樣解釋：

“標(biāo)題存在許多可訪問(wèn)性問(wèn)題，主要是因?yàn)槠聊婚喿x器的支持非常不可預(yù)測(cè)，大多數(shù)現(xiàn)代瀏覽器已經(jīng)停止了使用標(biāo)題作為默認(rèn)的鼠標(biāo)提示。”

搜索引擎爬蟲(chóng)不會(huì)直接使用圖片的標(biāo)題文本。所以你可以選擇使用或不使用標(biāo)題文本。但是，如果你決定使用它，確保它是有意義的。與替代文本一樣，不要填滿關(guān)鍵字。

標(biāo)題和插圖

每張圖片都有一個(gè)標(biāo)題。這個(gè)標(biāo)題將成為該頁(yè)面的主題之一。我們?cè)谇懊娴牟鍒D中看到的插圖并不是在說(shuō)“歡迎來(lái)到我們的公司”，而是在說(shuō)“歡迎來(lái)到一家公司”。換句話說(shuō)，這個(gè)標(biāo)題是該頁(yè)面的一部分，應(yīng)該與其內(nèi)容相關(guān)。對(duì)于一些圖片，標(biāo)題是很好的輔助手段，但并不是所有圖片都需要標(biāo)題。你需要權(quán)衡利弊。

標(biāo)題文本

除了標(biāo)題之外，還有一個(gè)圖像的標(biāo)題文本。這是一種與 HTML 標(biāo)記結(jié)構(gòu)相關(guān)的東西，但現(xiàn)在已經(jīng)不被廣泛支持了。根據(jù) MDN Web Docs：

“不要使用 title 屬性作為工具提示文本，因?yàn)樗男袨槭遣环€(wěn)定的：大多數(shù)瀏覽器不會(huì)顯示它，除非用戶配置了它們的瀏覽器，而這是少見(jiàn)的?！?/p>

如此說(shuō)來(lái)，盡管它們不會(huì)立即顯示給用戶，但標(biāo)題文本仍然是你可以添加到圖像的另一種描述性文本。像替代文本一樣，標(biāo)題文本用于幫助搜索引擎了解圖片的內(nèi)容和上下文。

考慮圖片數(shù)量

你是否已經(jīng)添加了你需要的所有圖片？也許你有太多的圖片，而且它們只是讓頁(yè)面顯得混亂?；蛘吣阒挥幸粌蓮垐D片，而你的文章或頁(yè)面可能需要更多的視覺(jué)元素。使用盡可能多的圖片是很好的，但是不要添加它們只是為了添加。這會(huì)使頁(yè)面看起來(lái)?yè)頂D不堪，從而影響用戶體驗(yàn)。相反，只有在它們?cè)鰪?qiáng)你的內(nèi)容時(shí)才添加圖片。

圖片與搜索引擎可訪問(wèn)性

搜索引擎不像我們，它們不會(huì)看到圖片。它們通過(guò)文本來(lái)了解圖像內(nèi)容。所以，請(qǐng)確保你的圖片有足夠的上下文。把它們添加到一個(gè)有關(guān)你的內(nèi)容的文章中。通過(guò)添加替代文本、標(biāo)題和字幕，以及將它們放在與相關(guān)文本接近的地方，來(lái)為搜索引擎提供所需的信息。

圖像引用

盡管圖像本身并不是一種排名因素，但圖像引用是。這意味著鏈接到你的圖片的頁(yè)面也是一種排名因素。這也是為什么我們建議將圖片添加到你的文章中。它們使你的文章更有吸引力，同時(shí)增加了與其他頁(yè)面鏈接的可能性。