{%hackmd /au2gfdvHR0mEjvR_NzROqA?both %}

###### tags: `技巧`

[技巧] 基於搜尋引擎調整`<h1>`標籤內容
===

[TOC]

:::danger
搜尋引擎看到`<h1>`標籤就會去爬裡面的內容，但只會爬文字
:::

## 圖片取代文字技巧

- 如果`<h1>`標籤裡面塞的是圖片，不是文字
- 搜尋引擎會看不懂圖片，所以還是要將文字使用在頁面上，但不能讓文字顯示在頁面上
- **使用但不顯示文字**

## 使用樣式

> 原始樣式
> 

- `text-indent: 101%`：首行縮排
> 
- `overflow: hidden`：超出 width 範圍的文字隱藏
- `white-space: nowrap`：避免文字因空白而斷行，限制文字都在同一行

## 樣式說明

能夠做到讓文字不呈現在畫面中，是透過 `text-indent` 是對首行文字做縮排後，使用 `overflow: hidden` 讓超出 width 範圍的文字隱藏。

若這時沒有設定 `white-space: nowrap`，可能會讓文字因為有空白換行而出現在畫面上

因此我們需要透過 `white-space: nowrap` 語法限制文字都在同一行，方便做處理。

## 範例

<!-- HTML -->

<div class="header">
  <h1>
    <a href="#">Hex School</a>
  </h1>
</div>

/* CSS */

.header h1 a {
  background-image: url(https://imgur.com/FEFSjHp.png);
  width: 174px;
  height: 36px;
  display: block;
  
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}

> 
> <small>執行結果</small>