Blazor HeadContent

Question

I have some Open Graph meta tags that I add within the HeadContent. The problem is that I must add all those tags on every page.

Is it possible to have a component to be called and then only assign the different values as parameters?

Thank you

Accepted Answer

Hi @Kuler Master,

Here is a whole working demo for how to make a reusable component to display different meta data with targetframework .net 8 in Blazor:

1.Custom Component named CustomMetaTag.razor

@using Microsoft.Extensions.Localization
@inject NavigationManager _navigationManager
@inject IStringLocalizer _localizer

    
    
    
    
    
    
    
    
    
    
    
    
    

@code {
    [Parameter] public string Description { get; set; }
    [Parameter] public string Keywords { get; set; }
    [Parameter] public string Url { get; set; }
    [Parameter] public string Title { get; set; }
    [Parameter] public string OgDescription { get; set; }
    [Parameter] public string Image { get; set; }
    [Parameter] public string TwitterSite { get; set; } = "@crowd4cash";
    [Parameter] public string TwitterCreator { get; set; } = "@crowd4cash";
    protected override void OnParametersSet()
    {
        if (string.IsNullOrEmpty(Url))
        {
            Url = _navigationManager.Uri;
        }
        if (string.IsNullOrEmpty(Title))
        {
            Title = _localizer["PageTitle_Default"];
        }
        if (string.IsNullOrEmpty(OgDescription))
        {
            OgDescription = _localizer["PageSubtitle_Default"];
        }
    }
}

2.Use the component in Home.razor for example

@page "/"

@using Microsoft.Extensions.Localization
@inject NavigationManager _navigationManager
@inject IStringLocalizer _localizer

@_localizer["PageTitle_Home"]
@_localizer["PageSubtitle_Home"]

3.Add Localization Strings to Resource Files.

4.Configure the localization in Blazor Server

public class Program
   {
       public static void Main(string[] args)
       {
           var builder = WebApplication.CreateBuilder(args);
           // Add services to the container.
           builder.Services.AddRazorComponents()
               .AddInteractiveServerComponents()
               .AddInteractiveWebAssemblyComponents();
           builder.Services.AddHttpClient();

         //add this... 
           builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");
           var app = builder.Build();
           // Configure the HTTP request pipeline.
           if (app.Environment.IsDevelopment())
           {
               app.UseWebAssemblyDebugging();
           }
           else
           {
               app.UseExceptionHandler("/Error");
               // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
               app.UseHsts();
           }
           app.UseHttpsRedirection();
          
           //add this... app.UseRequestLocalization(app.Services.GetRequiredService>().Value);
           app.UseStaticFiles();
           app.UseAntiforgery();
           app.MapRazorComponents()
               .AddInteractiveServerRenderMode()
               .AddInteractiveWebAssemblyRenderMode()
               .AddAdditionalAssemblies(typeof(Counter).Assembly);
           app.Run();
       }
   }

5.Configure the localization in Blazor WebAssembly

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources"); //add this... 
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Rena

Answer

if on every page, just move the code to app.razor.

generally open graph data is fetched with a get (and will not load/execute javascript), so only static pre-render html will be seen.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/prerender?view=aspnetcore-8.0

Share via

Blazor HeadContent

3 additional answers

Your answer