cette image représente le logo du formateur indépendant André Debaisieux

FORMATEUR DIGITAL WEB INDÉPENDANT

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.
et aussi de trouver un hébergement local à chacun.

Les microdatas permettent notamment aux moteurs de recherche d'appréhender des informations précises sur le contenu et le thème d'une page Web.
Les Microdatas dans HTML5 : après des expérimentations en matière de balisage sémantique fournies par les microformats, il est possible aujourd'hui de le mettre en place facilement grâce à “Google console”
Voici le principe:
Connectez vous au site : https://www.google.com/webmasters/markup-helper/?hl=fr
1 - Choisissez un thème par exemple "Article"
2- Sélectionnez l'onglet "HTML" et collez le html (code source) de votre page à optimiser, puis cliquez sur le bouton "Commencer le balisage"
Voir l'exemple ci-dessous

Image 036 

Là les choses sérieuses commencent :
Vous devez sélectionner les parties de votre page qui correspondent aux balises que vous devez déclarer

Image 037

Une fois réalisé, cliquez sur le bouton "Créer le html"
Copiez le code source généré et intégrez dans l'article de votre page.

Les images présentes dans une page sont un critère important pour sa prise en compte dans Google, pour cette raison n'hésitez pas à en ajouter, sous 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.

Image 035

Saisissez la balise "alt" de vos images car elle est employée pour les malvoyants.

Optimisez vos images
Les images dans Joomla ne sont pas uniquement gérées dans les articles.
Elles le sont aussi dans les modules, slides, galerie, photos, template…
La bonne pratique c'est de commencer d’organiser correctement les photos ou images sur votre site afin de pouvoir gagner du temps lors de l’optimisation et de la gestion des images.
Concrètement commencez à organiser vos photos la partie “média” de Joomla.
Si les photos sont encore sur le disque dur de votre ordinateur et que votre site est en cours de réalisation, pensez à :
les renommer exemple: plombier-toulouse.jpg (pas de majuscule, pas d’espace entre les mots, enfin pas d’accent)
Réduisez la taille de vos photos le plus possible, en effet plus la taille de photo est proche de la taille réelle visible par l’internaute et plus Google considére votre site.
Réduisez le poids de votre photo en privilégiant le format jpg et en respectant un pourcentage de compression de 80%

Comme vous l’avez vu un peu plus haut, les balises H* sont importantes. Toutefois je vous invite à respecter quelques règles que nous allons encore revoir.

• Un titre H1 par page

• Une page peut avoir plusieurs balises H2

• Respectez l’ordre d’apparition H1, H2, H3 …

Les Balises h1 à h6, qu’est ce que c’est ?

Dans une page web, les titres introduisant le contenu dans l'HTML sont signalés par les balises h1, h2, h3, h4, h5 et h6 (h pour "heading" en anglais) et ont deux principales vocations :

préparer la lecture du paragraphe que ces titres précèdent en résumant son contenu. Ils aident ainsi les lecteurs à mieux comprendre ce qu’ils vont lire.

indiquer aux moteurs de recherche les informations les plus importantes que comportent votre page (l'algorithme de Google accorderait plus de poids aux mots clés et expressions que contiennent les titres qu'au reste du contenu)

Par ailleurs, concernant l’écriture des titres dans une page web, la norme HTML 4.01 nous dit que :

chaque document HTML peut contenir un ou plusieurs titres h1 à h6

chaque titre h1 à h6 nécessite obligatoirement une balise ouvrante <hn> et une balise fermante </hn>

il existe 6 niveaux de titrage possibles : h1, h2, h3, h4, h5 et h6. h1 étant un titre de premier niveau, h2 un titre de second niveau, h3, un titre de troisième niveau etc...

Les règles d’utilisation des balises h1 à h6.

Les pratiques autorisées :

Voici deux exemples d’utilisation des éléments h1, h2, h3, h4, h5, h6. Dans ces exemples, les balises sont correctement formées et seront bien interprétées par les moteurs de recherche.

EXEMPLE 1 : TITRE PARFAITEMENT HIÉRARCHISÉ.

<body>

<h1>Optimiser la balise meta description pour le SEO</h1>

Ici le contenu du paragraphe...

<h2>Quelles sont les balises essentielles pour le référencement?</h2>

Ici le contenu du paragraphe...

<h3>Qu’est ce que la balise méta description ?</h3>

