[解決済み】H1テキストをロゴ画像に置き換える:SEOとアクセシビリティのための最良の方法?
2022-04-20 14:05:31
質問
いろいろなテクニックがあるようなので、決定的な回答が得られるといいのですが......。
ウェブサイトでは、トップページにリンクするロゴを作成するのが一般的です。検索エンジン、スクリーンリーダー、IE6+、CSSや画像を無効にしているブラウザに最適化しながら、同じことをしたいのです。
例1. h1タグを使用していない。SEO的にはあまりよろしくないのでは?
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
例2 これはどこかで見つけました。CSSがちょっとハチャメチャな気がします。
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
padding: 70px 0 0 0;
overflow: hidden;
background-image: url("logo.png");
background-repeat: no-repeat;
height: 0px !important;
height /**/:70px;
}
例3. 同じHTMLで、text-indentを使った別の方法です。これは画像の置き換えに対する Phark" のアプローチです。
<h1 id="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
background: transparent url("logo.png") no-repeat scroll 0% 0%;
width: 250px;
height: 70px;
text-indent: -3333px;
border: 0;
margin: 0;
}
#logo a {
display: block;
width: 280px; /* larger than actual image? */
height: 120px;
text-decoration: none;
border: 0;
}
例4. Leahy-Langridge-Jefferiesメソッド . 画像やCSSがオフの時に表示されます。
<h1 id="logo" class="logo">
<a href="">Stack Overflow</a>
</h1>
/* css */
h1.logo {
margin-top: 15px; /* for this particular site, set this as you like */
position: relative; /* allows child element to be placed positioned wrt this one */
overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
padding: 0; /* needed to counter the reset/default styles */
}
h1.logo a {
position: absolute; /* defaults to top:0, left:0 and so these can be left out */
height: 0; /* hiding text, prevent it peaking out */
width: 100%; /* 686px; fill the parent element */
background-position: left top;
background-repeat: no-repeat;
}
h1#logo {
height: 60px; /* height of replacement image */
}
h1#logo a {
padding-top: 60px; /* height of the replacement image */
background-image: url("logo.png"); /* the replacement image */
}
このような場合、どのような方法が最適なのでしょうか?回答にはhtmlとcssをお願いします。
解決方法は?
オプションが足りません。
<h1>
<a href="http://stackoverflow.com">
<img src="logo.png" alt="Stack Overflow" />
</a>
</h1>
hrefのtitleとh1へのimgはとてもとても重要です!
関連
-
[解決済み】bootstrap 3で画像にテキストを回り込ませる
-
[解決済み] FontAwesomeによる星評価用CSS
-
[解決済み] DIVを重ねる?
-
[解決済み] cssによる波状の形状
-
[解決済み] JavaFX Labelの文字色を変更する方法
-
[解決済み] セレクトボックスのテキストを中央揃えにすることは可能ですか?
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] 順序付きリストの2行目のインデントをCSSで維持するには?
-
[解決済み] three.jsの背景を透明や他の色に変更する。
-
[解決済み] ブルマのテーブルをレスポンシブにするにはどうしたらいいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み】bootstrap 3で画像にテキストを回り込ませる
-
[解決済み] font: inheritを使用する目的は何ですか?
-
[解決済み] margin: auto は中央揃えではありません。
-
[解決済み] CSS - div から画面の幅いっぱいまでオーバーフローさせる方法
-
[解決済み] reactでスティッキーフッターを作るには?
-
[解決済み] CSSで0を指定する場合、明示的に単位を表記するべきか、省略するべきか。
-
[解決済み] 要素を移動せずにホバー時にCSSボーダーを追加する [複製]
-
[解決済み] three.jsの背景を透明や他の色に変更する。
-
[解決済み] ReactJSを使ったインラインのフォントサイズスタイルの生成