De nombreux moteurs de recherche classent les pages en fonction de leur adaptation aux mobiles. Sans balise Meta de fenêtre d'affichage, les appareils mobiles affichent les pages à la largeur standard des écrans d'ordinateur, puis les réduisent, ce qui les rend difficiles à lire.
Définir la balise Meta de la fenêtre d'affichage vous permet de contrôler la largeur et la mise à l'échelle de la fenêtre d'affichage afin qu'elle s'adapte correctement à tous les appareils.
Échec de l'audit de la balise Meta de la fenêtre d'affichage Lighthouse
Lighthouse indique les pages sans balise Meta de fenêtre d'affichage:
Une page échoue à l'audit si toutes les conditions suivantes ne sont pas remplies :
- Le <head> du document contient une balise <meta name="viewport">.
- La balise Meta de la fenêtre d'affichage contient un attribut content.
- La valeur de l'attribut content inclut le texte width=.
Ajouter une balise Meta de fenêtre d'affichage
Ajoutez une balise <meta> de fenêtre d'affichage avec les paires clé-valeur appropriées au <head> de votre page:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Voici ce que fait chaque paire clé-valeur :
- width=device-width définit la largeur de la fenêtre d'affichage sur la largeur de l'appareil.
- initial-scale=1 définit le niveau de zoom initial lorsque l'utilisateur visite la page.