Ici le contenu du paragraphe...

<h4>Quelles sont les règles de rédaction de la balise méta </h4>

Ici le contenu du paragraphe...

<h5>Quelles sont les erreurs à éviter ?</h5>

Ici le contenu du paragraphe...

<h6>La balise meta keyword est elle importante ?</h6>

Ici le contenu du paragraphe...

</body>

La page contient un titre principal (h1 et des sous titres moins importantes h2, h3, h4, h5 et h6). Cette utilisation n’est possible que si vous avez des contenu qui se hiérarchisent ainsi (titre, sous titre, sous-sous titre...).

Si le contenu de la page ne se hiérarchise pas ainsi, ne forcez pas car vous risqueriez de nuire à la lisibilité de votre contenu.

Si le contenu de votre page web ne permet pas une utilisation hiérarchique des titre h1, h2, h3, h4, h5, h6 optez plutôt pour l’exemple suivant.

EXEMPLE 2 : UN TITRE H1 ET PLUSIEURS SOUS TITRES DE MÊME IMPORTANCE (H2)

<body>

<h1>Optimiser la balise méta description pour le SEO</h1>

Ici le contenu du paragraphe...

<h2>Quelles sont les balises essentielles pour le référencement?</h2>

Ici le contenu du paragraphe...

<h2>Qu’est ce que la balise méta description ?</h2>

Ici le contenu du paragraphe...

<h2>Quelles sont les règles de rédaction de la balise méta</h2>

Ici le contenu du paragraphe...

<h2>Quelles sont les erreurs à éviter ?</h2>

Ici le contenu du paragraphe...

<h2>La balise meta keyword est elle importante ?</h2>

Ici le contenu du paragraphe...

</body>

Dans ce cas, il y a un titre principal (h1) et 5 sous titres de même importance (h2). Cette utilisation permet d’une part d'indiquer aux moteurs de recherche que les 5 sous-titres ont le même poids et d’autre part cela permet de conserver une bonne lisibilité de votre contenu.

La pratique pénalisante :

Voici maintenant un exemple d’utilisation des titres h1 à h6 qui risquerait de pénaliser votre site. Dans ce cas, on passe de la balise h1 à h3 puis h2 et à nouveau h3. Cette ordre de présentation n'est pas logique (on ne doit pas ouvrir un sous-sous chapitre avant d'avoir ouvert le sous-chapitre parent)

<body>

<h1>Optimiser la balise méta description pour le SEO</h1>

Ici le contenu du paragraphe...

<h3> Quelles sont les balises essentielles pour le référencement?</h3>

Ici le contenu du paragraphe...

<h2> Qu’est ce que la balise méta description ?</h2>

Ici le contenu du paragraphe...

<h3> Quelles sont les règles de rédaction de la balise méta</h3>

</body>

Notez que le niveau d’importance de la balise ouvrante doit être strictement le même que celui de la balise fermante. Voici un exemple de titre valide :

<h1>Les castors lapons</h1>

Le titre suivant n’est pas valide et risque même de déstructurer toute la mise en page du document html :

<h1>Les castors lapons</h2>

Les balises h1 à h6 sont-elles importantes ?

D’un point de vue référencement naturel, après la balise title, ce sont les balises h1 à h6 qui sont probablement les plus importantes de l’ensemble du contenu d’une page web. Lorsqu’elles sont bien rédigées, les titres h1 à h6 introduisent le contenu qui les suit. Ils fournissent donc les termes les plus pertinents pour identifier le contenu du paragraphe qui les suit.

Les balises h1 à h6 entre elles

Pour les moteurs de recherche (google, yahoo, bing), les balises H1 à H6 n’ont pas toutes le même poids.

D’un point de vue référencement, la balise h1 est la plus importante parmi tous les autres titres. Plus on augmente de niveau de titre (h2, h3, h4, h5 et h6), moins son contenu sera considéré comme important par les moteurs de recherche.

Le contenu d’une balise h1 sera donc plus important que celui d’une balise h2, lui-même plus important qu’une balise h3 et ainsi de suite jusqu’à h6. Les efforts d’optimisation devront donc se concentrer en priorité sur les titres en h1, puis en h2, etc.

Les balises h1 à h6 et les autres balises & tags HTML

