
HTMLで文章をpとpreのどちらのタグで書こうか迷っています。
1、SEO的には<p>と<pre>どちらで文章を囲う方がよいのでしょうか。
どちらも同じでしょうか。
(ccsで表示設定は同じにしていますので、<pre>で囲う方が作業が楽です。)
2、その他、この2つに違いはあるでしょうか。
3、cssで表示を同じにしたと書きましたが、preで書くと文字幅が広がるようです・・・
調べれば方法が見つかる、と思いましたが見つかりませんでした。
preで文字幅を元に戻す方法は無いでしょうか。
回答よろしくお願いします。
No.1ベストアンサー
- 回答日時:
(1)(2)
pre内には画像が置けませんよ・・・
という事で文章構造(意味)が違いますので、SEO比較にはなりません。
pは文章段落という意味があります。
preは特殊環境でのみ利用しましょう。
(3)
font-family:~~~; を指定
CSSを知れば、PREだと不便になるでしょう・・・
この回答への補足
画像を、文章構造内に置こうと思わないので大丈夫です。
>という事で文章構造(意味)が違いますので、SEO比較にはなりません。
どう比較にならないのか教えていただきたいです。
font-familyを変えると今までの設定と合わせて、<p>タグと変わらない表示になりました。
有難うございました。
ですが、SEO的に問題があるかもしれないようなので、使用を考えなおしてみようと思います。
No.3
- 回答日時:
SEO(Search Engine Optimization-検索エンジン最適化)の意味を取り違えていませんか?
本来は、文字通り文書構造を正しくマークアップして、検索エンジンにそのページのテーマや内容を正しく伝えられるようにする技術です。その結果--あくまで結果として--そのページの内容が探されているときに、そのページが検索される結果になるのです。
ある段落--ブロックを、それがその文書にとってどういうものであるかをHTMLでマークアップしていきます。決して、決してどのように表示させたいかでマークアップしてはならないのです。
1、SEO的には<p>と<pre>どちらで文章を囲う方がよいのでしょうか。
どちらも同じでしょうか。
これはそのブロックが何かによって変わります。仕様書を見るとブロック要素には
<!ENTITY % block --http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
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-html4 … )』で普通の段落です。
preは
【引用】____________ここから
PRE要素は、視覚系ユーザエージェントに対し、囲われているテキストが"整形済"であることを示す。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
このように意味が異なるのですから、「迷うことはないはずです。」
SEOだけでなく、自身にとってもきちんと文書構造をマークアップすることは、極めて重要です。
さて、それをどのように表示するかですが、下記のサンプルを実際に試してください。
下記は半角スペース2個を全角スペースに置き換えてありますから、それを半角スペースに戻してください。
<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はどう違ってくるのかが知りたいです。
>決してどのように表示させたいかでマークアップしてはならないのです。
私は理由をしりたくて質問しているので、理由をなく否定されても困ります。
>このように意味が異なるのですから、「迷うことはないはずです。」
意味の違いは何となくかもしれませんが理解できているつもりです。
ですが、その意味が上記にもあるように、どう検索エンジンなどに損得などがでるのかが知りたい、分からないので迷っていて質問しています。
質問文が悪いでしょうか。
>自身にとってもきちんと文書構造をマークアップすることは、極めて重要です。
今私にとって、は重要ではありません。質問文にもあるように、私自信は作業が楽かそうでないかの違いなので、それ以外のマークアップ面は私はどちらでも構いません。
私自信ではなく、私以外の全ての面(SEO面(検索エンジンなどにどう影響するのか)や表示面(表示面は解決できたようです。(試したブラウザ以外に通用するかは用検証ですが))など)で、タグの意味自信や理由なくこうするべきではなく、その意味や理由など、何がどういった数値や現象に損得、影響を与えるのか知りたいのです。
No.2
- 回答日時:
#1です。
お礼/補足拝見済み。1、
文章なら、<p>を使いましょう。
2、
整形済みテキストなら、preでも良いです。
CSSで表面上は同じに見せても、内部では目的や構造が違うって事です。
楽だからというのは、本末転倒・・・SEO云々の話にならないよ!
CSSはSEOにはほぼ無関係であって、
HTMLや文章構造を理解しようとしないなら、内部SEOは諦めろとしか言えない。
勉強するうちに、過去の自分は間違ってたと理解できるでしょう。
「郷に入れば郷に従え」という事もあるし。
preは、ソースコードの表示やBBSのコメント投稿などに利用する場合が多いですから、
Google(SEO)でもその程度の認識としている事でしょう。(←ここは単なる予測ですが)
この回答への補足
>文章なら、<p>を使いましょう。
~
>CSSで表面上は同じに見せても、内部では目的や構造が違うって事です。
目的が違うからどうなのか(何にどう影響するのか)知りたいのです。
>楽だからというのは、本末転倒・・・SEO云々の話にならないよ!
CSSはSEOにはほぼ無関係であって、
どう本末転倒なのかわかりません。何故SEO云々の話にならないのかわかりません。
>勉強するうちに、過去の自分は間違ってたと理解できるでしょう。
「郷に入れば郷に従え」という事もあるし。
郷に従う理由は円滑に事を運ぶ、波を建てないためですよね。この場合の郷に入らないとどうなるのかが知りないのです。
回答有難うございます。
>preは、ソースコードの表示やBBSのコメント投稿などに利用する場合が多いですから、
>Google(SEO)でもその程度の認識としている事でしょう。(←ここは単なる予測ですが)
私が求めているのは主にこのいった答えです。
「グーグルでpreタグはコンテンツ(文章)として”pに比べて”認識されにくい、だからSEO面で損をする」ということでよろしいでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- TOEFL・TOEIC・英語検定 英文法(他動詞・自動詞の解釈)you pre-register online 1 2023/03/09 00:18
- その他(インターネット接続・インフラ) DELLのPCにPre-Boot System Performance Checkの表示が出てしまう 1 2023/04/18 11:22
- PHP ECCUBE4のページ管理でPHPを実行させたい 1 2023/04/06 11:42
- 英語 Pre-existing periapical pathology, when the apices 1 2023/04/27 22:27
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- その他(ネットショッピング・通販・ECサイト) コカ・コーラ通販の商品内容の詳細が分からない。 1 2022/08/18 01:02
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- HTML・CSS HPに文章で改行はすべてBRタグとかで改行しなきゃだめなのですか?改行が活きたまま書く方法ないの? 1 2022/12/03 21:00
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/06/15 14:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
スタイルシートなのですが、(i...
-
pxからemへの変換に関して
-
スタイルシートで指定したアン...
-
CSSを一部無効にしたい
-
文字の位置、上下のマージンが...
-
テーブル内のフォントの指定は...
-
CSSでボックス幅を文字列に合わ...
-
h1タグのパンくずリストへの設置
-
<input type="file"> の幅
-
全角半角含めて等幅で表示したい
-
テーブルの中のフォントサイズ...
-
テキストファイルの行を指定し...
-
htaコードですが、IE6に対応さ...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
cssファイルの名称付け
-
教えてください。
-
VBAで印刷ページ最終行にページ...
-
Excel VBAで文字列の可視長を得...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
文字の位置、上下のマージンが...
-
Excel VBA メール作成について ...
-
background-color: #ddd;の意味...
-
Format 関数 表示書式指定文字...
-
リンク文字
-
Excel VBA メール作成について ...
-
テキストエリア内の文字の装飾
-
HTMLで特定の文字だけ色を変え...
-
全角半角含めて等幅で表示したい
-
<pre>にフォントを・・・。
-
fontサイズ指定の ”-(マイナ...
-
htaコードですが、IE6に対応さ...
-
jquery.validationEngine.jsカ...
-
特定の文字のみcssを適用するに...
-
CSSを一部無効にしたい
-
CSSのid名class名の重複回避方...
-
テキストボックス途中で切れて...
-
フォームのスタイルについて教...
-
CSSで14px/1.4の部分の記述は正...
おすすめ情報