Yahoo奇摩購物中心 網站白皮書
廠商版
白皮書 > 活動頁規範 > HTML活動頁 > 活動頁SEO與無障礙網頁
活動頁SEO與無障礙網頁
製作場合

為了讓本站活動頁面在搜尋引擎排名可以往上提升,與方便視障人士瀏覽活定頁面。請製作活動的設計師,依據以下事項設定網頁。

meta description標籤設定 (SEO)
<meta name="description" content="活動描述">

設定位置請參考下圖

網頁H1標題設定 (SEO)

圖像式看板埋設H1標題方法如下:

步驟1. 請在活動HTM內CSS設定新增以下項目

新增CSS
.forseo {
position: relative;
}
.forseo .h1_img {
position: absolute;
z-index: 5;
}
.forseo .h1_txt {
position: absolute;
z-index: 1;
}
步驟2. 請找到網頁第一張圖的HTM碼,並作以下變更 (請替換“情人節 寵愛情人”文字)
第一張圖HTM碼
<img src="/temp/img/20110120-brand-750c_01.jpg" width="750" height="158" alt="">
更改為

綠字請設定寬高
橘字設定H1標題
<div class="forseo" style="width:750px; height:158px;">
<span class="h1_img">
<img src="/temp/img/20110120-brand-750c_01.jpg" width="750" height="158" alt="情人節 寵愛情人">
</span>
<span class="h1_txt"><h1>情人節 寵愛情人</h1></span>
</div>
 
圖片設定替代文字 (SEO、無障礙網頁)

圖檔切片內容與商品直接相關的請下商品名稱,圖檔切片內容與活動相關的請下活動名稱與關鍵字。

影像地圖設定替代文字 (無障礙網頁)

當圖片使用影像地圖做連結時,請針對每項連結設定替代文字說明。

確保事件的啟發不要求一定得使用滑鼠mouseover (無障礙網頁)

狀況1
若看版頁面有一組頁籤,滑鼠移入頁籤才觸發新的圖片訊息進入看版。
為了避免盲胞無法察覺新滑入的圖片與資訊,建議直接把頁籤與對應滑入的訊息直接下在該頁籤圖片的替代文字欄位上。

狀況2
假設有一個活動網頁設定滑鼠移動到範例一『神秘好康1』圖片時會出現隱藏訊息「限時五折」的對話框,移動到『神秘好康2』圖片時會出現「好禮三選一」的對話框。
換句話說,這情況只能依靠滑鼠來驅動對話框的產生,而無其他的方法來驅動對話框,這對於無法使用滑鼠的使用者會產生極大的障礙。
正確處理方法應該使用onfocus屬性來配合onmouseover屬性,讓對話框除了可以由滑鼠驅動之外,還可以藉由鍵盤來驅動對話的視窗。