Paramètres du site¶

Chaque site web a besoin de quelques propriétés globales -- un nom, une langue, un favicon. La boîte de dialogue Paramètres est l'endroit où vous les définissez une seule fois, et ils s'appliquent à chaque page sauf si vous les surchargez au niveau de la page.

Deux choses à garder en tête :

Les paramètres du site sont des valeurs par défaut. Les surcharges au niveau de la page l'emportent toujours lorsqu'elles existent.
Les paramètres se retrouvent dans le HTML publié. La langue devient l'attribut lang, le favicon devient une balise <link>, et ainsi de suite.

Ouvrir la boîte de dialogue Paramètres¶

Cliquez sur l'icône d'engrenage (Paramètres) dans la barre latérale gauche (raccourci : Alt+S). La boîte de dialogue s'ouvre avec une barre latérale à onglets sur la gauche et un formulaire sur la droite. Vous verrez cinq onglets : Général, SEO, Social, Code et CMS.

Échap ferme la boîte de dialogue sans enregistrer.
Ctrl+Entrée (ou Cmd+Entrée sur Mac) soumet le formulaire.
Alt+C annule, Alt+A applique.

Il y a deux modes : Paramètres du site et Paramètres de page. Les paramètres du site définissent les valeurs par défaut pour l'ensemble de votre site web. Les paramètres de page vous permettent de surcharger ces valeurs par défaut pour des pages individuelles. Cette page couvre les paramètres du site. Pour les surcharges au niveau des pages, consultez les sections correspondantes dans SEO, Partage social et Code personnalisé.

L'onglet Général des Paramètres du site montrant les infos de Stockage et Publication, l'URL du projet GitLab, la visibilité du projet et du site, et l'URL du site publié

Onglet Général : Stockage et Publication¶

L'onglet Général affiche des informations sur le stockage et l'état de publication de votre projet. Il comprend :

Basé sur un template -- si votre site a été créé à partir d'un template, un encadré indique quel template a été utilisé, avec des liens pour le mettre en favori ou y contribuer.
URL du projet GitLab -- l'URL du dépôt GitLab stockant les fichiers de votre site. Vous pouvez la copier ou l'ouvrir directement.
Visibilité du projet -- si votre projet GitLab est public ou privé, avec des liens pour modifier le paramètre ou obtenir de l'aide.
Visibilité du site web -- si votre site publié est accessible publiquement, avec des liens vers les paramètres et l'aide.
URL du site publié -- l'URL en ligne de votre site (ou « not published yet » si vous n'avez pas encore publié).
Version -- la version de Silex que vous utilisez (par ex., Silex 3.6.5).

Cet onglet est informatif et renvoie vers votre projet GitLab pour les actions administratives (modification de la visibilité, gestion du dépôt). Le nom du site est dérivé du nom de votre projet GitLab.

Langue¶

Situé dans l'onglet SEO, le champ de langue définit le code de langue par défaut pour l'ensemble de votre site. Cette valeur est placée dans l'attribut <html lang="..."> du HTML publié.

Utilisez un code ISO 639-1 à deux lettres :

en pour l'anglais
fr pour le français
es pour l'espagnol
de pour l'allemand
pt pour le portugais

Pourquoi c'est important : Les lecteurs d'écran utilisent ce code pour sélectionner le bon moteur de prononciation. Les moteurs de recherche l'utilisent pour proposer votre page au bon public. Un code de langue manquant ou incorrect rend votre site plus difficile à trouver et à utiliser.

Vous pouvez surcharger la langue sur des pages individuelles. Si votre site est principalement en anglais mais que vous avez une page en français, définissez la langue du site sur en et surchargez cette seule page en fr dans ses paramètres de page.

Favicon¶

Le favicon est la petite icône qui apparaît dans les onglets du navigateur, les favoris et l'historique. Vous le définissez dans l'onglet SEO.

Entrez une URL ou un chemin relatif vers un fichier image. La taille recommandée est 16x16 ou 32x32 pixels. Les formats courants sont .ico, .png et .svg.

