Google 圖片指南、AMP 規則和結構化數據圖片
已發表: 2017-10-26新的 Google 圖片指南、AMP 規則和添加結構化數據圖片
最後更新於 2020 年 8 月 28 日
視覺搜索的進步正在塑造如何將圖像添加到網站以及所有形式的視覺內容。
所有廣告的主要目標是幫助觀看它的個人能夠快速識別並與所提供的產品或品牌保持一致。 今天,需要考慮的不僅僅是標準網站圖像大小。 據谷歌稱,他們試圖從權威頁面中展示谷歌圖片結果。
同樣,人們首先會被快樂的面孔所吸引。 文字第二。 視覺效果必須與技術 SEO 因素相結合,包括照片尺寸要求、圖像重量要求以及結果驅動營銷的適當結構化數據實施。 例如,可接受的配方模式的新圖像大小為 185px x 185px 最小值。 雖然網站訪問者顯示出對帶有圖像的頁面的偏好,但它曾經被允許沒有圖像。 現在谷歌說,“每個頁面必須至少包含一張圖片(無論你是否包含標記)”。 如果您想獲得精選片段,則需要一種結構化的 SEO 方法,並遵循某些新的圖像尺寸建議。 通過遵守新的 Google 圖像指南、AMP 規則,並糾正結構化數據圖像植入。
我們撰寫本文的目的主要集中在 Google 的圖像指南和 Accelerated Mobile Pages (AMP) 圖像指南上。 這是對許多網站管理員和網站所有者要求詳細了解如何選擇圖像以及如何針對其網站內容和數字營銷需求優化圖像的回應。 我們回答常見的圖像問題,尤其是與移動優先世界的廣告相關的問題。
最重要的圖像指南是什麼?
* 截至 2020 年 5 月 26 日,如果高度為 800 像素,圖像的寬度應至少為 1200 像素。這是一個數學問題。
* 每個頁面都必須包含至少一張圖片(無論您是否包含標記)。 Google 將根據寬高比和分辨率選擇要在搜索結果中顯示的最佳圖片。
* 圖片 URL 必須是可抓取的、有意義的、與帖子相關的且可編入索引的。
* 圖片必須代表標註的內容。
*對於電子商務模式的 JSON-LD 實施,圖像必須採用 BMP、GIF、JPEG、PNG、WebP 和 SVG 格式。 開發人員還可以將圖像內嵌為數據 URI。 通過將 img 元素的 src 設置為 Base64 編碼字符串,數據 URI 提供了一種內聯包含文件(例如圖像)的方法。
* 為獲得最佳效果,請提供具有以下縱橫比之一的多個高分辨率圖像(寬度和高度相乘時至少 800,000 像素):16×9、4×3 和 1×1。
請記住,Google 可能會隨時更新其圖片要求和指南。 保持敏捷的營銷計劃以在必要時進行調整。 使用 URL 檢查器和新報告在您的Google Search Console Insights中查找 AMP 圖像大小錯誤。
谷歌和其他搜索引擎繼續擴展圖像搜索的方式反映在 SERP 中的 URL 翻轉上,它會提示圖像彈出。 在您的 Core Web Vitals 報告中,加載緩慢、過重或格式不正確的圖像通常是有問題的。 您如何在您的網站上使用圖像對於您的、有利的移動搜索結果很重要——您不希望讓人們想要加載圖像。 您可能會完全鬆開它們。
特色圖片應該放在網頁的什麼位置?
將特色圖片放在每個網頁的首位或較高位置。
2018 年 9 月 24 日,谷歌宣布已修改其圖像搜索算法,以根據網頁的權威性作為其依賴因素來顯示照片。 或者舊的或最近的內容也會影響谷歌如何評價圖像在頁面上的位置。 這意味著您放置在頁面上較高位置的圖像更受 Google 的重視。
如果您正在觀察 SERP 顯示的變化,您已經知道這家科技巨頭將圖像視為重要元素。 谷歌寫道:
“在過去的一年裡,我們對 Google 圖片算法進行了全面檢查,以對頁面上同時包含精美圖片和優質內容的結果進行排名。 對於初學者來說,網頁的權威性現在是排名中更重要的信號。 如果您正在搜索 DIY 擱架,則圖片後面的站點現在更有可能是與 DIY 項目相關的站點。 我們還優先考慮更新的內容,因此您更有可能訪問最近更新的網站。
此外,不久前,如果您訪問圖像的網頁,當您到達那裡時可能很難找到您正在尋找的特定圖像。 我們現在優先考慮圖像是頁面中心的站點,並且在頁面上更高。 因此,如果你想購買一雙特定的鞋子,專門針對這雙鞋子的產品頁面將優先於顯示一系列鞋子款式的類別頁面。”
了解您的商業世界的意義的視覺營銷
圖像如何幫助支持業務增長?
質量差的圖像對您的品牌影響不佳。 高質量的圖像向消費者傳達您的品牌是個人的和值得信賴的。 如果巧妙地使用,圖像可能會吸引大量訪問者訪問您的網站。 引人注目的圖像鼓勵社交分享和品牌互動,並最終幫助您實現業務目標。
產生強大可視化效果的圖像工作可幫助網站訪問者識別您的業務和產品。 相關、令人興奮、引人入勝的圖像是業務增長的重要媒體資產。 一些數字營銷人員認為,隨著新的圖像使用指南的出現,以及訪問圖像如何產生情感體驗的複雜需求,這令人生畏。 您的在線產品頁面和服務的圖像選擇可以從以下信息開始; 從長遠來看,它將保護您免於做出糟糕的選擇並節省您的時間、罰款或架構產品標記懲罰。
讓我們假設您已經努力想出正確的企業形象,現在您想利用您的企業形象來提高您的企業品牌的知名度和收入。 如果您之前沒有意識到這一點,那麼是時候了解最新的圖像規範、規則和警告了。 您可能已經獲得了數百條 5 星醫療保健評論來提升您的搜索結果,但您仍然需要努力工作的圖像。
谷歌推出對谷歌圖片的 IPTC 元數據支持
“作為 Google、照片行業聯盟 CEPIC 和全球新聞媒體技術標準機構 IPTC 合作的一部分,您現在可以訪問 Google 圖片中與版權相關的圖片元數據。” - 谷歌*******
因此,截至 2018 年 9 月 27 日,谷歌“在谷歌圖片上的圖片中添加了創作者和信用元數據”。 他們還表示,未來將提供版權聲明元數據。
Google AdWords 廣告的圖片規範
圖片廣告在廣泛使用的範圍內吸引了購物者的注意力。 您在 Google 龐大的展示廣告網絡(包括大約 200 萬個網站和應用程序)中確定的目標可能會查看正確的圖片。 因此,您希望您的圖像在近距離看起來很棒并快速加載。
在這個圖像使用場景中,有尺寸和重量規格。 AdWords 客戶經理可以通過 AdWords 編輯器從大量指定的圖片尺寸中上傳圖片廣告。 目前,所有 AdWords 圖片廣告的圖片大小限制為 150 KB。 迄今為止,Words Editor 不支持高分辨率顯示設備的雙倍尺寸圖像(例如,512 x 45 廣告位的 1024 x 90 圖像)。
有時,我們與一個更喜歡為其 Google 展示廣告尺寸設計圖像而不是委託某人製作廣告圖形的團隊合作。 在這種情況下,對圖形設計師的明確說明應包括最終產品應為 JPEG、SWF、PNG 或 GIF 格式的通知。 目前,這些是 PPC 廣告唯一可接受的格式。
請記住您的廣告在移動設備上的顯示方式,並從大多數用戶點擊的橫幅圖像格式開始。 一些要求也適用於圖片重疊式廣告和 HTML5 廣告。 您的 PPC 專業人員將知道需要哪些圖像規格,以及 A/B 測試顯示移動參與如何受圖像內容影響的規格。
在使用附加圖片時,圖片必須代表任何特定廣告組中的所有關鍵字和廣告。 此外,產品圖像必須具有足夠高的質量才能進行轉換。
警告:如果商家認為 Google 虛假陳述可以保護用戶,他們可能會面臨 Google 虛假陳述警告。 帶文字的圖像應符合要求。 “我們不允許廣告或目的地通過排除相關信息或提供有關產品、服務或業務的誤導性信息來欺騙用戶”,谷歌廣告平台聲明**********。
如果可能,請在第一時間正確命名您的圖像 URL。
“如果我們看到與嵌入圖像有關的 URL 發生變化,那麼我們將不得不著手重新抓取這些圖像,重新處理它們,重新索引它們,並讓它們都準備好再次進行圖像搜索。” ——谷歌的約翰·穆勒
AMP 頁面的圖片指南
AMP 登陸頁面更先進,因為它們支持媒體查詢和元素查詢。 不僅如此,它還帶有一個獨特的內置過程,可以控制單個元素的佈局,比如圖像。 谷歌現在鼓勵網站管理員考慮圖像縱橫比。 縱橫比是特定圖像的寬度和高度之間的比例關係。 它通常表示為由 x 分隔的兩個數字,例如 16 x 9 或 4 x 3。使用縱橫比調整照片時,可以保持圖像的分辨率不變。
您的網頁和帖子的 AMP 版本的響應式圖片
對於 AMP 上的響應式圖像,“寬度和高度不需要與 amp-img 的確切寬度和高度匹配; 這些值只需要產生相同的縱橫比。 例如,根據其文檔,您可以指定 width=”1.33” 和 height=”1”,而不是指定 width=”900” 和 height=”675”。 如果您聘請了專業攝影師來獲得自己獨特的圖像,請確保您在在線使用它們時具有靈活性。 這與攝影師是否想要裁剪它們無關。 這是關於圖片是否需要裁剪。
AMP 佈局設置需要先獲取圖像的寬高比; 但是,在圖像尺寸未知的情況下,要保持所需的圖像縱橫比,請將 AMP 的填充佈局與 object-fit CSS 屬性結合使用。 為視網膜就緒圖像添加srcset
屬性。 x 代表設備像素比。 然後將在具有 2px 比率的設備上渲染 2x 圖像。
一個依賴於amphtml
的簡單 amp-img 將被賦予固定的寬度和高度。 在小型設備上使用較大圖像時,該圖像的一部分將在屏幕外顯示。 AMP Ready 站點提供了圖像如何縮放的示例,並且 AMP 佈局管理器可以輕鬆處理它。 如果不考慮 AMP,可以將最大寬度設置為 100%,將高度設置為自動,以便使用原始圖像尺寸,直到視口太小。 然後,對於較小的屏幕,圖形會按比例適當縮小。 AMP 需要對您的圖像進行額外的思考過程。
AMP HTML 運行時在管理圖像資源方面非常高效,通過確定視口位置、系統資源、帶寬強度以及其他因素來了解何時最好延遲或優先考慮資源加載。 它還可以播放動畫GIF圖像
您的圖像可以顯示為您給它們指定的固定高度和寬度。 至少,需要包含明確的寬度和高度。 添加各種尺寸是一個加號。 然後通過添加layout="responsive"
使它們具有響應性。 由於<amp-img>
依賴於 JavaScript 代碼,如果用戶選擇禁用腳本,您的圖像將不會顯示。 對於這種情況,您可以通過添加<img>
和<noscript>
來為圖像提供回退。 請參閱 Firebase 的示例。
“AMP-IMG 是圖像的 AMP HTML 替代品。 AMP IMG 是一個非常智能的標籤。 amp javascript 運行時根據連接、視口、系統資源或其他因素對圖像進行優先級排序。 大多數圖像都是延遲加載的。 這意味著圖像只有在滾動到視圖中時才會被加載。” – ampready.com
“由於 AMP 頁面通常由 AMP 緩存提供,因此您不會在第一次點擊時獲得最大的漸進式 Web 應用程序優勢,因為您自己的 Service Worker 無法運行。 另一方面,Progressive Web App 在第一次點擊時永遠不會像 AMP 一樣快,因為平台可以安全且廉價地預渲染(圖像豐富的)AMP 頁面。” – 粉碎雜誌********
AMP 徽標要求
照片文件必須以 .jpg、.png 或 .gif 格式上傳; 不允許使用矢量,例如 .svg 徽標圖像。
徽標中不允許使用動畫。
也不是完整的字標徽標或圖標徽標版本。
圖形必須清晰易讀,並在白色或淺色背景上。 沒有黑色背景。
徽標大小應為矩形,將方形版本保存為其他用途,例如在您的 Google 商家信息中。
您的 AMP 徽標應適合 60x600 像素的矩形。 AMP HTML 社區建議它的高度正好是 60 像素(首選),或者寬度正好是 600 像素。 它指出 450x45px 徽標的示例是不可接受的,無論是否適合 600x60px 矩形。
如果您使用 WordPress 的 AMP 插件,請務必註明您的 AMP 徽標。 否則,您的 AMP 頁面可能會出現結構化數據實施錯誤,因為目前它們通常將文章架構轉換為博客文章架構。
使用 AMP-Carousel 的移動圖片庫
許多人聽說過有關圖片庫頁面元素在 Accelerated Mobile Pages 上的極大限制的傳言。 這應該被揭穿,因為 amp-carousel 組件非常適合圖像畫廊——它只需要特定的技能。 輪播需要提前聲明height屬性。 如果在不同大小和長度的情況下發送所顯示的圖像和標題,這可能具有挑戰性。 AMP 開發人員一直在努力解決這個問題。
AMP 圖片輪播的正確設置包括:
- 使用 amp-fit-text 組件。
- 將輪播組件導入頁面標題。
- 了解如何使用放大器選擇器組件。
- 集成 amp-bind 組件。
- 當您希望它接收樣式更新時,利用具有標準 CSS 的 amp-image-lightbox 組件。
AMP 圖片庫還可以將標題覆蓋在圖片上,並使用縮略圖作為圖片選擇的預覽。
用於漸進式 Web 應用程序的 AMP 英雄圖像
您的網頁的第一張主圖和相應的 AMP 標題可以預先呈現,以便網站訪問者可以立即看到您的內容,因為它位於首屏。 如果您正在關注 Web 開發社區,那麼您很可能已經閱讀過帶有漸進式 Web 應用程序 (PWA) 的 AMP。 這是一個主要術語,描述瞭如此先進的網絡體驗,以至於它們與非常豐富和身臨其境的原生應用程序競爭,並使用“視網膜”,全出血圖像。 在移動連接上,用戶平均面臨 300 毫秒的延遲。 這是加載 AMP 圖像可以克服其他限制的地方,例如帶寬有限或信號連接不佳。
緩解用戶與豐富內容之間的延遲。 GitHub 的 Creative Commons 提供了許多圖像元素類型的應用程序 LD JSON 示例。
使用延遲加載圖像在服務器上預渲染基本佈局,以改進功能等。 請注意,您可能必須僱用或徵募自由前端性能嚮導。 不耐煩的移動用戶讓我們面臨不到 1 秒的總加載性能預算,以便在初始化應用程序時實際加載您想要的所有圖像。 在加載速度方面,對於有效的 SEO 來說,這是一個真正的挑戰。
Google 結構化數據的圖像規範
文章和新聞文章圖片的寬度必須至少為 1200 像素。 為了適應更好的縱橫比,我們建議使用至少 1200 像素寬 x 800 像素高的圖像。 數字營銷很大程度上與效率有關,因此,如果您打算使用模式標記使您的內容更智能,請在考慮 Google 建議的情況下準備圖像。 否則,在您的 Search Console 中或在使用 SDTT 時發現的架構警告將來可能會變成錯誤。
例如,行業特定架構和您的本地企業 JSON-LD 代碼添加了在今年早些時候指定您的徽標圖像的要求。
Google 從不保證您會在特色搜索結果(如快速回答框、圖表或 Google 新聞)中找到所有圖片。 但嚴格遵守要求並尋求遵循其建議將增加包含您的圖形的可能性。
在選擇了一個很棒的圖像的所有工作之後,你會希望它被正確標記的好處。
示例:對於文章 → 圖像:指向代表性圖像文件的 URL 或 URL 列表。 圖片必須至少為 160×90 像素,最多為 1920×1080 像素。 否則,我們將無法在搜索結果頁面上顯示它們。 只有直接屬於文章的標記圖像才應在此屬性中列出。 如果有許多適用的圖像,請列出所有這些圖像,並將重要的圖像放在首位。 您可以更進一步,下載我們的站點審核和谷歌分析清單。
嚴格遵守產品圖片的圖片規範
考慮圖形圖像的有效性:還記得抽駱駝香煙時“很酷”的誘人圖像嗎? 然後,在香煙包裝的反面是有關諸如牙齦/口腔疾病或口腔癌等風險的圖片健康警告。 Google 搜索旨在更好地解釋頁面內容及其圖像。 正確的圖像模式提供了關於圖像含義以及它如何闡述頁面主題的明確線索。 許多類型的結構化數據包括提供有關頁面圖像的信息,以幫助對頁面內容進行分類並返回最適合用戶查詢的內容。
在標記產品時,Google 於 2017 年 9 月 27 日更新了其產品搜索 Google Developers *** 頁面,聲明它更喜歡不同縱橫比的圖像數組。 “為獲得最佳效果,請提供具有以下縱橫比的多個高分辨率圖像(寬度和高度相乘時至少 50K 像素):16×9、4×3 和 1×1。” 但是,圖像比例非常適合您頁面和帖子上的圖像,以便有更好的機會出現在 Google 新聞提要中。 他們還需要在提要中鏈接徽標圖像。
“圖像抓取會考慮文章 HTML 正文中指定的 schema.org 圖像和 og:image。 對於您想成為文章旁邊的縮略圖的圖像,我們建議使用 schema.org 或 og: image 以使選擇清晰。” - 谷歌*
為什麼新的圖像定型指南對圖像購買者和創意人員很重要
你的在線形像是否談到了擁抱不同性別、年齡範圍、種族多樣性、個人喜好、宗教和政治背景的人?
多年的營銷研究證明,視覺效果是最有效和最成功的方法之一。 企業或品牌選擇在其帖子和付費活動中使用的圖片通常是最能引起大多數觀眾共鳴的方面。 為了覆蓋更廣泛的受眾並保護您的品牌,重要的是要隨時了解有關廣告中性別刻板印象的新規則以及您網站上圖片的使用。
廣告標準局 (ASA) 和廣告實踐委員會 (CAP) 最近的一份報告呼籲對圖像經常描繪的負面性別刻板印象採取更加強硬的立場。 “在 2015 年和 2016 年之間,ASA 審議了 1,378 起與描繪女性和男性有關的投訴。 其中,465 起案件涉及男性形象”,阿米莉亞·泰特 (Amelia Tait) 評論了為什麼新的網絡優化圖像規則使許多人受益。
該研究還得出結論,如果使用圖片,醫療網站的廣告可能會出現問題:描繪不健康的身體形象。 調查結果揭示了患者或人們搜索視覺醫療信息的方式,而不是通過點擊搜索框中的查詢來閱讀頁面上的文本。
最終報告“描述、認知和傷害”於 2017 年 7 月 18 日發布,Amelia也在同一天發布了為什麼廣告中關於性別刻板印象的新規則對男性有利。 “到 2019 年,超過一半的移動搜索將是視覺搜索”,她在引用該報告時預測
為了證實這一趨勢,GeoMarketing 的副主編 Lauryn Chamberlain 在她 2017 年 7 月 25 日題為“營銷人員應該了解的未來搜索。
使用正確的圖像尺寸和元數據擴大您的覆蓋範圍
要在 Google 地圖本地包中包含令人垂涎的可見性,您不僅需要注意尺寸,還需要注意其他要求,例如重量,並巧妙地使用元數據。
關於“Facebook 廣告圖片指南”、“推特圖片指南”、“社交媒體圖片指南”、“亞馬遜產品圖片要求”等方面已經存在許多精彩文章。 我們的目標是關注 Google 搜索和 Google Ads 的需求。
因此,隨著新指南的出台,無論是針對 JSON-LD 要求還是保護性別問題,確保您使用的圖片能夠展現您最好的一面並展示您的品牌的積極方法,這一點很重要。 圖片也支持 Google Now Cards 。 這既可以表示對社會不斷變化的觀點的尊重,也可以解決可能由錯誤的圖像大小或元數據引起的技術 SEO 問題。
我的圖像應該反映多樣性嗎?
反映多樣性,以便通過與其相關的圖像覆蓋更廣泛的受眾。
具有一系列家庭和企業動態的廣告的百分比顯著增加。 如果提供男性和女性在具有挑戰性的角色中一起工作的視覺效果,比如在軍隊中,他們可以說很多話; 參加同一項運動的男性和女性,或參加某項活動的不同種族的人群。
描繪性別平等以及個人可能或不可能做的事情是企業需要在其數字廣告中描繪的必要信息之一。 這將有助於他們因遵守最新指南而獲得讚譽,並提供對當前市場更具吸引力的廣告的好處。
圖片如何在 SERP 和 Google 新聞提要中顯示
我正在尋找我發表的一篇文章來回答客戶的問題。 我的搜索查詢“用於有效 JSON-LD hill 網絡創作的圖像”加載了大量圖像。 這樣的圖像結果只是偶然發生的嗎? 不,需要計劃以最大限度地提高您的圖像對業務增長戰略的貢獻。
如果您可以影響您的品牌在知識圖譜、視頻片段、新聞提要和Google 上的其他豐富片段中的顯示方式,您的企業就能獲得更強大的在線影響力。 突出的一件事是我網站的顏色主題在所用圖像的選擇中得到體現。
牢記 Google 的先進圖像標準和建議
Google 宣佈如何簡化應用廣告系列的圖片要求
Google Ads 將於 2020 年晚些時候生效,將“從基於尺寸的圖片規範更新為基於比例的圖片規範,讓您的創意過程更簡單、更高效。 您只需上傳三種縱橫比的圖片,即可在符合條件的應用廣告系列屬性和格式中擴展您的廣告:”
此外,最大圖像文件大小限制向上調整,從 150KB 更新為 5MB。 這支持更高質量的資產。 PPC 平台還表示,“我們還在修剪我們批准的文件格式,禁用 GIF 並僅保留 .jpg 和 .png,以便您更輕鬆地進行創意開發。” 新的圖像輪播正在浮出水面,幫助消費者快速識別他們可能感興趣的產品; 架構標記突出顯示圖像,可用於在產品輪播中獲取產品圖像。 此外,在你的產品頁面上使用語義相關的詞可以幫助解釋你賣得更好。
Google 為提供最佳圖片提供了哪些建議?
有關如何選擇符合要求的圖像、吸引新客戶、鼓勵點擊、分享以及讓您的業務領域相信您是領導者的提示:
- 圖像顏色應與您的徽標相得益彰,而不是與之競爭。
- 大多數桌面應用程序的大小應該是水平的。
- 選擇一個能很好地代表您的頁面主題的圖像。
- 選擇反映您是誰的圖像,從而提高最終用戶的參與度。
- 保持正確的語氣以匹配您的聽眾。
- 通過您的選擇展示您的品牌個性。
- 密切關注圖像所有權並給予適當的信任。
我的主題的響應式圖像是否符合準則?
每個站點主題都有一個顯示圖像的機制。 並非每個主題開發人員都了解在您的網站上使用圖像的最佳實踐以及圖像指南的更改。 主動。
由於圖片比幾乎任何元素都更快地消耗您網站的容量,因此請記住每次上傳一張圖片時會添加多少圖片尺寸變化。 您應該知道的第一件事——上傳到媒體庫的每張圖片都會自動創建多個較小尺寸(以像素為單位的尺寸)的副本(縮略圖),這是 WordPress 的默認機制。 此類副本的質量取決於圖像的原始尺寸和您的設置。
作為企業主,您最終要遵守準則,其中一部分是通過聘請網頁設計師、數字營銷人員和 Google Ads 專家來了解並應用這些知識。 例如,當您也沒有權利時,是否應該在圖像上添加徽標水印,猜猜誰最終會支付罰款?
創意專家和網頁設計師喜歡創造令人驚嘆的圖像。 以最高的視覺質量和最佳的加載時間智能地創建和交付更輕、更快、更引人注目的圖像可能會讓人覺得有點困難。 直到今天,仍然很少有網頁設計師正在構建具有附加圖像規範的加速移動頁面。 我們始終密切關注如何在我們的高價值網站審核中改進圖像的使用
視覺搜索的圖像優化
隨著越來越多的用戶說出他們的搜索查詢並使用 Google 圖片搜索,針對 Google 圖片搜索進行優化變得非常重要。
根據作者邁克爾米勒的說法,視覺搜索由計算機視覺和零售模式標記提供支持,使在線搜索成為一種比以往更好、更直觀的購物和查找解決方案的方式。 “Gartner 對 2018 年及以後的 10 大預測”2017 年 10 月 7 日文章] 表明,結合語音搜索,這種營銷趨勢正在徹底改變個人尋求信息、進行購買前信息研究以及發現新產品和服務的方式。
圖像預測值得關注,因為這將迫使您的網站發生變化:
* 到 2019 年,超過一半的移動搜索將是視覺搜索或語音激活。
* 到 2021 年,重新設計網站以支持視覺和語音搜索的早期採用者品牌將使數字商務收入增加 30%。
* 容易用 Photoshop 偽造的照片會導致缺乏信任。 超過 90% 的頂級電影發行了“減齡”演員。
* 頁面加載速度將更加關鍵,影響圖像的選擇。
先進的模式識別和機器學習方法現在在智能圖像搜索方面具有廣泛的應用。 越來越多的人使用 Google 高級搜索來查找他們正在尋找的內容。 亞馬遜和 eBay 都在為更多的圖片搜索做準備。 eBay 將為其產品宣布兩項新的人工智能視覺搜索功能,而亞馬遜現在已將圖像識別添加到其核心 iOS 應用程序中。 Bixby Vision 的視覺搜索讓人們只需將相機對準任何物體,然後在線搜索類似物體****。 您希望您的圖像有機會被拉起。 您的企業可以獲得更高水平的營銷效率。
圖像及其對應頁面都需要索引
在尋求增強您網站的移動搜索屬性時,有許多考慮因素。 要將您的圖片包含在 Google 圖片搜索中,不僅需要將圖片放置在網絡上的某個位置,圖片本身還應該駐留在也可以被索引的網頁上。 如果由於某種原因沒有抓取或索引可以找到該圖像的實際圖像或隨附頁面,則 Google 不會在其圖像搜索中顯示它。
Google 員工 John Mueller 在 2018 年 12 月 25 日的 Google Webmaster Help 活動中談到了這一點。 他回答了有關 Google 圖片搜索中存在永久圖片的投訴,他說:
我懷疑您的網頁刪除有一些不符合預期的工作。 為了在 Google 圖片中顯示圖片,我們需要將圖片和相關的著陸頁編入索引。 如果著陸頁已被移除(或被移除工具暫時隱藏),那麼我們也無法顯示該圖像。 我的懷疑是涉及到多個著陸頁 URL(有時這很難發現,頁面的 URL 存在細微差別),其中一個已被刪除,但其他的仍被編入索引。 如果是這種情況,請同時刪除其他登錄頁面,然後這應該會導致圖像也不會顯示(如果這是在您自己的網站上,您也可以更進一步,也可以刪除圖像 URL)。 有時這需要一些練習,但聽起來您已經能夠刪除一個版本,因此您可能“只”需要關注所涉及的確切 URL,並清理它們。
消費者可以使用過濾器按鈕來查找產品
谷歌圖片搜索現在經常提供過濾按鈕。 這些可能出現在圖像搜索結果的正上方,並幫助人們將查詢細化為特定含義。 例如,當我搜索“紅色高跟鞋”時,我已經詳細說明了我的搜索意圖。 然而,我獲得了新的選擇選項,例如“stiletto”、“wedding”、“prom”、“cheap”等。您使用 JSON 標記的程度會影響您包含的有關產品圖像的數據。
Google introduced this feature in November 2020. Its intent to help people that Google Images to find products, be inspired orinformed as they search visually.
Image Alt and Title Tag Optimization
First let's define what an alt tag so that all readers have this understanding. From there, both the title and alt tag should (1) useful, (2) descriptive, and (3) relevant. Now for tips and alt text best practices:
The term “alt tag” is a short way to reference what's actually an alt attribute on an img
tag. For each and every image that is uploaded to your website, the alt tag should describe what that photo is about. Screen readers for the blind and visually impaired individuals will read out this text and thus make your image accessible. The purpose of alt tags on images is to be helpful to search bots that are trying to match both an image search and a voice search for content that is the best fit. These Alt tags provide vital image context and descriptive information to search engine crawlers.
• When you are adding an image of a specific product, onsite searches that users conduct can better locate the right item if you include both the full product name and the product's product ID in the alt tag. Skip “cutie” phrases and clever acrimony: if a keyword is beneficial when seeking something that is on the image, include it in the alt tag. Image alt attributes for SEO purposes work to describe to search bots details about the image or what the image references to if the image is a link. When the image is a link, the alt attribute functions like keyword anchor text by supplying an understanding of the context of the destination page to search bots. Images can have a lot to do with CRT and conversion rates on mobile .
• For key charts, images and infographics, it is possible to provide Google with additional details about your site's images. Google says, “provide the URL of images we might not otherwise discover, by adding information to a web Sitemap”. One SEO service we offer it to generate, test, and submit sitemaps; we can give you the benefit of a hard-working sitemap. Practical advice is that if you want Google to crawl your web pages and send relevant traffic, then adhere to both their guidelines and recommendations.
• Use engaging website titles: it is the first thing that searchers see because it is the big clickable part of the listing on visible search results pages. It should be able to attract the attention of the searcher. Ideally, the title should provide a compelling reason to click. Includes benefits, value, and clear solutions to one who conducted the search query.
• Limit the length of your image alt text to fewer than 125 characters. One alternative is to use captions, although sometimes we find that currently complicates the correctness of AMP page code. A JAWS screen reader struggles with lengthier alt attributes. It's simply more user-friendly to keep alt attribute length in check.

