Soignez le head de votre page : titre, description, favicon et liens externes sécurisés.
Ouvrir cette leçon dans KodokonAvant même de visiter votre page, l'internaute la voit ailleurs : dans un onglet de navigateur, dans les résultats de recherche, dans un lien partagé. Tout cela se joue dans le head. Un head soigné est la différence entre un site amateur et un site professionnel.
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Recettes express | La Cuisine de Léa</title>
<meta
name="description"
content="30 recettes prêtes en 20 minutes chrono,
testées par nos lecteurs."
>
</head>Le title apparaît dans l'onglet, les favoris et les résultats de recherche : rendez-le unique par page, descriptif, avec le sujet en premier et environ 60 caractères. La meta description est le texte affiché sous le titre dans les moteurs : visez 150 caractères qui donnent envie de cliquer.
Le favicon est la petite icône affichée dans l'onglet et les favoris. La pratique moderne : un favicon.ico de secours à la racine du site, une version SVG qui reste nette à toutes les tailles, et une icône dédiée aux écrans d'accueil Apple.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">Dernier réflexe professionnel : les liens externes. Ouvrir un lien dans un nouvel onglet avec target="_blank" donne à la page ouverte un accès potentiel à window.opener, donc à votre page. Ajoutez rel="noopener noreferrer" pour couper ce lien et ne pas transmettre l'adresse de provenance.
<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
>
Documentation MDN (nouvel onglet)
</a>