Neue Discord-Linkvorschauen mit Bildern, Struktur und direkten Link-Buttons

Ein Website-Link im Chat bestand bislang meist aus einer vertrauten Kombination: Titel, kurzer Beschreibung und Vorschaubild. Mit den neuen Component Embeds für Discord lässt sich die Vorschau stärker gliedern. Textabschnitte, Bilder und mehrere Link-Buttons können zusammen eine kleine Übersicht bilden, über die Leser direkt zum passenden Inhalt gelangen.

Für eine Firmenwebsite könnte eine solche Karte das Unternehmen vorstellen und zusätzlich zu Leistungen oder Kontakt führen. Bei einem Ratgeberbeitrag steht der Artikel im Mittelpunkt. Ein ergänzender Link kann zur passenden Leistung führen. Die Vorschau hilft damit schon im Chat bei der Orientierung.

Was an den neuen Discord-Vorschauen anders ist

Die klassischen Vorschauangaben beschreiben hauptsächlich, welcher Inhalt gezeigt werden soll: Titel, Beschreibung, Bild und Adresse. Bei einer Komponentenkarte kommt die Gliederung hinzu. Ein gemeinsamer Rahmen hält die Bausteine zusammen; darin lassen sich beispielsweise Textblöcke, Bildgalerien, Trennlinien und Reihen mit Link-Buttons anordnen.

Das Kitchen-Sink-Beispiel für Discord Component Embeds führt diese Möglichkeiten vor. Um die Vorschau in Aktion zu sehen, kopieren Sie den Link und posten ihn einmal in einem Discord-Chat mit aktivierten Linkvorschauen. Beim bloßen Öffnen der Webseite sehen Sie die Discord-Karte noch nicht. Die Discord-Komponentenreferenz erklärt die zugrunde liegenden Bausteine. Dabei ist zu unterscheiden: Nicht jede Komponente einer Bot-Nachricht ist automatisch auch für eine Website-Linkvorschau verfügbar.

Art der Linkvorschau

Klassische VorschauMit Komponenten

# website-tipps BEISPIEL

RRavokGeteilter Link

https://ravok.de/

RAVOKIT einrichten, verbessern und betreuen

IT, Automatisierung und KI mit einem festen Ansprechpartner.

RAVOKIT einrichten, verbessern und betreuen

IT, Automatisierung und KI mit einem festen Ansprechpartner.

Seite öffnen Leistungen Kontakt

Titel, Beschreibung und Bild führen zur geteilten Seite.

Zusätzliche Link-Buttons führen direkt zum passenden nächsten Schritt.

1. 01
   Inhalte gliedern

   Textblöcke und Trennlinien ordnen die Vorschau.

2. 02
   Bilder kombinieren

   Eine Galerie kann mehrere Motive zeigen.

3. 03
   Ziele anbieten

   Link-Buttons öffnen ausgewählte Unterseiten.

Schematische Darstellung. Die Link-Buttons in dieser Illustration sind ohne Funktion.

Die Illustration zeigt bewusst denselben Inhalt in beiden Varianten. Der zusätzliche Nutzen liegt hier in den direkten Zielen: Wer sich bereits für eine Zusammenarbeit interessiert, kann von der Vorschau zur Kontaktseite wechseln. Für eine Veranstaltung könnten die sinnvollen Ziele stattdessen Programm und Anmeldung sein. Welche Links wir anbieten, hängt von der geteilten Seite ab.

Die Website liefert die Bausteine mit

Für das hier verwendete Format steht ein JSON-Datenblock im HTML-Kopf der Seite. Seine Kennung lautet discord:component-embed, der Datentyp application/json. Discord kann diese Angaben beim Abrufen des geteilten Links auslesen.

Der Datenblock führt im Browser keinen Programmcode aus. Er beschreibt die Vorschau. Für diesen Weg muss die Website weder einen Bot betreiben noch über einen Webhook selbst Nachrichten versenden. Der Anlass bleibt ein geteilter Link.

Ein reduziertes Beispiel zeigt einen Textblock und zwei Link-Buttons:

<script id="discord:component-embed" type="application/json">
{
  "component": {
    "type": 17,
    "accent_color": 8121600,
    "components": [
      {
        "type": 10,
        "content": "## Ravok\nIT einrichten, verbessern und betreuen."
      },
      {
        "type": 1,
        "components": [
          {
            "type": 2,
            "style": 5,
            "label": "Leistungen",
            "url": "https://ravok.de/leistungen/"
          },
          {
            "type": 2,
            "style": 5,
            "label": "Kontakt",
            "url": "https://ravok.de/kontakt/"
          }
        ]
      }
    ]
  }
}
</script>

