iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 5

Day05 「弟兄們,為了SEO!」 ─ 將 h1 圖片取代文字!

今天來簡單介紹一下,如何將 h1 (主標題)內的文字置換成精美的 LOGO 圖片!

當然精美的 LOGO 請自己做自己想辦法,這邊只有教學怎麼置換而已 (喂

昨天講了些 body 內常見的 HTML 標籤
其中也特別講到的 h1 (主標題),占搜尋引擎搜索優化部分非常重!
假使我希望使用者一搜尋 it邦幫忙 就能找到網站,但我也希望 h1 是一張美美的 LOGO,那我是不是勢必得寫成下面的格式呢?

<h1>it邦幫忙</h1>
<style>
    h1{
      background-image: url(https://ithelp.ithome.com.tw/storage/image/logo.svg);
      width: 150px; 
      height: 42.677px;
    }
</style>

但這樣一來,我們就會得到以下的畫面
h1中帶有bgimg的情況

為了更方便瀏覽,所以我在 body,html 中下了 background-color: #e0e0e0;

但是我們並不希望 h1 當中為了讓搜尋引擎找到的文字出現,這時候應該怎麼辦呢?
我們可以這樣寫

<h1>it邦幫忙</h1>
<style>
h1{
    background-image: url(https://ithelp.ithome.com.tw/storage/image/logo.svg);
    width: 150px; 
    height: 42.677px;
    text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
  }
</style>
  • text-indent: 101%
    強迫文字縮排至原本的區域外
  • white-space: nowrap
    規定段落中的文字不得進行換行,常用於避免字數過多時自動換行導致閱讀效果變差
  • overflow: hidden
    將超出範圍的內容隱藏

這樣一來我們就可以得到美美的 LOGO 圖,又沒有奇怪的文字檔住它囉!
圖片取代文字

本日實做的範例在此,也歡迎大家自己動手玩玩看


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day04 「Over my dead body」 ─ <body>裡面常見那些器官(欸
下一篇
Day06 「防呆機制好麻煩」 ─ HTML5 內建的表單檢查!
系列文
菜鳥前端奮鬥史(欸?30

1 則留言

0
Rplus
iT邦新手 5 級 ‧ 2017-12-25 21:04:08
color: transparent;

我要留言

立即登入留言