- ベストアンサー
<h1>タグの見出しはテキストであるべきでしょうか
私はページタイトルをデザイン面から画像で作成し、<h1>タグでくくっています。 ですが、最近はわざとタイトルをテキストに指定しているサイトを数多く見るようになりました。 これはSEO対策として有効なことなのでしょうか？ 私のサイトはデザインを重視していはいますが、SEO対策より優先するほどではないと考えていますが、タイトルをテキストにすべきか判断できる材料がほとんどありません。 アドバイスをお願いいたします。 ＜補足＞ 私のサイトは・・・ (1)新規ユーザーにきてほしいので、検索等でひっかかってもらいたい (2)本来の意味を逸脱するSEO対策は自己都合であるためしたくない (3)画像の方がデザイン的に美しい
- HTML
- 回答数6
- ありがとう数9
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
テキストでも画像でも同じです。 提供する意味が同じならメディアはテキストだろうが、画像だろうが、音声やFlashであっても等価だと思います。 （もちろん、テキスト以外のメディアを使うならalt等は必要ですが） ただ、SEO上はテキストが有利、というかimgのaltはh1内であっても重要視してくれないというウワサがあります。 …通常目にする事がない情報だけにaltにある事ない事詰め込むSEO-spamが一時期流行ったせい？ SEO上効果があるといっても、最近の検索エンジンではやらないよりはマシってな程度ですから、気にする程の事ではないかと思います。 私的にはテキストであることが便利(*)だと思ってますので、見栄え為の画像とテキストの併記をします。(この場合のimgは単なる飾りなのでaltは空。) (*)サイトを紹介する時、コピペできないとちょっと不便って程度ですが。
その他の回答 (5)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
デザインなんてクソ喰らえ・・とまでは思っていませんが、HTMLの目的は、 2.4.1 構造とプレゼンテーションの分離、および 2.4.2 広汎なWebアクセス性の考慮 (HTML 4仕様書 (邦訳) http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 あたりをじっくり読めばよいでしょう。 最も重視されるのは、されなければならないのは、文書構造です。 見出しがあって、最初のほうに要約が書かれていて、引用は引用で、表は表できちんとマークアップされていることが重要です。それが強いてはSEO(SEO対策ではない)につながりますし、利用者の理解しやすさにつながります。 利用者には、視覚ブラウザもありますし、読み上げソフトもありますし、点字ブラウザも、画像の読み込みを停止した訪問者も、視覚弱者のように自分のスタイルシートを使用したりサイトのスタイルシートを使わない人も、そして、サーチエンジンも利用者。 言い換えれば、すべての利用者に利用しやすいように作成することが最優先課題です。 その上で、大多数を占める視覚ブラウザ向けに、読みやすいようにページをデザインすればよい。 ということは (1)新規ユーザーにきてほしいので、検索等でひっかかってもらいたい きちんとマークアップされているか？最初にあるべき「見出し」に適当な語句が書かれているか？。文書の内容を示すキーワードになる語句がきちんとマークアップされているか・・ (2)本来の意味を逸脱するSEO対策は自己都合であるためしたくない これはＳＥＯを【完璧に】誤解しています。ＳＥＯは、(1)の結果であって、目的ではない。(1)がきちんとされていれば、それこそSEOであって、自己都合ではない。 ・・・・どこから聞いてきたのか？ (3)画像の方がデザイン的に美しい あなたのためにでしょ。大多数の視覚ブラウザのためですか？。でも大多数を優先することは結果的に(1)に反することをしてしまう。 たとえばこの「教えてgoo」だって、<h1>見出しレベル1は <h1><h1>タグの見出しはテキストであるべきでしょうか - 教えて！goo</h1> となっていますし、Descriptionの内容は、本文と一致して「私はページタイトルをデザイン面から・・・【後略】・・・ となっています。しかし、<h1>は左上に小さく表示されているだけですよね。 たとえばキチンのマークアップされている下記HTMLでも <head> <title>このページのタイトル、</h1> </head> <body> <h1><span>このページのタイトル</span><img src="**" alt="このページのタイトル"></h1> <div id="abstract"> <h2>要約</h2> <p>＊＊＊＊ であっても、視覚系ブラウザには、<h1></h1>内のテキストは非表示にして、画像だけ表示するとか、<duv id="abstract">内の<h2>も隠すとかは、自由に出来るのです。 [CSS] h1>span { display: none;} div.abstract h2 { display: none;} 【超重要】 14.1 スタイルシートの概説 (HTML 4仕様書 (邦訳)より＿＿＿＿＿ここから Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。 * メーカー独自拡張のHTMLを使う。 * テキストを画像に置き換えて表現する。←・・・【あなたがしていること】 * 余白制御のために画像を用いる。 * ページレイアウトの目的で表を用いる。 * HTMLでページを作らずにプログラムに頼る。 こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) ＞私のサイトはデザインを重視していはいますが、 これと ★新規ユーザーにきてほしいので、検索等でひっかかってもらいたい ★SEO対策は自己都合であるためしたくない これは大いに矛盾してますね。 ＞私のサイトはデザインを重視していはいますが、 なら、重要視すべきは 文書構造にしたがってきちんとマークアップされているか？ タイトルやキーワードが内容と一致しているか？ スタイルシートをはずしても、何が重要であるかを含め内容を理解しやすいか などです。 視覚ブラウザ用のデザインは、これらとは別個に考えればよい。とはいってもデザインしやすいようにマークアップするためには、知識と熟練が必要です。
お礼
回答ありがとうございます。 >最初にあるべき「見出し」に適当な語句が書かれているか？。 この見出しに画像のaltの文字が見出しとして認識されるのか、それとも見出しにはテキストが大変有効であるのかがわからないので迷っておりました。 >最も重視されるのは、されなければならないのは、文書構造です。 とても理想的ですが、実際にサイトを運営するには費用対効果がつきまとい、読ませていただいたところ私のサイトでは効果がついてこないと感じました。 私のサイトは、取扱い内容から大多数が視覚ブラウザであり、ユーザー側にとってこそ文書構造よりも見やすいサイトであることを優先したほうがよいと思っておりますので、今回は画像のタイトルでいくことにしました。 いつか視覚ブラウザ以外の大多数以外の人にも考慮しなければならないようなサイトを持つ際はいただいた意見を参考にさせていただきたいと思います。
- dezimac
- ベストアンサー率56% (2365/4208)
<h1>は見出し-レベル1という意味だから、ページタイトルとかに指定するのが一般的です。 <h1>タイトル</h1> <h1><img src="title.jpg" alt="タイトル"></h1> 画像でもテキストでもほとんど関係ありません。 テキストをCSSで画像に置き換えるというのがありますが、効果はほぼ同じですから、好きように。 h1 { text-indent: -1000em; width: 200px; height: 50px; background: url("title.jpg") no-repeat; }
お礼
回答ありがとうございます。 >画像でもテキストでもほとんど関係ありません。 ずばっと嬉しい回答をありがとうございます。 「ほとんど」ということですので、他の回答者様の意見とあわせると論理的にはテキストであることが望ましいということなのかと思います。 ただ、altが全く無視されるわけではないというアドバイスをいただきましたので画像のまま継続させようかと考えが偏り始めました。
- qandasok
- ベストアンサー率42% (79/186)
なぜ画像をhタグで括る必要があるのでしょうか。 <img src="image_url" alt="" /> で、画像は表示されるのですから、h1でimgを括る意味が分かりません。 それに、テキストでも、画像ほどの自由度は無いにしても、 装飾的にデザインすることは可能です。 font-familyやfont-size,colorを弄ったり、 backgroundを指定したりするだけでは物足りませんか。 あるいは、このサイト『OKWave』のように、 <div id="ok_header_top"> <div class="ok_left"><a href="http://okwave.jp"><img src="images/logo_community_20081204.gif" alt="OKWaveコミュニティー" /></a></div> <div class="ok_header_top_r_wrapper"> <div class="ok_header_top_right"> <h1 class="top_h1"><h1>タグの見出しはテキストであるべきでしょうか</h1><br /> </div> </div> </div> このように表示する方法もないわけではないです。
お礼
回答ありがとうございます。 >なぜ画像をhタグで括る必要があるのでしょうか。 テキストへの装飾レベルでは物足りないと思ったので画像で表現したいと思っているからです。 本の表紙がわかりやすいかもしれません。 きれいにテキストが並んでいる本もあれば、アート的なタイトルとなっている本もあるかと思います。後者側のイメージにしたいと思っております。 >あるいは、このサイト『OKWave』のように、～ これはサイト名を見出しとしない手法もありだということで紹介いただいたのでしょうか？ もしそうであれば、それも検討したうえでサイト名を見出しとして画像表示させたいと考えています。
- SAYKA
- ベストアンサー率34% (944/2776)
h1って 大見出しでしょ？ だから文字を指定する………何が間違ってるんだろう……… 重要な大見出しと一緒に画像っていうのはよくある事だしおかしくないんじゃない？ ただ、画像だけにしたい人は多いけど本来文字…でもその文字じゃ画像だけにしたい人からすると邪魔…うーんどうしよう っていう話があちこちにひしめいているね。 でも本来はbody直後のh1は見出しな筈だから見出しを表す内容は文字列の筈で、SEOはそこを重視してh1を見る、というだけの話なのでは？ SEOでひっかかるのか判らないけど visibility:hidden でも使うとかね。
お礼
回答ありがとうございます。 そうですね、書いていただいたとおりにテキストの方が有効っぽい（普通に考えてタイトルはテキストであるもの）だと思うのですが、画像タイトルのaltが大見出しとして認識してもらえるのなら画像でいけるという期待のような気持ちがあり、ゆれているのだと思います。
- yambejp
- ベストアンサー率51% (3827/7415)
別にタイトル画像ならh1に囲むことないですよね？
お礼
回答ありがとうございます。 >別にタイトル画像ならh1に囲むことないですよね？ 今私のサイトでは、この教えてgooサイト左上の「教えて！goo」のようなタイトル画像を表示しており、ソース上では <img src="hogehoge" alt="アンケート、質問は当サイトで 教えて!goo"> というようにしております。 h1でくくるとページの概要を示すものとして、検索時に優先的にひっかかると思っておりそうしております。 上記回答内容がよくわかりませんので詳しく教えていただけませんか？
お礼
回答ありがとうございます。 >SEO上効果があるといっても、最近の検索エンジンではやらないよりはマシってな程度ですから、気にする程の事ではないかと思います。 >私的にはテキストであることが便利(*)だと～ なるほど、たしかにおっしゃるとおりですね。 ここに質問投稿するまでは、とにかくSEO的に有利なのかとギラギラ考えていましたが、ふと冷静に、見てくださる方にとって最適な見せ方をと考え方が変わってきました。 見てくださる方の負担にならないことを最優先とし、その後にできる限りのSEO対策を施す方向で考えたいと思います。