Embed Size (px)
Citation preview
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
pemediapemediapemediaquintly
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 Social Networks entsprechend
dargestellt werden.
So stellt man sich das vor:
Was passiert eigentlich,… wenn ich einen Link auf Facebook teile?
<html><head>
<metaproperty="og:title"content="DeinmegaTitel!"/><metaproperty="og:image"content="http://tld.de/dein-bild.jpg"/><metaproperty="og:description"content="TeasertextderSeite"/><metaproperty="og:url"content="http://tld.de/deine-seite.html"/>...
</head>
<body>HierkommtderContent
</body>
</html>
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 on Facebook to allow any web page to have the same functionality
as any other object on Facebook."
Zwei Videos? Nö!
og:typewebsite
og:typevideo
<metaproperty="og:url"content="https://www.tape.tv/run-dmc/videos/its-like-that"><metaproperty="og:image"content="https://tapetv.imgix.net/bd9c/video_image/[…].jpg"><metaproperty="og:title"content="It'sLikeThatvonRUN-DMCvs.JasonNevins[…]"><metaproperty="og:site_name"content="tape.tv"><metaproperty="og:description"content="SchaudirIt'sLikeThatvonRUN-DMC[…]">
<metaproperty="og:type"content="video.other"><metaproperty="og:video:url"content="https://www.tape.tv/tapePlayer.swf?[…]"><metaproperty="og:video:secure_url"content="https://www.tape.tv/tapePlayer.swf?[…]"><metaproperty="og:video:width"content="1920"><metaproperty="og:video:height"content="1080"><metaproperty="og:video:type"content="application/x-shockwave-flash">
Multimedia Inhalte direkt im Newsfeed
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.
Und was machen Blogs? og:type article
<metaproperty="og:title"content="DerTiteldeinesArtikels"><metaproperty="og:description"content="DeinArtikelTeasertext…"><metaproperty="og:site_name"content="DeinBlogName"><metaproperty="og:url"content="http://tld.de/deine-seite.html"><metaproperty="og:image"content="http://tld.de/dein-bild.jpg">
<metaproperty="og:type"content="article"><metaproperty="article:publisher"content="https://www.facebook.com/pagename"/><metaproperty="article:published_time"content="2016-02-17T05:59:00+01:00"/><metaproperty="article:modified_time"content="2016-02-16T19:08:47+01:00"/><metaproperty="article:section"content="Kategorie"/><metaproperty="article:tag"content="Schlagwort"/>
Und was machen Shops? og:type product
<metaproperty="og:title"content="DerNamedeinesProduktes"><metaproperty="og:description"content="DeinProduktTeasertext…"><metaproperty="og:site_name"content="DeinShopName"><metaproperty="og:url"content="http://tld.de/dein-produkt.html"><metaproperty="og:image"content="http://tld.de/dein-bild.jpg">
<metaproperty="og:type"content="product"><metaproperty="product:brand"content="Herstellermarke"/><metaproperty="product:color"content="Black"/><metaproperty="product:ean"content="123456789876554"/><metaproperty="product:availability"content="instock/oos/pending"/><metaproperty="product:price:amount"content="99.99"/><metaproperty="product:price:currency"content="EUR"/><metaproperty="product:shipping_cost:amount"content="3.99"/><metaproperty="product:shipping_cost:currency"content="EUR"/>
...undviel,vielmehr:https://developers.facebook.com/docs/reference/opengraph/object-type/product/
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 Insights und bietet tiefere Einblicke in die demographische Struktur der
Seitenbesucher.
facebook.com/inisghts (ganz nach unten scrollen)
One tag to rule them all:
<metaproperty="fb:admins"content="DEINE-FACEBOOK-ID">
Don't forget about Twitter!
twittercards: <meta name="twitter:xxx" />
<metaname="twitter:card"content="summary"><metaname="twitter:site"content="@twitter_name"><metaname="twitter:title"content="DeinmegaTitel!"><metaname="twitter:description"content="TeasertextderSeite"><metaname="twitter:creator"content="@autor_handle"><metaname="twitter:image"content="http://tld.de/dein-bild.jpg">
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
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
Be a Nerd!
Mit ein technischem Wissen und Neugier lässt sich einfach mehr aus dem eigenen Content
in der freien Wildbahn herausholen.
PEMEDIA GMBH
DEVS & DESIGNERS WANTED!
