Tutoriaux divers et variés

De nombreux tutoriaux

De nombreux tutoriaux

Parce que la connaissance c’est le pouvoir, autant la conserver précieusement et en faire profiter un maximum de monde.
Internet est la plus grande bibliothèque du monde, et j’ai envie d’y ajouter quelques livres afin de nous aider à nous améliorer.

Moultes recettes de cuisine

Moultes recettes de cuisine

L’informatique et le web c’est bien, en décrocher quelques heures par jour c’est mieux.
Ce blog comportera également la plupart des recettes que j’utilise quotidiennement afin de vous aider à manger plus sainement à l’aide de ces recettes simples, économiques et succulentes (tant qu’a faire :p)

Peinture de miniatures

Peinture de miniatures

Des playmobiles pour les grands, mais on peut faire « Piou piou piou » quand même ?
Venez mettre un pied dans le monde cruel et apocalyptique du 41ème millénaire, dans ce hobby de collectionneurs de figurines ou de nombreuses races humaines et extra-terrestre s’affrontent pour la domination de la galaxie.

Penser à trouver une super Phrase d'accroche En effet..

Les derniers articles

Le SEO, ou Search Engine Optimisation, soit l’Optimisation pour les Moteurs de Recherche est un ensemble de pratiques visant à améliorer le positionnement d’un site dans les résultats de moteurs de recherche (pour des termes donnés).

Vulgairement, mieux c’est, plus votre site apparaîtra haut dans les résultats de Google.

Pour ma part, les bases du référencement se décomposent en trois parties bien distinctes.

Le référencement naturel

Le référencement naturel va avoir pour avantages d’être (la majeure partie du temps) gratuit et pérenne.
C’est à dire que cela va vous prendre du temps (que cela soit en corrections ou en mise en place), mais ces modifications seront faites pour durer et vous assurerons une base de référencement solide, et viable dans le temps.

Il va également se décomposer en deux parties : le référencement naturel passif, et le référencement naturel actif.

Le référencement naturel passif

Le référencement naturel concerne « l’intérieur » de votre site web : la manière dont il est construit, organisé, le respect des bonnes pratiques ainsi que la qualité de son contenu.
À l’aide de « robots » qui vont analyser régulièrement et de manière automatique votre site web, les moteurs de recherche vont pouvoir affecter une note à votre site web.
Meilleure elle sera, meilleur sera votre placement.

