web-dev-qa-db-ja.com

ページ内の通常のテキストにSEOに影響を与える可能性のある<pre>タグを使用していますか？

手作業でページをコーディングするとき、私は時々これらの<p>タグをすべて書く必要をスキップして使用したいことがあります：

<pre>
  <h2>Heading written as usual is no problem within a pre</h2>

  <i>First paragraph</i> is here.

  This is the second paragraph, but since I use the pre-tag I don't need to use the p tag to get a space in between the two. 

  Next paragraph etc &hellip;
</pre>

Cssの場合：

pre {
  whitespace: normal

また、通常のテキストと同じフォントがfor<pre>sに設定されている場合、次のように表示されます。

いつものように書かれた見出しは、事前に問題ありません

第一段落 ここにある。

これは2番目の段落ですが、プリタグを使用するため、pタグを使用して2つの間にスペースを入れる必要はありません。

次の段落など…

<pre>を使用して、いくつかの<p>sをこのように入力する手間を省くと、SEOに影響を与える可能性が高いですか？その場合、理由と方法は？

seohtmlcss
2
PetaspeedBeaver

GoogleとBingはどちらもマークアップをランキング要素と見なしません。マークアップを使用してコンテンツを理解し、直接報酬を与えません。これには、スキーマや他のマイクロデータ形式が含まれます。

したがって、<pre>または<p>を使用しても、ランキングの点で現実世界の違いが生じることはありませんが、<pre>を<p>と同じように扱う必要があるとは言えません。一部の電子書籍リーダーやブラウザはこれらを異なる方法でレンダリングする場合がありますが、この方法を怠るのも気にしないでください。

前述のように、異なるバージョンのブラウザーを含むブラウザーは、CSSによって設定されていない場合、異なるレンダリングを行うことができるため、PREのようなハックを使用しないCSSから要素間のギャップが生じるはずです。すべてのデバイスとブラウザーで同じように見えるようにする場合は、CSSを使用します。それが設計された目的です。

ベストプラクティスは、次のようなもので<pre><code>の周りにコンテナを追加することにより、<p>のスタイルを模倣することです。

<!-- HTML -->
<div class="pre">
   <h2>Identical Header</h2>
   <p>This looks identical to PRE</p>
   <p>I have a gap because P and H have margin-bottom</p>
</div>

/* CSS */
.pre {
    whitespace: normal;
    font-size: 1em;
    font-family: 'Same Font As PRE or CODE';
}
.pre h1, .pre h2, .pre h3, .pre h4, .pre h5 {
    margin-bottom: 1.5em;
    font-size: 1.5em
    font-family: inherit;
}
.pre p {
    font-size: inherit;
    font-family: inherit;
    margin-bottom: 1em;
}
2
Simon Hayter

厳密にはSEOの答えではありませんが、コードサンプルは実際に有効なHTMLではないため、レンダリングはブラウザー間（特に大きな2つのChromeとFirefox）で異なる可能性があります。一部のブラウザはpre要素を閉じるbeforeオープニングh2、なぜならpre要素はphrasing content（つまりブロックなし） Hn、p、ulなどのようなレベル要素。

その結果、DOMを使用してコンテンツをトラバースする必要がある場合にも、これは壊れます。

したがって、それは実際にはSEOの問題ではなく、ブラウザのレンダリングの問題であり、このようなコンテンツのマークアップを思いとどまらせる必要があります。

コンテンツを明示的にマークアップして保存したい場合は、マークダウンでコンテンツを書き（「SEのように」）、サイトに（またはワークフローの一部として）マークダウンパーサーを組み込むことができます。または、入力時にHTMLマークアップを自動補完する適切なエディター（またはプラグイン）に投資しますか？

参照：
http://w3c.github.io/html/single-page.html#the-pre-element

1
DocRoot