<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://notiz.blog/wp-content/plugins/pretty-feeds/pretty-feed-v4.xsl" type="text/xsl" media="screen" ?>


<!--

	Feeds whisper secrets,
	In the RSS Club's embrace,
	Knowledge blooms in grace.

-->

<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:source="http://source.scripting.com/"
xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
>

<channel>
	<title>Twitter Cards &#8211; notizBlog</title>
	<atom:link href="https://notiz.blog/tag/twitter-cards/feed/" rel="self" type="application/rss+xml" />
	<link>https://notiz.blog</link>
	<description>a weblog mainly about the open, portable, interoperable, small, social, synaptic, semantic, structured, distributed, (re-)decentralized, independent, microformatted and federated social web</description>
	<lastBuildDate>Mon, 11 Apr 2022 09:43:00 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://notiz.blog/wp-content/uploads/2019/10/cropped-notizblog-icon-1-32x32.png</url>
	<title>Twitter Cards &#8211; notizBlog</title>
	<link>https://notiz.blog</link>
	<width>32</width>
	<height>32</height>
</image> 
<source:blogroll>https://reader.pfefferle.org/i/?a=opml&amp;get=c_2</source:blogroll>
<creativeCommons:license>https://creativecommons.org/licenses/by-sa/4.0/</creativeCommons:license>
<atom:link rel="hub" href="https://pubsubhubbub.appspot.com"/>
<atom:link rel="hub" href="https://pubsubhubbub.superfeedr.com"/>
<atom:link rel="hub" href="https://switchboard.p3k.io/"/>
<atom:link rel="self" href="https://notiz.blog/tag/twitter-cards/feed/"/>
<atom:link rel="search" type="application/opensearchdescription+xml" title="Search notizBlog" href="https://notiz.blog/wp-api/opensearch/1.1/document" />	<item>
		<title>metaformats</title>
		<link>https://notiz.blog/2022/04/10/metaformats/</link>
					<comments>https://notiz.blog/2022/04/10/metaformats/#comments</comments>
		
		<dc:creator><![CDATA[Matthias Pfefferle]]></dc:creator>
		<pubDate>Sun, 10 Apr 2022 21:58:49 +0000</pubDate>
				<category><![CDATA[Open Web]]></category>
		<category><![CDATA[FediBlog]]></category>
		<category><![CDATA[IndieWeb]]></category>
		<category><![CDATA[metaformats]]></category>
		<category><![CDATA[Microformats]]></category>
		<category><![CDATA[Microformats2]]></category>
		<category><![CDATA[Open Graph Protocol]]></category>
		<category><![CDATA[Twitter Cards]]></category>
		<guid isPermaLink="false">https://notiz.blog/?p=21908</guid>

					<description><![CDATA[Vor ein paar Tagen bin ich über einen Post von Tantek Çelik gestolpert, in dem er metaformats vorstellt. Introducing #metaformats (https://microformats.org/wiki/metaformats), an extension to #microformats2 for parsing invisible data published in HTML meta tags, for backward compatibility with existing vocabularies consumed by multiple testable interoperable implementations. https://tantek.com/2022/091/t1/metaformats Der Vorschlag ist vom 01. April und war [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Vor ein paar Tagen bin ich über <a href="https://tantek.com/2022/091/t1/metaformats" data-type="URL" data-id="https://tantek.com/2022/091/t1/metaformats">einen Post von Tantek Çelik</a> gestolpert, in dem er <strong>metaformats</strong> vorstellt.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>Introducing <a rel="tag" class="hashtag u-tag u-category" href="https://notiz.blog/tag/metaformats/">#metaformats</a> (<a href="https://microformats.org/wiki/metaformats">https://microformats.org/wiki/metaformats</a>), an extension to <a rel="tag" class="hashtag u-tag u-category" href="https://notiz.blog/tag/microformats2/">#microformats2</a> for parsing invisible data published in HTML meta tags, for backward compatibility with existing vocabularies consumed by multiple testable interoperable implementations.</p><cite><a href="https://tantek.com/2022/091/t1/metaformats">https://tantek.com/2022/091/t1/metaformats</a></cite></blockquote>



<p>Der Vorschlag ist vom 01. April und war wohl ursprünglich als April-Scherz gedacht.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong><dfn><a href="https://microformats.org/wiki/metaformats">metaformats</a></dfn></strong> started as an April Fools joke concept to describe how to both publish using microformats class names and openly parse meta tags as a fallback for what should be in-the-body visible data, including backcompat with <a href="https://indieweb.org/OGP">OGP</a>, <a href="https://indieweb.org/Twitter_Cards">Twitter Cards</a>, and meta author, description, and anything else real sites (like search engines) appear to consume.</p><cite><a href="https://indieweb.org/metaformats">https://indieweb.org/metaformats</a></cite></blockquote>



<p>Eine Art Fallback-Spezifikation für <a href="https://microformats.io/#parsers" data-type="URL" data-id="https://microformats.io/#parsers">Microformats-Parser</a> finde ich in der Tat etwas sperrig, aber ich mag die Idee eines Fallbacks an sich.</p>



<p><a href="https://notiz.blog/2006/11/20/microformats/" data-type="URL" data-id="https://notiz.blog/2006/11/20/microformats/">Microformats</a> sind ein <a href="https://indieweb.org/Category:building-blocks" data-type="URL" data-id="https://indieweb.org/Category:building-blocks">Building-Block</a> des IndieWebs und werden unter anderem auch von Webmentions genutzt. Es sind Markup-Formate zur semantischen Auszeichnung von HTML. In der <a href="https://notiz.blog/2012/07/03/microformats-the-next-generation/">Version 2</a>, werden Microformats aber fast ausschließlich von der IndieWeb Community benutzt und sind darüber hinaus wenig bekannt.</p>



<p>Aber gerade für WordPress ist es extrem schwer, bestehende Themes nachträglich mit Microformats zu &#8222;veredeln&#8220;. Wir haben es mit <a href="https://wordpress.org/plugins/wp-uf2/" data-type="URL" data-id="https://wordpress.org/plugins/wp-uf2/">diversen</a> <a href="https://wordpress.org/plugins/mf2-feed/" data-type="URL" data-id="https://wordpress.org/plugins/mf2-feed/">Plugins</a> versucht, mit nur mäßigem Erfolg. Andere Formate wie das <a href="https://ogp.me/" data-type="URL" data-id="https://ogp.me/">Open Graph Protocol</a> oder <a href="https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=de">Schema.org (JSON-LD)</a> sind da wesentlich einfacher zu integrieren, da sie nicht bestehendes HTML erweitern und durch den Support der großen Suchmaschinen und sozialen Netzwerke, auch viel attraktiver sind.</p>



<p>Ich bin <a href="https://notiz.blog/2013/08/07/embedded-json-ld/" data-type="URL" data-id="https://notiz.blog/2013/08/07/embedded-json-ld/">kein großer Fan von embedded JSON-LD</a>, aber wenn es nicht anders funktioniert und seine Reichweite hat, warum sollte man es dann ignorieren?</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img fetchpriority="high" decoding="async" width="593" height="421" sizes="(max-width: 593px) 100vw, 593px" src="https://notiz.blog/wp-content/uploads/2022/04/bridge-all-the-things.jpg" alt="" class="wp-image-21911"/></figure></div>



<p>Das IndieWeb hat eigentlich eine großartige Philosophie um mit solchen &#8222;Problemen&#8220; umzugehen.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p><strong><dfn>bridge all the things</dfn></strong> is a nascent IndieWeb philosophy that prioritizes interoperability over ideology, NIH, historical disagreements, etc. ecosystems are valuable and powerful, and one easy way to extend an ecosystem is to bridge it with other existing ecosystems.</p><cite><a href="https://indieweb.org/bridge_all_the_things">https://indieweb.org/bridge_all_the_things</a></cite></blockquote>



<p>Für das <a href="https://wordpress.org/plugins/webmention/">Webmention Plugin</a> haben <a href="https://david.shanske.com/" data-type="URL" data-id="https://david.shanske.com/">David</a> und ich schon vor Monaten einen ganz ähnlichen Ansatz gewählt. Neben Microformats unterstützen wir auch <a href="https://notiz.blog/tag/open-graph-protocol/" data-type="URL" data-id="https://notiz.blog/tag/open-graph-protocol/">OGP</a>, <a href="https://notiz.blog/2012/06/22/twitter-cards/" data-type="URL" data-id="https://notiz.blog/2012/06/22/twitter-cards/">Twitter-Cards</a>, <a href="https://notiz.blog/2012/09/21/schema-org-what-ive-learned-so-far/" data-type="URL" data-id="https://notiz.blog/2012/09/21/schema-org-what-ive-learned-so-far/">Schema.org</a>, <a href="https://de.wikipedia.org/wiki/Meta-Element">Meta-Header</a> und die WordPress API, um eventuell fehlende Microformats v2 zu kompensieren.</p>



<p>Selbst wenn &#8222;metaformats&#8220; nur als April Scherz gedacht waren, hat die Idee Potential um speziell Webmentions voran zu treiben, da sie eine direkte Abhängikeit zu einer speziellen Websemantik verhindert.</p>



<p><strong>Bridge all the things!</strong></p>
<p>RSS readers like you are the unsung heroes of the internet. Keep up the good work!</p>]]></content:encoded>
					
					<wfw:commentRss>https://notiz.blog/2022/04/10/metaformats/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>TwitterCards minus TwitterCards</title>
		<link>https://notiz.blog/2013/05/03/twittercards-minus-twittercards/</link>
					<comments>https://notiz.blog/2013/05/03/twittercards-minus-twittercards/#comments</comments>
		
		<dc:creator><![CDATA[Matthias Pfefferle]]></dc:creator>
		<pubDate>Fri, 03 May 2013 06:21:14 +0000</pubDate>
				<category><![CDATA[Open Web]]></category>
		<category><![CDATA[FediBlog]]></category>
		<category><![CDATA[Metadaten]]></category>
		<category><![CDATA[Open Graph Protocol]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[Twitter Cards]]></category>
		<guid isPermaLink="false">http://notizblog.org/?p=5105</guid>

					<description><![CDATA[Ich war nie ein großer Fan der Twitter Cards, was aber nicht wirklich schlimm ist, da Twitter das Open Graph Protocol als vollwertiges Fallback unterstützt&#8230; unterstützt hat&#8230; Seit ein paar Wochen scheint den feinen Herren das Open Graph Protocol aber nicht mehr auszureichen und meinen Links fehlt der schöne, kleine Teaser 🙁 Zum Glück reicht [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image aligncenter size-full wp-image-5107"><a href="http://garfieldminusgarfield.net/post/26271055"><img decoding="async" width="500" height="148" sizes="(max-width: 500px) 100vw, 500px" src="https://notiz.blog/wp-content/uploads/2013/04/garfield-minus-garfield.png" alt="Garfield minus Garfield comic" class="wp-image-5107" srcset="https://notiz.blog/wp-content/uploads/2013/04/garfield-minus-garfield.png 500w, https://notiz.blog/wp-content/uploads/2013/04/garfield-minus-garfield-480x142.png 480w" /></a>
	<figcaption> Image from Garfield minus Garfield</figcaption>
</figure>



<p>Ich war nie ein <a href="https://notiz.blog/2012/06/22/twitter-cards/">großer Fan der <em>Twitter Cards</em></a>, was aber nicht wirklich schlimm ist, da Twitter das <em>Open Graph Protocol</em> als vollwertiges Fallback unterstützt&#8230; unterstützt hat&#8230;</p>



<p>Seit ein paar Wochen scheint den feinen Herren das <em>Open Graph Protocol</em> aber nicht mehr auszureichen und meinen Links fehlt der schöne, kleine Teaser 🙁</p>



<p>Zum Glück reicht aber ein Meta-Tag um das ganze wieder zum laufen zu bekommen. Twitter unterstützt verschiedene Arten von Previews, welche über <code>&lt;meta name="twitter:card" content="summary" /></code> festgelegt werden. Neben <code>summary</code> (für Texte) gibt es auch noch <code>photo</code> für Bilder und <code>player</code> für Audio/Video (die komplette Liste findet ihr <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">hier</a>). Ich würde euch außerdem noch den <code>twitter:creator</code> empfehlen, mit dem ihr auf den Twitter-Account des Autors hinweisen könnt. Für meinen Blog sieht das wie folgt aus:</p>


<pre class="wp-block-code"><span><code class="hljs language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"twitter:creator"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"@pfefferle"</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"twitter:card"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"summary"</span> /&gt;</span></code></span></pre>


<p>Wenn ihr sicher gehen wollt ob ihr alles richtig gemacht habt, könnt ihr eure Seite mit dem <em><a href="https://cards-dev.twitter.com/validator">Twitter Card Validator</a></em> testen.</p>



<p>Den WordPresslern unter euch kann ich außerdem folgende Plugins empfehlen:</p>



<ul class="wp-block-list">
	<li><a href="http://wordpress.org/extend/plugins/opengraph/">Open Graph</a> &#8211; Keine Settings, kein Know-How, alles vollkommen Idiotensicher.</li>
	<li><a href="https://github.com/pfefferle/twitter-creator">twitter:creator</a> &#8211; Setzt zusätzlich die angesprochenen <code>twitter:creator</code> und <code>twitter:card</code>.</li>
</ul>



<p>&#8230;also viel Spaß beim <em>Twitter Cards</em> Boykott ;).</p>
<p>RSS readers like you are the secret sauce of the internet. Keep rocking and staying informed!</p>]]></content:encoded>
					
					<wfw:commentRss>https://notiz.blog/2013/05/03/twittercards-minus-twittercards/feed/</wfw:commentRss>
			<slash:comments>4</slash:comments>
		
		
			</item>
	</channel>
</rss>
