在撰寫部落格文章時,我們難免會在文章裡加上幾張吸引人的照片

尤其實在分享美食或是景點等,加上實際的照片更能讓人一目瞭然

但大家必須知道一件事,不是每個人都可以看清楚你所提供的照片

甚至有些人根本看不見你所分享的照片,是的,我說的是盲人

或是說視覺上有困難的人。

仰賴著現代科技的幫助,視覺上有困難的人是可以透過螢幕閱讀器讓他們知道網頁裡寫了什麼內容

但螢幕閱讀器是無法解讀圖片內容,因此在網頁的HTML語法裡會有個跟圖片有關的屬性 alt

當螢幕閱讀器遇到圖片時便會去找出他的alt屬性,並讀出其內容

因此在 alt 的屬性寫上跟圖片有關的描述或是內容對於視覺上有困難的人是很有幫助的。

HTML alt 示例

alt 屬性的第二個作用是當圖片失連時,也就是我們一般說的破圖

當破圖的狀況發生時網頁上仍會顯示出 alt 的內容

這樣一來,訪客在閱讀文章時便會知道原本的圖片大概是什麼樣的內容

破圖的範例圖片:

alt 第三個作用是跟SEO有點關係,

除了"人"會去看網頁,還有個東西也會每天到處去看網頁或是看你部落格文章

那就是網路爬蟲,或者說"搜尋引擎"

雖然現在的科技日新月異,搜尋引擎強大到如Google這樣的

仍然無法正確的解析一張照片的內容為何

所以網路爬蟲也會抓回你照片的 alt 描述來當作搜尋圖片時的參考

想要搜尋時也能出現文章裡的圖片嗎?想要幫文章的SEO加點分數嗎?
趕緊將文章裡的照片補上 alt 描述吧!

接著我們大概說一下在痞客邦如何為圖片加上 alt 描述

以新版的部落格後台來說,先挑選一篇文章進入編輯模式
在文章裡挑一張照片,將滑鼠游標移到照片上並快速點兩下滑鼠左鍵
然後會出現如下圖的"影像屬性"小視窗,"替代文字"欄位便是本文重點 alt 屬性

另外也可以切換編輯模式到"原始碼",快速填寫所有 alt 內容,如下圖

切換到"原始碼"可能會讓人看得有點眼花撩亂

最後再來個快速又清楚的方法,但前提是...文章裡的照片必須是存放在痞客邦的相簿裡

我們必須先到相簿填寫完每一張照片的 alt 描述才將照片插入到文章裡

如下圖,先挑選一本相簿,勾選[全選],點開[更多],選 [編輯標題描述]

然後會出現如下圖的編輯視窗,"圖片標題" 欄位便是 alt 的內容

記得要先在相簿裡填寫完所有照片的"圖片標題",然後到文章那插入照片便會自動產生 alt 內容唷

以上,有任何問題請再留言讓我知道吧!

arrow
arrow

    Hunt 發表在 痞客邦 留言(15) 人氣()