Conseils pour un bon favicon :

Gardez-le simple. À 16 pixels, les détails disparaissent. Utilisez une lettre en gras, un symbole simple ou une version recadrée de votre logo.
Utilisez un arrière-plan transparent pour les favicons PNG ou SVG afin qu'il soit beau sur les thèmes de navigateur clairs et sombres.
Testez dans plusieurs navigateurs. Certains navigateurs mettent les favicons en cache de manière agressive -- si vous le changez, vous devrez peut-être vider votre cache pour voir la mise à jour.

Si vous laissez le champ favicon vide, les navigateurs afficheront leur icône par défaut de page vierge.

Comment les paramètres du site deviennent du HTML¶

Lorsque vous publiez, les paramètres que vous saisissez sont écrits directement dans le HTML de chaque page :

Langue devient <html lang="en"> (ou le code que vous avez saisi).
Favicon devient <link rel="icon" href="votre-chemin-favicon"> dans le <head>.
Titre devient la balise <title> (couvert dans SEO).
Description devient une balise <meta name="description"> (couvert dans SEO).
Code personnalisé dans le head est injecté directement dans <head> (couvert dans Code personnalisé).

Vous n'avez pas besoin d'écrire ce HTML vous-même. La boîte de dialogue Paramètres s'en charge.

Paramètres du site vs. paramètres de page¶

La boîte de dialogue Paramètres fonctionne à deux niveaux. Lorsque vous l'ouvrez depuis l'icône d'engrenage sans page spécifique sélectionnée, vous modifiez les valeurs par défaut du site entier. Lorsque vous ouvrez les Paramètres de page, vous voyez les mêmes onglets (SEO, Social, Code, CMS) mais les valeurs que vous saisissez ne s'appliquent qu'à cette page.

Voici comment le système décide quoi utiliser :

Si une page a sa propre valeur pour un paramètre, cette valeur est utilisée.
Si une page n'a pas sa propre valeur, la valeur par défaut du site est utilisée.
Si aucun des deux n'a de valeur, rien n'est ajouté au HTML.

Cela signifie que vous pouvez définir votre titre SEO, votre description et votre image Open Graph une seule fois au niveau du site, puis les surcharger uniquement sur les pages qui ont besoin de quelque chose de différent.

Flux de travail pratique¶

Une séquence de configuration typique :