Google Warning: “Filling alt attributes with keywords (“keyword stuffing”) results in a negative user experience and may cause your site to be perceived as spam. Instead, focus on creating useful, information-rich content that uses keywords appropriately and in context.”
Image Copyright Implications
It is also important to consider the copyright implications of using images found when conducting an online search such as Google Images. Your first assumption should be that all images you may want to use are most likely to be protected by copyright. Not all of them are, but don't use them unless and until you have determined that it is allowed.
Google is a popular search engine that can be used to locate content such as images and photos; many people start a search this way. However, none of the leading search engines is a content depository, and nor a collection of the public domain or copyright-free images. While you may be directed to images and photo stock that fits your search criteria, it is not automatically yours to use.
What is IPTC Image Metadata?
The IPTC Photo Metadata standard is our current widely accepted standard due to its universal approval among photographers, distributors, news sites, archivists, and web developers. “The schema defines metadata structure, properties, and fields so that images are optimally described and easily accessed later”, according to the site.
Metadata is a set of understood data that defines and gives information about other data. It can be useful as an SEO technique to engage people searching for its contents. We find this is more common with images in the form of charts, graphs, and infographics.
Image metadata facilitates the transportation of information with an image file so that other software, hardware, search bots, and end users – regardless of the image format – can use it. ***********
Should you Use a Watermark on your Images?
In this area of image use, there is no “rule”.
As so often is true, it depends on your usage, if you hired a photographer, where you obtained the image from, and other factors. Google says, “people add copyright text, watermarks, or other information to their images. This kind of information won't impact your image's performance in search results, and does help photographers claim credit for their work and deter unknown usage. However, if a feature such as watermarking reduces the user-perceived quality of your image or your image's thumbnail, users may click it less often in search results”.
In our experience, for most purchased images, we leave it off as we didn't create the image; as well, our users, in general, seem to prefer imagery without text or logo overlays. If it is ours because we hired a photographer to showcase our office, products, an act of service, or selves while publicly speaking, etc., we may. If your preference is to use an image watermark, keep its size limited; it shouldn't become a focal point of the image. Also see our Search Marketing FAQs
Avoid watermarked images for your mobile AdWords advertising; let viewers focus only on the product.
Author Jon Fingas addresses this in the US internet providers stop sending piracy warnings article posted on January 28, 2017, and speculated that one reason the imagery pirate streams are becoming more common is due to the burgeoning profession of online media. “The MPAA claims that Americans illegally downloaded 981 million movies and TV shows in 2016,” let alone pictures!
WARNING: The RIAA stated that they believe that habitual image pirates should have to face discipline from their ISPs according to the Digital Millennium Copyright Act. The MPAA admits that it just couldn't handle the volume of “hard-core repeat infringer problem,” by leveraging the media industry's Copyright Alert System.
“For those trying to prevent image theft, the watermark might be a good example of keeping honest people honest. There are so many ways to suck an image off the Web these days that, if someone wants your image, they will find a way to take it. And, if they really want to claim your image as their own, there are ways, some painstaking, to remove watermarks, or one could simply crop out that section of the picture. Ultimately, the watermark offers limited success for theft prevention. If you don't want someone to steal your digital image, the best way to prevent that is to not put it on the Web.” – B&H: The Professionals Source******
Using Infographics as Images
What is the ARIA attribute and how does it work for Infographics?
The ARIA (Accessible Rich Internet Application) attribute is read along with alt text on an image, which also works for a long description. Currently avoiding the longdesc
image attribute is most common since it isn't widely recognized as a useful SEO technique. The color contrast should be considered and tested. The Paciello Group offers a great tool**.
Infographics used as an image make it easy to share content. Their popularity continues to resurface regardless of some talk of users' preferring them less. When the Infographic is provided via HTML styled with CSS, Google's cache of the infographic text content of each page is richer. It is possible to offer it within an iframe with indexable text that may be hidden in a CSS clip in the iframe HTML.
Be sure that your graphic designer knows how to create an infographic using indexable text and links created with HTML and CSS. It is important to take every step you can to help get your site indexed faster .
Most of all: Images Should Prompt a Great User Experience
Great image content is one ideal way to increase the traffic to your website. Once you have adhered to the applicable guidelines for images, carefully consider just how each image can improve user interaction by providing value. Understanding the workload of both browsers and search engines makes sense of all this. Adhering to the following image best practices will increase the probability that your images will be returned in users' search results.
Best practices for image implementation on your web pages and posts:
• Image resolution. High-quality prints appeal to individuals using the Internet more than blurry, or images having too low of a resolution. In addition, many social media activists and webmasters prefer to link to a page with a visually appealing image, which can increase visits to your site and your domain authority. Crisp, sharp photos tend to display more favorably in thumbnail versions. This, in turn, means that an image featured in a link in SERPs is more likely to be clicked on by users.
• Reusing images. Seek to avoid using the same image on multiple pages on your site; a unique image for each retail landing page helps those who read it to relate to and remember information. This makes it easier to identify the content when returning to a page. When you do reuse an image, change up the titles and captions to tie in with each page.
• Featured images. In WordPress, featured images may be scaled to fit, so avoid a small image for this use. We recommend a minimum of 700px by 525px at the top of your pages and posts. Not all users scroll to the bottom of a page, particularly a lengthy informative article, which means it is best to place your images above the fold where it can be immediately seen. You can also create a dataset of your featured images and add schema to it.
• Image directories. A web designer who also values SEO will understand the value of structuring site directories so that comparable images are saved together. For example, you might have directory buckets by topic, or for thumbnail-sized images and another bucket for full-size images. Google advises that “if your site contains adult images, we recommend storing these in one or more directories separated from the rest of the images on your site.
• Specify width and height. A web browser is empowered to load your pages faster if it is provided the dimensions of each image in order to wrap non-replaceable elements around them. Specifying these dimensions is even more important for mobile users who consider the first aspect of a great user experience to be not kept waiting.
• Image proximity. Make it easy for your readers to follow the logic of your image selection and its value to the topic. Where it is inserted helps users to relate it to your page's content. “Wherever possible, it's a good idea to make sure that images are placed near the relevant text,” states Google's image publishing guidelines .
• Text in Images Often a great image is considered to be one that tells its own story and lets the reader's eye rest for the need to read text when viewing an image. However, when it is helpful, the WC3 community discusses SCALABLE VECTOR GRAPHICS (SVG) and provides a tool***.
• Give your images personality. As with Written Content, both users and Google live images that reflect personality and uniqueness. Formerly, B2B marketing content and images seemed to demand a trite “professional,” look that today has evolved into being seen as “impersonal, stale, and “less compelling.” Old-school stock photos have become so the norm that many quickly recognize them and label them boring. Use images that convey that you, a human being, are conversing with them. Not only does Google crawl and index web pages , but it also crawls your image URLs too. When someone conducts an image search, it can lead them to your business.
Create a uniform look. Let your readers recognize your brand “look”. Maintain some continuity in how you add images to your website. You don't need to use every size that Google says is permissible. Keeping a common image ratio throughout your site's post can represent a well-put-together business.
• Switch them up. You don't want to bore your return visitors with the same featured image on your home page for months as the seasons go by. Your visuals must evolve according to the manner that your users engage them. Your freshly curated great content deserves the perfect image to accompany and accentuate it. Ensure that your visuals are just as distinctive and authentic as your writing is so you can grow your reader base.
• Use Data Visualizations. Another way to support your opinions and the backbone of your content is to back it up with visuals of charts and tables. Data visualization quickly empowers your readers to understand our data more deeply. When you offer a documented image with a pie chart or bar graph, you helping others make better-informed decisions. They can be beautiful; with a bit of know-how, it is easy to generate your own visual presentation from an excel spreadsheet and color-coded the columns and rows to look beautiful on your web pages. Or credit the source from where you borrowed the image.
Conduct a consumer behavior study to know people's image preferences.
Add Image Optimizations to Your Build and Release Processes
An image snapped with your camera or smartphone often embeds a lot of extra details: camera settings, date, where it was taken, and so on. For some use cases, this data might be critical (such as, a photo-sharing website like Flicker) or provide no benefit at all. Be clear on what you need and consider removing everything else. Eliminating redundant image Metadata can save your tens of kilobytes that slow load time for every image.
可以在您的構建和發布過程中建立圖像優化,以保護您免於有人忘記和一個或多個頁面受到極大阻礙。
確定您網站上圖像的最佳設置需要有人知道如何最好地評估:
- 每個應用程序的尺寸要求
- 格式能力
- 編碼數據的內容
- 所需的圖像質量
- 圖像像素尺寸
- 用於不同設備的多個圖像文件
由於圖像縮略圖可以顯示在人們也提問和回答框中,因此您使用圖像的方式會被 Google 的回答引擎包含在內。
Google 使用圖像元素的指南
正如開發人員倡導者 Pete LePagem 在Google 開發人員的圖片頁面上所引用的那樣:
img
元素功能強大——它可以下載、解碼和渲染內容——現代瀏覽器支持多種圖像格式。 包括跨設備工作的圖像與桌面沒有什麼不同,只需進行一些小的調整即可創造良好的體驗。
TL;博士
- 使用圖像的相對大小以防止它們意外溢出容器。
- 當您想根據設備特性(又名藝術指導)指定不同的圖像時,請使用
picture
元素。 - 在
img
元素中使用srcset
和x
描述符來提示瀏覽器在選擇不同密度時使用的最佳圖像。 - 如果您的頁面只有一兩張圖片,並且這些圖片在您網站的其他地方沒有使用,請考慮使用內嵌圖片來減少文件請求。
使用圖像的相對大小
有許多類型的站點審核,請確保您也分析了圖像大小。
請記住在為圖像指定寬度時使用相對單位,以防止它們意外溢出視口。 例如, width: 50%;
導致圖像寬度為包含元素的 50%(不是視口的 50% 或實際像素大小的 50%)。
“沒有數據可視化和分析,我們都更容易產生誤解和錯失機會。” – 畫面*****
“一張圖片的最大價值在於它迫使我們注意到我們從未期望看到的東西。” ——約翰·圖基,1977
使用 jpeg 或 webp 圖像版本更好嗎?
在為您的下一個#image 選擇 jpeg 或 webp 版本時,請考慮影響爬網帶寬的因素 - 但網站訪問者可能不會注意到任何差異。 除非圖像減慢加載時間並且他們不想等待看到它。
Google 如何提供有關圖像的事實?
Google 通過以下方式管理圖像並添加事實數據:
- 通過評估圖像的視覺和文本信號的深度學習了解圖像細節
- 將其與對圖像網頁上文本的理解相結合
- 然後生成相關知識圖實體的鏈接
您可以在大多數 Android 手機上使用 Google 照片和您的個人 Google Assistant 帳戶中的 Google Lens。
在 2020 年 7 月 8 日的公告中,Google 表示:“從本週開始,一項新功能可以讓您輕鬆快速地找到有關您在 Google 圖片上看到的內容的事實。 當您在美國的移動設備上搜索圖像時,您可能會看到知識圖譜中與結果相關的信息。 這些信息將包括與來自知識圖譜的數十億事實數據庫中的圖像相關的人物、地點或事物,從而幫助您更多地探索該主題。”
如果您點擊指定的主題,它會展開並顯示對它所引用的人、地點或事物的簡短描述; 然後它可能會添加一個鏈接以了解更多信息並顯示相關主題供您探索。
我們還發現人們向我們詢問圖像站點地圖的價值。
我應該使用圖像站點地圖嗎?
由於您的圖像支持您的內容作為重要的信息來源,它有助於為搜索引擎提供有關圖像的更多詳細信息。 圖像站點地圖可讓您提供圖像的 URL 和其他有用信息。 圖片站點地圖可能使用來自其他域的 URL,這與必須遵守跨域限制的常規站點地圖不同。 您可以使用 CD(內容交付網絡)來託管圖像。 在這種情況下,首先在您的 Google Search Console 中驗證 CDN 的域名,以便圖像抓取錯誤可以正確傳播。
使用正確的圖像最大化您的營銷回報
通過經過驗證的測試,我們有效的搜索引擎營銷技能可以引導您下一次針對客戶需求和目標的本地 SEO 活動。 我們很自豪地幫助企業在明尼阿波利斯數字營銷和全國范圍內“看起來”有吸引力並且“有效”。 我們的客戶行為分析可以指導您的營銷決策。 要獲得新客戶、增加收入並發展您的在線業務,如果您需要指導選擇要使用的最佳圖像,請致電我們。
您是否需要合作夥伴來確保您以最佳方式在線使用圖像? 我們將牢記您的業務目標、在您的市場中有效的方法、色彩理論以及視覺元素在頁面執行和客戶旅程中的作用。 您可以受益於我們多年的專業知識; 我們的方法行之有效並推動了收入流。 我毫不懷疑你會在你自己的市場上獲得同樣的成功。
“圖像通常佔網頁上下載的大部分字節,並且通常佔據大量視覺空間。 因此,優化圖像通常可以為您的網站帶來最大的字節節省和性能改進:瀏覽器必須下載的字節越少,客戶端帶寬的競爭就越少,瀏覽器下載和呈現有用的速度就越快屏幕上的內容。” – Ilya Grigorik,Google Fundamentals 的作者
您可能從未猜到,在線使用照片有如此多的 Google 圖片指南、規則和最佳實踐。 這也不是SEO 所包含的一個重要方面。 對於已經實現最基本的結構化數據類型的站點,架構站點審核將為您確定代碼中的修復程序,以確保您的圖像架構以及其他所有內容都是正確的。 這也使您的圖片更有可能出現在 Google 答案框中。
致電 651-206-2410 並詢問 Jeannie Hill 。 我們可以為您涵蓋所有內容,使您的網站保持最新且合規,並通過我們的全面技術 SEO 網站審核查看圖像是否得到了很好的優化
* https://support.google.com/news/publisher/answer/13369
** https://developer.paciellogroup.com/resources/contrastanalysisr/
*** https://www.w3.org/Graphics/SVG/
**** https://insights.samsung.com/2017/06/09/4-ways-bixby-vision-uses-image-recognition-technology-to-help-you-work-without-boundaries/
***** https://www.tableau.com/learn/whitepapers/5-most-influential-visualizations
****** https://www.bhphotovideo.com/explora/amp/photography/tips-and-solutions/pros-and-cons-watermarks-photographs
******* https://www.blog.google/products/search/image-rights-metadata-google-images/
******** https://www.smashingmagazine.com/2016/12/progressive-web-amps/
********* https://developers.google.com/search/docs/data-types/product
********** https://support.google.com/adwordspolicy/answer/6020955
*********** https://iptc.org/standards/photo-metadata/