Contrôler la section HTML HEAD dans Blazor

Découvrez comment ajouter des titres de page contextuels et ajouter des métadonnées aux pages HTML à l’aide de Blazor, ce qui est utile pour le référencement sur les sites Web publics.

Avec .NET 8 et le nouveau modèle de projet Blazor Web App, le pré-rendu du serveur est activé par défaut. Cela signifie que le serveur envoie un document HTML au client avant que la page Web ne soit complètement chargée.

Cette fonctionnalité contribue à l’optimisation des moteurs de recherche (SEO) en améliorant la vitesse de chargement de la première page. La section d’en-tête d’un document HTML devient importante lors de la création de sites Web ou d’applications exposées publiquement.

Que se passe-t-il dans la section d’en-tête HTML ?

Prenons rapidement du recul et réfléchissons aux raisons pour lesquelles nous devrions nous soucier du section d’en-tête du document HTML. Que doit-on y mettre ?

• Titre de la page: L’information la plus importante dans la section d’en-tête est certainement le titre de la page. En HTML, on utilise simplement le <title> balise à l’intérieur de la section head pour définir le titre de la page. Heureusement, il existe une solution intégrée très pratique pour définir un titre de page pour une page Blazor.
• Lier les fichiers CSS et JavaScript : Avec CSS isolé et le site.css nous avons une infrastructure dans Blazor qui nous permet d’ajouter du CSS là où nous en avons besoin sans lier de fichiers CSS supplémentaires dans la section head. Nous n’avons pas non plus besoin de lier des fichiers JavaScript supplémentaires.
• Métadonnées : Généralement non affichées dans le navigateur mais utilisées par les navigateurs, les métadonnées nous permettent de définir des informations pertinentes pour les moteurs de recherche. Certaines informations doivent être les mêmes pour toutes les pages, mais nous souhaiterons peut-être en modifier quelques-unes en fonction de la page sur laquelle se trouve l’utilisateur.

Le titre de la page

Blazor propose le PageTitle composant du Microsoft.AspNetCore.Components.Web espace de noms qui nous permet de définir le titre de la page depuis l’intérieur d’une page Blazor.

Prenons l’exemple suivant :

@page "/about"

<PageTitle>Software Wizardry - About Us</PageTitle>

<h3>About Us</h3>
<p>We are a team of highly motivated software developers focused on delivering sustainable and modern software solutions.</p>

Dans ce composant de page d’article, nous utilisons le PageTitle composant et fournissez une chaîne statique comme valeur.

Nous pourrions également utiliser des propriétés ou des variables définies dans le composant dans le cadre du PageTitle contenu, par exemple, en utilisant l’interpolation de chaîne.

PageTitle à l’intérieur d’un composant enfant

Même s’il est préférable de définir le PageTitle directement à l’intérieur d’un composant de page, nous pourrions également le définir à l’intérieur d’un composant enfant.

Ce qui semble étrange risque également de semer la confusion quant à l’endroit et au titre de la page. Cependant, nous souhaitons parfois inclure contextuel informations contenues dans le titre de la page qui ne sont pas disponibles sur le composant de page.

Cela pourrait être le cas lorsque l’on met le PageTitle Un composant à l’intérieur d’un composant enfant est un moyen simple et propre de résoudre le problème.

Prenons l’exemple suivant d’un Article composant de page :

@page "/article/{ArticleId:int}"
@using BlazorHead.Client.Components

<PageTitle>Software Wizardry</PageTitle>

<h1>Amazing Blog Post Title</h1>
<Author ArticleId=@ArticleId />
<p>Amazing Content</p>

@code {
    [Parameter]
    public int ArticleId { get; set; }
}

Nous recevons le ArticleId propriété comme paramètre lors de la navigation vers la page. Vous pouvez voir la définition du paramètre dans le @page directif.

Indice: En savoir plus sur paramètres des composants et gestion de l’état dans un autre article du Série Blazor Basics.

Ensuite, nous définissons le PageTitle à un insensible au contexte, titre statique. Cependant, notez le Author composant. Regardons-le de plus près :

<p><i>Author: @Name</i></p>

<PageTitle>Software Wizardry - @Name</PageTitle>

