NERD TALK:
CONTENT LIEBE?!
EINE ODE AN DIE OPEN-GRAPH-META-TAGS
Jan Peiniger
Digital Creative / Blogger / Sport Addict
Digital Native
Optimist
Blogger
pushing-limits.de
Sport Addict
Tech Nerd
pemediapemedia
pemediaquintly
quintly
pemedia GmbH
Agentur für digitale Technologien
Gründung: 2008
Teamstärke: 18
Technologie ist unser Antrieb!
TALK DIRTY
TO ME!
NERDY
Meta? … Tags? … WTF?
Wofür sollen die nochmal gut sein?
Oberflächlich betrachtet
Richtig eingesetzte
og (Open Graph) meta tags
sorgen dafür, dass Links zu
eurem Content in den
So...
So stellt man sich das vor:
Was passiert eigentlich,…
wenn ich einen Link auf Facebook teile?
<html>	
<head>	
<meta	property="og:title"	content="Dein	mega	Titel!"	/>	
<meta	property="og:image"	content="http://tld.de/...
Soweit alles easy!
Gut aussehen wollen wir ja alle.
MORE THAN
MEETS THE EYE!
The Open Graph Protocol
ogp.me
"The Open Graph protocol enables any web page to become a
rich object in a social graph. For instance, this is used...
Zwei Videos? Nö!
og:type	
website	
og:type	
video
<meta	property="og:url"	content="https://www.tape.tv/run-dmc/videos/its-like-that">	
<meta	property="og:image"	content="ht...
Multimedia Inhalte direkt im Newsfeed
Videos, Shops, Viewer… auf diese Weise sind multimediale
Inhalte direkt im Newsfeed möglich. Auf dem Desktop leider
nur un...
Und was machen Blogs?
og:type article
<meta	property="og:title"	content="Der	Titel	deines	Artikels">	
<meta	property="og:description"	content="Dein	Artikel	Teas...
Und was machen Shops?
og:type product
<meta	property="og:title"	content="Der	Name	deines	Produktes">	
<meta	property="og:description"	content="Dein	Produkt	Teas...
Schonmal was von
Open Graph Stories gehört?
Wie man mit "Webseiten" interagieren kann.
Apps erlauben Interaktionen
Ich lese, laufe, höre, kaufe, schaue, spiele, etc
über og:title auf og:site_name
Noch ein letzter <meta>-tag
Zwar kein og: aber trotzdem enorm nützlich. Er ermöglicht
den Zugriff auf die Facebook Domain ...
One tag to rule them all:
<meta	property="fb:admins"	content="DEINE-FACEBOOK-ID">
Don't forget
about Twitter!
twittercards:
<meta name="twitter:xxx" />
<meta	name="twitter:card"	content="summary">	
<meta	name="twitter:site"	content="@twitter_name">	
<meta	name="twitter:titl...
Auch Twitter kann "schön"
Genau wie über Open-Graph-Objekte gibt es Twitter Cards
in verschiedensten Ausführungen: Summary...
Hilfreiche Tools:
Facebook URL Debugger:
https://developers.facebook.com/tools/debug/
Facebook API Explorer:
https://devel...
Be a Nerd!
Mit ein technischem Wissen und Neugier lässt
sich einfach mehr aus dem eigenen Content
in der freien Wildbahn h...
PEMEDIA GMBH
DEVS & DESIGNERS
WANTED!
Content-Liebe auf den ersten Blick? Nur mit den richtigen OPENGRAPH META TAGS! #AFBMC
Nächste SlideShare
Wird geladen in …5
×

Content-Liebe auf den ersten Blick? Nur mit den richtigen OPENGRAPH META TAGS! #AFBMC

28.407 Aufrufe

Veröffentlicht am

Vortrag von Jan Peiniger auf der AllFacebook Marketing Conference 2016 in München.

