如何做圖片SEO優(yōu)化?
使用圖片是一個(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è)面鏈接的可能性。