FORMATEUR DIGITAL WEB INDÉPENDANT

Image 033

Le design plat ou flat design est un style de design d'interface graphique caractérisé par son minimalisme. Il se base sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de typographie.
Ce style s'inspire notamment du style typographique international1.
Il peut présenter plusieurs atouts :
il facilite la conception d'interfaces s'adaptant à la surface d'affichage (sites Web adaptatifs) ;
son usage d'aplats de couleurs permet de meilleurs taux de compression ; et,
il se prête bien aux images vectorielles, qui rejoignent ces avantages (changement de taille sans perte de qualité + légèreté des fichiers).

Site responsive

Image 031
Plus personne ne doute aujourd'hui que l'usage des smartphones est en train d'exploser. De plus en plus de personnes visitent aujourd'hui des sites web depuis leur navigateur mobile. Sur le Site du Zéro, déjà plus de 5% des visiteurs viennent depuis un appareil mobile. Ils étaient la moitié (2,5%) un an plus tôt.
Et pour Google
https://search.google.com/test/mobile-friendly?hl=fr

 

Image 032

La couleur et le genre

 

Le sexe de vos visiteurs a une influence sur leurs préférences en terme de couleurs. Quand vous réfléchissez à la palette de couleurs de votre site, gardez à l’esprit ce qui suit :

Les femmes ont tendance à aimer le bleu, le violet, le vert et le rouge, mais pas le orange, le marron, le gris ni le jaune. quelles sont les bonnes couleurs pour un public féminin ?

Les hommes ont tendance à aimer le bleu, le vert, le noir et le rouge, mais pas le marron, le orange, le jaune ni le violet. quelles sont les bonnes couleurs pour un public masculin ? En ce qui concerne les nuances, les hommes préfèrent en général les nuances foncées (le mélange d’une couleur avec du noir), tandis que les femmes préfèrent les nuances claires (le mélange d’une couleur avec du blanc). Les hommes ont aussi tendance à préférer les couleurs vives, tandis que les femmes préfèrent les couleurs douces. Attention, bien que tirées de recherches scientifiques (ici et là) ces informations ne sont pas des règles universelles et ne seront pas adaptées à tous les contextes.

 

La règle des trois couleurs est un commandement sacré.

Image 027

Ne dépassez pas trois couleurs pour un site, toutefois il existe des cas particuliers dans le cas des teintes. le noir et le blanc sont des teintes alors que le rouge, le bleue sont des couleurs.

Image 028

Symbolique des couleurs

Le noir et le blanc ne sont pas considérés comme des couleurs. Ils sont très peu présents dans la nature à l’état pur. On peut donc facilement les associer avec n’importe quelle couleur.

Le gris, très neutre, s’accorde aussi avec beaucoup de couleurs.
Privilégier toujours les couleurs plus sombres pour le bas.Un site intéressant pour aller plus loin sur les couleurs : http://www.code-couleur.com/

Tableau récapitulatif sur la symbolique des couleurs

ROUGE

BLEU

VERT

JAUNE

BLANC

Force
Passion
Puissance
Interdiction
Danger
Virilité
Courage
Action
Force

Paix
Vertu
Immatérialité
Méditation
Sagesse
Rêverie
Confiance
Bonté
Calme
Sécurité
Foi
Féminité

Espérance
Nature
Immortalité
Repos
Foi
Jeunesse 
Fécondité
Satisfaction
Calme

Science
Conscience Idéalisme
Action
Luminosité
Orgueil
Jalousie
Calme
Sécurité

Pureté
Innocence
Chasteté
Richesse
Silence

OR/ARGENT

ORANGÉ

VIOLET

GRIS

NOIR

Immortalité
Richesse 
Gloire (or)
Respect (argent)
Dignité (argent)

Energie
Ambition
Enthousiasme
Imagination
Richesse
Honneur

Politesse
Jalousie
Mystère
Spiritualité
Mélancolie 
Tristesse
Modestie
Religion 
Inconscient
Secret
Ténèbres
Mort
Piété
Noblesse

Sobriété
Tristesse
Modernisme
Peur
Monotonie

Mort
Deuil
Nuit
Mystère
Monotonie
Tristesse
Détresse
Angoisse
Noblesse
Distinction
Élégance
Silence

Symbolique des couleurs par civilisations

 

ROUGE

BLEU

VERT

JAUNE

BLANC

Chine

Joie
Mariage

Paradis
Légèreté

Dynastie Ming
Paradis
Légèreté

Naissance
Santé
Force

Mort
Pureté

Egypte

Mort
Méchanceté
Désert

Vertu
Vérité
Fidélité
Immortalité

Fertilité
Force
Islam

Joie
Prospérité

Joie
Fête

Etats-unis

Danger

Masculinité

Sécurité

Lâcheté

Pureté

France

Anarchisme
Communisme

Liberté
Paix
Royauté

Criminalité

Temporalité

Monarchie
Neutralité

Inde

Vie
Créativité

...

Prospérité
Fertilité

Succès

Mort
Pureté

Japon

Colère
Danger

