Twitter Cards

988 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
988
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
67
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Twitter Cards

  1. 1. Twitter Cards Referent: Lars R. H. Müller BarCamp Kiel 16. August 2013
  2. 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. 3. Wo fing das an? Was ist passiert? Und warum hast du recherchiert?
  4. 4. Folie 4
  5. 5. Folie 5
  6. 6. Folie 6 https://dev.twitter.com/docs/cards
  7. 7. Was sind Twitter Cards? Einmal im Schnelldurchlauf
  8. 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. 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. 10. (Large Image) Summary Card Geeignet für aktuelle Inhalte
  11. 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. 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. 13. Folie 13
  14. 14. Folie 14
  15. 15. Product Card Geeignet für Shops und E-Commerce
  16. 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. 17. Folie 17
  18. 18. Nützliches Tests, Crawler-Kontrolle, weitere Quellen
  19. 19. Folie 19 https://dev.twitter.com/docs/cards/validation/validator
  20. 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. 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. 22. Vielen Dank für eure Aufmerksamkeit Lars R. H. Müller mueller@webworx.de twitter.com/larsicz www.webworx.de

×