5 einfache Möglichkeiten, Twitter Cards auf Ihrer Website zu installieren

Sie wissen also, wie auf Twitter, wenn jemand einen Link zu seiner Website postet, Twitter ein Feld erstellt, das ein Miniaturbild, einen Titel, eine Beschreibung und eine URL für die Zielseite enthält? Es ist wirklich üblich. Es macht Standard-Link-Posts in Timelines viel sichtbarer, es zeigt ein wenig über das Ziel des Links und fördert mehr Benutzerinteraktion.

Das ist eine Twitter-Karte. Genauer gesagt handelt es sich um die Website-Zusammenfassungskarte, eine von mehreren Arten von Twitter-Karten, die in eine Website integriert werden können. Welche anderen Arten gibt es?

• Die Zusammenfassungskarte ist, wie bereits erwähnt, eine Vorschau einer Website. Es handelt sich um ein benutzerdefiniertes Bild und einen benutzerdefinierten Text, die aus Metainformationen gezogen werden, die eine gute Vorschau dessen gewährleisten, was ein Benutzer sehen wird, wenn er auf Ihren Link klickt.
• Die Übersichtskarte (mit großem Bild) ist … identisch mit einer Übersichtskarte. Ich weiß ehrlich gesagt nicht, warum es einen Unterschied gibt. Klicken Sie auf jeden der Links und sehen Sie sich die Tweets in der Vorschau an und sehen Sie, was ich meine. Ich nehme an, vor der letzten Neugestaltung von Twitter sahen sie vielleicht anders aus, aber heute sieht alles aus wie eine große Bildkarte.
• Die Spielerkarte sollte nicht mit Baseball- oder anderen Sportkarten verwechselt werden. Sie sind im Wesentlichen große Bildkarten, außer dass das Bild eine Art animiertes Medium ist. Je nachdem, wie sie angezeigt werden, können sie kleine Vorschau- und Beschreibungsfelder sein, die zu Medien erweitert werden, oder nur die Medien selbst, die zur Wiedergabe bereit sind. Im Allgemeinen handelt es sich dabei um eingebettete Videos, wie YouTube-Videos, obwohl Webms immer beliebter werden.
• Die App-Karte ist ein Feld, das Daten von einer App-Store-Seite abruft, um ein angepasstes App-Werbefenster zu erstellen. Es zeigt die wichtigsten Details der im Tweet verlinkten App zusammen mit einem CTA-Button, um Benutzer dazu zu bringen, die App sofort zu installieren.

Twitter-Karten waren früher viel komplexer. Früher gab es bestimmte Arten von Karten für Bildergalerien, Produkte und einige andere Optionen, aber Twitter hat sie inzwischen entfernt. Wenn Sie etwas Nostalgie wollen, können Sie hier sehen, wie sie aussahen, aber seien Sie nicht zu anhänglich; du kannst sie heute nicht machen.

Die Grundlagen von Twitter Cards

Sie können nur eine Art von Twitter-Karte pro Website oder zumindest pro Webseite haben, wenn Sie Lust haben, für jede Seite einen individuellen Code festzulegen. Die meisten Leute wählen eine einfache Zusammenfassungskarte mit großem Bild und fügen den Code in die Kopfzeile ihrer Websitevorlage ein, sodass er auf jeder Seite angezeigt wird. Einige Seiten, wie YouTube, fügen die Spielerkarte in ihre Kopfzeile ein. Die wichtigste Erkenntnis hier ist, dass Sie nur einen Satz Karteninformationen in Ihren Header-Metadaten auf einer bestimmten Seite haben können.

Karten sind ziemlich robust in den Daten, die sie übermitteln können. Sie können festlegen, dass die Karte automatisch weiß, wer den Inhalt erstellt hat und wem die Seite gehört, sogar beide gleichzeitig, wenn sie unterschiedlich sind. Sie können die zu ladenden Medien angeben, Sie können Namen und Tracking-Code angeben und vieles mehr. Tatsächlich können Sie diese Seite lesen, um sich ein Bild von den Attributen zu machen, die Sie speziell für Karten verwenden können. Sie können auch Open Graph-Attribute für robustere Daten einbinden.

Was ich heute hier tun werde, ist , Ihnen zu sagen, wie Sie Twitter Cards zu Ihrer Website hinzufügen können. Ich werde nicht jedes einzelne Attribut durchgehen – die Twitter-Dokumentation ist gut genug – ich werde Ihnen nur einen Überblick darüber geben, wie man es für verschiedene CMS macht.

Bevor wir anfangen; Für jede Installationsmethode benötigen Sie eine Validierung. Um sicherzustellen, dass Sie es richtig gemacht haben, kopieren Sie die URL zu diesem Validator, sobald Sie eine Karte aktiviert haben. Dies wird Ihnen sagen, ob die Karte tatsächlich funktioniert oder nicht.

1: WordPress

WordPress ist vielleicht die einfachste Plattform für die Implementierung von Twitter-Karten, weil es so viele verschiedene Möglichkeiten gibt, einschließlich der fast integrierten.

