Rassemblez vos idées : contenu principal et titre de page de Blazor

Jetons un coup d'œil aux trois composants Blazor introduits par .NET 6 pour vous aider à gérer l'en-tête de votre document : PageTitle, HeadContent et HeadOutlet.

Avec l'essor des frameworks JavaScript et la tendance du Web vers les applications à page unique (SPA), de nombreuses tâches sont devenues plus faciles et d'autres plus difficiles. L'optimisation des moteurs de recherche (SEO) et l'optimisation des médias sociaux (SMO) constituent l'un des défis fondamentaux résultant du transfert de la responsabilité du rendu HTML dans le navigateur et hors du serveur.

Les robots des moteurs de recherche parcourent le contenu de votre site Web. site Web afin que le moteur de recherche puisse l'indexer et le renvoyer dans le cadre des pages de résultats du moteur de recherche (SERP). D'un autre côté, les robots des médias sociaux explorent des pages particulières lorsqu'elles sont partagées sur le site de médias sociaux pour afficher une carte attrayante et attrayante.

Mais lorsque ces robots explorent un SPA sans JavaScript activé, tout ce qu'ils voient est un vide. page. Cela signifie que vous ne trouverez cette page dans aucun SERP et que vous ne verrez pas de carte intéressante sur les réseaux sociaux.

Remarque : JavaScript est activé sur certains robots, mais il leur faut plus de temps pour explorer le contenu. Vous devez vous assurer que votre contenu est rendu avec ou sans JavaScript pour maximiser votre référencement et votre SMO.

Heureusement, avec Blazor, vous n'avez pas à choisir entre le rendu HTML sur le serveur ou le client. Blazor peut faire les deux ! Vous pouvez utiliser Blazor WebAssembly ou Blazor Server. Dans les deux versions de Blazor, vous pouvez utiliser le pré-rendu.

Pour optimiser le référencement et le SMO, votre contenu est le plus important. Mais pour améliorer davantage et contrôler l'apparence de votre contenu, vous devez ajouter des métadonnées à votre . Le défi de faire cela avec Blazor est que votre application s'exécute à l'intérieur du corps du document. Pour mettre à jour l'en-tête du document, vous devrez créer une solution homebrew combinant Razor côté serveur et interop JavaScript côté client.

Mais dans la prochaine version de .NET 6, nous avons la chance de disposer de deux nouveaux goodies pour mettre de l'ordre dans notre tête—le composant PageTitle et HeadContent.

Le composant PageTitle

Le nouveau composant PageTitle est un composant Blazor que vous pouvez placer n'importe où dans votre application Blazor. Même si l'application Blazor est rendue dans le corps du document, Blazor se charge de mettre à jour la balise de titre dans l'en-tête lorsque vous utilisez le nouveau composant PageTitle.

Vous trouverez les composants PageTitle dans les pages Blazor fournies avec la version .NET 6 du modèle Blazor Wasm. Prenez Pages/Counter.razor par exemple :

@page "/counter"

<PageTitle>Compteur</PageTitle>

...

À la ligne 3, vous pouvez voir comment le composant PageTitle peut être utilisé. Ajoutez simplement le titre de votre choix à l'intérieur du composant, et lorsque vous accédez à la page sur /counter, vous verrez le titre changer en "Compteur".

Remarque : Le composant PageTitle est à l'intérieur du Espace de noms Microsoft.AspNetCore.Components.Web.

Maintenant que vous pouvez modifier le titre à partir de Blazor, vous pouvez également utiliser le moteur de rendu de Razor pour le modifier dynamiquement.

Si vous modifiez le code comme ci-dessous, le currentCount s'incrémentera lorsque l'utilisateur cliquera sur le bouton « Cliquez-moi ». Le titre de la page sera également mis à jour automatiquement lorsque currentCount est incrémenté.

@page "/counter"

<PageTitle>Compte actuel : @currentCount</PageTitle>

<h1>Compteur</h1>

<p role="status">Compte actuel : @currentCount</p>

<button class="btn btn-primary" @onclick=" () => currentCount++">Cliquez-moi</bouton>

@code {
  private int currentCount = 0;
}

Vous n'avez pas nécessairement besoin de mettre le titre de page à l'intérieur des composants de votre page. Vous pouvez également placer le composant PageTitle à l'intérieur d'autres composants Blazor, mais cela peut rendre plus difficile le suivi du composant qui modifie le titre.

Ce qui nous amène à la question suivante : que se passe-t-il lorsqu'il y a plusieurs composants PageTitle rendus sur la même page ?

