SEOについて（<p><pre>）

質問

HTMLで文章をpとpreのどちらのタグで書こうか迷っています。

１、SEO的には<p>と<pre>どちらで文章を囲う方がよいのでしょうか。
　　どちらも同じでしょうか。
　　（ccsで表示設定は同じにしていますので、<pre>で囲う方が作業が楽です。）

２、その他、この２つに違いはあるでしょうか。

３、ｃｓｓで表示を同じにしたと書きましたが、preで書くと文字幅が広がるようです・・・
　　調べれば方法が見つかる、と思いましたが見つかりませんでした。
　　preで文字幅を元に戻す方法は無いでしょうか。

回答よろしくお願いします。

回答No.1

naokita · ベストアンサー

(1)(2)
pre内には画像が置けませんよ・・・
という事で文章構造（意味）が違いますので、SEO比較にはなりません。
pは文章段落という意味があります。
preは特殊環境でのみ利用しましょう。

(3)
font-family:～～～;　を指定

CSSを知れば、PREだと不便になるでしょう・・・

お礼

font-familyを変えると今までの設定と合わせて、<p>タグと変わらない表示になりました。
有難うございました。
ですが、SEO的に問題があるかもしれないようなので、使用を考えなおしてみようと思います。

補足

画像を、文章構造内に置こうと思わないので大丈夫です。

＞という事で文章構造（意味）が違いますので、SEO比較にはなりません。
どう比較にならないのか教えていただきたいです。

回答No.3

ORUKA1951

SEO(Search Engine Optimization-検索エンジン最適化)の意味を取り違えていませんか？
本来は、文字通り文書構造を正しくマークアップして、検索エンジンにそのページのテーマや内容を正しく伝えられるようにする技術です。その結果--あくまで結果として--そのページの内容が探されているときに、そのページが検索される結果になるのです。
　ある段落--ブロックを、それがその文書にとってどういうものであるかをHTMLでマークアップしていきます。決して、決してどのように表示させたいかでマークアップしてはならないのです。
１、SEO的には<p>と<pre>どちらで文章を囲う方がよいのでしょうか。
　　どちらも同じでしょうか。
　これはそのブロックが何かによって変わります。仕様書を見るとブロック要素には
<!ENTITY % block　　--http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/sgml/dtd.html#block
P:段落
%heading:h1～h6 見出し
%list: ol ulリスト
%preformatted: pre　整形済みテキスト(詩等)
DL:定義リスト
DIV:汎用ブロック(classやidで文書構造を表す)
NOSCRIPT:
BLOCKQUOTE:引用文--ブロックの場合
FORM
HR
TABLE
FIELDSET
ADDRESS
があります。

P要素は『P要素は、1つの段落を表し、P要素自体を含め、ブロックレベル要素を内容とすることはできない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.3.1 )』で普通の段落です。
preは
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
PRE要素は、視覚系ユーザエージェントに対し、囲われているテキストが"整形済"であることを示す。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.3.4 )］より

　このように意味が異なるのですから、「迷うことはないはずです。」

SEOだけでなく、自身にとってもきちんと文書構造をマークアップすることは、極めて重要です。

　さて、それをどのように表示するかですが、下記のサンプルを実際に試してください。
　下記は半角スペース２個を全角スペースに置き換えてありますから、それを半角スペースに戻してください。
<p style="---">
　山のあなたの
　　空遠く
　「幸い」住むと
　　人のいう。
　ああ、われひとと
　　尋(ト)めゆきて
　涙さしぐみ
　　かえりきぬ。
　山のあなたに
　　なお遠く
　「幸い」住むと
　　　人のいう。
</p>

上記のstyle="---"の部分を書き換える。
style="width:20em;white-space:pre;font-family:monospace;font-size:1.2em;"
style="width:20em;font-family:monospace;font-size:1.2em;"
style="width:20em;color:red;white-space:pre;font-family:serif;font-size:1.2em;"
style="width:20em;white-space:nowrap;font-family:monospace;font-size:1.4em;"
style="width:20em;white-space:pre-line;font-family:sans-serif;font-size:1.2em;"

　HTMLさえきちんと書かれていればスタイルシートで好きなように・・・

お礼

回答有難うございました。

補足

＞本来は、文字通り文書構造を正しくマークアップして、検索エン＞ジンにそのページのテーマや内容を正しく伝えられるようにする＞技術です。
私は検索エンジンがどのような仕組みなのか分かりません。ですので、傾向などを知るためにこのような質問をしました。

＞その結果--あくまで結果として--そのページの内容が探されてい＞るときに、そのページが検索される結果になるのです。
その結果の違いにpとpreはどう違ってくるのかが知りたいです。

＞決してどのように表示させたいかでマークアップしてはならないのです。
私は理由をしりたくて質問しているので、理由をなく否定されても困ります。

＞このように意味が異なるのですから、「迷うことはないはずです。」
意味の違いは何となくかもしれませんが理解できているつもりです。
ですが、その意味が上記にもあるように、どう検索エンジンなどに損得などがでるのかが知りたい、分からないので迷っていて質問しています。
質問文が悪いでしょうか。

＞自身にとってもきちんと文書構造をマークアップすることは、極めて重要です。
今私にとって、は重要ではありません。質問文にもあるように、私自信は作業が楽かそうでないかの違いなので、それ以外のマークアップ面は私はどちらでも構いません。

私自信ではなく、私以外の全ての面（ＳＥＯ面（検索エンジンなどにどう影響するのか）や表示面（表示面は解決できたようです。（試したブラウザ以外に通用するかは用検証ですが））など）で、タグの意味自信や理由なくこうするべきではなく、その意味や理由など、何がどういった数値や現象に損得、影響を与えるのか知りたいのです。

回答No.2

naokita

#1です。お礼/補足拝見済み。

１、
文章なら、<p>を使いましょう。
２、
整形済みテキストなら、preでも良いです。

CSSで表面上は同じに見せても、内部では目的や構造が違うって事です。

楽だからというのは、本末転倒・・・SEO云々の話にならないよ！
CSSはSEOにはほぼ無関係であって、
HTMLや文章構造を理解しようとしないなら、内部SEOは諦めろとしか言えない。

勉強するうちに、過去の自分は間違ってたと理解できるでしょう。
「郷に入れば郷に従え」という事もあるし。

preは、ソースコードの表示やBBSのコメント投稿などに利用する場合が多いですから、
Google(SEO)でもその程度の認識としている事でしょう。（←ここは単なる予測ですが）

お礼

回答有難うございます。

＞preは、ソースコードの表示やBBSのコメント投稿などに利用する場合が多いですから、
＞Google(SEO)でもその程度の認識としている事でしょう。（←ここは単なる予測ですが）

私が求めているのは主にこのいった答えです。
「グーグルでpreタグはコンテンツ（文章）として”pに比べて”認識されにくい、だからＳＥＯ面で損をする」ということでよろしいでしょうか。

補足

＞文章なら、<p>を使いましょう。
～
＞CSSで表面上は同じに見せても、内部では目的や構造が違うって事です。
目的が違うからどうなのか（何にどう影響するのか）知りたいのです。

＞楽だからというのは、本末転倒・・・SEO云々の話にならないよ！
CSSはSEOにはほぼ無関係であって、
どう本末転倒なのかわかりません。何故ＳＥＯ云々の話にならないのかわかりません。

＞勉強するうちに、過去の自分は間違ってたと理解できるでしょう。
「郷に入れば郷に従え」という事もあるし。
郷に従う理由は円滑に事を運ぶ、波を建てないためですよね。この場合の郷に入らないとどうなるのかが知りないのです。