Méchanceté
Bassesse

Futur
Jeunesse
Énergie

Grâce
Noblesse

Mort

Source : CRIM formation - Ecole polytechnique de Montréal

 

 

Les outils et palettes de couleurs à votre disposition

 

La signification de vos couleurs n’est pas tout, il faut aussi choisir des couleurs qui vont bien ensemble. Si vous avez besoin d’aide pour choisir ces combinaisons de couleurs, plusieurs outils sont à votre disposition :

  • Kuler - Cet outil très bien conçu permet de choisir des couleurs accordées selon plusieurs règles différentes.
  • ColourLovers - Ce site vous propose des palettes de couleurs déjà composées et prêtes à l’emploi !
  • 0 to 255 - Vous avez identifié votre couleur principale mais avez besoin de couleurs complémentaires ? Ce site peut vous aider !
  • Colrd - Ce site vous propose de nombreuses palettes de couleurs basées à chaque fois sur des images.
  • Multicolr Search Lab - Indiquez les couleurs de votre site, ce moteur de recherche malin se charge de trouver les images qui correspondent. Attention : vérifiez bien que vous avez le droit d’utiliser les images que vous trouvez avant de le faire.

Association des couleurs

 

Se servir du site "Colourlover" pour associer des couleurs

Vous pouvez aussi vous servir du site " www.colourlovers.com" pour vous aider à choisir les couleurs de vos interfaces.

Connectez vous sur ce site, cliquez sur la loupe du moteur de recherche interne, dans le formulaire ci-dessous saisissez un code couleur ou un mot-cles , le site vous fera des propositions de couleurs.

Image 029

 

5 combinaisons de couleurs à ne jamais utiliser sur votre site

 

Quand vous sélectionnez les couleurs composant votre palettes, souvenez-vous aussi que certaines combinaisons sont à éviter sur vos pages. Voilà les principales d’entre elles :

 

Jaune et vert

 

Même si la combinaison de ces deux couleurs attire l’attention, surtout dans leurs déclinaisons les plus vives, elle est aussi très énervante et souvent illisible. Ces teintes sont de plus trop proches pour être utilisées côte à côte.

 

Vert et Rouge

 

Utilisable à la limite pour des décorations de noël, ces couleurs ne doivent pas être associées sur internet. Elles détonnent et rendent tout texte difficile à lire. Le contraste élevé provoqué par cette association de couleurs semble faire vibrer textes et images, ce qui fatigue rapidement les yeux.

  

Violet et Vert

 

Assez percutant pour capter l’attention de tout le monde, mais trop dur à lire et fatiguant pour les yeux, comme le vert et le rouge précédemment.

 
Rouge sur Noir
 

Parfait pour un film sur les vampires, à éviter dans toutes autres situations. Du texte rouge sur un fond noir est très difficile à lire. En règle générale, il est préférable d’éviter d’utiliser un texte coloré sur un fond noir.

  

Bleu et Rouge

 

Deux couleurs primaires qui n’ont rien à faire ensemble sur un site internet. Utilisées ensemble, elles provoquent la sensation de vibration évoquée précédemment, et rendent tout texte quasi impossible à lire.

 

 

Ne dépassez pas trois polices différentes sur un site, exemple une pour le titre du site, une pour le titre des pages, une pour le texte

https://www.google.com/fonts est l'adresse d'un site qui peut vous rendre service. Il suffit de choisir une police de copier le code et de le mettre dans le fichier CSS de votre site.

 Image 023

Exemple de code généré par Google font à insérer dans votre site

 Image 024

Image 025

 

Astuce : Comment reconnaître la police d'une image

Sur ce site vous pouvez uploader une image, elle reconnaitra la police dessinée sur cette image.
https://www.myfonts.com/WhatTheFont/

 

Image 026

 

Analyser et fabriquer l'arborescence de votre site

Voilà des outils intéressants qui vont vous permettre de réaliser l'arborescence de votre site, ainsi vous pourrez le faire valider par votre client.

 

 

MindMup 2

MindMup est une application en ligne de Mind-Mapping (cartes mentales) libre et gratuitecomme ses concurrents Framindmap ou Freemind. MindMup dispose d'une interface trés dépouillée, avec des menus uniquement en anglais à ce jour.  Des extensions en option permettent de personnaliser la barre de menu.
Le principal atout de MindMup est son mode collaboratif. Chaque carte peut être ouverte et partagée sur Dropbox ou Google Drive. Il est également possible d'importer un fichier Freemind dans l'interface. MindMup est plus particulièrement à l'aise en mode collaboratif avec Google Drive. En effet il est possible de partager en temps réél son travail via la commande "Collaboration" puis "Invite collaborators". Un simple saisie d'adresse électronique du collaborateur permet de lui envoyer une invitation...
 Principales fonctions :
 Partage : vous pouvez accéder à vos données n'importe où, à partir de n'importe quel appareil via le stockage en nuage gratuit et public pour Mindmaps. Il est possible d'enregistrer les cartes mentales privées sur Google Drive , avec accès détaillé et le contrôle de partage. l'inscription n'est pas nécéssaire.
 Productif : l'interface utilisateur s'adapte automatiquement aux écrans tactiles ou ordinateurs de bureau / systèmes d'ordinateurs portables. Sur les ordinateurs de bureau, toutes les opérations de carte ont des raccourcis clavier . Sur les appareils mobiles, les barres d'outils s'adaptent et les boutons deviennent plus grands. Il est possible de masquer tous les menus et barres d'outils pour tirer le meilleur parti de votre écran.
 Opensource : MindMup est libre, opensource, sans publicité ou spam. L'outil Freemind mindmap import/export permet aux utilisateurs d'importer et exporter des cartes.

 

 

 

 