@page "/counter"

<Titre de la page>Titre de la page 1</Titre de la page>
<Titre de la page>Titre de la page 2</Titre de la page>

Blazor ne créera pas deux balises de titre à l'intérieur de l'en-tête de votre document. Au lieu de cela, le dernier composant PageTitle à être rendu sera reflété comme titre de votre document. Dans ce cas, ce serait "Page Title 2". vous naviguez loin et revenez à la page. Ce problème devrait être résolu lorsque .NET 6 sera publié.

Le composant HeadContent

Le nouveau composant HeadContent est similaire au composant PageTitle. Mais au lieu de définir le titre du document, le contenu du composant sera déplacé vers l'en-tête de votre document.

@page "/counter"

<PageTitle>Compteur</PageTitle>
<HeadContent>
  <meta name="description" content="Utilisez cette page pour comptez les choses !" />
  <meta name="author" content="Niels Swimberghe">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</HeadContent>

Dans l'exemple ci-dessus, l'en-tête de document suivant sera produit :

<head>

  <titre>Compteur</titre>
  <meta name="description" content="Utilisez cette page pour comptez les choses !">
  <meta name="author" content="Niels Swimberghe">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</tête>

Vous pouvez également utiliser le composant HeadContent pour définir le titre du document, mais HeadContent ajoutera simplement la balise de titre sans rechercher de titre existant à mettre à jour.

Vous pourriez accidentellement créer plusieurs titres de page qui sont du code HTML non valide. Cet exemple ajoutera deux balises de titre dans l'en-tête :

<PageTitle>Page title from PageTitle</PageTitle>
<HeadContent>
  <title>Titre de la page de HeadContent</title>
</HeadContent>

La tête résultante ressemblera à ceci :

<head>
  
  <title>Titre de la page de PageTitle</title>
  <title>Titre de la page de HeadContent</title>
</tête>

Les navigateurs sont généralement indulgents et utiliseront le deuxième titre, mais vous devez simplement vous en tenir au composant PageTitle, qui se charge de créer ou de mettre à jour le titre du document.

Que se passe-t-il donc lorsque vous affichez plusieurs composants HeadContent ? ?

@page "/compteur"

<HeadContent>
  <meta name="description" content="Utilisez cette page pour comptez les choses !" />
  <meta name="author" content="Niels Swimberghe">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</HeadContent>
<HeadContent>
  <meta name="description" content="Ceci est la description du deuxième HeadContent" />
</HeadContent>

Blazor ne fusionnera pas le contenu des deux composants HeadContent, mais utilisera à la place le contenu rendu en dernier. Cela signifie que dans l'exemple ci-dessus, le contenu du deuxième composant HeadContent sera placé dans l'en-tête du document et le contenu du premier composant HeadContent est perdu.

En raison de ce comportement, il est préférable de conserver le titre de page. et les composants PageContent dans vos composants de page Blazor au lieu de composants descendants.

Le composant HeadOutlet

Il existe un troisième composant qui n'a pas encore été mentionné. Le composant HeadOutlet est le composant responsable de la sortie du titre du composant PageTitle et du contenu du composant HeadContent.

Si vous utilisez le modèle Blazor Wasm mis à jour de .NET 6, vous utilisez déjà ce composant car il est préconfiguré pour vous dans le fichier Program.cs.

using Microsoft.AspNetCore.Components. Web;
en utilisant Microsoft.AspNetCore.Components.WebAssembly.Hébergement;[19659231]using YourProjectName;

var builder = WebAssemblyHostBuilder.CreateDefault(args) ;
builder.RootComponents.Add<App>("#app") ;
builder.RootComponents.Add<HeadOutlet>("head::after")[19659016];

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = nouveau Uri(builder.HostEnvironment.BaseAddress) }) ;

wait builder.Build().RunAsync();

À la ligne 7, le composant HeadOutlet est ajouté en tant que composant racine.

builder.RootComponents.Add<HeadOutlet>("head::after");

Dans CSS, ::after crée un pseudo-élément comme dernier enfant des nœuds sélectionnés, et dans ce cas, cela signifie que Blazor ajoutera le composant HeadOutlet comme composant dernier enfant du nœud principal.

Il s'agit de la valeur par défaut du modèle Blazor Wasm, qui rend l'application Blazor et HeadOutlet sur le client et dépend également de JavaScript. Comme indiqué précédemment, de nombreux robots des moteurs de recherche et des réseaux sociaux n'exécuteront pas votre JavaScript. Par conséquent, les robots ne verront pas le résultat de votre application côté client ou de votre composant HeadOutlet.

