<?xml version="1.0" encoding="UTF-8"?><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/"
	>

<channel>
	<title>Twitter Cards &#8211; Ein Ostwestfale im Rheinland</title>
	<atom:link href="https://www.ostwestf4le.de/tag/twitter-cards/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ostwestf4le.de</link>
	<description>Das Leben jenseits des Rheins in mehr oder weniger weisen Worten.</description>
	<lastBuildDate>Mon, 11 Jan 2016 11:06:21 +0000</lastBuildDate>
	<language>de</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>

<image>
	<url>https://www.ostwestf4le.de/wp-content/uploads/cropped-Ortsschild-Amelunxen-Ostwestfalen-Beverungen-Nordrhein-Westfalen-Westfalen-1-32x32.jpg</url>
	<title>Twitter Cards &#8211; Ein Ostwestfale im Rheinland</title>
	<link>https://www.ostwestf4le.de</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">14917959</site>	<item>
		<title>Tutorial: Twitter Cards für das eigene Blog verwenden</title>
		<link>https://www.ostwestf4le.de/2016/01/10/tutorial-twitter-cards-fuer-blog-verwenden/</link>
					<comments>https://www.ostwestf4le.de/2016/01/10/tutorial-twitter-cards-fuer-blog-verwenden/#comments</comments>
		
		<dc:creator><![CDATA[Marc]]></dc:creator>
		<pubDate>Sun, 10 Jan 2016 07:00:24 +0000</pubDate>
				<category><![CDATA[Social Media]]></category>
		<category><![CDATA[Weblog]]></category>
		<category><![CDATA[Anleitung]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[Twitter Cards]]></category>
		<guid isPermaLink="false">http://348974.webhosting71.1blu.de/?p=29640</guid>

					<description><![CDATA[Schon vor einiger Zeit sind mir die sogenannten Twitter Cards in meinem Lieblings-Netzwerk Twitter aufgefallen.Und weil diese Karten so cool und ansprechend ausgesehen haben, war schnell klar, dass ich auch so etwas haben möchte, um meine Links vom Blog ansprechend &#8230; <a href="https://www.ostwestf4le.de/2016/01/10/tutorial-twitter-cards-fuer-blog-verwenden/">Weiterlesen <span class="meta-nav">&#8594;</span></a><div class='yarpp yarpp-related yarpp-related-rss yarpp-template-list'>
<!-- YARPP List -->
<h3>Auch interessant:</h3><ol>
<li><a href="https://www.ostwestf4le.de/2015/01/18/tutorial-nutzer-auf-twitter-blockieren-melden/" rel="bookmark" title="Tutorial: Einen Nutzer auf Twitter blockieren und melden">Tutorial: Einen Nutzer auf Twitter blockieren und melden</a> <small>Was genug ist, ist genug! Seit einigen Tagen nervt mich...</small></li>
<li><a href="https://www.ostwestf4le.de/2012/04/05/tutorial-wie-kann-ich-mein-wordpress-com-blog-loschen-oder-auf-inaktiv-setzen/" rel="bookmark" title="Tutorial: Wie kann ich mein WordPress.com &#8211; Blog löschen oder auf inaktiv setzen?">Tutorial: Wie kann ich mein WordPress.com &#8211; Blog löschen oder auf inaktiv setzen?</a> <small>Aus meiner Blogger-Anfangszeit habe ich noch ein Blog auf der...</small></li>
<li><a href="https://www.ostwestf4le.de/2011/11/17/tutorial-inaktiven-twitter-account-ubernehmen/" rel="bookmark" title="Tutorial: inaktiven Twitter-Account übernehmen">Tutorial: inaktiven Twitter-Account übernehmen</a> <small>Seitdem ich Twitter nutze, ist @Ostwestf4le bereits mein dritter Account-Name....</small></li>
</ol>
</div>
]]></description>
										<content:encoded><![CDATA[<p>Schon vor einiger Zeit sind mir die sogenannten Twitter Cards in meinem Lieblings-Netzwerk Twitter aufgefallen.<span id="more-29640"></span>Und weil diese Karten so cool und ansprechend ausgesehen haben, war schnell klar, dass ich auch so etwas haben möchte, um meine Links vom Blog ansprechend aufzuhübschen. Gesagt, getan &#8211; dachte ich zumindest. Doch die Recherche stellte sich als etwas aufwendiger heraus.</p>
<p>Deshalb möchte ich mit diesem kleinen Tutorial ein paar Tipps geben, wie Twitter Cards für das eigene Blog verwendet werden können.</p>
<h3>Was sind Twitter Cards?</h3>
<p>Drehen wir mal die Zeit ein wenig zurück. Vor der Einführung von Twitter Cards sahen Tweets mit einem Link eher spartanisch aus. Der Text, der (noch!) maximal 140 Zeichen umfassen darf, hatte einen Link enthalten, auf den geklickt werden konnte. Das war´s. Es gab keine Vorschau und kein Bild der Seite, die sich hinter dem Link verbirgt.</p>
<p>Mit Twitter Cards wird jeder Tweet, der einen Link enthält, optisch ansprechender. Neben dem Link gibt es ein Vorschaubild zum verlinkten Text, sozusagen einen Appetitanreger. Was genau auf der Twitter Card angezeigt wird, kann jeder Nutzer individuell festlegen. Dazu aber später mehr.</p>
<h3>Wozu benötige ich Twitter Cards?</h3>
<p>Wie schon ausgeführt, soll das Interesse an dem Link, der via Twitter verteilt wird, geweckt werden. Ich klicke eher auf eine URL, wenn ich bereits eine grobe Ahnung habe, um was es geht. Und diesen Mehrwert bietet die Twitter Card.</p>
<p>Zusammengefasst geht es also darum, die Reichweite eurer Tweets anhand einer visuellen Attraktivität zu erhöhen.</p>
<h3>Kann jeder Twitter Cards nutzen?</h3>
<p>Nein, nicht jeder kann ohne weiteres die Twitter Cards nutzen und auch nicht jeder gepostete Link einer Webseite führt automatisch zur Einbettung einer Twitter Card.</p>
<p>Wenn ihr Blogger seid und mit Twitter Cards für eine entsprechende Aufmerksamkeit eures Blogs sorgen wollt, müsst ihr Twitter erst beibringen, dass die Karten bei euren Links Verwendung finden. Und wie das funktioniert, möchte ich jetzt vorstellen.</p>
<h3>Welche Twitter Cards gibt es?</h3>
<p>Twitter unterscheidet insgesamt vier verschiedene Twitter Cards Typen:</p>
<ol>
<li>Summary Card</li>
<li>Summary Card with Large Image</li>
<li>App Card</li>
<li>Player Card</li>
</ol>
<p>Twitter beschreibt die Twitter Cards auf ihrer nur in englisch verfügbaren Webseite wie folgt:</p>
<blockquote><p>With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.</p></blockquote>
<p>Den größten Effekt haben Blogger bei der Verwendung der &#8220;Summary Cards&#8221; und der &#8220;Summary Card with Large Image&#8221;. Weil es in diesem Beitrag um das Aufhübschen der eigenen Blogbeiträge via Twitter geht, konzentrieren sich meine Ausführungen auf die Summary Card.</p>
<h3>Die Summary Card von Twitter</h3>
<p>Die Summary Card kann für viele Arten von Web-Inhalten verwendet werden. Angefangen von Blog-Posts und News-Artikel über Produkte und vieles mehr. Die Summary Card ermöglicht dem Leser eine Vorschau auf die Inhalte des Links, bevor die Webseite besucht wird.</p>
<p>Die &#8220;Summary Card with Large Image&#8221; ist im Prinzip die aufgepimpte Version der Summary Card, der zusätzlich ein besonders großes Foto hinzugefügt worden ist.</p>
<h3>Wie kann ich selbst Twitter Cards erstellen?</h3>
<p>Auch wenn das Erstellen von Twitter Cards auf den ersten Blick kompliziert erscheint: keine Panik, ihr schafft das und ihr könnt das auch!</p>
<p>Denn sogar ich habe das geschafft &#8211; dabei bin ich kein Techniker vor dem Herrn 🙂 Und so wird´s gemacht:</p>
<p>Im ersten Schritt muss Twitter erklärt werden, dass deine Webseite für die Twitter Cards freigeschaltet ist. Dazu muss im WordPress Back-End unter <em>Design -&gt; Editor </em>der Editor geöffnet werden.<br />
<img fetchpriority="high" decoding="async" class="aligncenter size-full wp-image-29643" src="http://348974.webhosting71.1blu.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-WordPress-Editor.jpg" alt="Twitter Summary Card Validator Twitter Developers WordPress Editor" width="333" height="264" srcset="https://www.ostwestf4le.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-WordPress-Editor.jpg 333w, https://www.ostwestf4le.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-WordPress-Editor-300x238.jpg 300w" sizes="(max-width: 333px) 100vw, 333px" />Unter &#8220;Templates&#8221; wird dann &#8220;Header&#8221; ausgewählt und dort der HTML-Code <code class="html plain">&lt;</code><code class="html keyword">meta</code><code class="html color1">name</code><code class="html plain">=</code><code class="html string">"twitter:card"</code><code class="html color1">content</code><code class="html plain">=</code><code class="html string">"summary"</code><code class="html plain">/&gt; </code>eingefügt. Dies gilt natürlich nur, wenn die sogenannte &#8220;Summary Card&#8221; von Twitter gewählt werden soll. Wie bereits an anderer Stelle erwähnt, ist ist diese Karte aus meiner Sicht für Blogger am besten geeignet.<br />
<img decoding="async" class="aligncenter size-full wp-image-29642" src="http://348974.webhosting71.1blu.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-WordPress-Editor-Header.jpg" alt="Twitter Summary Card Validator Twitter Developers WordPress Editor Header" width="604" height="430" srcset="https://www.ostwestf4le.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-WordPress-Editor-Header.jpg 604w, https://www.ostwestf4le.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-WordPress-Editor-Header-300x214.jpg 300w" sizes="(max-width: 604px) 100vw, 604px" />Anschließend die Änderungen speichern und auf der Webseite <a href="https://cards-dev.twitter.com/validator" target="_blank">https://cards-dev.twitter.com/validator</a> die korrekte HTML-Einbindung überprüfen. Wenn alles richtig gelaufen ist, bekommt ihr eine Bestätigung nach folgendem Muster:</p>
<p><strong>*.ostwestf4le.de is whitelisted for summary card  </strong><br />
<img decoding="async" class="aligncenter size-full wp-image-29644" src="http://348974.webhosting71.1blu.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers.jpg" alt="Twitter Summary Card Validator Twitter Developers" width="1014" height="612" srcset="https://www.ostwestf4le.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers.jpg 1014w, https://www.ostwestf4le.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-300x181.jpg 300w, https://www.ostwestf4le.de/wp-content/uploads/Twitter-Summary-Card-Validator-Twitter-Developers-768x464.jpg 768w" sizes="(max-width: 1014px) 100vw, 1014px" /></p>
<h3 class="line number1 index0 alt2">Deine Tweets mit einer Twitter Card</h3>
<div class="line number1 index0 alt2">
<p>Und so sieht es aus, wenn alles richtig gelaufen ist:</p>
<blockquote class="twitter-tweet" lang="de">
<p dir="ltr" lang="de">Test für Twitter Cards <a href="http://t.co/D2Nl3DcJGd">http://t.co/D2Nl3DcJGd</a></p>
<p>— Marc Höttemann (@Ostwestf4le) <a href="https://twitter.com/Ostwestf4le/status/645167965038444544">19. September 2015</a></p></blockquote>
<h3>Probleme mit der Twitter Card bei https</h3>
<p>Anscheinend ist die Einbindung der Twitter Cards bei https-Webseiten derzeit nicht möglich.</p>
<p>Frank<a href="http://348974.webhosting71.1blu.de/2016/01/10/tutorial-twitter-cards-fuer-blog-verwenden/#comment-40547" target="_blank"> hat in den Kommentaren</a> darauf hingewiesen, dass er die Fehlermeldung „ERROR: Fetching the page failed because SSL handshake error.“ erhält.</p>
<p><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script></p>
</div>
<div class='yarpp yarpp-related yarpp-related-rss yarpp-template-list'>
<!-- YARPP List -->
<h3>Auch interessant:</h3><ol>
<li><a href="https://www.ostwestf4le.de/2015/01/18/tutorial-nutzer-auf-twitter-blockieren-melden/" rel="bookmark" title="Tutorial: Einen Nutzer auf Twitter blockieren und melden">Tutorial: Einen Nutzer auf Twitter blockieren und melden</a> <small>Was genug ist, ist genug! Seit einigen Tagen nervt mich...</small></li>
<li><a href="https://www.ostwestf4le.de/2012/04/05/tutorial-wie-kann-ich-mein-wordpress-com-blog-loschen-oder-auf-inaktiv-setzen/" rel="bookmark" title="Tutorial: Wie kann ich mein WordPress.com &#8211; Blog löschen oder auf inaktiv setzen?">Tutorial: Wie kann ich mein WordPress.com &#8211; Blog löschen oder auf inaktiv setzen?</a> <small>Aus meiner Blogger-Anfangszeit habe ich noch ein Blog auf der...</small></li>
<li><a href="https://www.ostwestf4le.de/2011/11/17/tutorial-inaktiven-twitter-account-ubernehmen/" rel="bookmark" title="Tutorial: inaktiven Twitter-Account übernehmen">Tutorial: inaktiven Twitter-Account übernehmen</a> <small>Seitdem ich Twitter nutze, ist @Ostwestf4le bereits mein dritter Account-Name....</small></li>
</ol>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://www.ostwestf4le.de/2016/01/10/tutorial-twitter-cards-fuer-blog-verwenden/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">29640</post-id>	</item>
	</channel>
</rss>