Write Map   (gratuit pour trois plans de site)

 

 

Les règles de base de votre IHM et graphisme web

La règle du nombre d'informations :
Ne dépassez pas 19 informations par interface, en effet c'est le nombre maximum que le cerveau peut enregistrer à la fois.

 

Prévoir le contenu de votre site

 

Les images

Pour les images de vos articles

Les images présentes dans une page est un critère pris en compte dans Google, pour cette raison n'hésitez pas à en ajouter dans certaines conditions :

La taille des images doit être la plus proche (en pixel) que celle que vous avez insérée. (ne mettez pas une image qui fait 1000 pixels de large alors que la taille définitive doit être de 350). En résumé elle doit être la plus légère possible.

Vous devez privilégier le format JPG plutôt que le format Png, en effet le poids est plus léger dans ce format.

Le nom des images doit contenir des mots clés, par exemple "plombier-toulouse.jpg" évitez les accents et les espaces entre les mots
Saisissez la balise "alt" de vos images car elle est employée pour les malvoyants.

Les images: règles de nommage

Dans un site Internet La page « mentions légales »du site doit contenir au moins: 

La raison sociale
Le siège social
Un numéro de téléphone
Le nom du directeur de la publication et/ou du responsable de la rédaction
Et s’il y a lieu, le capital social et le numéro d’inscription au registre du commerce et des sociétés (RCS).

 

Le cas d’un site Internet édité par une personne physique La page « mentions légales » du site doit contenir au moins :

Nom Prénoms
Adresse du domicile
Numéro de téléphone
Le cas échéant, il faut ajouter le numéro d’inscription au registre du commerce et des sociétés (RCS) ou au répertoire des métiers.
«Il est néanmoins possible de garder son anonymat, dès lors que les coordonnées exactes de l’éditeur ont été transmises de façon correcte à l’hébergeur.
C’est alors l’hébergeur qui sera tenu de communiquer les information sur l’éditeur, mais uniquement dans le cadre d’une procédure judiciaire.»

Le cas d’une boutique de vente en ligne

Les modules sont des extensions utilisées pour le rendu des pages. Ces modules peuvent également être comparés à des “boites” disposées autour d'un composant. Les menus, la fonctionnalité de recherche ou la connexion au site sont par exemple affichés par des modules. Il est possible d'afficher de nombreuses choses avec un module. Il est également possible de publier son propre code HTML grâce au module Contenu personnalisé.

Les modules se placent sur les différentes positions du template, peuvent être affichés sur certaines pages et pas d'autres (grâce notamment à l'assignement de menu ou aux langues) et peuvent être affichés à certains utilisateurs mais pas à d'autres (grâce au niveaux d'accès).

 Pour installer Joomla 3.5, il faut préparer vos access, c'est à dire:

  • Les codes "ftp" pour déposer Joomla sur votre hebergement
  • Les codes de la base de données de votre hebergeur
  • Un nom de domaine ou l'url d'acces a votre site
  •  Allez télécharger la dernière version de Joomla sur le site : https://www.joomla.fr/ 



  • Une fois téléchargé, creez un dossier dédié sur votre ordinateur, déposez l'archive et dézippé la.

    dezipper joomla



  • Ouvrez le logiciel "Filezilla" ou un autre paramétrez les code d'acces "ftp" fournis par votre hébergeur et déposez l'ensemble des fichiers que vous avez dézippé à la racine de votre site.

    transfert ftp joomla

  • Ouvrez l'url de votre site, renseignez le formulaire avec les codes de la base de données fournis par votre hebergeur:

    install joomla 1

    Etape : - Configuration
    1 – Choisissez la langue souhaitée pour effectuer l’installation.
    2 – Saisissez le nom de votre site.
    3 – Saisissez une description de votre site, utile pour le référencement (ce paramètre pourra être rempli après l’installation de Joomla!).
    4 – Saisissez votre e-mail
    5 – Saisissez votre identifiant. Par défaut cet identifiant est “admin”, si vous installez Joomla! sur un serveur distant, il est grandement conseillé d’utiliser un autre identifiant (voir le chapitre sécurité). Si vous installez Joomla! en local, vous pouvez laisser “admin”.
    6 – Saisissez et confirmez votre mot de passe (voir le chapitre sécurité).
    7 – Vous pouvez choisir de verrouiller l’accès au public une fois l’installation terminée.

    install joomla 2