La modification de votre application Blazor Wasm nécessitera un travail supplémentaire, mais vous pouvez suivre ce guide à partir de la documentation ASP.NET pour prérender votre application : Prérender et intégrer les composants ASP.NET Core Razor.

Après avoir suivi le guide pour prérender votre application, vous utiliserez plutôt le composant HeadOutlet :

<component type="typeof(HeadOutlet)" render-mode="WebAssembly21]Prerendered[194590" />

Si vous utilisez le modèle Blazor Server, vous avez déjà tout configuré pour le pré-rendu et le composant HeadOutlet ressemblera à ceci :

<component type=[19659016]"typeof(HeadOutlet)" render-mode="ServerPrerendered" />

Que devriez-vous mettre dans votre tête ?

Le contenu de l'en-tête de votre document dépend des exigences de l'application que vous créez. Si vous créez un site Web ou une application où le contenu et le référencement sont importants, ces métadonnées sont très pertinentes :

Voici un exemple de la façon dont vous pouvez utiliser les composants PageTitle et HeadContent pour ajouter les métadonnées mentionnées précédemment à votre tête :[19659014]@page "/bon-contenu"
@injectNavigationManagerNavigationManager

<PageTitle>Titre d'un bon contenu</PageTitle>
<HeadContent>
<meta name="description" content="Une petite description de du bon contenu sur cette page" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="@(NavigationManager.BaseUri) plan du site.xml" />
<link rel="alternate" type="application/rss+ xml" href="@(NavigationManager.BaseUri)atom.xml">
<link rel="canonical" href="@(NavigationManager. BaseUri)bon-contenu" />
<meta name="robots" content="index, follow" />
<script type="application/ld+json">
{
"@@context": "https://schema.org/",
"@@type": "Recette ",
"nom": "Party Coffee Cake",
"auteur": {
"@@type"[19659016]: "Personne",
"nom": "Mary Stone"
},
"date de publication":[19659364]"2018-03-10",
"description": "Ce gâteau au café est génial et parfait pour les fêtes.",
"prepTime" : "PT20M"
}
</script>
</HeadContent>

Prenez note de l'utilisation de NavigationManager pour construire dynamiquement les URL.

Si vous voulez vous assurer que votre contenu a fière allure lors du partage sur les réseaux sociaux, vous souhaitez ajouter le graphique ouvert et les métadonnées Twitter comme cet exemple. :

<HeadContent>
  <meta property="og:title" content="Titre de du bon contenu" />
  <meta property="og:description" content="Un petit description d'un bon contenu sur cette page" />
  <meta property="og:image" content="@( NavigationManager.BaseUri)page/to/open-graph-image.png" />
  <meta property="og:image:alt" content=" Description alternative pour votre image" />
  <meta property="og:type" content="site web" />
  <meta property="og:url" content="@( NavigationManager.BaseUri)bon-contenu" />
  <meta property="og:site_name" content="Le nom de votre site" />
  <meta name="twitter:title" content="Titre de du bon contenu" />
  <meta name="twitter:description" content="Un petit description d'un bon contenu sur cette page" />
  <meta name="twitter:image" content="@( NavigationManager.BaseUri)page/to/twitter-image.png" />
  <meta name="twitter:image:alt" content=" Description alternative pour votre image" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@@ VotreTwitterHandle" />
  <meta name="twitter:creator" content="@@ VotreTwitterHandle" />
</HeadContent>

La liste des balises suggérées pour les deux scénarios n'est pas concluante. Il existe un projet open source qui publie une bonne liste de balises que vous devriez envisager d'ajouter à votre tête.

Gardez à l'esprit que vous n'avez pas besoin d'utiliser le composant HeadContent pour les balises dans votre tête qui sont constants. Ajoutez simplement ces balises à l'en-tête de votre fichier index.html ou _Layout.cshtml en fonction de votre projet.

Summary

.NET 6 introduit trois composants Blazor à vous aident à gérer l'en-tête de votre document.

1. À l'aide du composant PageTitle, vous pouvez définir et mettre à jour dynamiquement le titre de votre document.
2. Le composant HeadContent vous permet d'ajouter dynamiquement du contenu à l'en-tête de votre document.
3. Le composant HeadOutlet est chargé de récupérer le contenu des composants PageTitle et HeadContent et de le placer dans l'en-tête de votre document.

Vous pouvez utiliser ces composants dans Blazor Wasm et Blazor Server. Vous pouvez également effectuer un pré-rendu de ces nouveaux composants pour optimiser le référencement et le SMO.