Tutorial remplir son contenu web

05 Juil 2015


Intégrer votre contenu Web en 4 étapes

Ne partez plus de rien pour écrire votre site internet

1.Étape 1 Définissez vos rubriques
2.Étape 2 Écrivez les fiches rubriques pour votre référencement
3.Étape 3 Préparer vos images
4.Étape 4 Écrirez et intégrez vos textes

tutorial-remplir-son-contenu-web_img_0

Étape 1 définissez vos rubriques

L’Arborescence, ou la carte aux trésors

Dans tout projet de site internet après avoir définit

•Son nom de domaine
•Ses différentes cibles
•Sa concurrence directe et indirecte
•Les sites positionnés sur le même marché mais à l’étranger (pour éviter de copier sur le concurrent trop proche)
•Ses fonctionnalités

On définit son arborescence sur

une carte heuristique

(tout simplement un arbre de mots qui correspondent à vos rubriques.)

La meilleure des façons de réaliser une Carte heuristique est

en équipe et autour d’une table
avec de simples feuilles A3 scotchées ensemble, des stabilos, des crayons et des post-it’s.

tutorial-remplir-son-contenu-web_img_1

Ou à l’aide d’un logiciel comme Mindnode ou Freemind

tutorial-remplir-son-contenu-web_img_2

Mais toujours en équipe

L’équipe idéale serait au minimum :

•Un membre de la direction
•Un ou une commercial
•Un technicien métier

Par ce procédé, un simple coup d’œil suffit à détecter un futur problème de navigation.

En évitant une arborescence trop compliquée pour l’internaute.

Bien choisir le nom de vos rubriques

Il est très important de choisir le nom des rubriques

afin que vos utilisateurs naviguent simplement & rapidement dans votre site.

Choisissez toujours des noms brefs & concis

qui amèneront une lecture agréable pour vos internautes.

Évitez par exemples les pronoms qui rallongent les noms de vos rubriques,et perturbent une lecture rapide.

Ex pour : Notre Entreprise ou Qui sommes-nous ?

«Notre » Entreprise :

Classiquement appelé ainsi sur certain site internet, il n’est pas nécessaire d’utiliser le pronom ‘notre’ ou ‘nos’ sur votre site internet. Il est évident que c’est de votre entreprise dont nous allons parler.

Qui sommes-nous ? : ce nom de rubrique fut très à la mode et donc fort répandu. Mais c’est un mauvais exemple dû à son nombre de caractères, qui prend beaucoup de place dans un menu.

Et surtout, allez vous vous lancer dans une grande introspection de votre entreprise et de tout son personnel ?

Des alternatives viables existent, telles que :

•A propos
•Entreprise
•Société
•Groupe
•Ou tout simplement le nom de votre entreprise

Vous l’aurez compris, Contactez-nous devient facilement Contact, et reste tout aussi efficace.

 

Conseil : Vous avez tout a loisir de donner plus tard un nom plus long et précis pour le titre de la page* et ce sera bon pour votre référencement.

(* seulement visible par les robots ou partiellement sur les onglets de votre navigateur)

Voir ci-contre les fiches rubriques >

Voila, vous avez gagné de la place sur votre futur menu :

Ainsi vous aurez le choix entre :

•Afficher une autre rubrique importante à vos yeux.ou
•Gagner en espace entre chaque rubrique, pour la visibilité et donc améliorer l’ergonomie de votre site.

« Ce qui aurait été plus difficile avant. »

Étape 2 les fiches rubriques pour le référencement

Avant même de vous attaquer au contenu textes et images, vous devez penser référencement naturel, car c’est le nerf de la guerre.

Copier coller ce tableau

Exemple pour un Constructeur de bâtiments :

