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

質問

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

回答No.1

4017B · ベストアンサー

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

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

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

お礼

朝のOKwave民のクオリティ・・・

回答No.3

神崎 渉瑠（@taloo）

デザイン的に改行させたいのなら、brよりもspanの方が良いです。
brは何らかの区切り（文の区切りや、住所の区切りなど）を示します。

<h1><span style="display:block">これが私の</span><span>サイトタイトル</span></h1>

<wbr>というのがありますが、日本語ではOperaしか対応していないようです。
（wbrタグを使う為の条件があるのかもしれませんが。今後OperaのレンダリングエンジンがWebkitになるので、wbrが効かなくなる可能性もあります。）

<h1>これが私の<wbr>サイトタイトル</h1>

ただ、brとwbrの意味関係がよくわかりません。
http://www.w3.org/TR/2012/CR-html5-20121217/text-level-semantics.html#the-wbr-element
例を見ると、私の使い方（英単語の区切り、日本語の言葉／節／詞の区切り、禁則処理）と同じように思えるのですが。。。

適切な位置で改行させた方が、私はかっこいいとおもいますけどね。デザイナーならこれくらいのこだわりがあっても、むしろ当然だと思います。
（添付画像はOKWaveサイトにあった広告バナースクリーンショットを改変しました）

ただし、これがSEOに対してどのような影響があるかはわかりません。
SEO会社なら調査されているかもしれませんが、
おそらく同程度のSEOを施したサイトを100個くらい作って、<span>や<wbr>あり、なしで半分ずつにして統計を取るくらいの事をしないと、問題ないか、デザインを諦めるべきか、というのはわからないと思います。
相当な作業になると思いますので、無料で聞くのは無理じゃないでしょうか。
ともあれ情報商材は詐欺も多いようですのでご注意下さい。

お礼

少し前にベストアンサーを決めてしまいましたが、早く見れていればこちらにしたかったと思います、ご回答ありがとうございました

display:blockは<h1>もすでにブロックレベルだったので思いつきませんでした
試してみようと思います

ありがとうございました

回答No.2

ORUKA1951

質問のタイトルと、書かれたソースが一致しません。
＞見出しを改行させることはしないべきか
　とっても難しい日本語です。「見出しは非改行であるべきか？」、改行させないほうが良いのか？？と読み取れます。
　それでいて、
＞以下の２通りの記述をするのは
　なのに、
・サーチエンジンのクロウラーが検索結果の上位に来させないようにしたり・・・
・<h1>これが私の<br>サイトタイトル</h1>
・<h1 style="white-space:pre">
　と三つの案が出されていたり・・

ひょっとして、指定された位置以外で改行させたくない？？ということ？

HTML5ではBRは
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The br element represents a line break.
br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.6 Text-level semantics — HTML5( http://www.w3.org/TR/2012/CR-html5-20121217/text-level-semantics.html#the-br-element )］より
　「brは改行を意味し、改行自体がその段落の内容であるときのみ使う」と言う事です。

<h1>これが私の<br>サイトタイトル</h1>
　は改行自体が<h1></h1>の内容として意味があるならまったく構いませんが、常に改行されてしまいます。

<h1 style="white-space:pre">
これが私の
サイトタイトル
</h1>
　この場合は、HTML的には一続きの内容です。(半角スペースや改行はHTMLでは空白文字で複数あるときを含め、単語境界としてみなされます。よって、このHTML自体は特に問題はないでしょう。それをスタイルシートで「整形済み」と表現することとはまったく別問題で、スタイルシートは意味的に考えませんから・・

ただ、文書構造上で内容的に異なるのでしたら
<heder>
　<hgroup>
　　<h1 style="width3em">山歩き</h1>
　　<h2 style="width6em">富士山に登る</h2>
　</hgroup>
・・・
として、
header h1{float:left;}
header hgroup:after{content:"";display:block;clear:left;}
とか・・

結論から言うと、内容が分からないので、どうしたらよいかがアドバイスできない。

補足

なんなんですかね、こういう気持ち悪い人は・・・
日本語がわからないならこんなとこで回答しなくていいですよ