【CSS】h1の隠しテキスト

h1に設定するロゴを画像を背景で設定しないといけないときに隠しテキストと呼ばれる方法で実装した時の備忘録

h1の隠しテキストのやり方

<h1>隠しテキスト</h1>
<style>
h1 { 
    display:inline-block;
    height:50px;
    width:100px;
    // ↓テキスト飛ばす（重要）
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    // ↓表示したい画像
    background: url("/assets/img/logo.svg") no-repeat center/contain;
}
</style>

昔は「text-indent: -9999px;」で飛ばしていた
この方法だと「-9999px」分の書き出しパフォーマンスが必要になるみたい
なので「text-indent: 100%; 」

h1の隠しテキストは違反？

調べると、画像とテキストの内容が大きく外れていなければ問題はなさそう

https://developers.google.com/search/blog/2009/12/google?hl=ja