HTML Tipp: Beitragsseiten für Social Media aufbereiten

HTML Tipp: Beitragsseiten für Social Media aufbereiten

Die Veranstaltungen der .NET User Group Bern enthalten meist Beitragsbilder. Beim Teilen der Beiträge über Soziale Netzwerke wie Twitter oder LinkedIn werden diese in der Vorschau nicht angezeigt.

Abbildung zeigt einen Beitrag der über LinkedIn geteilt werden soll. Es wird keine Vorschau des Beitragsbildes und des Veranstaltungstitels angezeigt

Problem

Wie können die Veranstaltungen in den Sozialen Netzwerken in der Vorschau mit Bild und Titel angezeigt werden?

Aktion

Das Veranstaltungsbild ist bisher in die Seite eingebettet. Unsere Idee dabei war die Reduzierung der Anfragen. Der Trade off wird beim Teilen in den sozialen Netzwerken sichtbar. Das Bild wird nicht angezeigt.

Abbildung zeigt ein HTML-Fragment mit eingebetteten Bild mittels data-Attribut.

Für das Teilen mit Vorschau können entsprechende Metadaten platziert werden. Mit der eingebetteten Variante in den Metadaten würde die Seite unnötig wachsen, da das Bild mehrmals verwendet wird. Ideal wäre hier ein Pfad zum Bild.

Der erste Schritt bestand darin, die Bildquelle anzupassen. Statt das Bild mehrmals einzubetten legen wir ein Bildpfad an. Dieser kann auch mit Caching kombiniert werden, sodass der Browser nach der ersten Anfrage die weiteren Aufrufe aus seinem lokalen Cache bedient.

Dazu erstellten wir eine Controller-Action, welche die Binärdaten als Datei zurück an den Browser sendet.

public async Task<IActionResult> Veranstaltung(string code)
{
     var beitragsbild = await _veranstaltungen.GibVeranstaltungsbildAsync(code);            
     return File(beitragsbild.Datei, beitragsbild.DateiTyp);
}

In der Seite wird dieser mit einer Url-Action aufgerufen.

<img src="@Url.Action("Veranstaltung", "Bild", new { area = "", code = Model.Code })" />

Der generierte Quellcode enthält wie gewohnt die Quelle zum Bild.

Abbildung zeigt  eine Url zum Bild statt eines eingebetteten Bildes in die Seite

In einen weiteren Schritt legten wir die spezifischen Metadaten für die Vorschau im Kopfbereich der Veranstaltungsseite an.

@section Meta
{
    <meta property="og:image" content="@Url.Action("Veranstaltung", "Bild", new { area = "", code = Model.Code })" />
    <meta property="og:title" content="@Model.Titel" />
    <meta property="og:description" content="@Model.Teaser" />
    <meta property="twitter:image" content="@Url.Action("Veranstaltung", "Bild", new { area = "", code = Model.Code })" />
    <meta property="twitter:title" content="@Model.Titel" />
}

Resultat

Nach diesen Anpassungen stehen die Metadaten für die sozialen Netzwerke zur Verfügung. Zu einen Link kann die Vorschau korrekt abgerufen werden.

Die Abbildung zeigt eine Vorschau des Beitrags auf LinkedIn mit Bild und Titel, nachdem die Anpassungen vorgenommen worden sind.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Fill out this field
Fill out this field
Bitte gib eine gültige E-Mail-Adresse ein.

Menü