Vous êtes ici : Miss SEO Girl » Boite à Outils » Améliorez votre référencement et votre design avec HTML & CSS

Améliorez votre référencement et votre design avec HTML & CSS

Posté le par

Bonjour à tous ! Cela doit faire des mois que je vous parle de mon envie d’apprendre l’HTML et le CSS. Et voilà, l’heure a sonné ! Avec l’article d’aujourd’hui, j’inaugure la création d’une nouvelle catégorie sur le blog : HTML/CSS. Je sais, pas très original comme nom : ) J’espère que le sujet intéresse beaucoup d’entre vous et que vous serez nombreux à suivre ce nouveau défi que je me suis lancé.

Pour que ça soit clair dès le début, mes notions dans ces deux langages sont vraiment minimalistes. Alors oui, je vais commencer par mettre les bases, et petit à petit, avec l’aide des spécialistes, on rentrera dans des sujets un peu plus complexes. C’est donc une catégorie qui part de zéro. C’est pour les débutants. Les initiés ne vont rien apprendre, mais attention, vous êtes les bienvenus, car je compte beaucoup sur vous pour vos conseils et vos astuces.

Il y a un peu plus d’un mois, j’étais en train de chercher un livre, un dvd, ou tout autre support pour commencer mon apprentissage. Je suis tombée sur cette petite formation d’initiation que j’ai trouvée vraiment géniale pour commencer et que j’ai envie de partager avec vous ! De plus, Marie-Eve vous offre 3 accès gratuits pour pouvoir vous initier aux deux langages (aux plus chanceux d’entre vous, car le tirage c’est fait avec random) ! Explications en fin d’article ! 🙂

Tout d’abord, pourquoi je souhaite apprendre les deux langages HTML et CSS

Pour avoir un code HTML propre

Vous le savez, actuellement je suis assistante-chef de projet en agence web, mais mon activité principale reste le SEO. Et malgré ce que l’on peut penser, même les SEO ont besoin de maitriser l’HTML. À ce sujet je vous invite à lire l’article de Daniel Roch 🙂 Un référenceur doit-il savoir coder ?.

Pour le moment, j’ai de la chance, mon collègue développeur maitrise le HTML à merveille et réalise tout ce que je lui demande en matière de « SEO technique ». Mais il faut reconnaitre, cela met le référenceur, dans cet exemple, moi 🙂 , dans une situation de dépendance vis-à-vis d’une autre personne. Cette dépendance je ne l’apprécie pas forcement.

Attention, je ne veux pas devenir intégrateur web ou encore développeur, je souhaite juste maitriser le HTML pour pouvoir gérer mon SEO de A à Z et donc avoir un code propre pour monsieur Google et les autres 🙂 et pouvoir réaliser les modifications dont j’ai envie sans avoir peur de tout casser!

Pour avoir un design stylé 🙂

J’ai créé mon blog il y a un an et deux mois (presque). Pour tout le CSS qui est présent sur mon blog, j’ai fait appel à notre spécialiste CSS. Encore une fois, dépendante des compétences d’un autre 🙂 Brrr… je n’aime pas ça !

En plus, j’ai plein d’idées pour faire évoluer mon blog, que je ne peux malheureusement pas mettre en place. Cela me frustre beaucoup 🙂 Alors, je me donne le temps pour apprendre le CSS et pouvoir gérer le style de mon blog comme une grande !

Bref, je suis sure que je pourrais trouver d’autres raisons valables, mais ce n’est pas l’objet de l’article ! Quelle bavarde 🙂

Et la formation HTML/CSS ?

Bon, j’ai assez parlé de moi, passons maintenant à cette formation initiatique à l’HTML et au CSS, créée par Marie-Eve. Ne soyez pas surpris, à travers l’article vous retrouvez les propos de Marie-Eve mais également mon avis personnel. C’est un article – interview 🙂

Mais qui est Marie –Eve ?