Etape : - Base de données
A cette étape, Joomla! va créer la base de données. vous devez créer cette base de données au préalable, il vous suffit ensuite d’entrer les identifiants fournis par votre hébergeur.
1 – Le type de base de données. 
2 – Identifiants de la base de données 
3 – Joomla! génère aléatoirement un préfixe de table (de 5 caractères), vous pouvez le modifier si vous le souhaitez.
4 – Si vous avez une ancienne installation de Joomla!, sur la même base, vous pouvez choisir de sauvegarder ou de supprimer les tables de cette installation

install joomla 3 1

install joomla 3 2

install joomla 3 3 

Etape : - Vue d’ensemble
1 – Choisissez d’installer ou non les données d’exemple de Joomla!.
2 – Vous pouvez choisir d’envoyer les données de configuration de cette installation par mail. 

install joomla 4

install joomla 5

  • Supprimez le dossier "installation"
  • Votre site est prêt pour l'aventure.

Il y a des dizaines de plugins de sauvegarde pour WordPress, alors pourquoi avoir choisi BackWPup ?

Il permet l’envoi des sauvegardes sur un serveur ftp 

Il permet d’automatiser mes sauvegardes 

Son interface est en français, c’est toujours plus pratique 4. Il est gratuit

Définition

Ue extension (ou Plugin)est un petit programme qui va permettre à WordPress d’étendre ses fonctionnalités et d’enrichir ses options de base (galerie photo, formulaire de contact, aide au référencement, réseaux sociaux...).

Installer une Extension

Cliquez à gauche sur « Extensions « Ajouter »



Image 002


Choisissez dans la liste l'extension de votre choix et cliquez sur « Installer maintenant »



Image 003

L'extension est maintenant installée.

Paramétrage de l'Extension

WordPress a rajouté un nouveau menu à gauche, soit dans l'arborescence principale, soit dans le menu « Réglages » (tout dépend de l'Extension »

Le paramétrage dépend ensuite de l'Extension.

Le cas particulier des sites multilingues‌

Si votre projet est de faire votre site en plusieurs langues, l’idéal est d’avoir un site différent par langue afin de leur attribuer un nom de domaine adapté ainsi qu’une extension adaptée au pays exemple .fr, .com, .es etc. 


Pour un référencement efficace à l'étranger faite traduire votre site dans la langue native par un professionnel.

Prenez l'extension et un nom de domaine adapté ( .com, .es )

Faite héberger votre site dans un hébergement se trouvant dans le pays ou vous voulez toucher votre cible.

Bien maintenant que nous avons vu les éléments à prendre en compte pour le référencement de votre site en général, nous allons voir maintenant dans Joomla en particulier.

 

Le formulaire "configuration" présent dans Joomla est accessible en passant par le raccourci à gauche "configuration". Les informations que vous allez gérer dans ce formulaire vont vous permettre d'alimenter :

Pour votre page d'accueil la balise "titre" et description" traitées par Google.

Ce formulaire va permettre aussi de paramétrer la réécriture d'Url de votre site grâce aux alias que nous allons voir un peu plus loin dans cet ouvrage.

Image 022


Voici un exemple de résultat dans la "serp" pour gérer dans la partie "Configuration"


Image 023

1- Le nom du site correspond à la balise "Title"

2- La description à la balise "description »  

  1. 3- La balise "meta keyword" n'est plus gérée par Google, vous n’êtes plus obligé de saisir ce champ.

  2. 4- indiquez ici si vous voulez que Google visite ou pas votre site. Index, Follow : indexe le contenu et ses liens

No index, Follow : n'indexe pas le contenu mais ses liens Index, No follow : indexe le contenu mais pas ses liens No index, No follow : n'indexe ni le contenu ni ses liens

Conseil : je vous invite à mettre votre site «index follow» lorsque votre site est en ligne afin d’éviter les erreurs d’alias que Google aurait déjà indexé.

Image 024

  1. Réécriture d'URL en clair (SEF) : Activer la réécriture des URL en clair en remplaçant l'URL contenant la requête de construction de la page par une URL construite d'après les alias de titre.

  2. Réécriture au 'vol' des URL : Activer la réécriture en clair des URL sans l'utilisation de la chaîne 'index.php/'.

    Avant toute activation, vous devez avoir renommé le fichier 'htaccess.txt' présent à la racine du site en '.htaccess'

  3. Ajouter un suffixe aux URL : Ajouter à la fin de l'URL, le suffixe du type de document (html, pdf, xml, etc.).

    Alias Unicode : Lors de l'utilisation du paramètre 'Translittération' (par défaut), l'alias est généré en minuscules avec des tirets remplaçant les espaces. Le paramètre 'Unicode' conserve les caractères originaux (accentués, cyrilliques, grec, idéogrammes, etc.)

  4. Nom du site dans les titres : Ajouter le nom du site devant le titre des pages affichées dans la barre de titre du navigateur. Exemple : Mon Site - Nom de l'article.

Gérer le cache de Joomla

 