Fiche Rubrique
Nom Rubrique Société
Titre de la page Bertin Construction société de BTP à Bayeuxdepuis 1961
Mot Clefs bayeux, normandie, constructeur, batiment,industriel, stockage, bertin, societe, experience,equipe, experimente, compagnon, devoir,
Mot Clef principal constructeur
Description Bertin Construction est une société déconstruction de bâtiment industriel installé à Bayeux en normandie depuis 1961; Composé d’une équipe expérimentée dans les grands bâtiments de stockage, dont beaucoup de charpentiers issus des compagnons du devoir.[NoCache]
URL /société-construction-batiment-bayeux/
Cibles prioritaires pour cetterubrique dirigeant, responsable-projet,

Les mots-clefs peuvent être vus pendant la réunion de votre équipe vous pourrez alors choisir les plus adaptés.

Infos : la description ne doit pas dépasser 160 caractères

Le contenu d’une page web doit contenir au minimum 300 mots et posséder 4% de mot clefs.

Mots-clefs banals contre mots-clefs professionnels

Il en faut pour tout le monde ! Car oui tout le monde doit pouvoir vous trouver ; même ceux qui ne partagent pas votre vocabulaire professionnel.

Voilà une belle opportunité d’expliquer votre métier en mélangeant ces deux types de mots-clefs dans vos textes.

Le technicien nous dira des mots clefs techniques correspondant à une rubrique et le commercial saura les traduire par d’autres moins techniques mais plus répandus auprès de ses prospects.

Parfois il arrive que cela soit l’inverse.

Exemple pour un illustrateur :

Mots-clefs banals Mots-clefs techniques
Dessin Illustration
Fausse perspective Isométrique
Police d’écriture Typographie

Exemple de tournure : Une illustration isométrique est un dessin en perspective.

Comme dans cet exemple n’hésitez pas a mélanger les deux type de mots-clefs.

Il est très important que chacun des mots clefs que vous allez déclarer aux robots web par le biais des rubriques, se retrouvent alors dans votre contenu.

Car sinon certains moteurs de recherche seront alors sans concession, avec votre contenu.

Si dans vos mots-clefs, vous avez écrit charpentier, vous devez alors retrouver charpentier dans le contenu.

Avant tout écrivez en priorité plus pour vos lecteurs sans pour autant oublier les robots des moteurs de recherche (GoogleBot, YahooBot, BingBot …)

C’est important pour votre E-réputation, ainsi qu’une bonne démarche pour transformer vos internautes-lecteurs en clients, et plus si affinité …

Étape 3 préparez vos images

Une image vaut mille mots

Les images ne sont pas une décoration futile, il est imprudent de les négliger.

•Les images permettent de faire respirer votre contenu
•Les images informent l’internaute sur vos activités et votre état d’esprit ainsi que vos valeurs.
•Elles vous représentent professionnellement, elles soutiennent votre image de marque.

Récoltez les images de contenu illustrant vos propos

•Les banques d’images sont une solution de dépannage, cependant ces images sont très impersonnelles et doivent être utilisées en dernier recours. Ex:
http://fotolia.com

ou
http://www.shutterstock.com
•A l’aide de votre appareil photo numérique, ce sera toujours mieux qu’une banque d’image.
•Pensez aux services d’un photographe, c’est le must ! Car il pourra vous aider à présenter votre entreprise et vos produits de façon professionnelle.
•Les images techniques et les logos de mes fournisseurs, partenaires.

Rangez vos images dans un dossier ‘ bankymage’et

Classez vos images dans des dossiers en fonction de votre arborescences

tutorial-remplir-son-contenu-web_img_9

Les formats appropriés pour un site internet

•Le  ».jpg » idéal pour des photos, il contient beaucoup d’informations couleurs.
•Le  ».gif  » très bien pour un logo ou petites illustrations, il contient peu d’informations couleurs maximum 256 couleurs.
•Le  ».png » a 8 octet concurrent du gif ne fait pas d’animation par contre il est plus léger
•Le  ».png » a 24 octet concurrent de JPG

Le choix du format de vos images agit automatiquement sur le poids des images.

Attention faites le bon choix car la vitesse de chargement de vos pages dépend aussi du poids de vos images.

