website launch checklist
1.0.0
Éléments à vérifier avant de lancer un site Web
Avant de lancer le site Web, assurez-vous que :
Une balise alt (« attribut alt » ou « description alt ») est un attribut appliqué à une image qui sert de description invisible de l'image.
Il décrit le contenu d'une image et est utilisé par les lecteurs d'écran pour lire à haute voix aux utilisateurs aveugles. Il est également utilisé par les moteurs de recherche puisqu’ils ne peuvent pas interpréter les images, ils s’appuient sur la description de la balise alt. L’utilisation de balises alt sur les images a un impact positif sur le classement des moteurs de recherche, c’est donc bon pour le référencement. Le texte alternatif est également affiché lorsque les images ne parviennent pas à se charger.
La balise Alt doit décrire le contenu de l’image et il est recommandé qu’elle comporte jusqu’à 125 caractères.
Exemple:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > Si vous disposez d'un environnement de « staging » ou de « dev », il est probable que vous bloquez l'indexation du staging.
Si vous souhaitez que votre site Web apparaisse dans les résultats de recherche, ce moteur de recherche « indexera » votre site Web. Les moteurs de recherche disposent de « robots » automatisés qui visitent les pages Web, « explorent » le contenu et le stockent dans l’index du moteur de recherche. Cela permettra au moteur de recherche de récupérer ultérieurement les résultats de recherche les plus pertinents.
Avant de vous lancer, assurez-vous que la version qui sera mise en ligne permet l'indexation de votre site Web. Assurez-vous de ne pas avoir une telle balise méta dans votre code HTML :
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesVérifiez également votre fichier robots.txt. Si vous souhaitez autoriser l'indexation de toutes les pages de votre site Web, votre fichier robots.txt doit contenir ceci :
User-agent: *
Disallow:
Un autre endroit à vérifier concerne les configurations Apache/Nginx.
Lorsqu'un site Web est partagé sur Facebook ou Twitter, il affiche une vignette, un titre et une description :
Si vous souhaitez que votre site Web s'affiche avec une vignette, un titre et une description corrects, vous devez ajouter les balises méta requises par Facebook et Twitter.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->Vous pouvez tester l’apparence de votre site Web une fois partagé sur Facebook ou Twitter à l’aide de ces outils :
Débogueur de partage Facebook
Validateur de carte Twitter
Favicon est la petite icône située à côté du titre du site Web dans l'onglet du navigateur.
Cela permet au site Web d'identifier facilement lorsque de nombreux onglets sont ouverts, en affichant l'historique du navigateur et les favoris. Certains moteurs de recherche, tels que DuckDuckGo, affichent le favicon à côté de l'URL dans les résultats de la recherche. En plus d'améliorer la convivialité, cela peut aider à attirer l'attention de l'utilisateur dans les résultats de recherche, nous pouvons donc l'appeler une technique de référencement indirect.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > Les utilisateurs peuvent enregistrer une page Web sur leur écran d'accueil sur les appareils mobiles. Cela crée une icône pour le site Web, tout comme l'icône de l'application, appuyer sur cette icône ouvrira le site Web dans le navigateur.
Les développeurs disposent d’un certain contrôle pour rendre l’expérience du site Web plus proche d’une expérience d’application native sur mobile. Par exemple, par défaut, iOS définira la capture d'écran du site Web sous forme d'icône. Mais vous pouvez définir une conception d'icône personnalisée à l'aide des balises méta Apple.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android utilisera la valeur « apple-touch-icon » ou la favicon (si la balise méta n'est pas présente) pour créer une icône sur l'écran d'accueil.
Si l'outil d'analyse que vous utilisez ne dispose pas de filtre pour l'environnement, vous polluerez les analyses de votre site Web avec les résultats de tests dans un environnement hors production. Vous pouvez ajouter le filtre dans l'outil d'analyse ou intégrer le code de manière conditionnelle uniquement dans l'environnement de production.
La balise Title spécifie le titre du site Web. La balise méta description contient une brève description de la page
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >Le titre est ce qui est affiché dans les résultats du moteur de recherche, affiché dans l'onglet du navigateur et sur les fiches des réseaux sociaux lors du partage (si un titre distinct n'est pas prévu pour le réseau social).
La description est également affichée dans les résultats de recherche. Il n'est pas directement utilisé dans l'algorithme de classement, il n'affecte donc pas les chances d'apparaître dans les résultats de recherche, mais il augmente la probabilité que les utilisateurs cliquent sur votre site Web dans les résultats. Cela augmentera le taux de clics (CTR) de votre page pour Google, ce qui signifie que Google le considérera comme un bon résultat et sera mieux classé dans les futurs résultats de recherche.
Si vous avez des liens vers des liens externes sur votre page Web, en particulier ceux qui s'ouvrent dans un nouvel onglet ou une nouvelle fenêtre, vous devez utiliser rel="noopener" .
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > Cela présente des avantages en termes de sécurité et de performances. Sans cela, la page externe peut accéder à votre objet window en utilisant window.opener . Vous pouvez en savoir plus sur les vulnérabilités résolues en utilisant noopener ici : À propos de rel=noopener
L'autre site Web peut également fonctionner selon le même processus que votre page actuelle. Par conséquent, si la page externe exécute du JavaScript lourd, cela affectera négativement les performances de votre site Web. noopener empêche cela également.
En savoir plus ici : Les avantages en termes de performances de rel=noopener
Comme vous apportez beaucoup de modifications à votre site Web ou lorsque vous utilisez beaucoup de bibliothèques externes ou de frameworks CSS, il est probable que votre fichier CSS contienne de nombreux styles qui ne sont pas utilisés par vos pages. Par exemple, vous utilisez peut-être un thème d'un plugin, mais le CSS des autres thèmes reste simplement inutilisé dans votre fichier CSS et la taille du fichier de feuille de style augmente.
Vous pouvez supprimer tous les styles inutilisés à l'aide d'un outil appelé PurgeCSS. Vous pouvez l'utiliser avec CLI ou l'utiliser dans Webpack, Gulp, etc. Il analysera vos pages, fera correspondre les sélecteurs utilisés sur les pages avec ceux des fichiers CSS et supprimera les styles inutilisés. Sur un de mes projets récents, qui utilisait le framework CSS Tailwind, il y avait, bien sûr, de nombreux utilitaires que je n'utilisais pas. PurgeCSS a réduit la taille de mon fichier app.css de 214 Ko à 45,6 Ko.
Attention cependant, si un plugin crée dynamiquement des éléments sur la page, PurgeCSS ne détectera pas les styles de cet élément. Mais vous pouvez mettre les sélecteurs sur liste blanche en transmettant les sélecteurs ou les modèles de sélecteur dans la configuration, et vous pouvez également mettre le sélecteur sur liste blanche en utilisant un commentaire spécial pour ajouter des règles spécifiques à la liste blanche. En savoir plus sur la liste blanche PurgeCSS.
Lorsque le navigateur demande une ressource, le serveur peut indiquer au navigateur pendant combien de temps il peut stocker, ou « mettre en cache », la ressource. La prochaine fois que la ressource sera requise, elle pourra utiliser la copie locale. Cela améliorera considérablement la vitesse et réduira les charges sur le serveur. Vous pouvez configurer votre serveur pour qu'il renvoie un en-tête indiquant la durée pendant laquelle l'actif doit être mis en cache :
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
Vous devez définir l'âge maximum en fonction de la fréquence à laquelle vos actifs changent.
Vous pouvez également configurer votre serveur pour utiliser la compression, telle que la compression Gzip, qui permettra aux ressources d'être transférées plus rapidement. La compression de fichiers CSS avec gzip permet d'économiser environ 50 à 70 % de la taille du fichier.