Voici ma liste de recommandations afin d’avoir un référencement optimal :

  • Ne rien laisser paraître dans la console des navigateurs web (inspecteur de composant)
    • Pas d’erreurs en général (javascript, etc.)
    • Pas de fichiers manquants (404)
    • Éviter les redirections
    • Ne pas tenir compte des éventuelles publicités bloquées
  • Usez et abusez des bonnes pratiques
    • header / en-tête / <head>
      • Avoir des balises <title> pertinentes : Titre de la page – Titre du site
      • Ne pas oublier les balises <meta> : keyword, description, etc.
      • Ne pas oublier d’ajouter une favicon (petite image qui apparaît dans l’onglet du navigateur, mais également dans les favoris)
      • Mettre en place les balises de partage (titre, description, image)
      • Indiquer la langue
      • Ne charger qu’une seule feuille de style, et un seul script
        • Utiliser gulp afin de concatener / minifier les multiples feuilles en une
        • Utiliser les nouveaux attributs async & defer
        • Si vous êtes chaud, jetez un œil du côté du FOUC et du Critical CSS
    • Clarté du code
      • Favorisez les nouvelles balises HTML5 sémantiques : header, nav, main, aside, footer, section, article, video, input type email/date/etc.
      • Balises <a>
        • Spécifiez toujours un attribut title, différent du contenu du lien ; l’attribut doit apporter des informations complémentaires (sujet, auteur, contenu profond, etc.)
        • Spécifiez l’attribut target : « _self » pour afficher le lien dans la page courante, « _blank » pour l’afficher dans une nouvelle page/un nouvel onglet
          • En règle générale, un lien dirigeant vers l’extérieur du site sera toujours spécifié en _blank
        • Se renseigner sur le follow/no follow
      • Balises <img>
        • Règles de nommage de vos fichiers
          • Soyez uniformes
          • Noms de fichiers en minuscules, utilisation systématique de tiret du 6 « - » en séparateurs de mots
          • Nommez vos fichiers correctement de manière à favoriser le référencement
            • Exemple : « {contenu-illustration}-{sujet}-{adresse-site}.jpg »
            • Ne pas hésiter à ranger avec des sous-dossiers si ce n’est pas trop contraignant
            • Le référencement de Google image est une chose, il peut vous rapporter des visites ;)
        • Utilisez et différenciez les attributs title & alt
          • title : Apporter de l’information supplémentaire
          • alt : description visuelle de l’image : le texte sera utilisé en cas d’absence de cette dernière, ou dans le cadre de l’accessibilité (handicaps : aveugles, malvoyants, daltoniens, etc.)
        • Accessibilité toujours : apprenez à utiliser les attributs aria
        • Remplir les attributs height et width (taille de l’image au format desktop)
        • Pour les furieux/ses : utiliser l’attribut src-set permettant une meilleure compatibilité
      • Utilisez du SSL (sécurité) pour des sites e-commerces
    • Contenus
      • Priorisez le contenu
        • Plus le contenu est haut dans la page, plus il doit être important. Bonus pour le contenu se trouvant au dessus de la ligne de flottaison
        • Utilisez intelligemment  les balises h1, h2, h3, etc. Dans la majeure partie des cas, du plus important vers le moins
        • A noter que l’on peut réutiliser ces balises dans une même page si utilisation de plusieurs sections/articles
        • Utilisez les balises <strong> & <em> de manière pertinentes
      • Attention au contenu dupliqué
        • Pas de copier/collés depuis wikipedia ou autres, les moteurs de recherche n’aiment vraiment pas ça !
      • Ne fait pas des articles immenses
        • Évitez les paragraphes de plus de 15-20 lignes
        • Évitez les articles à très fort contenus vertical (10pages+) ; préférez découper votre articles en plusieurs sous articles, liés entre eux par des liens internes
      • Utilisez des mots clés et des emphases de manière pertinente
        • Pas plus de 5 mots clés par paragraphe
        • Pas plus de 2 liens par paragraphe
        • Vous écrivez avant tout pour votre lectorat, et non pour les robots ;)
      • Soyez uniformes : Par exemple en cas de de liste à puces, ne jamais mettre de point à la fin de la ligne, toujours commencer par une majuscule, etc.
      • Ajoutez de l’information
        • Date de l’article (balise html5 <time> ;) )
        • Ajouter la catégorie, les tags
        • Si sources externes, ajoutez les références en fin d’article
        • Idem auteurs
      • Vérifiez la pertinence de vos mots clés
        • Très utile également pour la création de noms de domaines
    • Ayez une sitemap (dynamique si possible pour éviter les contraintes)
    • Si il s’agit d’un site contenant des actualités, pensez à avoir un flux RSS (dynamique également ;) )
    • Ayez une page 404 pertinente
    • En cas de déplacement de site, renseignez vous sur les bonnes pratiques concernant les redirections

Et tout ceci est une liste exhaustive :D

Évidemment, tout cela ne s’apprend pas du jour au lendemain, et prend du temps à apprendre & mettre en place.
Afin de vous aider dans vos démarches, je vous recommande vivement d’utiliser des logiciels afin de vous aider de validateurs automatiques, tels que le validateur de w3c, mais également le validateur de google.

Je vous recommande vivement de créer vos sites web PUIS de les passer aux validateurs, un peu comme une checklist.
A force de pratiquer, ces améliorations deviendront des réflexes instinctifs !

C’est assez long à appliquer, mais une fois fait, il est rare qu’il y ai des retouches à faire.

Le référencement naturel actif

