UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Twitter Cards

12. November 2012, von Sarah

Bestimmt habt ihr die Twitter Cards, oder auch Expanded Tweets, bereits gesehen: unterhalb eines Tweets gibt es manchmal einen Link der “show summary”, “show photo” oder “show media” heißt. Bei Klick auf diesen Link fährt der Tweet nach unten hin auf und zeigt uns mehr Infos zum Link, ein Foto mit Text oder einen Video Player.
Eine super Funktion um ein bisschen einen Überblick über die Twitter Informationsflut zu bekommen.
Jeder der eine Website hat kann sich seine eigenen Twitter Cards basteln: es müssen nur ein paar <meta> Tags in den head Bereich der Seite geschrieben werden. Allerdings ist es dann doch wieder nicht so schön einfach wie es klingt, da nicht jede Seite automatisch Twitter Cards anbieten darf, sondern erst vom Twitter Team freigegeben werden muss.
Grundsätzlich gibt es drei verschiedene Arten von Twitter Cards:
Die Summary Card:
Zeigt wie die Facebook Linkvorschau Titel, Beschreibung und ein Bild an.
Zu sehen beispielsweise auf der Twitterpage der New York Times:
Twitter Card Summary
Die Photo Card:
Zeigt Bild, Titel und Beschreibung an. Der Unterschied zur Summary Card ist, dass das Bild prominenter dargestellt wird.
Wenn ihr eure Instagram Fotos twittert sieht das in etwa so aus:
Twitter Card Photo
Die Player Card:
Anzeige eines Players mit Titel und Beschreibungstext.
Beispielsweise hat Vimeo die Twitter Cards auf ihrer Seite implementiert:
Twitter Card Media
Wenn ihr Twitter Cards für euren Blog wollt ist die Summary Card die richtige Wahl:
[sourcecode language=“html“]<head>

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitter Acount der Seite">
<meta name="twitter:creator" content="@Twitter Acount des Autors">
<meta name="twitter:url" content="Artikel URL">
<meta name="twitter:title" content="Titel">
<meta name="twitter:description" content="Beschreibungstext">
<meta name="twitter:image" content="Artikelbild">

</head>[/sourcecode]
Mehr ist es nicht – wenig Aufwand für großen Nutzen.
Mehr Infos zur Implementierung findet ihr übrigens auf der dazugehörigen Twitter Developer Seite: https://dev.twitter.com/docs/cards
Sobald ihr eure Seite mit dem Code ausgestattet habt, könnt ihr hier das ganze testen und euch eine Vorschau liefern lassen: https://dev.twitter.com/docs/cards/preview
Wie schon gesagt, werden eure Cards auf Twitter nicht angezeigt werden, deswegen müsst ihr hier das Formular ausfüllen und hoffen, dass eure Seite freigeschalten wird –  was ein paar Wochen dauern kann: https://dev.twitter.com/form/participate-twitter-cards

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Sarah

Meine Rolle bei Liechtenecker: - Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: - Mein Herz schlägt für: -
5 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
2. Dezember 2012 um 12:00

Danke für den interessanten Beitrag – werden ich gleich mal ausprobieren lassen! 🙂

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
23. November 2012 um 13:38

…such schon einige zeit danach, danke für den Tipp und die Anleitung!

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Markus Ladstätter
20. November 2012 um 10:40

Hi!
Danke für den Tipp! Hab es bei unserer Seite eingebaut.
Funktioniert wie es soll.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
20. November 2012 um 05:39

Hi Sarah, danke für den Beitrag.
Ich hab‘ letztes Wochenende das erstbeste WordPress-Plugin für Twitter Cards reingeklatscht und gerade eben schon die Freischaltung von Twitter bekommen. Es kann also auch ganz flott gehen! Jetzt muss ich nur noch einen Beitrag schreiben, um das auszuprobieren. 🙂

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
    Markus Ladstätter
    20. November 2012 um 11:38

    Ja, die Freischaltung scheint schon schneller zu funktionieren.
    Gestern am Nachmittag angemeldet und in der Nacht ist es schon aktiviert worden.

Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close