Les 10 étapes de la création d'un site Web

La création d'un site se fait en quelques étapes. Planifiée, partant sur de bonnes bases, elle aura alors de bonnes chances de connaître le succès et de rencontrer les Internautes.

1) Définir le type de site

Les principaux genres de site Web:

Vitrine d'un produit ou d'une entreprise.
Site basé sur un thème (une technologie, un secteur d'activité...)
Site éducatif, contenant des tutoriels.
Logiciel.
E-commerce.
Forum.
Blog.
Service.

Le type de site déterminera les outils à employer, notamment si vous comptez utiliser un gestionnaire de contenu pour faciliter la création. Noter qu'un forum, un blog ou un annuaire peuvent accompagner un site portail, et cela accroit le nombre de visiteurs.
Reste à savoir si le site pourra avoir une audience grandissante, ce qui est généralement le but du webmaster.

La boutique en ligne si elle présente des produits avec des descriptions similaires à ce qu'on trouve déjà sur le Web, sera pénalisée par Panda.
Si en outre vous placez des liens sur de nombreux annuaires pour le faire connaître, il sera pénalisé par Pingouin.
Sa seule chance de succès est dans la vente de produits uniques, mais c'est un pari, car un grand site marchand pourra à l'avenir s'intéresser à ces produits, et les moteurs favorisent les grands sites.
Le blog ou le site technique, s'ils parlent de choses que vous êtes seul à connaître peuvent aussi avoir un succès, dès lors que vous savez intéresser le public, ce qui dépendra de votre sens de l'écriture.
Site d'actualité et forum n'ont aucune chance de succès de nos jours à moins qu'ils ne soient dédiés à un produit et être les seuls.
Votre principale chance de succès si vous savez programmer est dans la création d'un service, pourvu qu'il soit unique. Votre dépendance aux moteurs sera minimale.
Il est toujours possible de trouver une idée originale, voyez à titre d'exemples la liste des sites originaux dans les liens en bas de page.

2) Choisir le thème du site et son public

Pour une indexation optimale par les moteurs de recherche et un meilleur positionnement dans les résultat, un site devrait être consacré à un thème unique, bien délimité. La première étape est donc la définition exacte de ce à quoi sera consacré le site.
Le public auquel sera destiné le site doit également être bien défini, dès le départ.
Dans un même site, des thèmes multiples n'est pas souhaitable tout au moins au début. A l'inverse il n'est pas souhaitable de créer plusieurs sites sur le même thème, un site unique plus complet est préférable.

3) Choisir un nom de domaine

Le nom du site peut être attribué à un sous-domaine, qui est un répertoire chez un hébergeur, ou un nom de domaine. Comme www.scriptol.fr par exemple. Choisissez un nom en sachant que les noms de domaine ont une valeur.
Même si vous disposez d'un hébergement gratuit avec un sous-domaine, il est préférable de déposer un nom de domaine et le faire pointer sur votre sous-domaine (par exemple, https://www.scriptol.fr serait redirigé sur http://scriptol.example.com). Cependant le bénéfice reste limité.

Un nom trop long, avec plus de trois mots significatifs. "La-boulangerie-patisserie" est bon, mais "La-patisserie-en-pate-feuilletée-au-beurre" serait un handicap.
Les mots sans accents ne sont pas un problème, mais si dans le futur les accents deviennent courants, il y aura risque de concurrence, il faut y songer.

4) Choisir un hébergement

Si vous ne disposez par d'un hébergement offert avec votre accès Internet ou si vous préférez un hébergement avec gestion des DNS (ce que ne proposent pas les fournisseurs d'accès), le comparatif des hébergements de sites vous aidera à choisir celui qui convient le mieux pour votre site et l'importance des visites prévues.
Soyez attentif aux signes avant-coureurs qui annoncent la faillite de l'hébergeur. Comme par exemple une rupture de service répétée de plusieurs heures. Consulter la liste des hébergeurs Web, une sélection qui vous mettra à l'abri d'une mésaventure.

5) Pages statiques ou CMS?

