Wenn du eine Website hast, so teilst du sicherlich auch manchmal Links in sozialen Medien. Je nachdem, welches Content-Management-System du benutzt, kann es sein, dass in Twitter einfach nur der Titel der Website und ein Link angezeigt wird.
Hier bei Novatrend posten wir täglich um 9:00 Uhr einen Link auf unserem Twitter Account @novatrend_ch. Die Links kommen aus unterschiedlichen Quellen und jeden Montag aus unserem eigenen Blog. Wir benutzen dazu das Tool Buffer.
Die Tweets, die aus unseren Einträgen entstehen, sehen auf Twitter unterschiedlich aus. Manchmal ist es nur ein Link, manchmal ein Link mit Foto und manchmal etwas sehr Individuelles.
Die unterschiedliche Darstellung beruht auf der Nutzung von Twitter-Cards.
Ohne grosse Forschung ist es leicht nachvollziehbar, dass die beiden letzten Tweets vermutlich die meisten Aufrufe der verlinkten Website erzeugen. Es sehen einfach schicker, schöner, runder aus. Durch die optionale Mention (Erwähnung) des Twitter-Kontos der Quelle findet auch noch eine Benachrichtigung der Quelle über Twitter statt. Wenn die Quelle will, kann sie den Tweet retweeten und damit die Aufmerksamkeit auf die eigenen Artikel erhöhen (Zum Thema Webmention; siehe auch diesen Artikel aus dem Blog (Webmention).
Auch in Messenger-Systemen wie Signal, Matrix, Slack, etc. werden diese Vorschauen angezeigt und die Darstellung entscheidet oft, ob jemand den Link klickt oder nicht.
Wie ein Link zu deiner Website angezeigt wird, kannst du im Twitter Card Validator sehen.
Meta-Elemente
Das Zauberwort zu diesem Verhalten sind Meta-Elemente, auch Meta-Tags genannt, die du in deine Website einbauen musst. Meta-Elemente werden innerhalb des HTML head Bereiches eingetragen und so sehen etwa so aus:
<html>
<head>
...
<meta name="Generator" content="Drupal 9 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
...
</head>
</html>
Um die Anzeige in Twitter zu konfigurieren, musst du weitere Meta-Informationen eintragen. Hier ein Beispiel aus der Drupal 9 Site virtualapero.de. Es werden Meta-Elemente mit den Namen twitter:card, twitter:site, twitter:description, twitter:title, twitter:site:id, twitter:creator, twitter:url, twitter:image:alt, twitter:image hinzugefügt und mit den entsprechenden Werten versehen
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@virtualapero" />
<meta name="twitter:description" content="Zubereitungszeit 45 - Backofen auf 200° (Umluft) aufheizen Frühlingszwiebeln und Knoblauch klein hacken und in der Pfanne mit Olivelöl anbraten Gemüse in der Küchenmaschine grob raspeln und in der Pfanne geben Würzen und weiter braten " />
<meta name="twitter:title" content="Gemüse-Quiche von @drmenzelit" />
<meta name="twitter:site:id" content="1392173694177402889" />
<meta name="twitter:creator" content="drmenzelit" />
<meta name="twitter:url" content="https://virtualapero.de/de/node/227" />
<meta name="twitter:image:alt" content="Gemüse-Quiche" />
<meta name="twitter:image" content="https://virtualapero.de/sites/default/files/styles/gross_480x480_mit_wasserzeichen/public/2022-01/gemuese-quiche-01_0_0.jpeg?itok=QvD_y8k8" />
<meta name="Generator" content="Drupal 9 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
WordPress
Um die Twitter Card Meta-Elemente in deine WordPress Website einzubauen, kannst du beispielsweise das Open Graph and Twitter Cards Plugin nutzen.
Hinweis: Die folgende Darstellung des Links zum WordPress Plugin ist übrigens auch so eine Card-Darstellung, aber diesmal im Gutenberg Editor von WordPress. Wenn du die URL eines WordPress-Plugins einfügst, so entsteht diese Vorschau automatisch.
Das Plugin lässt sich einfach mit Standardwerten konfigurieren. Die Meta-Elemente werden in den head Bereich eingesetzt.
Drupal
Auch wenn der Verbreitungsgrad von Drupal verglichen mit WordPress eher gering ist, so will ich doch exemplarisch zeigen, wie elegant die Twitter Cards Konfiguration in Drupal funktioniert.
Drupal besteht aus Inhaltstypen, beipielsweise Rezepte, Artikel, Seiten, Blog-Posts und vieles andere mehr. Diese Inhaltstypen können beliebig viele Felder enthalten. Die Felder können auch Referenzen zu anderen Inhaltstypen enthalten. Das ist bei der Einbindung von Assets wie Bildern, Videos, Audiodateien und PDF interessant, die wieder weitere Felder haben können. Dort stehen beispielsweise Informationen zu Lizenzbedingungen und Nutzerberechtigungen.
Mit dem Metatags– und dem Token-Modul lassen sich neben vielem anderen auch Twitter Cards sehr individuell konfigurieren. Hier ein Screenshot der Konfiguration für das obige Rezept – Beispiel. Für jeden einzelnen Meta-Tag lässt sich für jeden Inhaltstyp ein individuelles Aussehen auf der Basis der verwendeten Felder konfigurieren.
In diesem Video wird die Vorgehensweise ausführlich beschrieben.
Fazit
Die Konfiguration von Meta-Elementen ist sinnvoll, wird aber oft vergessen oder als „nicht so wichtig“ empfunden. Ausser den beschriebenen Lösungen für die beiden Content-Management-Systeme können Meta-Tags natürlich auch sehr einfach in statischen HTML-Seiten geschrieben werden.
Links
- https://cards-dev.twitter.com/validator
- https://de.wordpress.org/plugins/wonderm00ns-simple-facebook-open-graph-tags/
- https://www.drupal.org/project/metatag
- https://www.drupal.org/project/token
- https://www.webwash.net/generate-twitter-card-meta-tags-using-metatag-in-drupal/
tl;dr: Die sinnvolle Verwendung von Twitter-Card Meta-Elementen erhöht die Sichtbarkeit deiner Website-Inhalte
Schreibe einen Kommentar