{"id":4301,"date":"2012-06-22T15:49:55","date_gmt":"2012-06-22T13:49:55","guid":{"rendered":"http:\/\/notizblog.org\/?p=4301"},"modified":"2024-04-03T12:46:28","modified_gmt":"2024-04-03T10:46:28","slug":"twitter-cards","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2012\/06\/22\/twitter-cards\/","title":{"rendered":"Twitter Cards"},"content":{"rendered":"\n

Anfang der Woche hat Martin Weigert schon \u00fcber Twitters Pl\u00e4ne<\/a>, die eigenen Tweets mit noch mehr Medieninhalten zu erweitern, geschrieben:<\/p>\n\n\n\n

Immer mehr Partnerseiten k\u00f6nnen zus\u00e4tzliche multimediale Inhalte im Kontext von Tweets darstellen. Ganz eindeutig ist bisher nicht, wohin diese Reise f\u00fcr Twitter geht.<\/p><\/blockquote>\n\n\n\n

Aber ich habe mir nichts weiter dabei gedacht… Immerhin macht das Twitter ja schon seit einer ganzen Weile und ich meine mich zu erinnern, irgendwo gelesen zu haben, dass sie dazu oEmbed<\/a> einsetzen… Also alles in bester „OpenWeb“-Ordnung \ud83d\ude42<\/p>\n\n\n\n

Aber, Geek der ich bin, hab ich mir gestern zuf\u00e4llig einen Quelltext angeschaut in dem ich auf folgendes entdeckt habe:<\/p>\n\n\n

<meta<\/span> name<\/span>=\"twitter:card\"<\/span> content<\/span>=\"summary\"<\/span>><\/span>\n<meta<\/span> name<\/span>=\"twitter:url\"<\/span> content<\/span>=\"...\"<\/span>><\/span>\n<meta<\/span> name<\/span>=\"twitter:title\"<\/span> content<\/span>=\"...\"<\/span>><\/span><\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
\"Example<\/figure><\/div>\n\n\n\n
…und ich wollte mich gerade dar\u00fcber aufregen, warum Twitter dazu eine eigene Meta-Sprache erfindet, da bin ich in der Doku<\/a> ironischerweise auf folgendes gesto\u00dfen:<\/p>\n\n\n\n
You’ll notice that Twitter card tags look similar to OpenGraph tags, and that’s because they are based on the same conventions as the Open Graph protocol. If you’re already using OpenGraph to describe data on your page, it\u2019s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience.<\/p><\/blockquote>\n\n\n\n
„Ok“, dachte ich… vielleicht reichen die Open Graph<\/em> Properties ja nicht aus um alle Informationen, die Twitter braucht, abzubilden. Also hab ich mir mal die M\u00fche gemacht sie zu vergleichen:<\/p>\n\n\n\n
Twitter Cards<\/th>Open Graph Protocol<\/th><\/tr><\/thead>
twitter:card<\/code><\/td>og:type<\/code><\/td><\/tr>
twitter:site<\/code><\/td>og:site_name<\/code><\/td><\/tr>
twitter:url<\/code><\/td>og:url<\/code><\/td><\/tr>
twitter:description<\/code><\/td>og:description<\/code><\/td><\/tr>
twitter:title<\/code><\/td>og:title<\/code><\/td><\/tr>
twitter:image<\/code><\/td>og:image<\/code><\/td><\/tr>
twitter:image:width<\/code><\/td>og:image:width<\/code><\/td><\/tr>
twitter:image:height<\/code><\/td>og:image:height<\/code><\/td><\/tr>
twitter:player<\/code> oder twitter:player:stream<\/code><\/td>og:video<\/code> oder og:audio<\/code><\/td><\/tr>
twitter:player:width<\/code><\/td>og:video:width<\/code><\/td><\/tr>
twitter:player:height<\/code><\/td>og:video:height<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Es l\u00e4sst sich also prinzipiell alles mit dem Open Graph Protocol<\/em> abbilden, es fehlen lediglich die Felder twitter:site:id<\/code> und twitter:creator:id<\/code>. Aber wegen diesen zwei Feldern muss man doch nicht das ganze Format „kopieren“. Es reicht doch ein kleiner Absatz, wie man den Open Graph<\/em> mit den propriet\u00e4ren Werten erweitert… So wie das auch Facebook<\/a> praktiziert:<\/p>\n\n\n
<html<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/1999\/xhtml\"<\/span>\n      xmlns:og<\/span>=\"http:\/\/ogp.me\/ns#\"<\/span>\n      xmlns:fb<\/span>=\"https:\/\/www.facebook.com\/2008\/fbml\"<\/span>><\/span>\n      xmlns:twitter=\"https:\/\/dev.twitter.com\/docs\/cards\">\n  <head<\/span>><\/span>\n    <title<\/span>><\/span>The Rock (1996)<\/title<\/span>><\/span>\n    <meta<\/span> property<\/span>=\"og:title\"<\/span> content<\/span>=\"The Rock\"<\/span>\/><\/span>\n    <meta<\/span> property<\/span>=\"fb:admins\"<\/span> content<\/span>=\"USER_ID\"<\/span>\/><\/span>\n    <meta<\/span> property<\/span>=\"twitter:site:id\"<\/span> content<\/span>=\"@USER_ID\"<\/span>\/><\/span>\n    ...\n  <\/head<\/span>><\/span>\n  ...\n<\/html<\/span>><\/span>\n<\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Hoffentlich \u00fcberlegt sich das Twitter noch einmal… Wenn nicht, wird dank dieser (und folgender) Redundanzen der <head \/><\/code> einer Webseite in ein paar Jahren mehr Informationen beinhalten wie der <body \/><\/code>.<\/p>\n\n\n\n
…welch ein Over-<head><\/code> \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
Anfang der Woche hat Martin Weigert schon \u00fcber Twitters Pl\u00e4ne, die eigenen Tweets mit noch mehr Medieninhalten zu erweitern, geschrieben: Immer mehr Partnerseiten k\u00f6nnen zus\u00e4tzliche multimediale Inhalte im Kontext von Tweets darstellen. Ganz eindeutig ist bisher nicht, wohin diese Reise f\u00fcr Twitter geht. Aber ich habe mir nichts weiter dabei gedacht… Immerhin macht das Twitter […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"categories":[2],"tags":[870,480,710,164,868,285,874],"class_list":{"0":"post-4301","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-dublin-core","8":"tag-facebook","9":"tag-metadaten","10":"tag-microformats","11":"tag-opengraphprotocol","12":"tag-twitter","13":"tag-websemantics","14":"h-entry","15":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/comments?post=4301"}],"version-history":[{"count":3,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4301\/revisions"}],"predecessor-version":[{"id":25155,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/4301\/revisions\/25155"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=4301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=4301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=4301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
…und nach kurzem googlen bin ich auf die Twitter Cards<\/strong><\/a> gesto\u00dfen, Twitters eigenes, kleines Open Graph Protocol<\/strong><\/a>. Mit den Twitter Cards<\/strong> bekommen Seitenbetreiber ein Set an Meta-Tags an die Hand, und Twitter kann diese Informationen nutzen um die tweets mit den oben erw\u00e4hnten Mediendaten anzureichern.<\/p>\n\n\n\n