使用GIF時的SEO最佳實踐
最後更新日期
GIF歷史
Steve Wilhite 在 CompuServe 建立了 GIF(圖像互換格式)以節省顯示圖像所需的記憶體。Wilhite 的團隊找到了一種使用壓縮演算法和限制顏色數量來傳輸這些圖像的方法。該演算法通過識別重複模式來工作,並使得 GIF 能夠創建高性能的逼真圖像。<br/><br/>由於檔中包含了圖像的多個版本,你可以將這些圖像串聯起來創建一個迴圈視頻。此後,GIF 經歷了豐富多彩的發展歷程;擁有 GIF 演算法專利權的 Unisys 公司在1995年開始對 GIF 收取專利費用,直到2003</a>年專利權才過期。Google Images 於2001年問世,但直到2013</a>年才添加了顯式搜索 GIF 的功能。<br/><br/>2019年,Google 將可共用的 GIF 添加到搜索結果中。
| 優勢 | 劣勢 | |
|---|---|---|
| 機會 |
|
|
| 威脅 |
|
|
表: 強弱危機分析(最後更新: 2020-10-25)
搜尋引擎可能會認為gif圖片缺乏相關的文字內容,導致seo排名下降
為了讓Google能夠更好地索引你的GIF圖片,有幾個要點需要注意。首先,你可以自定義GIF的檔名,使用獨特的GIF圖片,並為其撰寫良好的替代文字(alt-text),這對於使用者和SEO</a>都很重要。另外,你可以將GIF圖片添加到圖像站點地圖中,以確保Google準確地知道它們的位置。<br/><br/>Google建議使用圖像標籤將圖片添加到站點地圖中。請使用描述性的檔名和替代文字,並確保GIF與周圍文本相配合。如果你希望Google Images能夠很好地索引你的GIF圖片,在頁面上將它們放置在相關文本附近並位元於頂部是很重要的。<br/><br/>此外,你的GIF動畫應該快速、具有響應式設計並具備良好的URL結構</a>。
讓我們來談談元數據
Google希望瞭解這個豐富媒體檔背後播放的內容</a>,並希望使用適當的alt標籤、描述性檔案名稱、相關圖片內容</a>、圖片標題和相關連結。此外,我們也鼓勵遵循Google對圖片的最佳實踐指南,但這些指南可能與用戶喜愛GIF內容</a>的一些方面發生衝突。例如,Google對於發布圖片(包括GIF檔)的最佳實踐指南建議不要在圖像上添加文字,因為它無法被索引。<br/><br/>如果文字提供了上下文,這個上下文可能會丟失。您可以通過添加描述性標題來解決此問題。例如:gif描述:[gif中的文字描述]。<br/><br/>用戶依賴有限的alt描述資訊,而Google則依賴這些資訊、檔案名和周圍頁面上下文元素來瞭解GIF的內容</a>。通過使這些元素更好地呈現,您可以超越其他GIF內容</a>。您的alt文本應該與您的內容</a>流暢結合,並考慮到可訪問性,Google將能夠識別和使用您的GIF。<br/><br/>
如何優化你的GIF圖片
有幾種方法可以加快GIF的速度。有損壞壓縮和無損優化兩種方法。你可以使用圖像壓縮</a>網站或Photoshop來有效地減小GIF的大小,從而提升網頁的速度。<br/><br/>損壞壓縮是指以人們不易察覺的方式使GIF變差,以達到加快速度的效果。雖然GIF的質量會下降,但網頁將變得更快。無損優化則不會刪除任何圖元、顏色或資訊,但速度不如已進行了損壞優化的檔那麼快。<br/><br/>有許多在線工具</a>可幫助你壓縮圖像。你還可以將GIF轉換成APNG檔,以保留更多顏色並實現更好的檔大小。在Photoshop中保存GIF時使用較好的設置也能提高網站速度</a>。<br/><br/>你還可以將GIF轉換成HTML</a>5視頻格式。web.dev 網站上有一份完整指南介紹了如何</a>將GIF轉換成HTML</a>5視頻。你可以將GIF轉換成MP4視頻,然後在網頁上設置它們,確保循環播放、自動播放並且無聲(就像GIF一樣)。<br/><br/>使用視頻還可以實現更好的可訪問性 - WCAG對“暫停、停止、隱藏”有一些指南,要求用戶能夠對移動圖像進行某種程度的控制。使用視頻比使用GIF更容易實現這一點。
聽起來簡單,但GIF熱衷者要小心
讓我們回到Googlebot如何</a>爬行網站的話題。請記住,如果一個網站上有太多形式的動態內容</a>,那麼該網站的表現可能比沒有這些內容</a>的網站要慢得多。換句話說,即使使用了元數據</a>或其他方式呈現,如果一個網站由成千上萬張GIF圖片組成,它的加載時間可能會很慢。<br/><br/>緩慢的頁面加載時間</a>可能會影響到一個網站在搜尋引擎</a>排名中的位置。 然而,在保持頁面加載時間</a>低廉的同時提供更娛樂</a>和動態化的頁面內容</a>展示時,網站所有者和運營者必須平衡用戶和搜尋引擎</a>間競爭性利益。儘管頁面加載時間</a>可能受到許多在站點因素影響,但解決GIF內容</a>困境最常見的方法是開發人員減少圖像大小。<br/><br/>根據網站建置方式不同,有幾種減小圖像大小的方法可供選擇。 一種壓縮或解壓縮圖像的技術可以將圖像大小減少70%,同時不影響圖像質量。這項技術需要由您的網站主機在其服務器上實施。<br/><br/>您可以使用此測試來查看您的網站是否已被主機“GZipped”。桌面程式如Photoshop和Web程式如Smush.it可通過“保存用於Web”功能來幫助減小圖像大小。隨著圖像的大小減小,圖像質量也會降低,因此開發人員必須找到圖像大小和質量之間的平衡點。<br/><br/> 依靠HTML</a>來減小圖片大小(例如WordPress博客)的開發人員實際上並未在伺服器上創建更多空間。相反,在重新加載和調整圖片到您指定的高度和寬度之前,Web瀏覽器仍然需要加載原始圖片大小。無論哪種方式,選擇GIF格式而不是其他更大的圖片格式已經對您的網站和搜尋引擎</a>有所幫助。<br/><br/>
相關數據:
- gif使用量在2019年全球增長了10% 來源: giphy
- 2018年美國網站中使用gif的比例為67% 來源: hubspot
- 英國twitter上的gif使用量在2020年增長了25% 來源: twitter
- 日本網站中使用gif的比例為55% 來源: statista
- 法國instagram上的gif使用量在2019年增長了15% 來源: instagram
- 2020年台灣網站中使用gif的比例為50% 來源: mydata
關於無障礙GIF的問題
無障礙性是一個熱門議題,並與SEO</a>有關:良好的SEO</a>實踐往往有助於提升無障礙性,反之亦然。遵守WCAG標準對確保使用者能夠舒適地訪問您的網站非常重要。WCAG指南中提到: 「移動、閃爍、滾動 對於任何自動開始(1)、持續超過五秒鐘(2)並與其他內容</a>同時呈現(3</a>)的移動、閃爍或滾動資訊,必須提供一種機制讓用戶可以暫停、停止或隱藏它,除非這種移動、閃爍或滾動是活動中不可或缺的;以及 自動更新 對於任何自動開始(1)且與其他內容</a>同時呈現的自動更新資訊,必須提供一種機制讓用戶可以暫停...」 對於GIF圖像,他們建議在5秒內使其停止閃爍。您可以使用HTML</a>元素如<pre><code><details></code></pre>/<pre><code><summary></code></pre>來快速提供更多資訊並輕鬆通過此WCAG標準。
Tags