On a de plus en plus tendance à utiliser un CMS ou gestionnaire de contenu comme Wordpress pour créer un site Web, et le plus souvent ce n'est pas nécessaire. L'attrait d'un tel logiciel est qu'il intègre un système de commentaires à coté d'autres services comme le blogroll et le nuage de tags.
Ces deux derniers outils sont de moins en moins utilisés car ils peuvent nuire au positionnement dans les pages de résultats des moteurs de recherche qui pénalisent de plus en plus les liens artificiels ou excessifs.
Quand aux commentaires, grâce aux services en ligne fournis par Disqus ou Facebook comments, ils deviennent aussi accessibles aux sites statiques. Restent alors les thèmes et autres plugins que l'on trouve sur les CMS. Ces avantages peuvent devenir des inconvénients quand le CMS est mis à jour mais que les plugins ou le thème ne le sont pas!

Finalement, s'il est plus simple de créer une nouvelle page sur un CMS, quand on veut l'éditer, cela devient au contraire plus difficile d'y accéder. Donc on choisira un CMS pour un site d'e-commerce ou un blog, et on évitera pour les autres sites...

Pour faire un site statique, il suffit au minimum, de télécharger une page dans l'espace fourni par l'hébergeur, cette page étant nommée index.html.
Connaître la syntaxe HTML n'est pas indispensable, vous pouvez éditer la page sur un traitement de texte comme Word ou LibreOffice ou un logiciel de création de page Web (voir liste en liens) et la sauvegarder au format HTML.
Un gestionnaire ftp comme freeFTP ou PHP FTP Synchronizer (sur ce site, open source), permettra de transférer les pages sur l'espace fourni par l'hébergeur.

6) Créer un contenu

Posez-vous une série de question pour éviter que le site ne soit jugé de pauvre qualité par les moteurs de recherche comme par les lecteurs.

Le contenu est-il original? (Une recherche sur le titre et les sous-titres peut s'avérer utile).
Votre site doit être différent, ajouter quelque chose de plus à ce que l'on trouve déjà sur le Web.
Est-ce qu'on vous fera confiance en lisant vos page?
Cela dépend de vos références, mais aussi des précisions que vous saurez apporter.
Donnez vous aux visiteurs ce qu'ils demandent?
Il pourrait être utile de soumettre le site à des tiers pour avoir leur avis.
Les visiteurs auront-ils envie de lire plusieurs page, de les mettre en bookmark, de cliquer sur le bouton J'aime ou +1.
Cela dépend autant de l'intérêt du contenu que de la présentation, ce qui est justifie la section suivante.

Voici comment Google définit la qualité pour un site Web, selon un résumé par Scriptol.fr de la liste de Google.

Feriez-vous confiance à l'information présentée dans l'article? Le site a-t-il authorité dans le domaine?

L'article est-il écrit par un expert ou une personne enthousiaste et connaissant bien le sujet?

Le site a-t-il des articles en double, dont le contenu se superpose ou des articles redondants sur un même sujet, avec de petites variations de mots-clés?

Donneriez vous sans hésiter votre numéro de carte de crédit à ce site?

L'article a t-il des fautes d'orthographe, de style ou expose-t-il des contre-vérités?

Les sujets sont-ils choisis naturellement ou pour être mieux positionné dans les résultats de recherche?

L'article fournit-il une information inédite, un reportage, une recherche propre, une analyse personnelle approfondie?
Fournit-il ainsi une valeur ajoutée par rapport aux autres pages sur le même sujet?

L'article donne t-il les deux versions d'une histoire?

L'article fournit-il une description complète et exhaustive du sujet qu'il traite?

Est-ce un type de page que vous allez mettre en favori, partager avec un ami, ou recommander?

La page a-t-elle une quantité excessive de publicités qui distrait du contenu ou interfère avec lui?

Les articles sont-ils courts, sans substance, ou sans intérêt particulier?

Les utilisateurs se plaindraient-ils en voyant les pages du site?

Guide de style par Google. Le mieux est de commencer avec de bonnes règles de style. (Anglais).

Pour aller au-delà du site textuel, et offrir aux visiteurs une mise en page élaborée, un éditeur HTML spécialisé devient indispensable, accompagné d'outils de dessin ou de générateurs d'images.
L'attribut alt de la balise img est une alternative textuelle à l'image et est recommandé. Il contient une description de l'image (et non pas de la page).

Et voici une liste d'outils pour créer ou générer des images pour un site web.

7) La page 404