Pour optimiser votre référencement, je vous invite à gérer la personnalisation du cache de votre site Joomla.

Petite explication : si le cache est activé, alors votre site se chargera plus rapidement. la vitesse de chargement d’une page est un critère important pour Google.

 

  1. Cliquez sur System / configuration 2- Cliquez sur l'onglet "système"Ci-dessous un exemple de paramétrage du cache de Joomla
  2.  

 

Image 025

 

Cache : Activer le système de cache et déterminer son niveau. Niveau 'Conservateur' : le plus bas système de cache

Niveau 'Progressif' (défaut) : le plus haut niveau de cache incluant celui des modules (inapproprié pour de très grands sites).

Gestion du cache : Choisissez la méthode de gestion du cache. La méthode native utilise des fichiers ; les répertoires 'cache' doivent être accessibles en écriture (CHMOD 777).

Durée du cache : La durée maximale, en minutes, de validité d'un fichier cache avant qu'il soit rafraîchi.

Les sites sécurisés vont bénéficier d’un «Bonus SEO» :

Google affiche sa volonté de pousser les sites à migrer vers le protocole HTTPS.

Il est conseillé de protéger son site Web à l’aide du protocole HTTPS, même si le site en question ne traite pas de communications sensibles. Le HTTPS protège l’intégrité de votre site Web, et assure la confidentialité et la sécurité de vos utilisateurs.

Le protocole «https» est une option que votre hébergeur peut vous proposer.


Important : Si vous avez un site existant et si vous décidez de le passer en «https» alors il vous faut faire des redirections sous peine d’être sanctionné par Google.

Exemple : http://www.monsite.fr/mes-services vers https://www.monsite.fr/mes- services nous allons traiter de ce sujet un peu plus loin dans ce cours.

Balise title

Exemple : <meta name="title" content="formation-joomla-video" />

balise titre

Balise meta description

Exemple : <meta name="og:description" content="Mooc, formation E-learning spécialisée sur le CMS Joomla. Réalisé par André Debaisieux fondateur de Flashcomet" />

balise description

Balise meta keywords

Cette balise n'est plus pris en compte par Google

Balise meta robots

Exemple :<meta name="robotscontent="index, follow" />


<meta name="rights" content="André Debaisieux" />
<meta name="robots" content="index, follow" />
<meta name="author" content="André Debaisieux" />
<meta name="title" content="formation-joomla-video" />
<meta name="metatitle" content="formation-joomla-video" />
<meta name="og:title" content="formation-joomla-video" />
<meta name="twitter:title" content="formation-joomla-video" />
<meta name="og:description" content="Mooc, formation E-learning spécialisée sur le CMS Joomla. Réalisé par André Debaisieux fondateur de Flashcomet" />
<meta name="twitter:description" content="Mooc, formation E-learning spécialisée sur le CMS Joomla. Réalisé par André Debaisieux fondateur de Flashcomet" />
<meta name="og:url" content="http://www.generous-formations.fr/" />
<meta name="description" content="Mooc, formation E-learning spécialisée sur le CMS Joomla. Réalisé par André Debaisieux fondateur de Flashcomet" />

Balise title

Même si ce n'est pas une balise meta, la balise est utilisée par Google dans son algorithme de classement. En bref, il faut choisir très soigneusement ce qu'on y met afin que cela décrive le mieux possible la page, les mots les plus importants au début. Exemple : <meta name="title" content="Un titre">

Balise meta description

La balise meta description est prise en compte par Google mais uniquement pour l'affichage des résultats.

Balise meta keywords

Elle n'est plus utilisée par Google, si vous avez pris la peine de la remplir soigneusement, laissez-la, elle peut servir pour d'autres moteurs ou annuaires. Balise meta news_keywords

Elle ne sert qu'au référencement dans Google Actualités.

Balise meta robots

Cette balise est prise en compte par Google (et les autres moteurs). Elle sert à définir des restrictions au robot qui vient crawler la page.

Balise meta nositelinkssearchbox

Dans certains cas, en général pour des requêtes assimilées à la marque d'un site,

Balise meta syndication-source

Dans le cas de la syndication de contenus, elle sert à indiquer l'URL de l'article original.

Balise meta original-source

Dans le cas où un article a été rédigé à partir de plusieurs sources (notamment les sources ayant révélé un scoop), elle sert à indiquer la ou les URL des articles originaux.

Création d’un compte Gmail

Pour faire du référencement dans Google il vous faut avoir un compte Google, voici le lien pour en créer un :

https://accounts.google.com/

 

Image 014


Image 015

 

Création d'un compte Hotmail

Pour faire du référencement dans Bing, il vous faut un compte Bing ou Yahoo : https://signup.live.com/signup.aspx



Image 016

Image 012

Pour travailler dans de bonnes conditions il est important d'avoir de bons outils. Les outils que je vous présente sont gratuits. Vous devrez les installer dans vos navigateurs, ils vont vous aider à optimiser votre site pour le référencement.

Pour le navigateur Firefox et Chrome l'extension Web developer

Vous pouvez faire quoi avec cette extension:

 

