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