Lorsque le serveur ne trouve pas la page demandée par le navigateur, il retourne un code d'erreur 404. Il faut éviter que l'utilisateur se trouve face à un message d'erreur pour une meilleure ergonomie. Pour ce faire, on crée une page spéciale qui sera affichée à la place de la page non trouvée.
Reste à rediriger le visiteur sur cette page...
Noter que sous Wordpress et autre CMS, la redirection des erreurs est déjà prise en compte par le système.
Créez ou complétez un fichier .htaccess, avec les lignes suivantes:

RewriteEngine on
ErrorDocument 404 /erreur.html

Ce fichier doit se trouver à la racine du site, souvent le sous-répertoire "www". Code complet à télécharger: archive erreur 404.

Le nom de domaine ne doit pas être inclus dans l'URL car cela gêne les moteurs de recherche. En effet cela remplace le code de page 404 par un code 200 de chargement normal. Google refusera votre sitemap si une URL complète avec nom de domaine est utilisée pour la redirection d'erreurs.

Au lieu de se moquer du visiteur (voir les 4 exemples de pages 404 à droite), on peut plutôt créer une page 404 intelligente. L'idée est que la page 404 offre une liste de liens en rapport avec la page manquante qui est demandée par l'internaute. Cela se fait facilement sous Wordpress grâce aux outils sur les mots-clés. Ou plus simple encore, insérer un champ de recherche dans la page d'erreurs.

8) Entrez dans le Web 2.0 avec JavaScript, CSS, Ajax

Créer un site Web 2.0, c'est maintenant possible et cela fait l'objet d'un article sur ce site.
Cela consiste en l'emploi des techniques de site dynamique décrites ci-dessus, mais aussi de l'utilisation de bibliothèques spécialisées, que l'on combine pour créer des services nouveaux.
Des sites modernes sont basés entièrement sur l'offre d'un service Web utilisant les nouvelles technologies du Web 2.0 et font l'objet de transactions en millions ou milliards de dollars.

JavaScript

Langage de script qui s'imbrique dans la code HTML de la page web. Il permet de modifier son contenu, de traiter par exemple des formulaires.
Pour en savoir plus sur JavaScript, trouver des outils et des tutoriels.

CSS

L'emploi des feuilles de style sera aussi nécessaire pour un site vraiment sérieux avec une présentation réutilisable, ou pour modifier la présentation selon l'appareil (PC, mobile).
Il est préférable d'utiliser les CSS dès la création du site. Un modèle complet est proposé sur ce site dans la section CSS.

PHP

Les scripts PHP se placent dans une page HTML, mais sont exécutés par le serveur. Celui-ci génère une nouvelle page selon les instructions du script.
ASP est une alternative à PHP qui ne fonctionne que sur un serveur Windows. On peut utiliser d'autres langages dans le même but dont JavaScript avec Node.js.
Avec XAMPP, on peut faire fonctionner PHP, Apache et MySQL localement avant mise en ligne sur un site Web.

Ajax

C'est l'utilisation conjointe de JavaScript et éventuellement d'un langage coté serveur comme PHP ou ASP. Des cadres d'applications (frameworks) préféfinis facilitent la tâche en fournissant les fonctions d'usage courant.
Vous pouvez utiliser une librairie simple comme Anaa ou un Framework Ajax plus puissant comme jQuery, le plus communément utilisé.

9) Etre prêt pour les moteurs de recherche

Le référencement consiste à faire connaitre votre site du public sans quoi il peut être complètement ignoré.
Vous pouvez commencer par une inscription sur le répertoire Dmoz.org. Mais cela peut prendre du temps. Entretemps vous pouvez inscrire le site sur quelques annuaires.
Pour plus de précisions sur le référencement, consultez le manuel du référencement. Avant tout les pages doivent être préparées pour faciliter l'indexation par les moteurs. Cela dépend de leur structure et des métas.

Méta-tags

Les méta-tags sont des balises dont le contenu n'est pas affiché mais qui sont prises en compte par les moteurs de recherche. Il en existe une quantité. Seules qutare d'entre elles sont vraiment importantes.

La balise <title>

Elle contient le titre de la page. Elle est recommandée par la spécification HTML. Ce titre doit absolument être différent pour chaque page. Ce ne doit pas être une liste de mot-clés mais une phrase descriptive. Le titre doit être attrayant, il apparait dans les résultats des moteurs de recherche et on doit avoir envie de cliquer sur le lien.
Noter que si la balise est omise, Google utilisera le premier titre balisé par <h1> </h1> ou sinon, h2, h3, etc.

La méta description