Connaître le nom, la taille, le poids des images.
Contrôler que les balises Alt de vos images soient bien saisies.
Contrôler la présence de balises H1, H2, H3...
Visualiser votre site dans différents formats comme les smartphones ou tablette par exemple.
Voir le code source de votre page.
La validation du code de vos CSS
Afficher les liens externes etc...

 

Image 013

 

Aujourd'hui, la concurrence est de plus en plus difficile sur les requêtes dites "concurrentielles", je parle là des termes les plus populaires, les plus tapés et les plus recherchés par les internautes lors de leurs recherches.

Ceci pris en compte la longue-traîne permet d'identifier des mots-clés moins concurrentiels en terme d'audience mais qui ramènent toutefois du trafic, étant donné qu'ils représentent une recherche plus ciblée.

Ok mais concrètement, si je reprends mon exemple de plombier à Toulouse, je choisirais plutôt : «plombier chauffagiste sur Toulouse» au lieu de «plombier» par exemple. Pour placer ces groupes de mots plus détaillés et bien je crée un article de blog, comme ça je peux créer autant d’articles que de mots clés.

Pour info : de plus en plus de recherches sur les smartphones se fond avec la commande vocale, ce qui conforte la démonstration.

Un groupe de mots clés : égal une page‌

 

Personnellement avant de commencer un site, je prépare des groupes de mots clés les plus importants que la cible de votre site pourrait taper dans les moteurs de recherches. Exemple :

 

Formateur web Toulouse,

Formateur référencement Toulouse,

Formateur Joomla Toulouse,

Formateur internet Toulouse ,

Formateur wordpress Toulouse

 

Comment vous aider à les trouver :

La serp : le nombre de pages concurrentes L'outil adwords : www.adwords.google.com

Mots clés associés proposés en bas de la page Google (Serp)

C'est cette liste de mots clés qui va définir le contenu et l'organisation de votre site. Exemple : si un groupe de mots clés est important pour vous comme "plombier Toulouse"

 

Je crée alors :
Un article avec comme titre "plombier Toulouse", Un alias avec "plombier-toulouse" ; Du contenu (texte) avec les mots"plombier Toulouse" ;

Une image nommée "plombier-toulouse.jpg" ; La description de l’image bien remplie ;

un lien externe vers un site qui traite du sujet ; Des liens internes vers votre site

Un lien de menu avec un alias comme "plombier Toulouse".

Partagez votre page vers les réseaux sociaux et ajoutez des hashtags à vos posts.

 

Remarque : Un contenu textuel de qualité est une des clés du succès (contenu unique, sans faute d’orthographe)

Par quoi on commence pour faire du référencement

 

Voici une liste d'étapes nécessaires à réaliser pour le référencement de votre site qu'il vous faudra "checker".

 

Plusieurs étapes sont nécessaires pour un référencement de qualité de votre site Internet :

 

La partie SEO

 

 