Pour les moteurs de recherche, après la balise TITLE d’une page web (titre de la fenêtre du navigateur), les balises h1 à h6 (titres et sous-titres du texte de la page) sont probablement les balises HTML les plus importantes. Elles sont donc incontournables dans l’optimisation d’une page web pour un meilleur référencement naturel.

Voici un exemple de Balises h1 à h6 mal optimisées :

<h1>Le sport</h1>

...

<h2>Quel sport ?</h2>

...

<h3>Où ?</h3>

...

Il faut choisir avec soin les mots-clés à partir desquels les utilisateurs peuvent trouver la page web.

<h1>L’importance de la pratique du sport </h1>

...

<h2>Quelle activité sportive choisir ?</h2>

...

<h3>Où pratiquer une activité sportive ?</h3>

...

Quelles sont les règles de rédaction des balises h1 à h6 ?

Le mot d’ordre : trouver le bon compromis entre le référencement naturel et les internautes :

Pour un bon référencement naturel, un titre doit contenir des mots-clés stratégiques sur lesquels vous souhaitez vous positionner dans les pages de résultats.

Mais il ne faut pas privilégier le référencent au détriment des internautes. Quel est l’utilité d’une page bien référence si les internautes n’y comprennent rien et la quittent aussi tôt arrivé ?

Il faut donc trouver le meilleur compromis entre un titre à destination des internautes et un titre à destination des moteurs de recherche. L’exercice est difficile. Il faut être fin rédacteur pour placer les bons mots-clés dans les titres.

Par exemple, le titre, « Découvrez les règles d’optimisation des balises h1 à h6 » peut convenir aux internautes et aux moteurs de recherche. Alors que si on souhaite un titre destinée uniquement aux moteurs de recherche, le titre suivant serait préférable : « Optimiser les balises h1, h2, h3, h4, h5 et h6 »

Quelle longueur pour les balises h1 à h6 ?

Il n’y a pas de règle pour la longueur des titres. Ils peuvent aussi bien être courts que longs. Il faut néanmoins surveiller la densité des mots-clés dans les titres. C’est un critère important. Cela peut justifier l’emploi plus récurrent de titres courts ou de longueur moyenne.

Image 034Pour contrôler votre page je vous invite à prendre l’outil «Webdevelopper» de Firefox ou un équivalent.

 

ésentation du projet du site

Exemple :

Le site réalisé présentera les laboratoires Plantaurel:

  • L'entreprise, sa philosophie

  • Ses services

  • Ses produits

  • ...

Le site sera conforme ( responsive) aux médias actuels, CAD : lisible sur Smartphones et tablettes.

Il sera évolutif et pourra intégrer une partie E-commerce.

L'analyse du contenu prendra en compte les normes des moteurs de recherche de type "Google", les informations contenues pourront être exploitées dans les divers réseaux sociaux professionnels.

Il sera possible d'exploiter les informations dans une Apps (application téléchargeable depuis Google play & Apple store). Il pourra être multi-langues.

Les outils, le contenu restera la propriété de l'entreprise " les laboratoires Plantaurel".

Les informations, la mise à jour du contenu du site pourront être gérées par les laboratoires Plantaurel qui détiendront tous les accès et droits de l'ensemble du site.