A savoir :
La taille des images destinée à un site internet se calcule en ‘Pixel’ dit aussi ‘px’, le tout dans une résolution de 72 pixel par pouce dit aussi ’72dpi’ et en RVB/RGB (*Rouge/Red, Vert/Green, Bleu/Blue) .

Quelques exemples de ce que vous avez pu déjà rencontré :

Acquisitions/Destination

Taille image

Densité pixel par pouce

Mode colorimétrique

Internet

Pixel

de 90px à 1004px

72 dpi

RVB/RGB

Bureautique

Centimètre & A4, A3

150 dpi

Noir et blanc

Imprimerie

Millimètres& du A6 au A0

300 dpi

CMJN/CMYK

Photographe

4000 à 6000 pixel

600 dpi

RVB/RGB

Oui les centimètres et les millimètres sont des valeurs abstraites sur des écrans. Car tout le monde ne possède pas le même écran.

Cela peut aller du petit écran de téléphone portable, au écran de bureau allant jusqu’à’ 27 pouces voir plus pour certain.

Vous l’aurez remarqué, certains appareils numériques sortent des images de 4000px de large c’est à dire plus de 4 fois la largeur de votre site.

La zone de contenu de votre site fait entre 1004px et 970px

Voici les tailles standards

•800px taille page

•400px taille demi page

•190px taille tiers de page

•135px taille quart de page

•90px taille vignette

Il vous faut alors de les re-dimensionner, des solutions existent pour vous assister, si vous ne possédez pas le célèbre Adobe-Photoshop ; tel que le petit logiciel Gimp(petit cousin de photoshop)

•Pour télécharger ce super petit logiciel (cliquez ci-dessous)
http://www.clubic.com/telecharger-fche10178-the-gimp.html
•Comment redimensionner et recadrer une image (cliquez ci-dessous)
https://www.youtube.com/watch?v=mX0qa_x1I28
•Conseil : faites bien attention à ce que vos photos ne soient pas sous-exposées.

Comment nommer mes images correctement pour le référencement.

Les appareils photos numériques petits farceurs.

Les appareils photos numériques ne nomment pas les photos c’est à vous de le faire

Exemple :

DSNC_2457994568.JPEG

Commencez par corriger l’orthographe de l’extension des images

Si vous ne voyez pas l’extension, vous êtes surement sur un système d’exploitation microsoftwindows pas configuré de façon adéquate.

•Démarrer > rechercher > options de dossier > Décocher masquer les extensions de fichier connu

.jpg s’écrit en minuscule et sans «e»

DSNC_2457994568.jpg

Source de l'image : http://piscine-nayeo.fr/fr/article/232/aquagym

Source de l’image : http://piscine-nayeo.fr/fr/article/232/aquagym

Ensuite il vous faut renommer chaque image

Astuces

Cela ira très vite si vous vous aidez d’un fichier bloc-note* pour faire des copiés collés cela sera pratique et rapide.(*windows = Démarrer > accessoire > bloc-note/note-pad)

Voici la meilleur façon de procéder

Il vous faut décomposer le nom de l’image en plusieurs partie, à savoir :

Sous-quoi / Quoi / Ref / Localité / Mon entreprise / et l’extension

aquagym-piscine-28-coutances-mon-entreprise.jpg

http://piscine-nayeo.fr/fr/article/232/aquagym

http://piscine-nayeo.fr/fr/article/232/aquagym

Astuce :
Copiez collez ce nom dans votre bloc note et faites en un générique pour gagner en temps et en efficacité.

Étape 4 écrire le contenu

Maintenant que pour chaque rubrique vous avez écrit une description. Il sera plus facile pour vous de découper cette dernière en plusieurs bloc de texte et d’images.

Construction de votre mise en page

A savoir avant de commencer

Écrire un texte pour une page Web ne se fait pas comme celui d’une plaquette ou d’un flyer. Car dans le cas d’un site internet il n’y a pas de contact humain au premier abord.

