Pourquoi apprendre le HTML va vous faire gagner de l'argent

Pourquoi apprendre le HTML va vous faire gagner de l'argent

Pourquoi apprendre l'HTML est nécessaire ?

Lorsque vous êtes e-commerçant et que que vous avez tout à faire par vous même et que vous ne connaissez pas un seul langage de programmation, apprenez au moins celui-là, le HTML.

Ce que je vais dire n’a pas de valeur d’audit SEO et je ne suis pas référenceur, bien que la finalité de l’article est d’avoir un meilleur positionnement. Par ailleurs, je précise que les quelques audits que j’ai pu avoir par-ci par-là ne m’entonnait jamais un nettoyage du code comme proposé ci-dessous.

Vous avez à faire des pages produits, des pages de contenu, des landing pages.

Qu’est-ce qu’il se passe lorsque vous utilisez l’éditeur de texte?

L’éditeur vous ajoute une tonne de code inutile. Parfois douteux. Les pages sont lourdes. Et ce qui devrait prendre un seul bloc de code clair et visible (pour un paragraphe par exemple), va contenir un bloc principal, des sous-bloc de code.

Et si vous supprimer le texte avec l’éditeur, souvent, pas toujours, l’éditeur va garder ces sous-blocs.

Pire, si vous ajoutez de la couleur, changer la taille du texte, modifier les marges, vous allez alourdir encore plus les pages en ajoutant des styles sur chacune de vos balises HTML.

Un exemple (oui, le texte est en grec, et oui, la page contient que des H1) :


<div class="gf_col-md-12 gf_column" id="c-1493544806452" data-id="1493544806452">
	<div data-label="Heading" id="e-1493544809610" class="element-wrap" data-icon="eicon-headphones" data-id="1493544809610">
		<div class="elm text-edit gf-elm-center">
			<h1 style="font-size: 2.30769em; font-family: Roboto; color: rgb(45, 45, 45);"><font face="Roboto Condensed, sans-serif" color="#000000"><span style="font-size: 47px;"><b>ΤΙ ΕΙΝΑΙ ΤΟ</b></span></font></h1></div>
	</div>
	<div data-label="Heading" id="e-1493544823976" class="element-wrap" data-icon="eicon-headphones" data-id="1493544823976">
		<div class="elm text-edit gf-elm-center">
			<h1><font face="Roboto Condensed, sans-serif" color="#33cccc"><span style="font-size: 47px; letter-spacing: normal;"><b>MADE BY YOU?</b></span></font></h1></div>
	</div>
	<div data-label="Row" id="r-1493544884408" class="gf_row" data-icon="eicon-columns" data-id="1493544884408">
		<div class="gf_col-md-12 gf_column" id="c-1493544884334" data-id="1493544884334">
			<div data-label="Text Block" id="e-1493544899027" class="element-wrap" data-icon="eicon-animation-text" data-id="1493544899027">
				<div class="elm text-edit">
					<p></p>
					<div style="text-align: center;">
						<p>
							<font class="c5">Έχετε ποτε σκεφτεί για πόσα πράγματα είμαστε ικανοί στη ζωή μας;</font>
						</p>
						<p>
							<font class="O4"><b>Έχετε σκεφτεί ποτέ ότι είμαστε ικανοί να δημιουργήσουμε τα πάντα, αρκεί να έχουμε είτε την γνώση είτε την κατάλληλη καθοδήγηση; Ποιά γυναίκα δεν θα ήθελε να είναι απόλυτα βέβαιη για την ποιότητα των καλλυντικών που χρησιμοποιεί στην επιδερμίδα της;</b> </font>
						</p>
						<p>
							<font class="e7">Ίσως το ονειρό σας να ήταν να παρασκευάσετε το καλλυντικό σας, σπίτι σας, μόνες σας, χρησιμοποιώντας φρέσκα και αγνά συστατικά που όλοι έχουμε στα σπίτια μας, αλλα δεν ξέρουμε καν τις ευεργετικές δράσεις τους στην επιδερμίδα μας.</font>
						</p>
						<p><b><font class="h6">Τσάι, ζάχαρη, μαύρη σοκολάτα, ακτινίδιο, αβοκάντο, βανίλια και άλλα είναι λίγα απο τα πολλά συστατικά που δεν γνωρίζουμε τις ευεργετικές ιδιότητές τους στην επιδερμίδα μας. Σε μια εποχή γεμάτη από υποχρεώσεις, προβλήματα, ελάχιστο προσωπικό χρόνο, ξεχάσαμε το πιο σημαντικό στοιχείο-συναίσθημα της ζωής.</font></b></p>
						<p></p>
						<p></p>
						<p>
							<font color="#000000">
								<font class="N4"><span style="font-size: 16px;"><br></span></font><b><font class="b7">ΤΗ ΔΗΜΙΟΥΡΓΙΑ!</font></b></font>
						</p>
						<p></p>
						<p></p>
					</div>
					<div style="text-align: center;"><br></div>
					<p></p>
					<p></p>
					<p></p>
				</div>
			</div>
		</div>
	</div>