@code {
    [Parameter]
    public int ArticleId { get; set; }

    public string? Name { get; set; }

    protected override void OnInitialized()
    {
        if (ArticleId == 16)
        {
            Name = "Claudio Bernasconi";
        }
        else
        {
            Name = "Unknown";
        }
    }
}

Encore une fois, nous acceptons le ArticleId comme paramètre du composant. Dans le OnInitialized méthode du cycle de vie, nous avons une logique pour charger le nom de l’auteur.

Dans cet exemple, nous avons un trivial if/else logique pour résoudre mon nom pour l’identifiant d’article 16 et Inconnu pour tous les autres articles. Dans une application réelle, nous pourrions appeler une API pour charger les informations de l’auteur spécifiques à cet article.

Dans la définition du modèle, nous ajoutons le nom de l’auteur à la partie statique du titre de la page en utilisant le PageTitle composant.

Puisque Blazor effectue un rendu descendant, le PageTitle composant à l’intérieur du Author Le composant est rendu après le PageTitle composant à l’intérieur du Article composant. Par conséquent, le titre de la page inclura l’auteur.

Les métadonnées sont importantes pour optimisation des moteurs de recherche (SEO) puisque le contenu de la description, du titre et parfois des propriétés de l’auteur est affiché sur la page des résultats de recherche.

Le HeadContent Le composant nous permet d’ajouter des balises supplémentaires à la section d’en-tête d’un document HTML. Considérez l’extrait suivant ajouté à celui présenté précédemment Article composant de page :

<HeadContent>
    <meta name="description" content="Amazing Content in a blog post." />
</HeadContent>

Le HeadContent composant du Microsoft.AspNetCore.Components.Web l’espace de noms fournit un composant simple qui permet d’ajouter de nouvelles métadonnées à un document HTML.

Dans ce cas, nous ajoutons une balise méta avec la description du nom et fournissons un texte comme contenu.

Se souvenir du Author composante enfant du Article composant illustré ci-dessus ? Ajoutons également l’auteur en tant que métadonnées au document HTML.

Attention: La première idée est d’en ajouter un autre HeadContent composant à l’intérieur du composant Author. Cependant, à l’instar du PageTitle composant, le rendu descendant donne les résultats du dernier HeadContent composant gagnant. Seul son contenu sera ajouté à la section d’en-tête du document HTML.

Cependant, Blazor ne serait pas Blazor s’il n’y avait pas une solution simple pour résoudre le problème que nous avons ici. Nous souhaitons ajouter les informations sur l’auteur et non remplacer la description.

Nous modifions l’implémentation dans le Article composant et utilisez le SectionOutlet introduit dans .NET 8.

<HeadContent>
    <meta name="description" content="Amazing Content in a blog post." />
    <SectionOutlet SectionName="HeadContent" />
</HeadContent>

En plus de la description, nous ajoutons le SectionOutlet composant et fournissez un nom de section.

Dans le Author composant, au lieu d’utiliser le HeadContent et provoquant le problème d’ordre lors de la phase de rendu, nous utilisons le SectionContent composant utilisant le même nom de section pour définir la balise méta auteur.

<SectionContent SectionName="HeadContent">
    <meta name="author" content="@Name" />
</SectionContent>

En utilisant ce code de modèle, nous aurons à la fois la description et la balise d’auteur dans le document HTML résultant.

Considérez la capture d’écran suivante des outils de développement lorsque vous visitez le Article page.

Nous pouvons utiliser le HeadContent et la combinaison des SectionOutlet et SectionContent composants pour ajouter diverses autres balises d’en-tête, telles que des balises de réseaux sociaux pour Facebook, Twitter/X ou LinkedIn.

Conclusion

La définition du titre de la page et des métadonnées est importante lorsqu’il s’agit de référencement pour les sites Web et les applications Web destinés au public.

Blazor fournit le PageTitle composant pour définir facilement le titre de la page, qui est affiché dans l’onglet du navigateur. N’oubliez pas que le dernier appel au composant dans la hiérarchie de rendu l’emportera et que son contenu sera affiché.

Le HeadContent composant, en combinaison avec le SectionOutlet et le SectionContent composants, fournit un moyen pratique d’ajouter des métadonnées supplémentaires (sensibles au contexte) au document HTML.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.