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