ロゴは、h1なのか?

2011年8月1日

ウェブサイトの左上にロゴマークが設置されている事は、めずらしくはありません。
このサイトも左上にロゴがあります。
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のテーマ作成などの都合でロゴに設定しても特には問題ない。
ただ、絶対にロゴにというのはナシだと思います。
という見解です。

Related Posts

Windows 11登場。何が変わる?ポイント

Windows 11登場。何が変わる?ポイント

先日マイクロソフトからWindows11のリリース予定が発表されました。 正式には2021年の後半登場予定のようです。 windows10が2015年に登場してから6年ぶりのメジャーバージョンアップです。 Windows10が出た当時はWindows10が最終バージョンと言っていたようなので掟破り感はありますが、Windows7のサポートが昨年終了したり、IE11のサポートが来年切れたりと技術は日々進歩しているのかもしれません。 参考:IE11(Internet Explorer)サポート終了が2022年6月16日...

パソコンから簡単にスマホ表示を確認

パソコンから簡単にスマホ表示を確認

調べ方 スマートフォンからサイトを表示すればスマートフォン対応されているかどうか一発で分かりますが、パソコンで作業を行っている時にスマートフォンを触るのも手間です。そんな時、パソコンからでも疑似的にスマートフォン時の表示を確認することができます。 Googleクロームの場合は下記です。※MicrosoftEdgeの場合も同様 1、キーボード上部のF12を押す。 2、デバイスサイズの切り替えボタン。 3、念のためページの再読み Ctrl+F5 4、上記でデザインが変わった場合はスマートフォン対応されたサイトです。...

事業再構築補助金 第2回公募~7月2日まで

事業再構築補助金 第2回公募~7月2日まで

事業再構築補助金の第2回公募が現在受付中です。 残り3回予定とのことですので5回中の2回目となるかもしれません。 事業再構築補助金という名前を初めて聞く方は下記をご覧ください。 事業再構築補助金(公式) 事業再構築補助金 事業計画書 具体的取組内容 事業再構築補助金を簡単にお伝えするとコロナにより売上が減少した企業に対して事業再構築の計画を立ててもらいその資金を最大1億円補助してもらえる制度です。(募集の多い主な枠では6000万円上限)...