非同期スニペット

ロゴは、h1なのか?

無料 ご相談承ってます!

電話 078-855-8183(平日 -)お気軽にご連絡ください!
打合せなどで電話に出れない場合がございます。その場合は、フォームもしくは 070-5503-3830までお手数をおかけしますがご連絡ください。

私たちの実績
(→ 実績一覧へ

Webデザインやグラフィックデザインの実績をご紹介しております。

お知らせ

ブログ最新の10件
(→ 記事一覧へ

事務所案内

  • ワサビ株式会社
  • マーケティング部(東京オフィス)
  • 〒142-0041
    東京都品川区戸越1-21-15 創建ビル4F
  • 本社
  • 〒658-0065
    兵庫県神戸市東灘区御影山手4-10-21
  •    
  • マーケティング部・デザイン室・開発室
  • 〒657-0864
    兵庫県神戸市灘区新在家南町1-1
  • TEL. 078-855-8183
  • 受付時間: 平日 -
  • マーケティング部(福岡オフィス)
  • 〒812-0053
    福岡県福岡市東区箱崎2-10
会社の詳細情報は、こちら

Work with us!

私たちのビジネスの成功は、社会に貢献できると確信してます。

ワサビは、才能や情熱を持った方との出会いを待ってます。

インターネットで出来る事、その可能性を仕事にしたい方は、ご連絡ください!

採用の詳細は、こちら

ソーシャルメディア

ロゴは、h1なのか?

更新日

ウェブサイトの左上にロゴマークが設置されている事は、めずらしくはありません。

このサイトも左上にロゴがあります。

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のテーマ作成などの都合でロゴに設定しても特には問題ない。

ただ、絶対にロゴにというのはナシだと思います。

という見解です。

ページトップへ