(Les Laboratoires pourront être indépendants s'ils le souhaitent)

La cible :

Les professionnels de la Dermocosmétologie (Laboratoires etc...)

Ce site permettra l'accès à ses clients ou prospects de bénéficier d'un accès privé.

Possibilité de télécharger des documents privés etc..

Nom de domaine

2 solutions, soit :

La société gestionnaire du nom de domaine actuel (http://www.laboratoires-plantaurel.com/) donne la possibilité de le récupérer

soit , il sera crée un nom de domaine équivalent.

Exemple:

http://www.laboratoires-plantaurel.fr/

http://www.laboratoires-du-plantaurel.com/

http://www.laboratoires-plantaurel-dermocosmetologie.com

il est possibile d'avoir plusieurs noms de domaine attachés à 1 site

(pour information un nom de domaine coûte 10€).

Hébergement

Hébergement gratuit ?

Hebergement pro ?

Hébergement mutualisé ?

Exemple :

Le site sera hébergé sur un serveur professionnel de type semi-dédié.

L'hébergeur prend en charge une sauvegarde journalière sur 15 jours glissants.

Une assistance téléphonique et mails est inclus dans le pack pour tout ce qui concerne les questions éventuelles d'hébergement, de sauvegarde, de nom de domaine etc...).

Outils préconisés pour la réalisation du site

Le logiciel Joomla associé à Hikashop ou virtuemart pour une évolution vers un e-commerce.

Joomla vous permettra de saisir en ligne vos pages, leur contenu, d'effectuer vos modifications , de télécharger vos photos etc...et vous procure une autonomie complète.

Pourquoi Joomla (ou wordpress):

Ce CMS a gagné les Owards du meilleur logiciel libre du monde depuis 5 ans, il est évolutif, conforme aux référencements et normes Google. Il existe des milliers d'extensions possibles à installer en fonction des besoins, des métiers ( galerie photo, droits d'accès, paniers, vidéo, ...).

Adapté à votre métier et aux besoins futurs d'évolutions de l'entreprise.

 

 Arborescence

Menu horizontal

Accueil

Thème 1

Thème 2

Thème 1

Contact

autant d'onglets que de rubriques et selon le nombre, il est possible d'avoir des sous menus.

Menu vertical gauche ou droit

Autre thème 1

Autre thème 2

Autre thème 3

Autre thème 4

Autre thème 5

Menu horizontal bas de page

Mentions légales

Accès clients

Texte pied de page : Copyright & mentions légales

Maquette du site

Exemple :

Image 043

 

Couleurs

*Exemple de base de couleurs

Image 044

 

Fond : #fffff

Feuille : #fffff

Menu: #fffff

 

Polices : Tahoma et verdanna

Typo: : arial tahoma verdana...

 

Favicon (favicon.ico)

Image 045

 

Logo

 

Image 046

 

Mots-clefs métiers

Cible : professionnelle

Laboratoires

Marque de la dermocométologie

Laboratoires du Plantaurel

Syndets

Savon noir

Base Pain surgras

Etc...

Acces privé ou public

Le visiteur pourrat accéder à un acces prvié dédié pour télécharger ses documents

Flux et partage d’informations

Afin d'être conforme aux moteurs de recherche actuels, il est conseillé de créer un blog (différent de Forum) professionnel, il permettra le partage d’informations vers les réseaux sociaux et autres sites.

1 info par semaine conseillé.

Réseaux sociaux Entreprises

Un lien sera fait vers :

https://www.facebook.com

https://plus.google.com/https://www.linkedin.com

Exemple d'extensions du site :

Formulaire de contact avec Captcha

Like Box Facebook

E-commerce Hikashop

Gestionnaire de téléchargement de documents

Sécurité

Mise à jour du htacces

Protection du compte de connexion

Mise en place d’un Capcha pour le formulaire de contact

Blog

Avantage d'un Blog : un blog permet d'augmenter le nombre de page sur un site, critère de qualité pour le référencement Google, de plus, il très utile lorsque le nombre de rubrique est limité.

Séo & Référencement Google et autres moteurs

Installation d’un siteMap (carte du site) Mise en place de la réécriture d’URL

Optimisation et description des images (taille, nom, format et description)

Optimisation du contenu par page (langage Google)

Ajout du bouton Google plus, Facebook etc

Liste des pages (ou articles)

Nombre de pages à définir (15 pages minimum conseillé pour être référencés naturellement ).

exemple de page :

Accueil

Entreprise

Nos services

Nos produits

Notre savoir faire

Nos références

Galerie photo

Blog

Contact

Mentions légales

etc

Les rôles de chacun

  • Contenu Anglais et Français (texte) fourni par le client

  • Photographies de qualité fournis (possibilité de faire intervenir un photographe en option)

  • Logo fourni en HD

formation pour la prise en main de l'alimentation du site

  • 1/2 journée sur Toulouse ou sur site (frais de déplacement en sus)

Maintenance

  • maintenance et correctifs (ne concerne pas le refonte du site) inclus pendant 1 an.

Référencement

  • 1er et 2ème niveau inclus (attention, un site doit être alimenté, mis à jour régulièrement pour que le référencement soit optimum)

Sécurité et sauvegarde

  • l'hébergeur fourni une sauvegarde journalière sur 15 jours glissants

  • Le propriétaire du site a accès à un outil automatique de sauvegarde supplémentaire qu'il devra effectuer.

 

André Debaisieux

Consultant formateur Web

06.30.00.91.44

andre.debaisieux@gmail.com

labe qualité region occitanie  datadock  certification cqp  

association joomla