Traduction
Tutoriel HTML - sommaire
Tutoriel HTML5 - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
La partie BODY comprend tout ce qui est affiché à l'écran alors que la partie HEAD comprend éventuellement la feuille de style interne,
un lien vers une feuille de style externe, un script et/ou un lien vers du script externe
mais aussi des informations essentielles pour le navigateur et les moteurs de recherche.
Dans la partie HEAD ont trouve donc les balises LINK, STYLE, SCRIPT, TITLE mais aussi les balise META !
Il ne faut pas négliger les balises meta. Elles ont un rôle très important en particulier pour un bon référencement naturel de la page.
Syntaxe : meta name ="keywords" content ="liste de mots clés" .
Cette balise est obsolète ; les moteurs de recherche n'utilisent plus le contenu de cette balise pour indexer le site.
Syntaxe : meta name ="keywords" content ="liste de mots clés" .
Cette balise à pour rôle de fournir une description courte (deux à trois phrases succinctes) de la page web.
Cette description est notamment utilisée par les principaux moteurs de recherche pour créer le commentaire associé à l'index de résultat.
Il faut donc soigner le texte de cette balise : texte précis et synthétique.
Cette balise permet un rechargement de la page, une redirection automatique vers une autre page.
Le premier argument de l'attribut "content" peut être 0 pour une redirection immédiate.
Cette option est particulièrement utile pour rediriger l'internaute vers la nouvelle version du site alors les moteurs de recherche
indexent encore l'ancienne version.
Inutile de demander aux robots (moteurs de recherche) d’indexer vos pages: c’est leur comportement par défaut !
Par contre vous pouvez souhaitez pour diverses raisons que certaines pages de votre site ne soient pas indéxées ... par les moteurs de recherche.
Dans ce cas il faut écrire dans la partie HEAD de celles-ci : Meta name ="robots" content ="noindex"
Si dans une page de votre site les lettres accentuées apparaissent de façon bizarre c'est qu'il y a une incohérence entre le jeu de caractères
utilisé pour encoder la page et le jeu de caractères employé par le navigateur pour lire la page.
Ainsi meta charset = 'utf-8' signifie au navigateur qu'il doit utiliser le jeu de caractères UTF-8 pour lire la page.
Si cette page a été encodée en ANSI alors tous les caractères accentués apparaissent sour la forme d'un losange noir contenant un point d'interrogation.
Donc si vous utilisez, comme moi, NotePad veuillez bien à ce que la nouvelle page soit encodée en UTF-8 (menu Encodage) et non pas en ANSI.
Souvent dans la partie HEAD d'une page on trouve meta name ="viewport" content= "width=device-width, user-scalable=yes"
Cette instruction est indispensable pour l'affichage correct de votre page sur un petit écran (tablette ou smartphone).
Cette balise est donc indispensable dans le cadre du "responsive design".
Les écrans des mobiles sont beaucoup plus petits que les écrans de PC (seulement quelques centaines de pixels de large au lieu de 1200 ou plus).
Pour s'adapter, les navigateurs mobiles affichent le site en "dézoomant" ce qui permet d'avoir un aperçu de l'ensemble de la page mais
alors c'est tellement écrit petit que c'est illisible !
Cette zone d'affichage simulée est appelée le viewport.
Attention la valeur du viewport ne dépend pas du terminal mais du navigateur mobile installé sur ce terminal.
Ainsi le viewport est compris entre 800 pixels (Android 3) et 980 (Android 4 et Safari).
Prenons un exemple. Votre iphone5 a une largeur utile d'écran de 320 par 568 pixels ; le viewport possible est de 980 pixels grâce au navigateur
safari mobile qui est installé.
Mais grâce à l'instruction meta name ="viewport" ... la largeur effective sera de 320 pixels ou (568 selon l'orientation).
D'autres balises sont importantes dans le cadre du SEO (Search Engine Optimization) ou référencement naturel ; il s'agit de la balise TITLE et H1.
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.
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.
La page web n'est pas forcément la réponse la plus pertinente à la recherche d'un internaute. L'url d'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).
N'oubliez pas non plus que les textes balisés par STRONG (ou EM) sont respectivement en gras ou italique mais surtout ils ont une grande valeur
sémantique prise en compte par les robots.