把哇咧網頁分享到臉書時，我發現到的現象

先試一下這些步驟

複製這個網址： http://www.walei.tw/action/1397
在你的 Facebook "近況更新"上面貼上。 (留言可以不用發送出去，只要等預覽出來就好了)

螢幕截圖: 用 Google Chrome 瀏覽的 http://www.walei.tw/action/1397 網頁

結果會這樣：

Facebook 的留言截圖，這留言有預覽網頁的區塊。預覽區塊的圖是一張劃撥單，而文字則見下文敘述。

預覽的標題「2012哇咧聖誕口袋書::沒有星星的夜晚::新書介紹」這沒問題，但是內容卻寫著：
「帳號：13124599 戶名：財團法人基督教青年歸主協會（若你不便下載，郵......」

奇怪，怎麼會這樣呢？為什麼預覽的內容不是原本網頁的這些大字
「一本你等候許久的療癒小書。[心理測驗]×[動人故事]......」或是第一段內容「這本集結今年網友會菁華，並增加精美插圖、更完整內容的小書是份禮物......」呢？

我自己有對這個網頁做小小的分析：

剛剛的「帳號」那段字，是在原網頁下方的「如何購買」的段落裡面，我用 Google Chrome 的"檢查元素"功能，發現那一段字是整個網頁裡面唯一有用 HTML <p> 標籤的地方，其它段落都用 <div>，我想這就是原因了。

看來 Facebook 在產生網頁預覽的時候只會注意網頁的 <p> 標籤，不會注意 <div>，所以預覽的內容與圖片才會變得怪怪的。

而網頁上方的大字介紹呢？

"檢查元素"後發現，網頁語法長這樣：

<td background="http://img.walei.tw/at/book5/images/main_intro.png">
  <div class="intro">
    這本集結今年網友會菁華，並增加精美插圖、更完整內容的小書是份禮物......
  </div>
</td>

而「一本你等候許久的療癒小書。......」這些字通通藏在圖片裡面！這就出現一個大問題了。

首先，不管是 Facebook, Google, 還是螢幕報讀器，都無法閱讀嵌在圖片裡的字。這等於視障者與搜尋引擎完全讀不到它們。記住一個無障礙網頁的常識：絕對不要把重要的文字內容放在圖片裡面，如果要放，請記得用 alt 替代文字。不然的話，搜尋引擎讀不到，哇咧的站方也就錯過了提高自己網頁人氣的機會！

再來，那張圖片還是用一個叫 background 的 CSS 屬性顯示的。既然是 background 那一般來說就是裝飾的圖，一定不是重要的東西，那搜尋引擎怎麼會知道有重要的字在裡面呢？

解決方法

我還不會用CSS3的網頁字型，所以只能提供CSS2.1的做法。

CSS2解決方法：寫出小字，然後再用CSS隱藏它。

範例：

<style>
@media screen { /* 只有圖形的瀏覽器需要隱藏 */
    .hidden-text {

    /* 注意這裡別用 display: none;，因為有些搜尋引擎
       或報讀器會忽略 display: none 的內容。 */
        display: block;

        position: absolute; /* 讓區塊變成浮動的 */
        overflow: hidden;   /* 隱藏浮動區塊 */
        visibility: hidden; /* 隱藏浮動區塊 */
    }
}
.big-description {
    background-image: url("http://img.walei.tw/at/book5/images/main_intro.png");
}
</style>

<hgroup class="hidden-text page-title">
<h1>沒有星星的夜晚</h1>
<h2>2012哇咧聖誕口袋書</h2>
</hgroup>

<div class="big-description">
<p class="hidden-text big-description1">
    一本你等候許久的療癒小書。
</p>
<p class="hidden-text big-description2">
    [心理測驗]×[動人故事]<br />
    [天堂來信]×[溫暖小文]
</p>
</div>

<p class="intro">
這本集結今年網友會菁華，並增加精美插圖、更完整內容的小書是份禮物，讓你方便攜帶，搭車、等人、睡前閱讀都很適合，將在越來越寒冷的冬天撫慰你的心、解答友誼困惑。即使生活中，我們內心會經歷人際上的掙扎與困惑，也別放棄對真實友誼的盼望喔！
</p>

這種做法不是最理想的。理想的做法是用前者CSS3的網頁字型，但可能會比較麻煩。

歡迎哇咧星樂園的站方直接引用上面的語法，我不會介意。(或者，有人會CSS3的，可以教我怎麼解嗎？謝謝)

自由藍天

2013年1月4日星期五