(L'optimisation de votre site pour les moteurs de recherche ou référencement naturel).

Nous allons décortiquer votre site pour apporter les modifications nécessaires à un bon référencement.

Voici un exemple de quelques tâches que nous allons traiter :

 

Bien choisir son hébergement
Bien choisir et gérer son nom de domaine
La balise "titre": Le titre du site
La balise "description du site"
La gestion de vos URL (réécriture d'URL)
Insérer un blog
Prévoir du flux RSS
La gestion du contenu de vos articles
Gérer les Micro-datas
L'optimisation de vos images
La gestion des médias ( PDF et vidéos)
L'installation de "SiteMaps"
Avoir un template "responsive"

 

Pour information le «SEA (Search Engine Adverstising)» contrairement au «SEO» correspond au référencement payant.

  • La partie inscription & Référencement

    Image 009

    Une fois l'optimisation de votre site terminée nous allons faire le nécessaire pour le déclarer à Google, Yahoo et Bing.

    Bing et Yahoo aillant fusionné l’opération d’inscription se fait directement dans Bing Voici un exemple de quelques tâches à réaliser:

  • Créer son compte Google

  • Créer son compte Bing ( Bing et Yahoo même compte)

  • Créer son compte Google Console

  • Créer un compte Google Analytics

  • Inscrire votre site dans les moteurs de recherches

  • Déclarer les «SiteMaps» de votre site

  • Optimiser le fichier Robots.txt

  • Optimiser votre fichier htaccess

  • (Vous n’avez pas tout compris, pas de problème nous allons voir ça en détail)

    La partie correction et optimisation

    Image 007

    Votre site va probablement subir des modifications. "Google webmaster tools" (ou Google console) va vous aider à corriger et optimiser votre site.

    Voici un exemple de quelques tâches à réaliser :

  • Gestion des erreurs avec Google console

  • Gestion des liens 301

  • Optimisation de la vitesse de chargement de votre site

    La partie E-communication

  •  

    Image 011

    Si on considère la concurrence et le nombre de sites sur la toile, il va vous falloir être plus fort que les autres en branchant votre site avec des outils supplémentaires, comme du flux RSS, des réseaux sociaux, faire des Backlinks (liens entrants) ...

    Voici un exemple de quelques tâches à réaliser :

  • Créer une page Google business

  • Les backlinks avec Facebook entreprise (page)

  • Les backlinks avec Google plus

  • Partage des informations avec les hashtags

  • Gestion du flux RSS

  • Pourquoi pas faire une Webapps (pensez qu’elle va se retrouver dans «play store»

Image 006

Pour information et pour rappel, voici une petite liste de choses que Google aimera
dans votre site :
 – un site qui propose du contenu de qualité et unique ;
 – un site qui se charge vite ;
 – un site qui propose un code HTML propre ;
 – un site ergonomique ;
 - un site avec une arborescence propre ;
 - des liens entrants;
 - des branchements de votre site avec les réseaux sociaux
Chapeau blanc, chapeau noir
Un petit mot sur les dénominations que se donnent les référenceurs professionnels :
 – Les white hats (chapeaux blancs) sont ceux qui ne trichent pas et suivent à la
lettre les recommandations de Google .
 – Les black hats (chapeaux noirs) sont... tout le contraire ! Tout est bon, même
(et surtout) ce qui est interdit par le moteur, pour mieux se positionner dans ses
résultats.

Installer le plugin Contact Form 7

 

Image 002

Dans la liste proposée choisissez « Contact Form 7 » Puis cliquez sur « installer »

Et enfin sur « activer maintenant »

Le Plugin est alors fonctionnel. Il ne reste plus qu'à le paramétrer.

Image 005

Qu’est-ce que le Netlinking ?
Cela consiste à créer des liens externes de bonne qualité qui pointent vers votre site. Différents paramètres interviennent et sont définis dans les algorithmes des moteurs de recherche. De plus, ceux-ci changent régulièrement. La source des liens, la position du lien dans la page, le texte d’encrage sont les différents éléments pris en compte. Il s’agit de l’étape du référencement qui prend le plus de temps et qui demande le développement d’un réseau de contact. »

Image 004

Comprendre et connaître Googlebot est essentiel pour faire du référencement sans "souffrir".
Googlebot est le robot d’exploration et d’indexation de Google. Dans la pratique, il existe plusieurs types de Googlebot spécialisés par contenus à explorer / indexer. 
Googlebot est un programme d’indexation qui est en fait réparti sur un grand nombre de serveurs éclatés géographiquement pour réduire la consommation de ressources liée à la démarche d’exploration et d’indexation des pages web.

La “serp” est le nom donné au formulaire de Google qui fournit les résultats de recherche des requêtes des internautes.

Souvent sous exploitée, la "serp" va vous aider à optimiser la manière de concevoir et d’optimiser le contenu de votre site par rapport au référencement.

Avant de commencer voyons ce que contient cette page :

 

 Image 003

 hebergement webLe choix d'un hébergeur de qualité est essentiel pour votre référencement et la sécurité de votre site, préférez un hébergeur dont l'IP se situe en France.

Contrôlez la version du Php qui déterminera la possibilité d'installation de composants récents, le temps de chargement des pages, enfin évitez les hébergements gratuits avec ou sans publicités.

 

Hébergement mutualisé ou dédié ? un mutualisé pourquoi pas si vous optez pour un mutualisé "pro". Dédié oui c'est la meilleure solution, à la condition d'avoir les compétences nécessaires.

Avec l'arrivée de Joomla 3,7 il faut un serveur en version Php7, si vous avez Wordpress Php5 suffit.

Voiçi un exemple de prestataires : Amen ou Ovh, le prix varie de 25 à une centaine d'euros par an.

Vous pouvez passer avec des professionnelles qui propose des solutions avec des serveurs dédiés directement paramétrés pret à admistrer.

 

Il existe 3 grandes familles et types d’hébergement web :


Hébergement mutualisé (en colocation ou partagé)
Hébergement dédié
Hébergement VPS (Serveur Privé Virtuel)


l’hébergement web idéal pour votre projet.

Un hébergement mutualisé consiste à séparer une machine physique (un serveur) en plusieurs hébergements revendables. Avec ce type d’offre, vous êtes alors colocataire de la machine et à ce titre vous avez droit à d’en utiliser les ressources (processeur, RAM, espace disque) avec toutefois quelques limitations.
Ce type d’hébergement est parfait pour héberger un blog ou un site web d’entreprise. C’est en fait idéal dans le cas d’un site qui n’a pas énormément de visites et ne consomme pas beaucoup de ressources. C’est le type d’offre le moins cher sur le marché et un des plus répandus.

Un hébergement dédié, on vous propose un serveur physique au complet qui sera hébergé dans les locaux de l’entreprise qui vous vends la solution. Vous pouvez choisir le système d’exploitation que vous souhaitez à l’installation (Windows ou Linux). Ce type de machine est intéressant si vous avez des connaissances (ou quelqu’un à disposition) en administration système et que vous souhaitez disposer de toutes les ressources en plus d’avoir le
contrôle total sur votre machine. En général, ce type de serveur est réservé aux gros projets : E-commerce, grosses applications
(intranet, extranet) et sites web à haut traffic.
Faites toutefois attention : un problème logiciel sera rarement pris en compte (gratuitement) par le service à la clientèle. Vous êtes responsables de la configuration et de l’installation de logiciels. Par contre, s’il y a des problèmes au niveau de la machine, ils pourront vous aider.


Un serveur privé virtuel dispose, à toute fin pratique, des mêmes caractéristiques qu’un hébergement dédié, mis à part pour la structure matérielle. Dans le cas d’un VPS, vous disposez d’une machine virtuelle installée sur un serveur (en général très puissant) mais le serveur physique n’est pas à vous. En général, vous payez pour des ressources sur cette machine en fonction de vos besoins (RAM, processeur, escpace disque).
Cette solution est à mis chemin entre l’hébergement mutualisé et le serveur dédié. Vous faites de la collocation de serveur mais vous avez votre propre machine et votre propre système d’exploitation.
Cette solution est pour les gens qui nécessitent absolument d’avoir leur propre système d’exploitation (Accès SSH, sécurité, serveur de mails , applications nécessitants des installations de composants spéciaux).
Le coût est donc beaucoup plus abordable qu’un serveur dédié et l’évolutivité (RAM, processeurs, espace disque) est configurable à souhait.

 

 afnic

Sur le site de l'afnic vous pouvez vérifier si un nom de domaine est disponible

https://www.afnic.fr/fr/produits-et-services/services/whois/

 

Whois (contraction de l'anglais who is?, signifiant « qui est ? ») est un service de recherche fourni par les registres Internet, par exemple les Registres Internet régionaux (RIR) ou bien les registres de noms de domaine permettant d'obtenir des informations sur une adresse IP ou un nom de domaine. Ces informations ont des usages très variés, que ce soit la coordination entre ingénieurs réseaux pour résoudre un problème technique, ou bien la recherche du titulaire d'un nom de domaine par une société qui souhaiterait l'obtenir.

Sources: Afnic Wikipedia

Whois non anonyme

Pour votre référencement passer votre Whois en mode public 

Pour un moteur de recherche (Google possède aussi un réseau social...), l'anonymat est suspect !

 

Sur le site https://www.whois.com/whois/ vous pouvez vérifier si vos informations sont publics ou privé

 

whois 1

whois 2

Image 003

 

 

 

Le nom de domaine, il est un des leviers pour votre référencement, pour être conforme au dernier algorithme de Google, privilégiez un domaine avec des mots-clés ( 3 maxi ) préférez des tirets plutôt que des mots attachés. Toutefois si vous en possédez déjà un ayant une ancienneté , gardez le.

Exemple: www.plombier-toulouse.fr

En tout état de cause, choisissez un domaine le plus court possible ou le plus simple possible.

En cours, je conseille à tout le monde de prendre avant tout un domaine en ".fr " dans le cas d'un site dont la cible de recherche est en France.

Marque ou mots-clés ?: ma réponse: quel est le plus important pour vous ?

Cibler le public du site.
Achetez et renouvelez votre nom de domaine d'une durée supérieures à un an, Google vous fera confiance à la pérennité de votre site.

Lors du paramétrage de votre nom de domaine, vérifiez que le Whois soit public et nom anonyme.

Joomla c'est quoi ?‌

 

Image 002

www.joomla.fr le site Français officiel 

 

Joomla! est un CMS (Content Management System en Anglais ou Système de Gestion de Contenu en Français) libre, open source et gratuit.

Joomla est un CMS dit "Logiciel libre", il est accessible à tous professionnels, association ou particulier.

Il existe depuis plus de dix ans, vous pouvez trouver des ouvrages sur Joomla à la Fnac, Amazon ou sur le web, gage de qualité et de pérennité.

Joomla est un logiciel développé en php qui s'installe directement sur votre hébergement de site Internet ou sur un serveur local de type xwamp.

Pour modifier ou ajouter des pages à votre site, il vous faut une connexion internet et les codes d'accès nécessaires pour exploiter votre site Internet.

Des que votre site est réalisé, vous avez la main sur la gestion du contenu, vous êtes donc autonome et n'êtes pas tributaire d'un préstataire de service.

Quelques CMS équivalent Wordpress, Drupal, Spip.

Un thème va vous permettre de modifier l’apparence et la mise en page de votre site. Il est totalement indépendant du contenu.

 

Choisir un thème‌
Définissez d'abord vos besoins. Avant d’arrêter votre choix sur un thème, il sera donc utile de savoir ce que vous voulez faire, ne serait-ce que pour pouvoir vérifier si tel ou tel thème le permet !

Regardez également attentivement comment sont faits les sites dont vous aimez le design, et n’hésitez pas à vous en inspirer!

Le but, c’est de déterminer quelles fonctionnalités votre futur thème devra posséder.

Informations

André Debaisieux

Consultant formateur Web

06.30.00.91.44

andre.debaisieux@gmail.com

Communication

facebook  linkedin.fw youtube

 

 

Membres

labe qualité region occitanie  datadock  certification cqp