« Je suis une passionnée du web, ancienne thérapeute reconvertie dans la programmation informatique.

Aujourd’hui, je donne des formations informatiques en centre de formation et je tiens le blog “Les Doigts dans le Net” qui s’adresse aux personnes qui gèrent elles-mêmes leur site web, pour leur entreprise ou leur plaisir. »

À qui s’adresse cette formation ?

  • Pourquoi cette formation? Est ta première formation en ligne?

« C’est ma 1ère formation en ligne. J’ai remarqué que les bases de HTML et de CSS ne sont absolument pas connues du grand public et que ça handicape beaucoup mes lecteurs.

Sans les bases HTML, les principes de référencement, qui s’appuient sur HTML, sont mal compris et mal appliqués.

Sans les bases CSS, il est très difficile d’appliquer des tutoriels, car de nombreuses règles rendent le CSS peu portable : ça veut dire qu’il faut souvent adapter le code trouvé sur internet pour qu’il fonctionne sur son propre site. »

  • À qui s’adresse-t-elle? Que pouvons-nous apprendre dans la formation?

« Aux débutants qui voudraient en savoir plus sur ces 2 langages, afin d’améliorer leur référencement et leur design, sans non plus avoir l’ambition de refaire toutes ses pages. Je ne vais pas vous mentir en vous faisant miroiter la lune : c’est une initiation, pas une formation de fond. »

J’ajouterais uniquement que la formation s’adresse à tous ceux :

  • Qui ont essayé de déchiffrer leur fichier .css et n’ont rien compris ou alors très peu
  • Qui ont eu le courage de modifier le css sans garder l’original, et ont tout foutu en l’air 🙂 (comme moi par exemple)
  • Qui en ont marre de perdre du temps sur les forums pour uniquement comprendre les bases
  • Qui souhaitent pouvoir discuter avec leurs collègues de .class et #id et enfin comprendre ce qu’ils disent 🙂
  • Qui ont oublié qu’il y a des balises HTML qui doivent être fermées
  • Qui ont déjà eu le sentiment d’incompréhension, d’impuissance et de frustration
  • Qui souhaitent être indépendants 🙂

Le programme de la formation

« Vous saurez manipuler le vocabulaire de base, comprendre et appliquer les règles CSS pour pouvoir adapter du code trouvé sur le net à votre cas. Vous pourrez aussi prendre le contrôle sur votre HTML, par exemple quand l’éditeur de WordPress “devient fou” et ne fait pas ce qu’il est censé faire. Le savoir, c’est le pouvoir. »

Le plan de la formation :

La formation est regroupée en 4 modules, 10 tutoriels, 17 vidéos. Quasiment 2 h de cours qui vont vous permettre de démystifier les langages et comprendre les grands principes.

  • Introduction | HTML/CSS, mais à quoi ça sert ?
  • Module 1 | HTML théorie : Le langage de conception des pages web
  • Module 1 | HTML pratique : Utiliser HTML pour améliorer votre référencement
    • Les tutoriels HTML
      • Tutoriel N°1: Les liens dofollow et nofollow
      • Tutoriel N°2: Ancrer vos liens internes
      • Tutoriel N°3: Le backlinking
      • Tutoriel N°4: Comment organiser son contenu pour améliorer son référencement
      • Tutoriel N°5: La triplette du bourrin
  • Module 2 | CSS théorie : Le langage de mise en forme des pages web
  • Module 2 | CSS pratique : Utiliser CSS pour personnaliser votre design
    • Les tutoriels CSS
      • Tutoriel N°1 : Styler le texte
      • Tutoriel N°2 : Styler les boites
      • Tutoriel N°3 : Changer la couleur du texte des liens
      • Tutoriel N°4 : Changer la couleur de fond des champs de formulaire
      • Tutoriel N°5 : Créer un contexte de positionnement
  • Conclusion

L’avis de Miss SEO Girl

