Das Konzept der TagHelper wurde in ASP.NET Core eingeführt. Wer die CFML von ColdFusion kennt, dem wird das Konzept dahinter bekannt vorkommen, gibt’s schon seit 1995.

Im Beitrag Beitragsseiten für Social Media aufbereiten haben wir Meta-Tags über eine Section hinzugefügt. Bei der Verwendung dieser Tags hat sich ein Fehler eingeschlichen. Schlüsselwerte für Open Graph verwenden als Schlüssel-Attributnamen property während die Meta-Tags als Attribut name verwenden. Wären die Tags auf allen Seiten nach diesem Ansatz platziert, so würde dies einen enormen Korrekturaufwand zur Folge haben.

Problem

Wie können wir die Socialmedia Meta-Tags mit weniger Aufwand in eine Seite einbinden und wartungsfreundlicher gestalten?

Aktion

Als Erstes legten wir eine Klasse MetaSocialMedia, die von TagHelper erbt, an. Anschliessend definierten wir die Eigenschaften für das Bild, den Titel und eine Beschreibung. Die Logik für die nötigen Meta-Tags wird in der Process-Methode platziert.

public class MetaSocialMediaTagHelper : Microsoft.AspNetCore.Razor.TagHelpers.TagHelper
{
    public string Image { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagMode = TagMode.SelfClosing;
        output.TagName = "";
        var meta = new StringBuilder();
        if (string.IsNullOrWhiteSpace(this.Image) == false)
        {
            meta.AppendLine(this.GetMetaTag("og:image", this.Image));
            meta.AppendLine(this.GetMetaTag("twitter:image", this.Image));
            meta.AppendLine(this.GetMetaTag("twitter:card", "summary_large_image"));
        }

        if (string.IsNullOrWhiteSpace(this.Title) == false)
        {
            meta.AppendLine(this.GetMetaTag("og:title", this.Title));
            meta.AppendLine(this.GetMetaTag("twitter:title", this.Title));
        }

        if (string.IsNullOrWhiteSpace(this.Description) == false)
        {
            meta.AppendLine(this.GetMetaTag("og:description", this.Description));
        }

        output.Content.SetHtmlContent(meta.ToString());
        base.Process(context, output);
    }

    private string GetMetaTag(string key, string value)
    {
        var keyName = "name";
        if (key.StartsWith("og:", StringComparison.CurrentCultureIgnoreCase))
        {
            keyName = "property";
        }

        return $@"<meta {keyName}=""{key}"" content=""{value}"" />";
    }
}

In der Razor-View kann dieser TagHelper verwendet werden. Aus der Klasse MetaSocialMedia wird gemäss der Konvention meta-social-media und die Eigenschaften werden als Attribute angesprochen.

@section Meta
{
    <meta-social-media title="@Model.Titel" 
                  image="@Url.Action("Veranstaltung", "Bild", new { code = Model.Code })"
                  description="@Model. Teaser" />
}

Resultat

Der TagHelper erstellt die nötigen Meta-Tags. Erweiterungen und Korrekturen können nun im TagHelper vorgenommen werden, ohne dabei jede einzelne Seite anpassen zu müssen. Nach dieser Anpassung funktioniert nun auch die Vorschau auf Twitter.