Die Zahlen bezeichnen die Komponenten: 17 den gemeinsamen Rahmen, 10 einen Textblock, 1 eine Aktionsreihe und 2 einen Button. Mit style: 5 ist dieser Button ein Link. Er öffnet die hinterlegte Adresse; er löst keine Bot-Aktion aus. Die Akzentfarbe wird als Ganzzahl angegeben, hier das Ravok-Grün #7bed00.

Das Beispiel orientiert sich am verlinkten Website-Embed. Umfang und erlaubte Komponenten sollten bei der Umsetzung gegen die jeweils geltenden Vorgaben geprüft werden. Vor allem gehört eine tatsächliche Vorschau in Discord zur Abnahme: Gültiges JSON allein bestätigt noch nicht, dass Discord die Karte wie vorgesehen anzeigt.

Wie wir die Vorschau auf ravok.de aufbauen

Unsere Seitenvorlage erzeugt die Discord-Daten aus dem jeweiligen Seitentitel, der Beschreibung und dem hinterlegten Vorschaubild. Hinzu kommen passende Link-Buttons. Ein Ratgeberbeitrag bekommt beispielsweise „Beitrag lesen“, ergänzt um Leistungen und Kontakt. Doppelte Ziele lassen wir weg.

Damit muss eine Textänderung nicht zusätzlich in mehreren Vorschauvorlagen nachgepflegt werden. Die gemeinsamen Inhaltsdaten speisen sowohl die klassischen Meta-Angaben als auch die Discord-Karte. Das funktioniert auch bei einer statisch erzeugten Website: Der fertige Datenblock wird mit der Seite ausgeliefert.

Für die Gestaltung begrenzen wir die Karte auf das, was vor dem Klick hilft. Ein prägnanter Titel, eine verständliche Zusammenfassung, ein passendes Bild und wenige klar benannte Ziele sind meist sinnvoller als eine möglichst volle Karte. Mehrere Bilder bieten sich an, wenn sie unterschiedliche Aspekte zeigen. Winzige Schrift in Bildern oder wiederholte Werbesätze schaffen dagegen wenig Orientierung.

Facebook, LinkedIn und X weiterhin mitdenken

Die Discord-Erweiterung ergänzt die gemeinsamen Vorschauangaben. Sie ersetzt sie nicht. Für Facebook, LinkedIn und andere Dienste bleibt Open Graph wichtig. Das Open-Graph-Protokoll definiert unter anderem og:title, og:description, og:image und og:url sowie den Inhaltstyp og:type.

LinkedIn nennt die benötigten Angaben und Bildanforderungen ausdrücklich. Bei X heißen die technischen Felder auch nach der Umbenennung weiterhin twitter:card, twitter:title oder twitter:image. Selbst die aktuelle X-Entwicklerseite verwendet diese Namen in ihrem HTML-Kopf. Eine eigene Bildbeschreibung lässt sich über twitter:image:alt hinterlegen, wie X zur Zugänglichkeit von Kartenbildern erläutert.

Wir halten deshalb eine gemeinsame Grundlage mit Titel, Beschreibung und Bild vor und ergänzen die Möglichkeiten der einzelnen Plattformen. Welche Angaben sichtbar werden und wie ein Bild zugeschnitten wird, entscheidet der jeweilige Dienst. Ein Bildmotiv sollte deshalb auch klein verständlich sein und wichtige Inhalte mit Abstand zum Rand platzieren.

Was diese Angaben für SEO leisten

Eine aufwendigere Discord-Karte bringt nicht automatisch eine bessere Google-Platzierung. Der Zusammenhang liegt in der sauberen Beschreibung der Seite, aus der wir die verschiedenen Darstellungen ableiten.

Ein konkreter Seitentitel hilft beim Einordnen des Inhalts. Google berücksichtigt für den Titellink unter anderem das title-Element, Überschriften und auch og:title. Der sichtbare Suchergebnistitel kann deshalb vom hinterlegten Text abweichen. Das erklärt Google in seinen Hinweisen zu Titellinks.

Eine passende Meta-Beschreibung kann im Suchergebnis erscheinen. Google kann stattdessen einen Ausschnitt aus dem Seiteninhalt wählen, der besser zur Suchanfrage passt. Die Beschreibung selbst ist kein direkter Rankingfaktor. Ihr Nutzen besteht darin, Lesern den Inhalt vor dem Klick verständlich zu machen. Dazu passen Googles Hinweise zu Snippets und die Einordnung von Meta-Beschreibungen und Keywords.

Ein guter Webauftritt beginnt schon beim geteilten Link. Wir gestalten die Vorschau passend zum Inhalt und nutzen die zusätzlichen Möglichkeiten dort, wo sie Besuchern helfen. Mehr dazu finden Sie unter Webauftritte und Onlineshops.