Vortrag zum Einsatz Twitter-spezfischer Metadaten auf Websites, sogenannten Twitter Cards, zur Erzeugung von erweiterten (expanded) Tweets. Er wurde als Session von Lars R. H. Müller auf dem BarCamp am 16. August 2013 in Kiel gehalten.

1. Twitter Cards
Referent: Lars R. H. Müller
BarCamp Kiel
16. August 2013

2. Folie 2
Vorstellung
Lars R. H. Müller

Gründer und Geschäftsführer

33 Jahre, verheiratet, zwei Töchter

Studienabbrecher, Autodidakt

Web- und Interfacedesigner

Fachgruppenleiter Online-Marketing DiWiSH

Blogger: Newsletter und Weizenbier

3. Wo fing das an?
Was ist passiert?
Und warum hast du recherchiert?

4. Folie 4

5. Folie 5

6. Folie 6 https://dev.twitter.com/docs/cards

7. Was sind Twitter Cards?
Einmal im Schnelldurchlauf

8. Folie 8
Was sind Twitter Cards?

"Anhänge" für Tweets

Einfache Metadaten

Ergänzung des Open Graph

Eigener URL Crawler

Verbindung zu anderen Apps

Mehr Aufmerksamkeit

Noch nicht weit verbreitet

9. Folie 9
Twitter Card Typen

Summary Card summary

Large Image Summary Card summary_large_image

Photo Card photo

Gallery Card gallery

App Card app

Player Card player

Product Card product

10. (Large Image) Summary Card
Geeignet für aktuelle Inhalte

11. Folie 11
Basics
1. Festlegen des Typen (Default = summary)
<meta name="twitter:card" content="summary">
2. Twitter-Account der Website / des Herausgebers
<meta name="twitter:site" content="@sitepackage">
3. Twitter-Account des Autors
<meta name="twitter:creator" content="@larsicz">

12. Folie 12
Details vs. Open Graph
1. Titel der Seite (max. 70 Zeichen)
<meta name="twitter:title" content="">
<meta property="og:title" content="">
2. Kurzbeschreibung des Inhalts (max. 200 Zeichen)
<meta name="twitter:description" content="">
<meta property="og:description" content="">
3. URL eines repräsentativen Bildes (max. 120 px / 1 MB)
<meta name="twitter:image" content="">
<meta property="og:image" content="">

13. Folie 13

14. Folie 14

15. Product Card
Geeignet für Shops und E-Commerce

16. Folie 16
Beispiel Product Card
1. Festlegen des Typen
<meta name="twitter:card" content="product">
2. Übergabe des ersten Wertepaares (z.B. Preis)
<meta name="twitter:data1" content="0,00 €">
<meta name="twitter:label1" content="Preis">
3. Übergabe des zweiten Wertepaares (z.B. Farbe)
<meta name="twitter:data2" content="türkis">
<meta name="twitter:label2" content="Farbe">

17. Folie 17

18. Nützliches
Tests, Crawler-Kontrolle, weitere Quellen

19. Folie 19 https://dev.twitter.com/docs/cards/validation/validator

20. Folie 20
Crawler
Der Twitterbot beachtet die robots.txt
Beispiel
User-agent: Twitterbot
Disallow:
User-agent: *
Disallow: /
Sperrt alle Bots außer Twitter aus

21. Folie 21
Weitere Quellen
Open Graph Protocol
http://ogp.me/
http://developers.facebook.com/docs/opengraph/
schema.org
http://schema.org/
Rich Pins
http://developers.pinterest.com/rich_pins/

22. Vielen Dank
für eure Aufmerksamkeit
Lars R. H. Müller mueller@webworx.de
twitter.com/larsicz www.webworx.de