Elle permet de choisir le snippet, le texte descriptif dans les pages de résultats et doit donc être attrayante. Quand elle est omise les moteurs fabriquent un snippet à partir du contenu de la page, souvent avec le premier paragraphe.

La balise viewport

<meta name=viewport content="width=device-width, initial-scale=1">

Elle informe les navigateurs sur mobiles que la page doit être adaptée à un écran plus petit. Celle n'a aucun effet sur le bureau ou les tablettes.

Cela s'accompagne de règle CSS pour les petits écran: largeur de page variable, variable séparation des lien par une hauteur d'au moins 22 pixels. (Vous pouvez regarder en bas de la feuille de style de cette page pour un exemple).

La balise robot (option)

Son format est le suivant: <meta name="robots" content=""> et elle se place dans la section <head> aussi. Elle est destinée aux robots des moteurs de recherche.
Le contenu est de un à trois mots séparés par des virgules:

Index, noindex: indexer ou non la page.
follow, nofollow: prendre en compte les liens dans la page, ou non.
archive, noarchive: mettre en cache ou non.
all= index, follow, archive.
none= noindex, nofollow, noarchive.

On peut omettre la balise, c'est équivalent à <meta name="robots" content="all">

L'attribut rel=canonical

C'est la quatrième méta indispensable, elle indique quelle page doit être indexée quand plusieurs pages sont identiques. Voir le script canonical pour plus d'infos.

Fichiers spéciaux

La carte de site (option)

La "sitemap" est recommandée par Google pour aider ses robots d'indexation. Cependant, le plus souvent les effets sont nuls, la création et l'enregistrement d'une carte de site, même au format XML standard de sitemaps.org, ne permet aucun progrès dans les résultats des moteurs de recherche et le trafic. Malgré tout, certains sites n'ont pas toutes leurs pages indexées et dans ce cas la sitemap est indispensable.
Si vous désirez créer une sitemap, utilisez plutôt un logiciel gratuit comme Simple Map.

Le flux RSS (option)

Construire un flux RSS de votre site pour faire connaître les derniers articles ou les pages choisies n'est pas difficile si vous installez l'éditeur RSS en ligne gratuit ARA. C'est un instrument de promotion efficace comme l'explique cet article.

Le fichier robots.txt (option)

Il n'est pas vraiment indispensable, mais permet d'interdire aux moteurs de scanner certains fichiers inutiles ou en construction. Google fournit un guide pour la réalisation de ce fichier: Getting started with robots.txt qui donne la liste des directives aux robots des moteurs de recherche.
On peut aussi donner des directives aux robots dans les Métas pour robots ou le fichier .htaccess.

10 conseils de Google.

Mots-clés

C'est Google qui le dit: il faut faire un site pour les internautes et pas pour les moteurs de recherche! Mais pour les moteurs, seuls comptent les textes et les critères qui font que votre page mérite de bien figurer dans les résultats le premier d'entre eux étant les mots significatifs.
Cela reste le choix du webmaster de faire un site autour des articles que l'on a envie d'écrire, ou d'écrire plutôt les articles qui auront le plus de chance d'obtenir une large audience
Mais quelle que soit le choix et le niveau d'implication, tout ce que voient les moteurs, c'est un ensemble de mots.

Il faut donc insérer les mots-clés les plus significatifs pour la page et tous les synonymes. En sachant que ceux qui se trouvent au début, dans le titre et les sous-titres sont jugés plus importants.

Adword Keyword Planner vous donne des idées de groupes de mots-clés à partir d'un thème ou d'un mot de départ. Comme l'outil est destiné aux annonceurs pour publicités Adsense, les résultats correspondent à ce que recherchent les internautes.

10) La maintenance de votre site

Combien de liens vers votre site sur les moteurs de recherche? Une fois le référencement accompli, après un délai d'un mois, vous voudrez connaître le résultat. Une estimation des backlinks peut être obtenue avec les Google Webmaster Tools et Bing Webmaster Tools.
De temps en temps, une fois par mois de préférence, on doit vérifier si les liens sur des sites externes sont toujours valides. Cela peut être fait automatiquement avec un les scripts fournis sur ce site.
Si le site est créé sous Windows, utiliser un Live CD de Linux permet de voir à quoi il ressemble sous un autre système. Le Live CD de Mandriva se montre le plus rapide et le efficace pour reconnaître le matériel.