web-dev-qa-db-fra.com

L'utilisation de la balise <pre> pour du texte ordinaire dans une page est-elle susceptible d'avoir un impact sur le référencement?

Lors du codage manuel des pages, je souhaite parfois éviter de devoir écrire toutes ces balises <p> et utiliser:

<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>

Lequel si css:

pre {
  whitespace: normal

et la même police que le texte normal est définie pour<pre>s rendra quelque chose comme ceci:

Titre écrit comme d'habitude n'est pas un problème dans un pré

Premier paragraphe est là.

Ceci est le deuxième paragraphe, mais comme j'utilise le pré-tag, je n'ai pas besoin d'utiliser le tag p pour obtenir un espace entre les deux.

Paragraphe suivant etc…

Est-ce que l'utilisation du <pre> pour économiser sur la saisie de <p>s de cette manière est susceptible d'affecter le référencement? Si oui, pourquoi et comment?

seohtmlcss
2
PetaspeedBeaver

Google et Bing ne considèrent pas le balisage comme un facteur de classement. Ils utilisent le balisage pour comprendre le contenu et non pour le récompenser directement. Cela inclut Schema et d'autres formats de microdonnées.

Donc, utiliser <pre> ou <p> ne fera aucune différence dans le monde réel en termes de classement, mais cela ne veut pas dire que vous devriez traiter <pre> de la même façon que <p> parce que Certains lecteurs et navigateurs électroniques peuvent rendre ces résultats différemment, peu importe que ce soit aussi paresseux de le faire de cette façon.

Votre espace entre les éléments doit provenir du CSS n'utilisant pas un hack comme PRE, car, comme mentionné, les navigateurs incluant différentes versions de ces navigateurs peuvent les afficher différemment s'ils ne sont pas définis par le CSS. Si vous voulez que tout soit identique sur tous les appareils et tous les navigateurs, utilisez le CSS, c'est pour cela qu'il a été conçu.

La meilleure pratique serait d'imiter le style de <pre><code> en ajoutant un conteneur autour du <p> avec quelque chose comme:

<!-- 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

Ce n’est pas strictement une réponse SEO, mais votre exemple de code n’est pas un code HTML valide. Le rendu risque donc de différer selon les navigateurs (notamment entre les deux grands: Chrome et Firefox). Certains navigateurs vont fermer l’élément pre avant l’ouverture h2, car les éléments pre ne peuvent contenir que contenu de la formulation (c'est-à-dire aucun élément de niveau bloc tel que Hn, p, ul, etc.).

Par conséquent, cela se briserait également si vous deviez parcourir votre contenu à l'aide du DOM.

Donc, ce n'est pas vraiment un problème de référencement, mais un problème de rendu de navigateur qui devrait vous dissuader de baliser votre contenu de cette façon.

Si vous voulez économiser sur le marquage explicite de votre contenu, écrivez peut-être votre contenu en markdown ("comme ici chez SE") et intégrez un analyseur de markdown dans votre site (ou dans le cadre de votre flux de travail). Ou investir dans un éditeur (ou des plugins) corrects qui complète automatiquement votre balise HTML au fur et à mesure que vous tapez?

Référence:
http://w3c.github.io/html/single-page.html#the-pre-element

1
DocRoot