Les points positifs .. 🙂

Une formation initiatique très complète

Cette formation d’initiation est très bien faite. Marie-Eve nous donne les principaux points à savoir et à maitriser pour comprendre les deux langages web.

Vous comprendrez ainsi le fonctionnement du HTML et le CSS. Le HTML, vous devez le maîtriser un minimum déjà, car si vous travaillez dans le seo, la moindre des choses est de savoir créer un lien hypertexte et de savoir organiser votre contenu selon les balises sémantiques Hn (h1-h6). Par contre, même si vous faites du seo, vous n’êtes pas obligé de maitriser le CSS et c’est là où cette formation prend tout son sens. J’avoue que j’ai réussi à comprendre le fonctionnement du CSS et ses grandes lignes. Ce qui était pour moi quelque chose d’abstrait devient petit à petit plus logique.

2 H pour comprendre les langages HTML et le CSS

C’est un cours de deux heures, dans lequel Marie-Eve fait un tour des choses importantes à savoir. Bien évidemment, dans cette formation initiatique, Marie-Eve n’approfondit pas les sujets. À vous d’aller par la suite, à la pêche aux informations complémentaires.

Une formation pédagogique, complète et facile à comprendre. Une formation qui vous donnera des apports théoriques, suivis par des applications pratiques, qui vont vous permettre de mettre en place ce que vous venez d’apprendre.

Vous serez donc autonomes et vous vous familiarisez avec les termes HTML et CSS. Vous saurez comment HTML et CSS se combinent, la syntaxe des balises HTML et le rôle des attributs HTML, la syntaxe du CSS, les sélecteurs et les règles de priorités de CSS. Bref, une mine d’informations qui vont vous être utiles pour comprendre le fonctionnement des deux langages web.

Un espace “Ressources, Outils et Bonus”.

Marie-Ève, gentille comme elle est, elle met à disposition de ses élèves, une boîte à outils, et des aide-mémoires vraiment pratiques pour les néophytes. 🙂

Quelques Point négatifs 🙁

J’ai repéré quelques point désagréables, mais qui ne mettent pas en doute la qualité de la formation :

  • Quelques rares bruits de fond
  • Quelques problèmes de perte de son
  • Quelques informations sont passées trop vite pour des néophytes

Et le concours Alex?

Mais oui, je vous ai promis un petit concours. Avec Marie-Eve, nous avons décidé de vous offrir 3 accès gratuits à la formation, pour vous faire votre propre opinion. Pour jouer c’est simple, il faut juste partager l’article sur vos réseaux sociaux et nous laisser un commentaire. Vous pouvez utiliser le message ci-dessous ou un autre selon votre envie 🙂

Gagnez 2H d’initiation au #HTML et #CSS avec @DoigtsDansLeNet et @Miss_Seo_Girl ! http://wp.me/p2v1WL-Xi #concours

Les gagnants seront tirés au sort avec un random, vendredi 19 juillet ! Bonne chance à tous !

**********************************************************************************

Résultats du concours

Les gagnants du concours #HTML #CSS sont : @gaujay @LucileMichaut @Optimalys ! Bravo à vous les chanceux 🙂 ! Désolée pour les autres 🙁 Avec Marie-Eve on vous contacte rapidement pour vous donner vos codes d’accès !

Please wait...

Vous aimeriez lire également :

  1. Améliorez la visibilité de votre site grâce au référencement de Nassim Kebbani
  2. Introduction au HTML par Mathieu
  3. 21 erreurs HTML et CSS à éviter
  4. Créer, Organiser et Nettoyer son code HTML