Die empfohlene Methode zur Implementierung von Twitter-Karten ist die Verwendung des offiziellen Twitter-Plugins . Sie können es wie jedes andere Plugin installieren und von dort aus Ihre Twitter-Karten automatisch generieren. Es ermöglicht auch Schaltflächen zum Teilen und Tweeten/Folgen, die Handhabung von eingebetteten Tweets und Shortcodes für die Analyseverfolgung. Sie können die Dokumentation hier lesen und das Plugin selbst hier herunterladen.

Wenn Sie das offizielle Twitter-Plug-in nicht verwenden möchten oder auf gehostetem WordPress.com sind, können Sie Jetpack verwenden. In Jetpack möchten Sie den Abschnitt "Freigabe" finden und konfigurieren. Es wird einen Twitter-Bereich geben, in dem Sie Ihr Twitter-Konto für Ihre Website autorisieren.

Eine dritte Option ist die Verwendung des JM Twitter Cards-Plugins. Dieses Plugin von Julien Maury fügt Twitter-Kartenkompatibilität mit einigen Grundeinstellungen hinzu. Sie können festlegen, dass das erste Bild auf Ihrer Seite anstelle eines Beitragsbilds verwendet wird, Sie können eine Vorschau der Darstellung Ihrer Twitter-Karte anzeigen und Sie können die Karte für jeden Beitrag anpassen, wenn Sie den Beitrag erstellen. Um das Plugin zu konfigurieren, navigieren Sie zur Seitenleiste und klicken Sie auf das Plugin-Panel in Ihrem Admin-Dashboard. Wählen Sie den Kartentyp und füllen Sie die restlichen Felder mit Ihrem Twitter-Konto, dem Konto Ihrer Website, der Beschreibungslänge und allem, was Sie sonst noch hinzufügen möchten, aus.

Wenn keines davon Ihren Anforderungen entspricht oder Sie es bereits haben, verarbeitet WordPress SEO by Yoast auch Twitter-Karten. Navigieren Sie in Ihrem Admin-Bereich zu SEO und klicken Sie auf den Abschnitt Soziales. Dort gibt es einen Twitter-Tab, auf dem Sie Ihren Twitter-Benutzernamen zum Feld hinzufügen können. Leider unterstützt Yoast, wie ich zuletzt gelesen habe, nur zusammenfassende Karten; Sie benötigen fortgeschrittenere Plugins, wenn Sie andere Kartentypen möchten.

2: Tumblr

Tumblr ist eine überraschend beliebte Blogging-Plattform, von der viele Leute nicht wissen, dass sie so erfolgreich geworden ist. Das Tumblr-Netzwerk erstreckt sich über die mit .tumblr.com gekennzeichneten Blogs hinaus; Tatsächlich verwenden einige bekannte Websites Tumblr als Basisarchitektur. Sobald Sie eine benutzerdefinierte Domäne darauf haben, ist sie wie jede andere Back-End-Architektur. Oder ist es?

Tatsache ist, dass die Architektur von Tumblr nicht umfangreich oder so anpassbar ist wie etwas wie WordPress. Sie müssen benutzerdefinierten Code verwenden, um spezifische, benutzerdefinierte Twitter-Karten in Ihrem Blog zu implementieren. Sie können den Code und die Beschreibung dahinter hier lesen, in der Antwort von Dan Leveille auf Quora.

Es ist erwähnenswert, dass dieser Code erforderlich ist, um Ihre Karten manuell anzupassen. Es ist nicht erforderlich, einfach zusammenfassende Karten zu haben. Twitter hat Tumblr.com bereits für die automatische Kartengenerierung bei der Linkveröffentlichung auf die weiße Liste gesetzt. Wenn Sie also keine bestimmte Karte mit bestimmten Daten wünschen oder eine benutzerdefinierte Domain verwenden, können Sie einfach die standardmäßig implementierte verwenden. Ich würde nur auf seinen Code zurückgreifen, wenn Sie eine benutzerdefinierte Domain für Ihre Tumblr-Site haben oder Daten möchten, die Twitter nicht auf natürliche Weise erfasst.

3: Blogger

Das Installieren von Twitter-Karten in einem Blogger-Blog hängt von Ihrer Vorlage ab. Ich gebe Ihnen allgemeine Anweisungen, aber wenn Ihre Website-Vorlage zu sehr von der Norm abweicht, müssen Sie es anhand der Hinweise, die ich Ihnen gebe, selbst herausfinden.

Es wird immer empfohlen, dass Sie Ihre Vorlage sichern, bevor Sie sie manipulieren, nur für den Fall. Gehen Sie zu Ihrem Dashboard, klicken Sie auf Vorlage und dann auf die Schaltfläche Sichern, um eine Kopie davon für spätere Wiederherstellungszwecke zu speichern.

Klicken Sie als Nächstes auf die Schaltfläche „HTML bearbeiten“ unter der Live-Vorschau Ihrer Blog-Vorlage. Führen Sie in diesem Code eine Suche nach „<b:includable id='post' var='post'>“ durch. Behalten Sie diese Zeile dort, wo sie ist, aber fügen Sie Folgendes direkt darunter ein:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Natürlich müssen Sie die obigen Daten selbst bearbeiten . Ändern Sie @yourname in Ihren Twitter-Benutzernamen, ändern Sie www.yoursite.com in Ihre Website-URL und vergewissern Sie sich, dass sie korrekt ist.

