
No.3ベストアンサー
- 回答日時:
<h1></h1>は必ずしも最初に登場する必要はありませんが、最初のほうに存在したほうが良いです。
<h1></h1>は基本的に最も大きく表示されますが、それはブラウザが本来持っているスタイルシートによるものなので、スタイルシートを上書きしたやればよい。
>トップ画像の上に文字があるようなサイトのことなのですが
テキストではなく、画像でタイトルを表示したいときですね。
状況によっていくつかあります。
A(<h1></h1>にテキストを入れない場合・・)
見出しを画像で行う場合は<img src="URL" width="num" height="num" alt="***について" >のように、alt(代替文字)で指定したので良いでしょう。代替文字もSEにはかかるようです。私の作成しているページは、googleの検索結果に<h1></h1>ないのimgのaltを、ページタイトルとして示してくれています。(画像を読み込まないLynxなどのブラウザ、読み上げブラウザ、検索エンジンは代替文字を利用する)
しかし、すべてのSEがそうとは限らないので
B(<h1></h1>にテキストを入れて、ブラウザからは隠す方法・・)
この方法を取ることもあります。
<h1 class="screen_hidden">タイトル</h1>
<h1><img src="URL" width="num" height="num" alt="タイトル" ></h1>
こうしておいてスタイルシートで消してしまう。
下記にサンプルを示しておきます。
sample.htmlとsample.css(いずれもShift_JISで保存すること)および、タイトル画像(400×100)を同じフォルダーに入れて、sample.htmlを見てください。なお、Document Typeは4.01 Strictです。
sample.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" media="screen" href="./sample.css">
</head>
<body>
<h1 id="TOP"><img src="./sample.gif" width="400" height="100" alt="サンプル"></h1>
<p>
見出しを画像で行う場合は<img src="URL" width="num" height="num" alt="***について" >のように、alt(代替文字)で指定したので良いでしょう。
</p>
<p>
代替文字もSEにはかかるようです。私の作成しているページは、googleの検索結果に<h1></h1>内のimgのaltを、ページタイトルとして示してくれています。(画像を読み込まないLynxなどのブラウザ、読み上げブラウザ、検索エンジンはalt(代替文字)を利用する)
</p>
<h1 class="screen_hidden">テキストを入れて、ブラウザからは隠す方法</h1>
<h1><img src="./sample.gif" width="400" height="100" alt="テキストを入れて、ブラウザからは隠す方法"></h1>
<p>
こちらは、スタイルシートで消してしまう方法。あまり良い方法とは思いません。
</p>
<hr>
<p class="navi"><a href="#TOP">TOP</a></p>
<hr>
</body>
</html>
=====================
sample.css
@charset "Shift_JIS";
/* スタイルシート */
body{
background-color: rgb(255,255,200);
color: black;
line-height: 1.6em;
}
p{
text-indent: 1em;
margin: 0.4em 20%;
}
p.navi{ text-indent: 0px; text-align: center;}
h1 {font-size: 200%;text-align: center;}
h1.screen_hidden{ display: none;}
先の説明に書きましたようにdisplay:noneであっても構わないのです。しかし、通常は
No.2
- 回答日時:
headerとheadは異なります。
HTTPやMailなどの多くのやり取りでは、必ずHEADER部分と変体部分に分かれています。
HEADERを送出後、空行をおいて、本体データが始まる。
HTMLに置いて、<HEAD>要素前に、文字を置くことは現在では行われていません。かってはブラウザに文字コードを認識させる裏技として使われていたことはありますが、HTTPの仕様からも否定されるべきでしょう。
それよりも文字コードの指定前に、文字を入れることは避けるべきとされています。
たとえば、HTML4.01Strictの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
と文字コードを示すより前に
<title>タイトル</title>
とはしない。
SEOですが・・・・SEO対策ではない。武士の侍が馬から落ちて落馬して・・
考え方が間違っています。
<h1></h1>要素は、文書の最初に登場する{見出し}要素です。いきなり<h2></h2>が現れてはおかしい。
ましてや、本文と関係ない<h1>第一レベルの見出し</h1>が存在するのは、SEに弾かれる可能性があるということです。
SEOのために、小細工は逆効果になります。
最高のSEOは、そもそものHTMLが、文書構造としてしっかりしているかだけです。すなわち適切にマークアップされているか?
<h1>の次には<h2>が登場するとか、<h1>の次に<h3>はおかしい
<h>には、続く文章の内容が要約されているか
表で無いのに<table>でマークアップされていないか
それをCSSで、display:noneとしたってまったく構いませんが、一切の装飾なしで文書がきちんとマークアップされているか。
SEOは目的ではなく、結果です。
この回答への補足
ご回答ありがとうございます。
質問の仕方が悪くて申し訳ありません。。。
詳しくは、トップ画像の上に文字があるようなサイトのことなのですが。。。、これを入れると検索にひっかかりやすい、ということを聞いたのですが、これをh1で入れる場合、文字が大きすぎるので、
h1、h2は理解しているのですが、文字の大きさを小さくして、h1にしたい場合などは、どのようなされているのでしょうか?
No.1
- 回答日時:
文字化けの対策として、文字を入れることはあります。
ただしEUC-JPで書かれているという条件付きになります。簡単に言うと、Shift-JISにはありえないコードを持つ文字を書く事によって、ブラウザにShift-JISでないと判断させます。
龜 や 龠 などがよく使われているようです。
H1のCSSがSEOスパムかどうかですが、諸説あるようで、私も判断がつきかねます。
ページのタイトルに画像を使用したいときなど、H1タグがなくなってしまうのは問題なので、そのような処理をします。
↑ある意味SEO対策ということになりますね。
この回答への補足
ご回答ありがとうございます。
こちら↓について詳しく教えていただけませんでしょうか?
また、参考サイトなどあれば教えて頂ければうれしいです!
>ページのタイトルに画像を使用したいときなど、H1タグがなくなってしまうのは問題なので、そのような処理をします。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
縦長広告をウェブページの右側...
-
htmlで画像を2個ずつ並べていき...
-
zoomについて質問です。
-
floatさせたdtの内容が多い場合...
-
【HTML/CSS】ボタンの枠が伸び...
-
ロールオーバーで画像が変わら...
-
HTMLでボタンを横に2つ並べる方法
-
含む含まないという概念自体の...
-
htmlのolやulなどlistにtitleや...
-
画像にリンクを張ると画像がず...
-
【ヒトの神秘】美男美女から何...
-
header部分とnaviの位置の調整...
-
改行ほどは行かないけど、若干...
-
webのナビメニューで、どうして...
-
質問1.
-
指定したborderの一部が表示さ...
-
質問です。 新規登録ボタンが全...
-
ホームページ作成ソフトKompoZe...
-
複数の画像にメニュー表示させたい
-
番号付きリスト(<Ol><Li>・・...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
FC2カートのテンプレートでの商...
-
htmlで画像を2個ずつ並べていき...
-
並べた画像ファイルに不要なス...
-
フレームを使わずに右側だけを...
-
table で画像をピッタリとくっ...
-
XML画像データををHTMLで簡単に...
-
画像の横にテキスト
-
ポップアップウィンドウのサイ...
-
HTMLのIMAGEに。。
-
画像を固定したい
-
【HTML・CSSについて】Web初心...
-
CSS実装されない
-
htmlについて
-
flex の各子要素を横幅 100% に...
-
UDP通信を使うチャットプログラ...
-
img_cmnフォルダって何ですか?
-
FC2ショッピングカートのカスタ...
-
画像をクリックして元に戻すには
おすすめ情報