28 réflexions au sujet de « Améliorez votre référencement et votre design avec HTML & CSS »

  3. Bonjour Alexandra,

    Merci pour ton retour 🙂 J’espère que les 3 heureux élus apprendront pleins de choses sur HTML et CSS.

    J’ai récemment eu le retour d’un ingénieur informatique qui m’a avoué que même lui, avait appris des choses, HTML et CSS étant des petits oubliés des parcours d’ingé (hors spécialisation Web).

    Bonne chance à tous et faîtes tourner le tweet !

    Marie-Eve
    MarieEve Articles récents..Refonte d’un design de blog [Etude de cas]My Profile

  4. Le SEO parfait selon moi devrait maîtriser le HTML/CSS, le PHP et le Javascript. Cela permet ainsi de mettre en place des automatismes certes considérés par certains comme BlackSEO mais sur certains e-commerce, certains de ces automatismes sont importants pour ne pas taper à la mains le code sur 100 pages différentes de la même catégorie par exemple.
    Quand je dis qu’il faut “maîtriser” ces langages, c’est surtout le minimum pour un SEO, mais en matière de PHP ou javascript, il faut pouvoir le comprendre pour toucher à certains codes et alors le modifier au mieux pour le SEO du site internet.
    Merci pour cet article, c’est vrai que c’est un sujet qui fait débat pour les référenceurs et je trouve cela très intéressant!

  5. Merci Alexandra pour ton article ! J’ai retweeté l’info pour ton concours.
    J’ai prévu de refondre mon site donc un petit coup de formation avant est le bienvenue afin de partir sur de bonnes bases.

  6. Une bonne méthode pour améliorer le référencement, par contre j’ai une question: j’aimerai savoir si l’optimisation du footer est possible? Toujours on trouve des articles qui met l’accent sur l’importance de l’optimisation du contenu qui est bien plus importante, mais je pense aussi que le footer a un impact sur le référencement d’un site. Merci encore une fois. amicalement

  9. De formation Marketing à l’origine j’adorerais pourvoir me perfectionner aux arcanes du code sous toutes ses formes (html, CSS, HTaccess, SQL, etc.). Je ne pense pas qu’un référenceur doive forcément savoir coder mais cela permet d’être plus à l’aise avec ses collègues développeurs et intégrateurs dans les échanges. Je me rends compte que j’impose parfois des choix qui forcent les intégrateurs à faire des écarts de conduite et inversement je sens parfois qu’on me dit “c’est pô possible” alors que c’est juste de la fainéantise.
    gaujay@Slow Lab Articles récents..Optimiser ses contenus éditoriaux existantsMy Profile

  10. Un petit coucou sur cet article vraiment intéressant.
    Ayant un peu d’expérience dans le blogging et le référencement naturel c’est vrai qu’écrire un code propre et comprendre le HTML et le CSS serait des plus pour l’avenir.
    J’ai déjà essayé de m’y mettre en auto-didacte avec “HTML pour les nuls”, livre très bien fait mais encore faut-il s’y atteler !! ^^
    Une petite formation qui a l’air très complète et qui serait super intéressante à suivre à mon avis !
    En croisant les doigts 😉
    Audrey
    Portes Audrey Articles récents..Etude référencement : Un filtre Google qui chamboule l’affichage des résultats de recherche !My Profile

  13. Merci pour ce concours et cette excellente interview Alexandra, comme d’habitude 🙂

    J’ai retweeté bonne chance aux participants.

  14. Découvrant de plus en plus le monde du référencement, via mes différentes expériences et lectures, il est à mon sens primordial qu’une personne s’attelant au référencement de sites dispose de certaines bases de programmation.
    HTML & CSS sont les plus importants c’est certain pour gérer l’interface côté client, mais des connaissances supplémentaires en PHP & JS peuvent aussi être un plus si le besoin de toucher au code source d’un CMS se révèle indispensable.
    Après, le temps de formation n’est pas le même, et chaque chose en son temps … HTML & CSS sont déjà une très bonne première approche je pense.
    Et puis pour le PHP, tu peux toujours demander conseil si besoin 😉

  15. Hello,

    Je ne participe pas car je ne pense pas en avoir besoins :p mais c’est sympa et intéressant de former au niveau du css et html, même si je ne suis pas vraiment d’accord avec toi, tu ne vas pas améliorer le référencement de ton site en t’améliorant en css.

    Mais après tu vas gagner du temps pour créer d’autrres sites, améliorer le design de tes sites web et donc aussi garder tes visiteurs sur ton site.

    Arnaud

  17. Salut Alex,

    L’envie d’apprendre le html et le css est louable et je comprends bien ta position, en fait tu fais partie des gens qui aiment avoir plusieurs casquettes et ça me plaît bien!

    Perso je n’accroche pas, d’une part à cause du thème, comme le dit Arnaud on n’améliore pas son référencement de cette manière (c’est infime) et d’autre part j’ai un peu de mal à comprendre ce coup de pouce vers une formation que je ne sais comment nommer, d’autant plus que je n’ai d’ailleurs pas réussi à me connecter à la page de vente finale (Marie Ève ton bouton de vente rame, la page ne s’ouvre pas, autant sur chrome,opéra, IE ou firefox, curieux …)

    Donc une question directe puisque je n’ai pas réussi à avoir l’info : Combien cette formation ?
    Un lien vers le site du zéro aurait sans doute mieux perçu ou une formation payante d’Elephorm

    Pour ceux que ça intéresse :
    http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3/comment-fait-on-pour-creer-des-sites-web

    Amicalement 😉
    franckwylliams@piwik analytics Articles récents..Piwik Analytics le Tutoriel d’installationMy Profile

  18. https://twitter.com/Optimalys/status/357161025155497985

    Je participe car j’ai des lacunes en html et en css, je cherche surtout un support pédagogique différent des livres disponibles.

    Par contre je ne sais pas si mon petit niveau suffira à bien comprendre la formation! (le cas échéant si la chance est avec moi)

    Cordialement.
    Et merci bcp de initiative pour les moins doués.

  21. Enfin l’article crossover par excellence!
    Le référenceur SEO est-il à 51% rédacteur ou codeur? Quel parti l’emporte!
    Parce qu’un référenceur plutôt rédacteur en a marre de s’attendre baragouiner des termes techniques imbitables et à l’inverse un référenceur codeur n’en a rien à faire du dico des synonymes pour bien balancer un Title.
    Merci Alex, alors à quand le bouquin?

  22. Avec un peu retard : https://twitter.com/CedricGuerin/status/357262616332214272

    Pour ma part, j’ai eu la chance d’avoir une formation de HTML/CSS de quelques mois à l’université mais c’était il y a … euh … bref, c’est loin, trop loin. Et comme toi j’ai souvent envie d’aller taper dans le code de WordPress pour adapter ou optimiser tel ou tel thème, mais mes connaissances sont trop limitées 🙁
    Cédric@Excel Facile Articles récents..Trouver une formation ExcelMy Profile

  23. C’est vrai et faux.
    Je m’explique.. 🙂
    Ca dépend de l’équipe de l’agence. Il faut soit que le référenceur aie un très bonne connaissance de l’html, du css, et de tous les langages de programmation web (le client n’a peut être pas un site en php….asp, python,Coldfusion…) s’il travaille seul ou dans une petite équipe.

    Ou, le codeur doit connaître un minimum la partie on-site du référencement.
    Ce qui me semble souvent plus facile.

    Mais il me semble important, si on met le référencement dans l’idée d’améliorer la rentabilité d’un site, que l’un ou l’autre ou les 2, connaisse les principes de l’amélioration du taux de conversion.

    En ce qui me concerne, je ne pourrais pas référencer un site tellement mauvais que le surplus de visiteurs apporté par le référencement, le fuirait très vite.

    C’est pour moi ce qui fait du référencement un monde passionnant. Une multitude de connaissances à avoir pour rendre un site rentable.

    Bravo pour votre article et bon amusement dans l’apprentissage du html et du css. Il existe chez Oracom (http://shop.oracom.fr/146-webdesign-facile) de superbes revues.
    Sans parler des livres dans toutes les maisons d’éditions (ou presque 🙂 ). Et pour ceux qui s’y connaisse déjà… je suggère de faire un petit tour pour découvrir Bootstrap de twitter. (c’est un framework css).

  24. Très intéressant cette nouvelle catégorie que tu lances sur ton blog! En plus il y a toute pleine de choses à apprendre sur le HTML et le CSS!
    A bientôt!

  25. Il est indéniable qu’une programmation propre, légère, et respectueuse des normes contribue au référencement naturel. Le CSS permet de scinder la structure de la page et sa mise en forme, et donc d’alléger votre code source, ce qui est bon pour le SEO. L’HTML doit être maîtrisé parfaitement pour optimiser (dans une certaine mesure) vos balises et attributs : title, h1, h2… alt. Enfin, le respect des standards W3C sera, j’en suis sûr, un véritable critère de positionnement (dans une certaine proportion) : xhtml 1.0 strict et transitional valides, textes alternatifs des images, compatibilité, accessibilité (personnes présentant un handicap moteur), etc. Puisque les préconisations de Google vont toujours plus dans le sens de l’intérêt de l’internaute.

  26. Bonjour à tous,

    Déjà le dernier jour…les heureux élus seront bientôt désignés !

    Je vais répondre aux questions directes, dans l’ordre:

    @fabrice : oui l’optimisation du footer d’un site est possible, tout à fait. Selon l’environnement, cela ne demandera pas que des connaissances en HTML et CSS mais aussi en PHP.

    @adam : un site dégueu ne veut pas dire que le HTML ou le CSS sont remplis d’erreur mais juste que le webdesigner ne s’est pas cassé la tête… un mauvais code HTML fait pâtir le référencement, c’est sûr puisque c’est grâce à HTML que les moteurs de recherches lisent la page et son contenu. Bien sûr, ça ne fait pas tout, ce n’est que de l’opti on-page.

    @franckwylliams : désolée que tu aies une mauvaise expérience. On m’a signalé que le bouton ne marchait plus après que j’ai nettoyé mon thème (un peu trop visiblement), mais j’ai fait une vente cette semaine donc il a l’air de fonctionner. J’entends quand même ton problème et vais mettre un formulaire en bas de page directement. Concernant ta comparaison avec Elephorm, je précise que ce n’est pas la même approche. Ici, je ne détaille pas tout sur HTML et CSS. Le but est de proposer une initiation pour ceux qui sont très débutants et qui sont un peu effrayés à l’idée de suivre une formation complète sans être sûr de ne pas être “largué” dès le début. Je propose de découvrir les bases et de les mettre en pratique de suite pour faire du concret…même sans tout savoir. Le prix est de 39€ et vous pouvez me contacter par email si vous avez une question durant la formation.

    @OptiSeo : si justement, elle est très adaptée pour les grands débutants techniques.

    Merci à tous pour votre participation et à ce soir pour les résultats !
    MarieEve Articles récents..La tête dans les nuagesMy Profile

  27. Que dire … L’optimisation HTML de la structure d’un site est souvent négligée en SEO, et pourtant cela peut jouer énormément. Ayant commencé par l’intégration, j’apprend le SEO de manière autodidacte, et j’avoue que ça m’aide particulièrement !

    Maintenant, j’optimise chaque site dès l’intégration afin d’avoir un bon bonus de départ pour le référencement du site. D’ailleurs, j’ai vu des sites très bien placés sur des requêtes concurrentielles parce qu’ils étaient plus qualitatifs d’un point de vue code, avec 10 fois moins de backlinks.

    C’est donc une excellente initiative cette formation (même si je perds un peu plus ma valeur ajoutée :p)

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

CommentLuv badge

Les liens des commentaires peuvent être libérés des nofollow.