Quand vous remettez une carte de visite, un flyer ou autres document votre prospect vous a rencontré, lors d’un salon ou d’une visite d’une rencontre commerciale ou technique.

Or pour un site web il en va autrement. Vous ne les avez pas encore rencontré ou communiqué directement avec eux par téléphone ou E-mail.

Votre site doit générer des contacts qui seront alors transformer en clientèle.

Pour cela vous devez vous concentrer sur la cible concernée par la page que vous écrivez, pour attirer et générer du contact.

Comblez son attente en terme de renseignements en utilisant un vocabulaire qu’il maitrise tout en le renseignant techniquement ; soyez pédagogique.

Ex: Nous proposons un service d’illustration très large : dessin à l’encre,

peinture-digitale …

Ici j’ai utilisé le mot «Illustration» un mot-clef technique puis le mot-clef «dessin» plus banal mais équivalant.

Vous aurez plus de chance de cibler deux catégories d’internautes : l’une avertie et l’autre amateur.

Construire la page

Vous savez déjà ce que vous allez écrire, car vous avez une liste de mot-clefs adaptés et une description pour chacune des rubriques.

Il s’agira pour vous d’écrire ici un texte Web orienté référencement donc pensez toujours en mots-clefs.

Fantastique votre démarche rédactionnelle va être simplifiée !

L’exercice qui suit est valable sur votre logiciel de bureautique ou directement dans votre site internet à l’aide du CMS auquel vous avez été formé.

•A l’aide des mots clefs de votre rubrique

Commencez par organiser votre contenu texte à l’aide de titres,qui me permette de structurer mon contenu en hiérarchisant les extraits importants.

Titre 1 (h1), titre 2 (h2), titre 3 (h3), titre 4(h4), titre 5 (h5), titre 6 (h6)
tutorial-remplir-son-contenu-web_img_16

•Attention un seul H1 (Titre 1) par page (il ne peut qu’en rester qu’un !)

•Puis sous chacun de ces titres j’ajoute un paragraphe de faux-texte de mise en page généré avec du LOREM-IPSUM par exemple.Ce dernier m’aidera à déterminer le travail d’écriture afin que mon contenu ne soit pas trop pauvre. Car il me faut au minimum 300 mots par page, sans compter que les images vont modifier l’espace.


http://www.lipsum.com/

tutorial-remplir-son-contenu-web_img_18

Utilisez maintenant les images pour agrémenter la richesse de votre contenu

*Si vous préparez le contenu pour un webmaster vous pouvez placer vos images à titre informatif ; à l’aide d’un logiciel de bureautique en utilisant des tableaux à 2 colonnes dans lesquels vous pourrez insérer vos images. (*sans oubliez de lui transmettre le bankymage, contenant vos images redimensionnées )

Les images de contenu doivent correspondre au paragraphe et être accompagnées d’une légende utile au référencement, qui sera alors visible ou non en fonction du Gestionnaire de contenu internet* utiliser. (*Ex: WordPress)

Pour les images de taille quart de page, le texte doit faire le tour de l’image par la gauche ou la droite ; tout simplement en alignant ces dernières à gauche ou à droite selon vos besoins.

tutorial-remplir-son-contenu-web_img_19

Ergonomie & Harmonie

Miyagi-San-de-karaté-kid-lefeuvre-francois-caen

Pour éviter le Cas-Raté

 

Miyagi-San dit : Bonsaï c’est comme Site& Site c’est comme bonsaï.

Derniers conseils

•Prenez du recul et demandez conseils Comme je le dis souvent avec humour ‘ un site web c’est comme un Bonsaï ‘,une comparaison qui m’est venu au fil du temps.
•Pensez à faire des espaces à l’aide de plusieurs paragraphes, des listes et des galeries.Il est important que le contenu respire ( pas trop non plus sinon ça donne un effet désertique )
•Insérez de nombreux liens qu’ils soient internes ou externes, ce sont vos meilleurs alliés.
•Bref éclatez-vous, les internautes le ressentiront.

Lefeuvre François