Le référencement naturel actif consiste à créer un réseau de sites autour du votre, le tout lié ensemble par des liens.
Sans trop rentrer dans les détails, voici les diverses manières d’améliorer ce réseau que je vous recommande :

  • Partenariats, échanges de liens ou d’articles
    • Attention à éviter de tomber dans la dérive d’une majorité de contenus dits « sponsorisés », car cela peut entraîner une baisse de qualité de votre contenu, et donc une perte de lectorat
  • Création de communiqués de presse
    • Un grand nombre de sites vous proposent de publier des articles (de manière +- gratuite) vous permettant ainsi de créer du contenu référencé pointant vers votre site
      • Certains sites sont assez contraignants sur les contenus : minimum de mots, maximum de mots clés et liens, orthographe correcte, etc.
      • La plupart sont validés manuellement, ce qui peut prendre quelques jours, et éventuellement entraîner des refus
      • Mais cela permet de produire du contenu de qualité, c’est vraiment la méthode que je recommande le plus
    • Réseaux sociaux
      • Permet des partages de petite quantité, mais pouvant potentiellement toucher un auditoire large
      • Recommandés : facebook, twitter, youtube, instagram, pinterest, linkedin // a ajuster selon les contenus de votre site
    • Annuaires
      • Comme un bottin, mais informatisé. Je ne recommande pas vraiment mais cela ne peut pas fair de mal pour le lancement d’un site
    • Forums / Mails / divers
      • Penser à ajouter un lien/une description, une image dans la signature, cela sera du no-follow mais des visiteurs potentiels  ;)

D’une manière générale, le référencement naturel actif prend beaucoup de temps à mettre en place et à effectuer (même s’il est possible de l’optimiser avec quelques outils, de la rigueur, ainsi qu’une feuille excel à multiples onglets haha) et il prend également beaucoup de temps avant de fonctionner, du coup, quelques recommandations :

  • Ne pas faire d’un coup énormément de réf. nat. actif, puis tout laisser tomber au bout de 1, 3, 6 mois
  • Il est vraiment préférable de poster régulièrement (~1 fois toutes les deux semaines un communiqué de presse par exemple) lors du lancement du site, puis passé 6 mois de poster une fois par mois, voire tous les deux mois
  • Le mot clé étant ici la régularité, mais pas non plus à outrance : Si vous n’avez rien à dire, ne dites rien
  • Essayez de jouer sur l’événementiel (je viens de mettre mon site à jour, j’offre de nouveaux contenus, je participe à un salon, événement, etc.)

Afin de surveiller l’évolution de votre référencement (en particulier si votre patron vous demande des résultats), je vous encourage vivement à vous tourner vers les SERP (Search Engine Result Page), ce qui signifie « Emplacement dans la page de résultats d’un moteur de recherche. Mots clés : Page rank, Alexa. (je vais pas tout vous faire non plus wesh).

Le référencement payant

Histoire de terminer la dessus et que l’article soit à peu prêt complet, nous allons parler succinctement du référencement payant.
Succinctement parce qu’après avoir travaillé avec des personnes dont c’est le métier, beh… c’est un vrai métier presque à temps plein.

Le plus connu est AdWords, un outil de google, et grosso merdo on peut acheter des mots clés (payés au clic) aux enchères.

Par exemple je paie 1€ par clic pour les mots clés « développeur web paris », si je suis le premier le lien vers mon site apparaitra en premier pour ces mots clés, dans le cadre « Annonce ».
Si Jean-Bob propose 1.01€ à midi, ce sera sont site qui sera affiché en premier.

Je vulgarise un peu, mais dans l’esprit c’est ça.

Conclusion

Le référencement naturel est gratuit, mais prend pas mal de temps à mettre en place, ainsi qu’a conserver.

Le référencement payant est… payant mais est plus rapide et recommandé pour du ponctuel (lancement de site, opération promotionnelle, etc.)

 

Sites recommandés :

 

 

Un article d’introduction à gulp, ce merveilleux outil qui vous fera atteindre des niveaux de flemme inimaginables, à travers beaucoup de travail (travailler plus pour travailler moins /o/ )

Petit article à lire lors de la fin de la formation 3WA, pour ne rien oublier.

Liens & infos utiles :)

Dans cet article, nous verrons comment partager l’écran du professeur vers les élèves (streaming local) dans le but de favoriser la correction des exercices.

Dans cet article, nous verrons comment créer un fichier PHP permettant d’assurer proprement la connexion à la base de données. Nous verrons également de quelle manière l’intégrer à notre boilerplate.

Développeur web indépendant depuis 2011 je suis curieux et je touche à tout, alors pourquoi ne pas vous en faire profiter ?

Vous trouverez ici en vrac des tutoriaux, des recettes de cuisine, des warhammers et occasionnellement de l’humiliation de stagiaire.

L’auteur L’auteur

Maxime Chevasson