Meta tags

<ec-meta> renderer meta tags for en IPublishedContent.

Helperen finder et passende ViewComponent og renderer viewet /Views/Partials/Meta.cshtml.

Brug

Tilføj tag helpers i _ViewImports.cshtml:

@addTagHelper *, Ecreo.Essentials

Sæt meta tags i layoutets <head>:

<head>
    <ec-meta for="@Model"></ec-meta>
</head>

Hvis for er null, renderer helperen ingenting.

Standardfelter

Default meta henter værdier fra disse Umbraco aliases:

Alias	Bruges til
siteName	Sitets navn.
metaTitle	<title> og fallback til Open Graph title.
metaDescription	Meta description og fallback til Open Graph description.
metaKeywords	Meta keywords.
robotsTxt	<meta name="robots">.
openGraphTitle	og:title.
openGraphDescription	og:description.
openGraphImage	og:image, croppet til 1200x630.

Hvis metaTitle mangler, bruges sidens navn. På undersider tilføjes sitenavnet med separatoren -.

Standard output

Default viewet kan blandt andet renderere:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontakt - Mit site</title>
<meta name="description" content="Kontakt os">
<link rel="canonical" href="https://example.com/kontakt/">
<meta property="og:type" content="website">
<meta property="og:title" content="Kontakt - Mit site">
<meta property="og:description" content="Kontakt os">
<meta name="robots" content="noindex">

Favicon og manifest-tags renderes kun, hvis filerne findes.

Hreflang renderes kun, når siden har mere end én gyldig kultur-URL.

Konfiguration

Skift aliases og defaults via MetaOptions:

builder.Services.Configure<MetaOptions>(options =>
{
    options.TitleAlias = "seoTitle";
    options.DescriptionAlias = "seoDescription";
    options.AppendSiteNameToSetTitles = true;
    options.TitleSeparator = "|";
    options.DefaultMetaViewModel.AndroidThemeColor = "#ffffff";
});

De vigtigste options er:

Option	Standard
DefaultViewComponent	typeof(DefaultMetaViewComponent)
AppendSiteNameToSetTitles	false
TitleSeparator	-
SiteNameAlias	siteName
TitleAlias	metaTitle
DescriptionAlias	metaDescription
MetaKeywordsAlias	metaKeywords
RobotsTxtAlias	robotsTxt
OpenGraphTitleAlias	openGraphTitle
OpenGraphDescriptionAlias	openGraphDescription
OpenGraphImageAlias	openGraphImage

Overstyr view markup

Læg et view på samme sti i webprojektet:

/Views/Partials/Meta.cshtml

Det lokale view vinder over det indlejrede view i pakken.

Dokumenttype-specifik meta

Opret et ViewComponent med dokumenttypealias + MetaViewComponent.

For dokumenttypealias productPage kan komponenten hedde ProductPageMetaViewComponent.

using Ecreo.Essentials.Frontend.Meta;
using Ecreo.Essentials.Files;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;

public class ProductPageMetaViewComponent : DefaultMetaViewComponent
{
    public ProductPageMetaViewComponent(
        IOptions<MetaOptions> options,
        IFileHelper fileHelper,
        ILogger<DefaultMetaViewComponent> logger)
        : base(options, fileHelper, logger)
    {
    }

    public override IViewComponentResult? Render()
    {
        if (ViewModel is not null)
        {
            ViewModel.MetaTitle = $"Produkt - {ViewModel.MetaTitle}";
            ViewModel.OpenGraphTitle = ViewModel.MetaTitle;
        }

        return base.Render();
    }
}

<ec-meta> finder komponenten automatisk, når den matcher dokumenttypens alias.

Nyt globalt default component

Hvis alle sider skal bruge en anden standard, så registrer et andet default component:

builder.Services.Configure<MetaOptions>(options =>
{
    options.DefaultViewComponent = typeof(MyDefaultMetaViewComponent);
});

Et helt custom ViewComponent skal have en Invoke-metode med én parameter:

public IViewComponentResult Invoke(IPublishedContent content)
{
    return View("/Views/Partials/Meta.cshtml", content);
}