Sie können diesen Code natürlich an Ihre Bedürfnisse anpassen. Wenn Sie eine andere Art von Karte bevorzugen, ändern Sie die oberste Zeile mit etwas anderem als „Zusammenfassung“ und passen Sie den Rest des Codes an die von Ihnen benötigten Daten an.

Falls der Code, den ich oben eingefügt habe, nicht funktioniert, ist dies die Seite, von der ich ihn habe. Sie können überprüfen, ob ich es richtig kopiert habe oder ob Sie es getan haben, und Sie können dort nachsehen, ob es aktualisiert wurde und mein Beitrag das Update nicht widerspiegelt. Apropos, wenn es nicht funktioniert, lass es mich wissen. Ich werde mein Bestes tun, um es zu beheben.

4: Joomla

Joomla hat viel mit WordPress gemeinsam, da es sich um ein CMS mit Schwerpunkt auf Anpassungen über Erweiterungen handelt und nicht um eine eingeschränkte Plattform mit kosmetischen Verbesserungen wie Tumblr oder Blogger. Daher gibt es eine Handvoll verschiedener Möglichkeiten, wie Sie Twitter-Karten mit verschiedenen Joomla-Erweiterungen implementieren können.

Tweet Cards ist eine Erweiterung, die die meisten Leute wahrscheinlich bevorzugen. Es kann kostenlos heruntergeladen und verwendet werden und fügt Ihrer Joomla-basierten Website Twitter-Karten hinzu. Das ist es; Es gibt nichts Besonderes in der Konfiguration, es gibt nichts Außergewöhnliches in seiner Funktionalität oder Implementierung, es tut einfach, was es verspricht.

Eine zweite Option ist die Pro-Erweiterung Open Graph und Twitter Card Tags. Es ist eine robustere Erweiterung, die Tags für Twitter und Facebook hinzufügt. Es bietet zahlreiche Anpassungsoptionen, um die spezifischen Bilder und Daten auszuwählen, die Sie für Ihre Beiträge wünschen. Die Facebook-Integration von Open Graph ist großartig und fügt zusätzliche Metadaten für Twitter und Google hinzu, wenn sie anklopfen. Der einzige Nachteil ist, dass diese als Pro-Erweiterung Sie etwas kosten wird. Es ist jedoch billig; nur 7 Euro für die Lizenz. Sie können zusätzlichen Support erwerben, wenn Sie möchten, aber seien wir ehrlich; Dies sind nur Metadaten, es ist ein verherrlichter Copy-and-Paste-Job für Leute, die Angst vor Code haben. Sie brauchen keine Unterstützung.

Die dritte Option, die ich für Sie habe, ist die Verwendung von TEXTman, einem Front-End-Post-Editor zum Erstellen und Veröffentlichen Ihrer Artikel auf einer Joomla-Site. Sie müssen nichts konfigurieren, damit Twitter-Karten funktionieren; Verwenden Sie einfach TEXTman als Ihren Editor und es bringt die Funktion automatisch. Der Nachteil dabei ist, dass es sich auch um ein Profi-Tool handelt, und zwar um ein viel teureres. Da es sich um einen vollständigen Texteditor und zugehörige Tools handelt, handelt es sich um eine große Lizenz mit mehreren hinzugefügten Erweiterungen. Es kostet Sie 99 US-Dollar für ein Abonnement mit allem oder 40 US-Dollar nur für TEXTman selbst und eine begrenzte Support- und Update-Lizenz. Sehr teuer, wenn Sie nur Twitter-Karten wollen.

Schließlich können Sie natürlich die unten oder in diesem Beitrag beschriebene Methode verwenden, um sie manuell zu implementieren.

5: Benutzerdefinierte Content-Management-Systeme

Ich habe oben bereits ein Beispiel für die Metadaten im Code gepostet. Das ist im Grunde derselbe Code, den Sie in den Header Ihrer Website einfügen, unabhängig davon, welche Architektur Sie verwenden. Optimieren Sie die Dinge entsprechend den Anforderungen Ihrer Website und kopieren Sie den Code in Ihren Website-Header. Es spielt keine Rolle, wo genau es sich befindet, solange es sich zwischen den <head>- und </head>-Tags oben auf der Website befindet.

Vergessen Sie nicht, die Tags anzupassen. Die wichtigsten, auf die Sie achten müssen, sind die Card-, Site-, Creator- und Domain-Tags. Diese sollten mit dem gewünschten Kartentyp, dem Twitter-Handle Ihrer Website und des Inhaltserstellers sowie der URL Ihrer Domain ausgefüllt werden. Validieren Sie dann die Karte, sobald Sie die Änderungen vorgenommen haben.

Wenn Ihre Karte nach der Validierung immer noch nicht funktioniert, sollten Sie die Fehlerbehebungsanleitung von Twitter lesen. Wahrscheinlich gibt es irgendwo einen einfachen Fehler, den Sie in wenigen Sekunden beheben können.