Mehr Informationen:
http://conference.allfacebook.de/session/opengraph-meta-tags/

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
28.407
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
67
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Content-Liebe auf den ersten Blick? Nur mit den richtigen OPENGRAPH META TAGS! #AFBMC

  1. 1. NERD TALK: CONTENT LIEBE?! EINE ODE AN DIE OPEN-GRAPH-META-TAGS
  2. 2. Jan Peiniger Digital Creative / Blogger / Sport Addict
  3. 3. Digital Native Optimist Blogger pushing-limits.de Sport Addict Tech Nerd
  4. 4. pemediapemedia pemediaquintly quintly
  5. 5. pemedia GmbH Agentur für digitale Technologien Gründung: 2008 Teamstärke: 18
  6. 6. Technologie ist unser Antrieb!
  7. 7. TALK DIRTY TO ME! NERDY
  8. 8. Meta? … Tags? … WTF? Wofür sollen die nochmal gut sein?
  9. 9. Oberflächlich betrachtet Richtig eingesetzte og (Open Graph) meta tags sorgen dafür, dass Links zu eurem Content in den Social Networks entsprechend dargestellt werden.
  10. 10. So stellt man sich das vor:
  11. 11. Was passiert eigentlich,… wenn ich einen Link auf Facebook teile?
  12. 12. <html> <head> <meta property="og:title" content="Dein mega Titel!" /> <meta property="og:image" content="http://tld.de/dein-bild.jpg" /> <meta property="og:description" content="Teasertext der Seite" /> <meta property="og:url" content="http://tld.de/deine-seite.html" /> ... </head> <body> Hier kommt der Content </body> </html>
  13. 13. Soweit alles easy! Gut aussehen wollen wir ja alle.
  14. 14. MORE THAN MEETS THE EYE! The Open Graph Protocol
  15. 15. ogp.me "The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook."
  16. 16. Zwei Videos? Nö! og:type website og:type video
  17. 17. <meta property="og:url" content="https://www.tape.tv/run-dmc/videos/its-like-that"> <meta property="og:image" content="https://tapetv.imgix.net/bd9c/video_image/[…].jpg"> <meta property="og:title" content="It's Like That von RUN-DMC vs. Jason Nevins […]"> <meta property="og:site_name" content="tape.tv"> <meta property="og:description" content="Schau dir It's Like That von RUN-DMC […]"> <meta property="og:type" content="video.other"> <meta property="og:video:url" content="https://www.tape.tv/tapePlayer.swf?[…]"> <meta property="og:video:secure_url" content="https://www.tape.tv/tapePlayer.swf?[…]"> <meta property="og:video:width" content="1920"> <meta property="og:video:height" content="1080"> <meta property="og:video:type" content="application/x-shockwave-flash">
  18. 18. Multimedia Inhalte direkt im Newsfeed
  19. 19. Videos, Shops, Viewer… auf diese Weise sind multimediale Inhalte direkt im Newsfeed möglich. Auf dem Desktop leider nur unter der Nutzung von Flash. In den Smartphone-Apps besteht die Möglichkeit in native Apps zu linken oder auf spezielle HTML5 Landingpages zu verweisen.
  20. 20. Und was machen Blogs? og:type article
  21. 21. <meta property="og:title" content="Der Titel deines Artikels"> <meta property="og:description" content="Dein Artikel Teasertext…"> <meta property="og:site_name" content="Dein Blog Name"> <meta property="og:url" content="http://tld.de/deine-seite.html"> <meta property="og:image" content="http://tld.de/dein-bild.jpg"> <meta property="og:type" content="article"> <meta property="article:publisher" content="https://www.facebook.com/pagename" /> <meta property="article:published_time" content="2016-02-17T05:59:00+01:00" /> <meta property="article:modified_time" content="2016-02-16T19:08:47+01:00" /> <meta property="article:section" content="Kategorie" /> <meta property="article:tag" content="Schlagwort" />
  22. 22. Und was machen Shops? og:type product
  23. 23. <meta property="og:title" content="Der Name deines Produktes"> <meta property="og:description" content="Dein Produkt Teasertext…"> <meta property="og:site_name" content="Dein Shop Name"> <meta property="og:url" content="http://tld.de/dein-produkt.html"> <meta property="og:image" content="http://tld.de/dein-bild.jpg"> <meta property="og:type" content="product"> <meta property="product:brand" content="Herstellermarke" /> <meta property="product:color" content="Black" /> <meta property="product:ean" content="123456789876554" /> <meta property="product:availability" content="instock/oos/pending" /> <meta property="product:price:amount" content="99.99" /> <meta property="product:price:currency" content="EUR" /> <meta property="product:shipping_cost:amount" content="3.99" /> <meta property="product:shipping_cost:currency" content="EUR" /> ... und viel, viel mehr: https://developers.facebook.com/docs/reference/opengraph/object-type/product/
  24. 24. Schonmal was von Open Graph Stories gehört? Wie man mit "Webseiten" interagieren kann.
  25. 25. Apps erlauben Interaktionen Ich lese, laufe, höre, kaufe, schaue, spiele, etc über og:title auf og:site_name
  26. 26. Noch ein letzter <meta>-tag Zwar kein og: aber trotzdem enorm nützlich. Er ermöglicht den Zugriff auf die Facebook Domain Insights und bietet tiefere Einblicke in die demographische Struktur der Seitenbesucher. facebook.com/inisghts (ganz nach unten scrollen)
  27. 27. One tag to rule them all: <meta property="fb:admins" content="DEINE-FACEBOOK-ID">
  28. 28. Don't forget about Twitter! twittercards: <meta name="twitter:xxx" />
  29. 29. <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@twitter_name"> <meta name="twitter:title" content="Dein mega Titel!"> <meta name="twitter:description" content="Teasertext der Seite"> <meta name="twitter:creator" content="@autor_handle"> <meta name="twitter:image" content="http://tld.de/dein-bild.jpg">
  30. 30. Auch Twitter kann "schön" Genau wie über Open-Graph-Objekte gibt es Twitter Cards in verschiedensten Ausführungen: Summary, Image, Gallery, App, Product, etc… dev.twitter.com/cards/overview
  31. 31. Hilfreiche Tools: Facebook URL Debugger: https://developers.facebook.com/tools/debug/ Facebook API Explorer: https://developers.facebook.com/tools/explorer/ Twitter Card Validator: https://cards-dev.twitter.com/validator
  32. 32. Be a Nerd! Mit ein technischem Wissen und Neugier lässt sich einfach mehr aus dem eigenen Content in der freien Wildbahn herausholen.
  33. 33. PEMEDIA GMBH DEVS & DESIGNERS WANTED!

×