16

私は最近 CSS を学んでいます。私が見ているチュートリアル シリーズでは、ロゴ画像を表示する最良の方法は、テキストを H1 タグで囲み、そのタグの CSS スタイルを背景画像に設定し、テキスト-99999 または同様の大きな数字のインデント。

これは信じられないほどハックでエレガントではないようです。また、CSS を使用してテキストを非表示にすることは、SEO の観点からは大したことではないようです (CSS を使用してテキストを非表示にすることは嫌われているため)。

また、ロゴ自体は実際にはコンテンツではないため、img の使用は避けるべきであることも読みました。そのため、コーディングのデザイン側 (CSS など) に任せるべきです。

これに関する現在のコンセンサスは何ですか？

4

4 に答える 4

17

ロゴを表示する正しい方法は、<img>要素を使用することです。ロゴとロゴタイプについて学習していない場合、ロゴには独自のセマンティクスがあり、非常に具体的な方法で提示する必要があることに気付かないかもしれません。[alt]また、属性で使用する必要がある解釈が必要な場合もあります。

その必要な解釈が合法的にページの見出しである場合、それを<h#>要素に追加することは意味的に正しいでしょう:

<h1>
    <img src="logo.png" alt="Foo Co.: Where everyone can fizz the buzz" />
</h1>

通常、ロゴはリンクとして使用されるため、よく見られるのは次のとおりです。

<a href="/">
    <img src="logo.png"... />
</a>

さらに、ロゴを強調することができます (程度に応じて、<strong>またはいずれかになります)。<em>

<strong>
    <a href="/">
        <img src="logo.png" ... />
    </a>
</strong>

ロゴのセマンティクスを理解する。コカ・コーラ社を参照している場合、スタイルシートを交換したり削除したりしても、ブランドのロゴは変更されず、変更されるべきではありません。ほとんどの人は意味的にそれを理解していますが、

コカ・コーラのロゴ

とは異なります

ペプシのロゴ

于 2012-04-12T14:20:44.777 に答える
9

私は常に画像をアンカータグで囲みます:

<a href=""><img src=""></a>

またはアンカータグをブロックとして作成し、背景画像を設定します

<a class="logo" href="">Logo</a>

.logo { 
         background: url("/path") no-repeat; 
         width: 100px; 
         height: 100px; 
         display: block; 
         text-indent: -9999px;
}
于 2012-04-12T14:15:15.650 に答える
6

imgロゴの表示には常に を使用する必要があります。ロゴを背景として使用h1することは非常に悪い習慣であり、避けるべきです。ロゴはコンテンツであり、h1.

ハリー・ロバーツは彼の投稿で明確に説明しています -あなたのロゴは画像であり、<h1>

于 2012-04-12T14:22:10.453 に答える
2

私はそれが本当に問題ではないと思います。これにはさまざまな方法があり、すべてサポートされています。それらはすべて機能します。それらのほとんどは、検索エンジンにやさしく、完全にアクセス可能です。

私はこのようなことをします：

<h1><a href="/"><img src="rsc/logo.jpg" alt="Frobozz Company"></a></h1>

検索エンジン、テキストモードのブラウザ、スクリーン リーダーには代替テキストが表示され、その他のユーザーにはロゴ画像が表示されます。

于 2012-04-12T14:18:17.293 に答える