H1タグに改行の<br>を使う

締切済

質問者：IACSQEKL
質問日時：2014/11/10 22:17
回答数：3件

H1タグに改行の<br>を使うのは、大丈夫でしょうか？
ＳＥＯ的に効果が半減しますか？

携帯サイトなので、ちょっと文字が長いだけで、自動で改行されてしまうので、特定の位置で自分で改行しようと思います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「SEO 効果」に関するQ&A：オールドドメインはSEOに効果があるのか

さらに表示

「ディスプレイモバイル」に関するQ&A： PCモニタが勝手にモバイルPCディスプレイに（至急

「モバイル CS」に関するQ&A：アメブロのモバイル版CSSの変更方法

「br 意味」に関するQ&A： htmlでの /> や <br /> の意味

「Google SEO」に関するQ&A： SEO:Googleのデータベースについて

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： yambejp
回答日時：2014/11/11 16:18

まぁ気になるなら適当にspanでわけてnowrapしてしまえばよいのでは？

- 3
- 件

通報する

No.2

回答者： tkmojo
回答日時：2014/11/11 13:13

h1内で<br>を使う事自体は文法違反ではありません。

SEO効果が落ちるかどうかはGoogleの人間にしかわかりませんが、
普通に考えて「見出しに<br>があるから価値の低いサイトだ」と判断する意味がないので多分大丈夫でしょう。

ただ、自動折り返しの場所を嫌って<br>を入れるのはただの自己満足に過ぎません。
あなたの環境で丁度よく見れたとしても他の方に丁度よく見えるとは限りません。
テキストは環境（マシンやブラウザ）によって見え方が異なるのが普通だからです。

例えば、

下記の文章をあなたの環境に合わせて強制改行したとしましょう
>　携帯サイトなので、ちょっと文字が長いだけで、自動で改行されてしまうので、特定の位置で自分で改行しようと思います。

↓↓↓

携帯サイトなので、ちょっと文字が長いだけで、
自動で改行されてしまうので、特定の位置で
自分で改行しようと思います。

見やすくなった、と思うのはあなただけ。
もう少し横幅が狭い端末で見ている方にはこう見えているかもしれません。

携帯サイトなので、ちょっと文字が長い
だけで、
自動で改行されてしまうので、特定の位
置で
自分で改行しようと思います。

そもそも文章というのは自動折り返しが入って当然なんです。
特に携帯サイトなんだったら色々な端末の事を考慮する必要があり、強制改行は出来るだけ使用しない方がいいでしょう。

- 1
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2014/11/11 09:26

brは、"forced line break"で強制改行のこと。