Ouvrez les Paramètres du site (icône d'engrenage dans la barre latérale gauche, ou Alt+S).
Onglet Général : Consultez les informations de stockage et de publication -- URL du projet, visibilité et URL du site publié.
Onglet SEO : Définissez la langue, le titre (70 caractères recommandés), la description (150-160 caractères) et le favicon. Consultez SEO pour des conseils sur la rédaction de bons titres et descriptions.
Onglet Social : Définissez le titre Open Graph (60-90 caractères), la description (60-90 caractères) et l'image (1200x627 pixels recommandés). Testez avec les liens fournis pour Facebook, Twitter et LinkedIn. Consultez Partage social pour le dimensionnement des images.
Onglet Code : Ajoutez tout code HTML personnalisé qui devrait apparaître dans le <head> de chaque page. Un éditeur de code est fourni. Consultez Code personnalisé pour les cas d'utilisation.
Onglet CMS : Configurez les sources de données (ajoutez, modifiez ou supprimez les connexions aux API externes) et ajustez la configuration 11ty si vous utilisez un générateur de sites statiques. Consultez CMS et données pour plus de détails.
Cliquez sur Appliquer (ou appuyez sur Ctrl+Entrée).

Ensuite, visitez les pages qui nécessitent des valeurs différentes et définissez leurs surcharges dans les Paramètres de page.

Erreurs courantes¶

Oublier le code de langue. C'est le paramètre le plus souvent omis et le plus facile à corriger. Définissez-le une fois et chaque page en bénéficie.
Utiliser un logo complet comme favicon. Les logos avec du texte sont illisibles à 16 pixels. Recadrez vers un symbole ou une initiale.
Définir le même titre sur chaque page. Le titre au niveau du site est une valeur par défaut -- vous devriez le surcharger par page pour que les moteurs de recherche puissent distinguer vos pages. Voir SEO.
Confondre l'onglet Général et les paramètres SEO. L'onglet Général affiche les informations du projet (stockage, visibilité, URLs). Le titre et la description SEO se trouvent dans l'onglet SEO -- c'est ce que les moteurs de recherche et les onglets du navigateur affichent.

Avancé : comment les paramètres sont stockés et synchronisés

Format de stockage¶

Les paramètres sont stockés sous forme d'objet plat clé-valeur dans les données du site web. Les clés correspondent aux noms des champs du formulaire : title, description, favicon, lang, head, og:title, og:description, og:image. Lorsque vous enregistrez, la boîte de dialogue collecte tous les champs non vides du formulaire et les écrit dans le modèle.

Aperçu en direct¶

Lorsque vous modifiez les paramètres et les appliquez, l'éditeur met immédiatement à jour le canevas. Le code personnalisé du head provenant des paramètres du site et de la page est injecté dans le cadre de prévisualisation afin que vous puissiez voir l'effet des feuilles de style ou scripts externes sans publier.

Stockage des paramètres de page¶

Chaque page stocke son propre objet de paramètres de manière indépendante. La logique de fusion (la page surcharge le site) se produit au moment de la publication. Dans l'éditeur, vous pouvez vérifier ce qu'une page utilisera réellement en ouvrant ses Paramètres de page et en regardant les valeurs d'espace réservé, qui reflètent les valeurs par défaut du site.

Quiz¶

Q1 : Vous avez un site en anglais avec une page en espagnol. Comment gérez-vous le paramètre de langue ?

A) Définir la langue du site sur es puisqu'une page est en espagnol
B) Définir la langue du site sur en et surcharger la page espagnole en es dans ses Paramètres de page
C) Laisser le champ de langue vide et laisser les navigateurs deviner

Réponse

B) Définir la langue du site sur en et surcharger la page espagnole en es dans ses Paramètres de page. Les paramètres du site sont des valeurs par défaut, les paramètres de page sont des surcharges. De cette façon, chaque page obtient le bon code de langue.

Q2 : Votre favicon est parfait sur votre ordinateur mais apparaît comme une icône vide pour d'autres personnes. Quel est le problème le plus probable ?

A) Le chemin du favicon est relatif et ne fonctionne que sur votre machine
B) Le fichier du favicon est trop volumineux
C) Vous avez utilisé un favicon SVG

Réponse

A) Le chemin du favicon est relatif et ne fonctionne que sur votre machine. Assurez-vous que le chemin pointe vers un fichier qui existera sur votre site publié, ou utilisez une URL complète.

Q3 : Vous définissez un titre SEO au niveau du site "Boulangerie du Soleil" et un titre au niveau de la page "Notre Menu" sur la page Menu. Quel titre la page Menu affiche-t-elle dans les onglets du navigateur ?

A) "Boulangerie du Soleil"
B) "Notre Menu"
C) "Boulangerie du Soleil - Notre Menu"

Réponse

B) "Notre Menu." Les paramètres au niveau de la page surchargent entièrement les paramètres au niveau du site. Ils ne sont pas combinés. Si vous voulez les deux noms dans le titre, écrivez la chaîne complète dans la surcharge de page : "Notre Menu - Boulangerie du Soleil".

Q4 : Où trouvez-vous le paramètre de langue dans la boîte de dialogue Paramètres ?

A) L'onglet Général
B) L'onglet SEO
C) L'onglet Code

Réponse

B) L'onglet SEO. Le champ de langue est regroupé avec le titre, la description et le favicon sous l'onglet SEO car il affecte directement l'indexation par les moteurs de recherche et l'accessibilité.

Éditer cette page sur GitLab