Adaptativité et référencement d'un site

Vous avez de bonnes notions de HTML et de CSS et vous avez trouvé un hébergeur mais c'est pas tout ...
Il faut que votre site apparaisse proprement non seulement sur un grand écran mais aussi sur un petit écran ...
Par ailleurs il faut que votre site soit référencé par les moteurs de recherche afin de bénéficier d'une certaine audience.

Site adaptatif

Compte tenu de l'importance croissante de l'internet mobile (internet à partir de terminaux mobiles : smartphones et tablettes) chaque page de votre site doit s'afficher correctement tant que les grands écrans (ordinateur portable ou de bureau) que sur les petites écrans (tablettes et smartphone) c'est ce qu'on appelle le responsive design.
Pour certains grands sites il y a en fait deux URL : une correspondant aux terminaux fixes et une autre pour les mobiles.
Une solution plus simple à mettre en oeuvre consiste à proposer des règles de style différentes en fonction de la largeur en pixels de l'écran. C'est la technique des requêtes de média ou "media queries".
Dans le chapitre suivant vous trouverez une présentation rapide des media queries mais pour l'instant je vous communique seulement quelques astuces ...

Exemple de page 'adaptative'

Le code HTML (partie BODY)

... <body> <h1>Titre principal de la page</h1> <h2>Titre de niveau 2 </h2> <img src ="../images/coucher_soleil.jpg" class ="grand" > <img src ="../images/bikini2.jpg" class ="mini"> <p>Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, ... <p>Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ... <p>Restabat ut Caesar post haec properaret accitus et abstergendae causa suspicionis sororem suam, eius uxorem, Constantius ad se tandem desideratam venire multis ... <h2>Titre de niveau 2</h2> <img src ="../images/bikini3.jpg" class ="mini" > <p>Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si ...

Les éléments img, p, h1 & h2 sont des enfants de BODY.
Notez l'emploi des classes pour les images.

La feuille de style

* {font-size : 14px; font-family : arial; } body {width : 96% ; margin : 20px auto 20px auto ; } h1,h2 {width : 100%; margin : 10px auto 10px auto; text-align : center; background : gray ; color : white; } h1 {font-size : 1.4em ;} h2 {font-size : 1.2em ; } p {width : 100% ; text-align : justifiy ; padding : 5px ; } img.mini {float : left ; margin-right : 1% ; width : 14%; } img.grand {display : block ; width : 60% ; margin : 10px auto 10px auto ; }

La largeur de la page est exprimée en pourcentage (96% de l'écran).
Les largeur des boites H1,H2 & P sont exprimées aussi en pourcentages : 100% du conteneur (c'est à dire body).
Les largeurs des images sont aussi exprimées en pourcentages : 14% ou 60% du conteneur selon la classe affectée.

C'est ce que vous devez retenir pour l'instant du responsive design : ne plus exprimer les largeurs des boites et images en pixels mais en pourcentages ! Un grand écran c'est parfois 1800 pixels de large alors qu'un smartphone c'est seulement 300 pixels (en orientation "portrait") donc pour prendre un seul exemple, une image de 400px de large serait affichée correctement sur un grand écran mais serait rognée sur un écran de smartphone.
Affichez la page à partir d'un smartphone, d'une tablette puis d'un ordinateur !

Si vous affichez la page à partir d'un grand écran cliquez sur l'icône "niveau inférieur" puis réduisez progressivement la largeur de la fenêtre pour simuler l'affichage sur un petit écran.

Il est évident que l'adaptativité à tous types d'écrans serait bien meilleure avec les requêtes de média. Ainsi une taille de caractères de 14 pixels c'est un peu juste sur un grand écran mais c'est beaucoup pour un petit. Quant aux images "mini" elles sont vraiment très petites sur un smartphone.
Par ailleurs sur un grand écran c'est plus joli qu'il y ait des marges gauche et droite afin que la page ne soit pas trop large.

Avec les requêtes de média (voir page suivante) on peut coder en CSS, par exemple, l'algorithme suivant :

Si largeur > à 900px alors taille des caractères de 16px et largeur page de 900px
sinon
taille de 12px et largeur page = 100% de celle de l'écran

Le référencement naturel

Il ne suffit pas de réaliser un beau site et de l'héberger. Il faut encore que ce site soit visité.
Pour que votre site soit visité il faut que les moteurs de recherche (google, bing, yahoo) lui fasse de la publicité (que les pages soient indexées).
L'idéal est que l'url de chaque page figure dans les premiers résultats pour une expression clé.
Ne pensez pas qu'il faut payer pour être bien référencé par les moteurs de recherche pour certaines expressions car à côté du référencement payant il existe le référencement naturel (ou gratuit).

META Description

Syntaxe : meta name ="keywords" content ="liste de mots clés" .
Cette balise à pour rôle de fournir une description courte (deux à trois phrases courtes) de la page web.
Cette description est notamment utilisée par les principaux moteurs de recherche pour commenter l'index créé par le moteur.

La balise TITLE

La balise TITLE est contenue dans la partie HEAD. Elle sert à légender l'onglet dans lequel s'affiche la page mais pas seulement ...
Le contenu de cette balise ne doit pas dépasser 70 caractères espaces compris. Elle doit décrire donc en quelques mots le contenu de votre page.
Il s'agit d'une balise essentielle dans le cadre du référencement naturel ; tous les spécialistes du référencement sont d'accord sur ce point.

La balise H1

Le contenu de la balise H1 doit aussi être soigné puisqu'il s'agit du titre principal de la page mais ce contenu participe également au référencement naturel de celle-ci.

Référencer d'autres types de contenu

La page web n'est pas forcément la réponse la plus pertinente à la recherche d'un internaute. Une page peut aussi ressortir via une image, une vidéo !
Pour que chaque image de votre site soit référencée dans les résultats "images" il suffit d'utiliser l'attribut ALT dans la balise IMG !

Pour les vidéos et les fichiers audio il est préférable d'intégrer la balise VIDEO / AUDIO dans le conteneur FIGURE avec une légende (balise FIGAPTION).

Empécher l'indexation de la page par les moteurs de recherche

Vous avez entendu parler du "dark web" c'est à dire les sites qui ne sont pas indéxés par les moteurs de recherche.
La raison est que ces sites sont des plateformes de commerces illégaux (armes, drogues, etc. )

Vous pouvez parfaitement souhaiter que certaines pages de votre site ne soient pas indexées par les robots des moteurs de recherche et pour des raisons de confidentialité : pages réservées aux salariés, aux fournisseurs agréés, etc.
Il suffit d'utiliser la balise META robots et d'écrire dans la partie HEAD : Meta name ="robots" content ="noindex"
Retour menu