ウェブサイトの左上にロゴマークが設置されている事は、めずらしくはありません。
このサイトも左上にロゴがあります。
imgとして設置するか、backgroundで配置するかどちらにしてもimgファイルが使われます。
さて、このロゴにはh1のタグを使用するのでしょうか。
先日も社内の雑談で出てきました。
この議題は、結構長い間論議されているような気がします。
すごくレベルの低い事ですが、、、。
わたしの考えとしての基本は、imgとして設置した場合は、h1は使用しません。
どうしてもh1を利用したい場合は、backgroundとしてCSSに記述して、h1タグにはテキストでタイトル名を記述します。
（ここでtext-indent:-9999px;を利用するかは、別の問題なので下部で説明します。）
そもそもロゴは、コンテンツに関係しているのか？
トップページならともかく、全てのページでロゴがh1でよいのか？
上記の場合は、たいがいロゴをクリックするとトップページに移動します。そこが疑問のポイントです。
Wordpressのテンプレートをみるとすべてのページのロゴをh1としているものが多いです。
では、SEOに関してはどうなんだ？という議論は下記の様なサイトで国外でも盛り上がっている。
Replacing h1 text with a logo image…best method for SEO?
では、googleではどうなっているんでしょうか。
googleのトップページをみてみると
[html]
<h1><a id=logo href="http://www.google.com/webhp?hl=ja" title="Google ホームへ">Google<img width=167 height=318 src="/images/nav_logo83.png" alt=""></a></h1>
[/html]
[css]
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
[/css]
と記述されている。
Googleについてのページは、
[html]
<h1><a href="/"><img alt="" height="65" src="images/about_logo.gif" title="" width="175"></a> について</h1>
[/html]
[css]
h1 {
color: #636363;
float: left;
font-size: 1.8em;
padding: 0;
}
[/css]
となっている。
W3Cのページを見てみると
トップページ
[html]
<h1 class="logo"><a tabindex="2" accesskey="1" href="/"><img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C"></a> <span class="alt-logo">W3C</span></h1>
[/html]
[css]
h1, #w3c_mast h1, .h1 {
font-size: 136%;
font-weight: normal;
overflow: hidden;
}
[/css]
Appleに関しては、ロゴどころかページ全体のh1がない。
main > content の articleにh1がある。
[html]
<h1><img src="http://images.apple.com/home/images/hero_macbookair.png" alt="The new faster, MacBook Air. The ultimate everyday notebook. Now up to 2.5x faster, featuring highspeed Thunderbolt I/O and OS X Lion." width="902" height="586" /></h1>
[/html]
しかも大胆に下記の様な大きなpng画像がh1要素になってます。
ここでわたし自身の個人の見解ですが、h1をロゴに使うとか使わないとかはみんなが言うほど神経質にならなくてもよいのでは？
きちんとしたHTMLの記述をしたらよいと思います。
h1要素がないのにh2やh3があるなど、h2がh1に関連していないなど基本的なルールを守ればよいと思います。
また、SEOに良いからロゴにh1とかでなく、alt属性をきっちり記述した使い方をしなければなりません。
画像: alt 属性を使用して説明テキストを含めます。また、画像の近くにわかりやすいキャプションや説明テキストを入れることもおすすめします。
参考：隠しテキストと隠しリンク
そもそもブランディングが出来ていない会社がロゴにh1って笑ってしまいます。
GoogleやNikeなどだれでも知っているロゴマークならばh1っていうのはありだと思います。
また、appleのようにそもそもコンテンツの中でしかh1要素を使わないという選択肢もある。
ですが、やっぱり納得できないのがh1に「なんでリンクがあるの？」ってところです。
もともとh1とは、Use lt;h1> for top-level headingにも記述されているとおり、ドキュメントの最初の見出しのために使わなければなりません。
結論からすると
トップページは、ロゴにつけてもよいただしaltに会社名や商品名などを必ず記載する。
もしくは、テキストで会社名や商品名を記述して「text-indent: -9999px;」などで見えなくする。
※上記「text-indent: -9999px;」は、隠しテキストと隠しリンクのガイドラインに触れるという恐れがありますが、現在Googleではこの方法の使用を推奨していません。上記のGoogleのサイトのようにimgタグでロゴを設置しています。
参考：隠しテキストと隠しリンク
下層ページに関しては、そのページのコンテンツに合わせてh1要素を記述することは理想ですが、CMSのテーマ作成などの都合でロゴに設定しても特には問題ない。
ただ、絶対にロゴにというのはナシだと思います。
という見解です。
