Come abbiamo già documentato all'interno dell'articolo riguardante le novità di Blazor (https://www.aspitalia.com/articoli/asp.net-core5/blazor/novita-blazor-net-6.aspx), abbiamo la possibilità di impostare il title di ogni singola pagina attraverso il tag PageTitle.

@page "/home"

<PageTitle>Mio blog</PageTitle>

Tale operazione è possibile solamente se, all'interno di program.cs, abilitamo con il seguente comando, la sovrascrizione della sezione head presente nell'index.html.

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

Ricordiamo che è importante utilizzare lo pseudo-selector "::after", in quanto ricorda al runtime di non sovrascrivere nulla di quello che è già presente nell'head, aggiungendo solamente ciò che troverà all'interno di ogni pagina, se specificato, consentendo a noi di scrivere solo il minimo indispensabile, mantenendo la maggior parte dei metadati in index.html.

Oltre alla valorizzazione del titolo possiamo avere altre necessità: pensiamo ad un blog, o ad un sito strutturato, in cui sono necessarie specifiche keyword, una descrizione, l'autore del post o qualsiasi tipo di metadato. Anche in questo frangente ci viene in aiuto un tag helper: HeadContent, che possiamo inserire all'interno di ogni pagina, come mostrato nell'esempio seguente

@page "/articoli/{id}"

<PageTitle>{article.Title}</PageTitle>
<HeadContent>
    <meta name="description" content="{article.SubTitle}">
    <meta name="keywords" content="{article.Keywords}">
    <meta name="author" content="{article.Author}">
</HeadContent>

<h1>{article.Title}</h1>
<p>{article.Description}</p>