一つの段落でありながら、行を改めたほうが良い場合に使用します。
<address>
東京都品川区<br>
・・・
</address>
　とか、
　通常は使用しない要素で、段落は<p></p>でマークアップすべきです。
SEOとはSearch Engine Optimizationの略で、本来は検索エンジンにページの内容が適切に分かるようにマークアップすることに由来します。(その結果、検索エンジンは探されているキーワードにそのページが最適だと理解でき、検索結果に反映される---それは結果）
　上の例だと検索エンジンには、著者の連絡先だと理解できるし、<br>がその内部の区切りだと理解できる。

＞携帯サイトなので、ちょっと文字が長いだけで、自動で改行されてしまうので、
　それによって、横スクロールしなくても良いわけですから、問題はないと思うのですが？？

＞ちょっと文字が長いだけで、自動で改行されてしまうので、特定の位置で自分で改行しようと思います。
　率直に読むと、「特定の位置まで改行させずにして、その後の指定位置で改行させる」様に読取れます。かえって不便になるような？？
　どのようなマークアップがよいかは、具体的な見出し項目の内容がわかるとよいのですが・・・

＞携帯サイトなので、
media="handheld"を想定されてのことだと思いますが
http://momdo.s35.xrea.com/web-html-test/spec/CSS …
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　携帯電話と言っても様々な解像度・表示幅のものがあります。あまり固定的に考えないほうが良いのでは？？

- 0
- 件

通報する

このQ&Aに関連する人気のQ&A

「br 意味」に関するQ&A：あした　あさって　ささって　しあさって　ですよね

さらに表示

「ディスプレイモバイル」に関するQ&A：ノートPCの液晶が割れてしまいました。修理費用は？

「Google SEO」に関するQ&A： goo.ブログ検索について

「モバイル CS」に関するQ&A：ＨＴＭＬでページの幅を設定したい。

「SEO 効果」に関するQ&A：リース契約の解約方法ってありますか？

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q見出しを改行させることはしないべきか

<header>
<h1>これが私のサイトタイトル</h1>
<nav>
<ul>
<li>りんご</li>
<li>ごりら
</header>
こんなヘッダーを左カラムとして置いていますがサイトタイトルがボックスの幅より長いため自動的に改行されてしまいます
そこで<br>またはwhite-space:preで以下の２通りの記述をするのは望ましくないとされていたり、悪いことだたりするのでしょうか？
具体的にはサーチエンジンのクロウラーが検索結果の上位に来させないようにしたり・・・
<h1>これが私の<br>サイトタイトル</h1>
または
<h1 style="white-space:pre">
これが私の
サイトタイトル
</h1>
ご回答よろしくお願いします

Aベストアンサー

何かサイトデザイン的な問題で、見出しが改行されるのが不都合なら、CSS等で調整が必要ですが。長い見出し自体に質問者さん自身が特に何も問題が無いと思っているのなら、変な改行タグ（brなど）を入れないで、そのまま平文のままの方がむしろ良いです。

後、「white-space:pre」は全く持ってオススメ出来ませんね。それで見栄えが良くなったと思ってるのは製作者だけで、実際にサイトを利用する人たちにとっては見難いことこの上ないですから。見出しが露骨に本文と関係ない、いわゆる「釣りタイトル」で無いのなら、サーチエンジンの評価が下がる様な事も無いので、何も弄る必要はありません。

つまり…
<h1>これが私のサイトタイトル</h1>
～のままでOK。余計な事はしない方向性で。

他の回答も見る

Q
を使っても無改行にするには

<h1>あいうえお</h1>かきくけこ
とした場合、
あいうえお
かきくけこ
と改行されてしまいますが、これを改行せずに書き込む方法はないでしょうか？スタイルシートを使った方法でも構いませんので、宜しくお願いします。

Aベストアンサー

#3です。
失礼スペルミスです。
<style>

</style>

http://www.tohoho-web.com/css/index.htm

> SEO対策にと、重要なキーワード順に<h1>～<h3>を使いわけたい
下手にやって逆効果にならないように。
デザイン上の問題で、
タイトル：概要（数十文字程度）
とする程度なら問題ないとは思いますが、
ここは<h2>強調</h2>したい、ここも<h1>もっと強調</h>したい……
なんて構文を無視して<h○>乱用するとサーチエンジンスパムだと思われますよ。
見る側も不便だし。
スタイルシート適用しないで見ればわかりますが。
文章中で強調したいなら<em>や<strong>使って下さい。

他の回答も見る

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数（ボックスの内容）に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

他の回答も見る

Qimgタグは何で囲むのが良いか

皆さんはimgタグは何で囲んでいますか？

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>

例えばこういうような時に、何で囲むべきかというのをいつも迷います。

ブロック要素で囲むべきである、というのは何となく認識していますが、ここをdivで囲むのも何か違うような気がするし、
pで囲むのも「段落」と見なせるような画像でないと何となく気持ち悪いです。
最近はaltのある画像は「これは段落だろう」と自分を納得させてpで囲み、
altを空にしているものは囲まずにそのまま置いたりしています。
レイアウト上、ブロック要素が必要になった時にはdivで囲んでみたり…。

私はイメージ的な画像（情報としては必要ない画像や、直前のテキストとかぶっている画像文字等）にはあえてaltは付けずに空にすることが多いので、ちょいちょいこういう事で迷います。

スマートなやり方をご教授ください。

Aベストアンサー

＞「alt="---------"」と入れるくらいなら「alt=""」の方が良いのではないでしょうか？
　そうです。そもそも、文字(内容)を画像に置き換えてしまうのは、感心できない手法ですが、味気ないHRの代わりに画像ラインを入れる手法はかっては行われていました。もしHRの代わりに画像を入れるのでしたら、このように書くべきと言っているのである---画像に置き換えて記述するのは誤りと言うことを言いたいのです。

＞この写真にaltで候補者名を入れてしまうと、画像が見れない環境の人に対しては候補者が2回表示（もしくは読み上げ）されることになります。
　その場合は、
・altをalt=""としておく
・alt="山田太郎の正面からの写真"
　あるいは、alt="本人の写真"
　と画像が表示されない人も画像から得られるはずの情報をいれておく。

　になるでしょうね。

<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<img src="xxxx.jpg" alt="">
</div>
　これは、書きましたが、Validator上はエラーになりませんが、やはり間違いなのです。この場合、ここに仮想的なブロックが存在するとしてDOMを構成しますが、その処理はHTML4以前は決まった解釈が定められていなかったために解釈上差が出てしまう可能性があります。

気が進まないが
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト<br>
<img src="xxxx.jpg" alt="">
</p>
</div>

とか
<div>
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキスト</p>
<p><img src="xxxx.jpg" alt=""></p>
</div>
それは、その画像がどのような段落にあるのかによって判断します。DIVはDIVで目的・用途があります。文法上のエラーを回避するため、単にデザインのためのような使い方は極力避けるほうがよいと思います。それは、突き詰めればHTMLで文書構造を正確にマークアップしすること、最終的にメンテナンスしやすい結果になるからです。

　<p class="figure main">
　　<img src="" width="" height="" alt="麓から見た紅葉の城山">
　</p>
　<p>紅葉も終盤を迎えた先週、子供達を連れて近所の城山にハイキングに言ってきました。</p>
　<p class="figure sub">
　　<img src="" width="" height="" alt="玄関で見送る妻">
　</p>
　<p>
　　妻は、このような山歩きなど、実利がないものには付き合ってくれない。昔は・・
　</p>
このように書かれていると、後で写真を一枚追加したいときに前後を見ればどのようにマークアップすればよいかわかりますし、スタイルシートを書く際も、
*.figure{margin:10px;text-align:center;}
*.figure.sub{float:right;}
*.figure img{padding:5px;border-shadow:10px 10px 10px rgba(0,0,0,0.4);}
とか・・

他の回答も見る

Qcssで「下よせ」ってどうやっていますか？

フロートのレフト、ライトはいいとして、

あるボックス要素内（Ａ）に異なるボックス要素（Ｂ）をいれます。
この（Ｂ）を（Ａ）の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか？

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな？

position: absolute;
bottom: 0px;

他の回答も見る

Qulタグやliタグの中でｂｒタグは使えない？

完成したサイトなのですが…。
Dreamweaverにて開いて一応チェックすると、
「タグbrはur内では使用できません」との表示がでて驚いています。

<li>～</li>だけで自動的になされる改行だと、詰まって見えるのです。
だから、

<ul style="padding-left: 00px;">
<li>～</li></br>
<li>～</li></br>
</ul>

のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか？
どうか、ご存知の方いましたら教えてください。

Aベストアンサー

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。

<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

他の回答も見る

QCSSでh1とその下の文字との行間を詰めたい

h1～h6を指定した場合、そのすぐ下の文字との行間が1文字分空きますよね。
見栄えが良いように、h*のすぐ下の文字との行間を調整したい場合、CSSでは、どのように指定すれば良いでしょうか？
よろしくお願いします。

Aベストアンサー

おそらく，h1，h2，……，h6，p の前後には，既定で 1 行分程度の空きができているはずです。そこで，それらの間の空きをすべて詰めてしまう記述を考えます。
　次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が隣接しても，ぴったりくっついて出てきます（ でくくる場合もありますが，XHTML を使わなければどちらでもかま...続きを読む

他の回答も見る

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか？
<TD>タグや<TR>タグのところでいじくるのですか？

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
＃2の方法ですね。

テーブルごとやセル（<TD>）ごとにサイズを変更するには
スタイルシート（CSS）を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル（<TD>）ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

＃1の方法だとページ内の全てのセル（<TD>）に設定することになります。

スタイルシート（CSS）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

Qillegal string offset

php5.3では動いていたプログラムをphp 5.4 で動かしたらwarning illegal string offsetが出て困っています。以下のプログラムでwarningが出ないようにするにはどのようにコーディングすればよいのでしょうか？

例
$a = array('exists' => 'foo');
if ($a['exists']['non_existent']) {
print 1;
}
print 2;
exit;

Aベストアンサー

isset()を使えばいいと思います

他の回答も見る

Q
、
と
の行間を狭くする方法

お世話になります。
ホームページを作成する場合、見出し<h1>または<h2>の下に<p><div>で本文を記述すると、見出しと本文の間が空いてしまいます。
この間を狭く調整する方法を探しています。
よろしくお願いします。

Aベストアンサー

　No. 1 のご回答のように，これはスタイルシートの範疇ですが，もう少し根本的な方法で考えてみましょう。

　おそらく，h1，h2，p の前後には，既定で 1 行分程度の空きができているはずです。そこで，それらの間の空きをすべて詰めてしまう記述を考えます。
　次の記述を <head>...</head> に加えてみてください。

<style type="text/css">
h1 { margin-top: 0; margin-bottom: 0 }
h2 { margin-top: 0; margin-bottom: 0 }
p { margin-top: 0; margin-bottom: 0 }
</style>

これでこれらの要素が...続きを読む

他の回答も見る

ページトップ