- ベストアンサー
<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対策は自己都合であるためしたくない これはSEOを【完璧に】誤解しています。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でくくるとページの概要を示すものとして、検索時に優先的にひっかかると思っておりそうしております。 上記回答内容がよくわかりませんので詳しく教えていただけませんか?
関連するQ&A
- <h1>などの見出しタグ 【SEO】
質問させて下さい。 よくSEO的には<h1>や<h2>タグの中のテキストがロボットエンジンに 重要視されるとあります。 そこで疑問です。 サイトの見栄え上、見出しタグの中にテキストを入れずに画像を入れ ているとします。その場合に画像のalt(代替え)指定に「ラーメン」 等と入れておけばテキストのみの場合と効果は同じだと思われますか? 理想↓ <h1>ラーメン</h1> 希望↓ <h1><img src=ra-men.jpg alt=ラーメン></h1> ※タイトル画像とは別に<h1><font size=1>ラーメン</font></h1> などと目立たないようにテキストを入れた方がよいのかな?とも 思ったのですが・・・どうなんでしょう。
- ベストアンサー
- HTML
- h1タグ 文字が大きくて目立ちすぎる
SEO対策の為にH1タグにサイトの説明を入れてるのですが 文字が大きすぎて目立ちすぎます。 h1タグの文字を小さくしたいのですがどうすればいいのでしょうか? 他の文字を小さくする方法と同じですか?
- ベストアンサー
- HTML
- h1タグ設定時につける見出しのタイトルは・・・
はじめまして。素人に近いのですが、 HPビルダーver.6 バンドル版を使用し、 何とかHP作成をしています^^; h1タグがSEOに有効と知り、設定をしています。 <h1>各ページの一番大きい見出しのタイトル</h1> (このタイトルは、ページタイトルと同じが良い) と認識しておりますが、ページタイトルと全く同じが良いのでしょうか? 当方のページタイトルを例に挙げると、 「★★育児相談室 当サイトについて」としておりますが、 h1タグにも全く同じ様に設定した方が良いのでしょうか?それとも、少し略して 「当サイトについて」だけでも良いのでしょうか? 些細なことなのですが、迷っってしまいまして・・・ 素人の質問で恐縮です。 教えて下さると助かります。 どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- SEO対策としての.swfファイルでの代替テキスト
以前、質問にあったのですが、フラッシュで作成した.swfファイルに代替テキストを挿入する方法について質問します。 http://oshiete1.goo.ne.jp/qa2149913.html ↑この方法では、単にオンマウスでのテキスト表示オーバー効果だけで、SEO 対策にはならないと思います。objectタグあるいはembedタグにaltを記述しても本来の代替テキストの効果(画像が表示されないブラウザ対策など)、あるいはSEO対策の効果は望めないのでしょうか。
- 締切済み
- Flash
- h1,h2タグに背景画像
よろしくお願いします。 このページでoff-leftというテクニックを知りました。 http://www7.plala.or.jp/zeroxstyle/use_xhtmlandcssoffleft.html h1タグなどに背景画像として文字画像を表示させ、テキストはCSSのtext-indentで画面の外に追いやるというものです。 確かにこれなら見た目も綺麗だし、文章構造もすっきりしたアクセシブルなサイトになりますが、googleからSEOスパムと判定されるのではないか疑問です。 実際にこのテクニックを使っているサイトってあるのでしょうか? 素直にh1タグにalt属性つきの画像を入れたほうが無難でしょうか・・・・?
- ベストアンサー
- SEO
- H1タグについて教えてください
私は今、「お小遣い天国(仮称)」というサイトを作っているとします。 そして、そのサイトにH1タグを埋め込もうとしています。 トップページのH1タグは、当然「お小遣い天国」でOKなのは分かります。 問題は、下位ディレクトリのページです。 そのサイトの全てのページのH1タグを「お小遣い天国」としてしまうと、何かSEO上で不都合なことが起こりえますか? 他のページのH1タグはどうしたらいいんでしょう? もうひとつ質問です。 ヘッダファイルにはタイトルを記入しますよね? そのタイトル文字は、全てのページで同じでいいんですか? 私の場合だと、全てのページタイトルに「お小遣い天国」とだけ書いてればいいんでしょうか? それとも「お小遣い天国 メールで稼ぐ」など、2フレーズを入れたほうがいいんでしょうか。 それとも、メールで稼ぐコーナーだったら、メールで稼ぐというフレーズだけのタイトルでいいんでしょうか?
- ベストアンサー
- HTML
- モバイルSEO対策に相応しいタグは?
今回、モバイルサイトのSEO対策をお願いすることになりましたが、 その前にタグを整理したいのですが、モバイルSEO対策に有効なタグはどんなものでしょうか? META H TITLE ALT B … いらないものは、削除していきたいので、お分かりの方、ご協力下さい。
- ベストアンサー
- HTML
- SEO対策 <Body>タグ直下のテキスト
SEO初心者です、 <Body>タグ直下のテキストは重要と聞きます。 と言うことは<Body>の直下にはすぐテキストを書くほうがいいのですか? たとえば、テーブルなんかを作るとテキストの前に テーブルのタグが出来ますよね。それはいいのですか? <Body>タグ直下には画像もおかないほうがいいのですか? そういう事じゃなく<Body>の下に最初にでてくるテキスト と言う意味でしょうか?
- ベストアンサー
- HTML
- h1タグとSEOのいろいろ
h1タグに画像を挿入したい場合、画像を背景処理してテキストを飛ばして画面から見えなくする。 という方法がありますが、これはスパム扱いされる。ということも聞きます。 それならば、小細工なしに画像にalt指定をする方法を取る方がいいのでしょうか。 下記の3パターンのうち、皆さんはどれが最良の方法だと思われますか? 皆さんのご意見をお願い致します。 (1)画像にalt こちらは一番ノーマルなやり方だと思います。 ただ、altタグはSEOを考えた場合、あまり意味がないと聞きます。 もちろん、アクセシビリティ的には必要ですが。 (2)text-indent:-9999px; こちらは一番流行った?やり方だと思います。 ですが、一部ではスパム扱いされる、と言う方や、 背景にした画像とテキスト表記が同じであれば大丈夫という方もいます。 ホントのところはどうなんでしょう? (3)position:absolute; こちらは(2)と似たやり方で、画面の外にテキストを飛ばしてしまうというやり方。 スパム扱いされるとそれほど聞きませんがどうなんでしょう?
- 締切済み
- HTML
- SEO対策について。H1タグが見あたりません。
質問です。SEO対策でH1タグにホームページの重要ワードを書き込む方法がありますが、現在、ひとまずビルダーで製作したサイトは完成したところで、HTMLソースを見たところ、そのH1タグが見あたらないのです。このH1タグの見つけ方、そして、自分でH1タグを作る方法を教えてください。宜しくお願いします。
- ベストアンサー
- ホームページ作成ソフト
お礼
回答ありがとうございます。 >SEO上効果があるといっても、最近の検索エンジンではやらないよりはマシってな程度ですから、気にする程の事ではないかと思います。 >私的にはテキストであることが便利(*)だと~ なるほど、たしかにおっしゃるとおりですね。 ここに質問投稿するまでは、とにかくSEO的に有利なのかとギラギラ考えていましたが、ふと冷静に、見てくださる方にとって最適な見せ方をと考え方が変わってきました。 見てくださる方の負担にならないことを最優先とし、その後にできる限りのSEO対策を施す方向で考えたいと思います。