</div>

Le code vient d’une boutique Shopify, l'agence m’a demandé du convertir ces textes pour les mettre sur PrestaShop.

Les pages sont bien plus complète, mais au final, ce code affiche un titre avec un paragraphe.

On constate qu’il y a des balises id, des data-id, data-icon, etc...

Quand on fait un rapport nombre de lettres / code, on obtient un rapport complètement dingue. Et même si le contenu est assez spécifique, même avec une recherche de ces pages en anglais, les pages ne sont pas positionné sur Google (au moins sur les 5 premières).

Bref, une vraie catastrophe. Quand je pense au nombre d’heures de travail qu’il a fallu écrire toutes ces pages, faire les traductions, trouver les images, etc... Finalement, j’ai plutôt l'impression d’un gâchis, plutôt qu’un d’un travaille bien accompli.

Et si le commerçant avait eu des bases en HTML?

Il aurait probablement fait un code comme celui-là:


<div class="center">
	<h1>ΤΙ ΕΙΝΑΙ ΤΟ</h1>
	<h2>MADE BY YOU?</h2>
	<p>Έχετε ποτε σκεφτεί για πόσα πράγματα είμαστε ικανοί στη ζωή μας;</p>
	<p>Έχετε σκεφτεί ποτέ ότι είμαστε ικανοί να δημιουργήσουμε τα πάντα, αρκεί να έχουμε είτε την γνώση είτε την κατάλληλη καθοδήγηση; Ποιά γυναίκα δεν θα ήθελε να είναι απόλυτα βέβαιη για την ποιότητα των καλλυντικών που χρησιμοποιεί στην επιδερμίδα της;</p>
	<p>Ίσως το ονειρό σας να ήταν να παρασκευάσετε το καλλυντικό σας, σπίτι σας, μόνες σας, χρησιμοποιώντας φρέσκα και αγνά συστατικά που όλοι έχουμε στα σπίτια μας, αλλα δεν ξέρουμε καν τις ευεργετικές δράσεις τους στην επιδερμίδα μας.</p>
	<p>Τσάι, ζάχαρη, μαύρη σοκολάτα, ακτινίδιο, αβοκάντο, βανίλια και άλλα είναι λίγα απο τα πολλά συστατικά που δεν γνωρίζουμε τις ευεργετικές ιδιότητές τους στην επιδερμίδα μας. Σε μια εποχή γεμάτη από υποχρεώσεις, προβλήματα, ελάχιστο προσωπικό χρόνο, ξεχάσαμε το πιο σημαντικό στοιχείο-συναίσθημα της ζωής.</p>
	<p><span class="class>">ΤΗ ΔΗΜΙΟΥΡΓΙΑ!</span></p>
<div>

Vous voyez un peu la différence. L’article contenait 2703 caractères. Avec un habillement HTML minimal, on arrive à 982 caractères. Bien, pour un référencement sur Google, bien c’est vachement mieux.

Vous voulez avoir une chance d’être référencé sur Google?

Cleanner votre code un max. Pareil pour les descriptions de vos fiches produits. Il y a actuellement dans vos pages sûrement du code HTML qui ne sert à rien.

Avec votre éditeur de texte:

  • N’ajoutez pas de couleur
  • Ne changer pas la taille de police

Tout le formatage de texte devrait se trouver dans le CSS de votre thème. Pas besoin d'en ajouter plus ! En ayant tout dans votre CSS, vous êtes certain d’avoir le même formatage de texte sur toutes vos pages. Ceci qui donne un sentiment de continuité du design lorsqu’on navigue de page en page. Lorsque les titres sont tous de formes différentes, avec des écarts et des marges différentes, ça donne clairement un sentiment de site un peu brouillon.

L'ennemie de vos pages

Mais pourquoi avoir besoin de mettre un h1 dans une description? Le H1 sera déjà utilisé dans vos pages pour placer le nom de produit ou le nom de la catégorie. 

Du coup, vu que ça traîne ici, on retrouve souvent plusieurs H1 sur la même page. 

Bref, ça détruit le potentiel SEO de votre boutique, c'est clairement un ennemi, bien camouflé dans l'éditeur de texte, sur lequel on ne devrait jamais cliquer.

Une solution

Une fonction magique est incluse dans l'éditeur de texte (TinyMCE) utilisé par PrestaShop. Et fait, PrestaShop désactive plein de fonction de cet éditeur. Probablement pour rendre plus user-friandly l'interface et ne pas avoir trop de fonction dans l'éditeur de texte.

Bref, cette fonction magique sert à nettoyer le code HTML... <au-to-ma-ti-que-ment> ! Cool !

Pour ça faut overrider un bout de code JS. Je vous propose ici un module qui le fait.