So fügen Sie Joomla schnell Facebook Open Graph- und Twitter-Karten hinzu

Joomla OpenGraphIn diesem Artikel werden wir diskutieren, wie Sie Joomla Facebook Open Graph- und Twitter-Karten ohne Plugin oder Modul hinzufügen können.

Wenn Sie in den letzten zehn Jahren nicht mehr unter einem Felsen gelebt haben, haben Sie wahrscheinlich sehr oft Leute gesehen, die Artikel auf Facebook mit einem schönen Bild und Titel geteilt haben, und eine ähnliche Sache auf Twitter mit großen, hübschen Karten, die eine große zeigen Bild.

Der beste Weg, dies zu kontrollieren, besteht darin, das zu implementieren, was als das bezeichnet wird Open Graph Protokoll. Dies ist eine Reihe von Tags, die Twitter, Facebook und anderen Crawlern Hinweise geben, welche Inhalte sie verwenden sollten.

Sie können dies problemlos in Joomla tun, ohne eine Erweiterung eines Drittanbieters zu installieren, indem Sie eine Vorlagenüberschreibung erstellen.

So geht's:

 

Twitter-Karten Joomla

Wenn Sie Twitter-Karten mit Joomla Open Graph-Tags implementieren - anstatt dass ein Bild zufällig oder gar nicht angezeigt wird, schlägt Ihr Joomla-Artikel das beste Bild vor.

Siehe das folgende Beispiel aus dem CollectiveRay Twitter-Feed.

Joomla Twitter Facebook Grafik öffnen

Facebook Open Graph Beispiel

Auf der anderen Seite - auf Facebook sehen Ihre Beiträge mit den Joomla Open Graph-Tags wie folgt aus, wenn sie geteilt werden.

Joomla Facebook Open Graph

So aktivieren Sie Joomla Open Graph-Tags

1. Erstellen Sie eine Vorlagenüberschreibung für Artikel

Erweiterungen> Vorlagen> Vorlagen> (Ihre Vorlage) Details und Dateien> Überschreibungen erstellen> Komponenten> com_content> Artikel

Nachdem Sie die Überschreibung der Artikelvorlage erstellt haben, können Sie die Metadaten zur Überschreibung hinzufügen, die zum Anzeigen Ihres Artikels verwendet wird. Im Wesentlichen müssen Sie dem Artikel den folgenden Inhalt hinzufügen, damit die Metadaten aus Ihrem Artikel übernommen werden.

2. Fügen Sie die Metadaten für Facebook / Twitter Open Graph hinzu

Gehen Sie zu Erweiterungen> Vorlagen> Vorlagen> (Ihre Vorlage) Details und Dateien> Editor> HTML> com_content> Artikel> default.php

Fügen Sie den folgenden Code oben zwischen PHP-Tags hinzu: - Seien Sie vorsichtig, wo Sie dies hinzufügen möchten. Sie können Ihre Vorlage vorübergehend beschädigen, wenn Sie sie an der falschen Stelle hinzufügen. Erstellen Sie daher eine vollständige Sicherung der Datei, bevor Sie eine dieser Änderungen vornehmen

if (isset($images->image_intro) and !empty($images->image_intro))
{
  $timage= htmlspecialchars(JURI::root().$images->image_intro);
}
elseif (isset($images->image_fulltext) and !empty($images->image_fulltext))
{
  $timage= htmlspecialchars(JURI::root().$images->image_fulltext);
}
else
{
  $timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
}
$doc =& JFactory::getDocument();
$doc->addCustomTag( '
  <meta name="twitter:title" content="'.$this->escape($this->item->title).'">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@DARTCreations">
  <meta name="twitter:creator" content="@DARTCreations">
  <meta name="twitter:url" content="'.str_replace('" ','&quot;',JURI::current()).'"="">
  <meta name="twitter:description" content="'.strip_tags($this->item->introtext).'">
  <meta name="twitter:image" content="'.$timage.'">
  <meta property="og:title" content="'.$this->escape($this->item->title).'"/>
  <meta property="og:type" content="article"/>
  <meta property="og:email" content="[email protected]ns.com";/>
  <meta property="og:url" content="'.str_replace('" ','&quot;',juri::current()).'"="">
  <meta property="og:image" content="'.$timage.'"/>
  <meta property="og:site_name" content="DARTCreations"/>
  <meta property="fb:admins" content="xxxxxxxxxxx"/>
  <meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>
');

 

3. Passen Sie die Open Graph-Tags an Ihre Werte an

Der obige Code ist angepasst an CollectiveRay, also bearbeiten Sie offensichtlich die Werte für die Elemente, die Sie für Ihre eigene Site wünschen.

Dies sind die Zeilen, die Sie ändern müssen:

$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';

Dies sollte der Speicherort des Standardbilds sein, falls Ihr Artikel kein Intro-Bild oder ein Volltextbild enthält.

  <meta name="twitter:site" content="@DARTCreations">
  <meta name="twitter:creator" content="@DARTCreations">

 

Der obige @ -Wert sollte geändert werden, um Ihren Twitter-Benutzernamen wiederzugeben.

<meta property="og:email" content="[email protected]ns.com";/>

Die oben angegebene E-Mail-Adresse sollte auf Ihre eigene E-Mail-Adresse aktualisiert werden.

Das Obige sollte auf den Namen Ihrer Site aktualisiert werden.

Anstatt der xxxxxxxxxxx Für das Tag fb: admins müssen Sie die numerische ID des Facebook-Benutzers eingeben, der beispielsweise Page Insights ausführt. Um die Nummer zu finden, sollten Sie sich ein Werkzeug wie dieses ansehen. finde meine Facebook ID.

Leservorschlag:

Eddie schlug vor, dass Sie die Länge der Beschreibung auf eine bestimmte Anzahl von Zeichen beschränken können, wenn Sie den folgenden Code verwenden:

Möglicherweise möchten Sie die Länge der Beschreibung auf ca. 45 Zeichen beschränken, indem Sie mb_strimwidth oder substr wie folgt verwenden:

<meta name="twitter:description" content="'.mb_strimwidth(strip_tags ($ this-> item-> introtext), 0,45). '"/>
or 

 

Ed hat auch einen zweiten Vorschlag gemacht, mit dem Sie die Daten aus der Meta-Beschreibung des Artikels auswählen können. Dies ist ein ziemlich guter Vorschlag.

Ich habe den Code ein wenig optimiert und habe Folgendes:

.

Dies wird durch diesen Code erzeugt (Hinweis ">" wird entfernt):

<meta property="og:description" content="'.mb_strimwidth(strip_tags ($ doc-> getMetaData ('description')), 0,45, "..."). '"=" "/>

Sie können sehen, dass ich die auf 45 Zeichen beschränkte Meta-Beschreibung erhalte und Auslassungspunkte hinzufüge, wenn die Beschreibung abgeschnitten ist. Auf diese Weise kann ich meine Beschreibung für eine bessere Klickrate "anklicken", während mein Intro-Text im Einklang mit dem "Stil" oder der "Stimme" meiner Website lesbar bleibt. Mit der Meta-Beschreibung kann ich auch einen Teil dieses Codes zu einer Überschreibung für Kategorien hinzufügen!

Ein anderer Leser: Thomas Meredith kommentierte unten den Code




war anfällig für XSS-Schwachstellen und der richtige Code sollte sein: 

<meta property="og:url" content="'.str_replace('" ','&quot;',JURI::current()).'"= "">


Wir haben den Code mit dieser Korrektur aktualisiert, und Sie sollten dies ebenfalls tun.

Wir helfen Ihnen dabei, Ihr Joomla besser zu verwalten

Joomla

Kostenlose Joomla Tipps E-Book-Button

Weitere Updates von unseren Besuchern

Wenn Sie der folgenden Konversation folgen, werden Sie feststellen, dass selbst wenn der obige Code in den meisten Situationen funktioniert, es bestimmte Fälle gibt, in denen der Code nicht funktioniert. Michael von N8 Solutions hat es sich zur Aufgabe gemacht, eine Lösung für die Fälle zu finden, in denen dies nicht funktionierte. 

Im Geiste der Open-Source-Joomla-Community haben sie den Code in den Kommentaren unten mit den übrigen Besuchern geteilt. Ich reproduziere den Code und Michaels Kommentare aus Gründen der Klarheit wörtlich:

Ich konnte das Problem nicht nur für die Seite "Kontakt", sondern auch für die Menüpunktseiten "Blog" und "Hervorgehoben" lösen.

Zuerst, was ich oben für die Kontaktseite geschrieben habe, um den "Namen" zu erhalten, wird der Kontakt so gespeichert, wie es funktioniert. Das "twitter: title" & "og: title" sollte so aussehen, wenn Sie den gespeicherten Namen des Kontakts verwenden möchten.

<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />

Wenn Sie jedoch die Informationen aus dem Menü verwenden möchten, können Sie dies mit diesem neuen Code tun, der auch für die Menüelementseiten "Blog" und "Empfohlen" funktioniert.
Sie können wählen, ob Sie den "Menütitel", den "Browser-Seitentitel" oder die "Seitenüberschrift" verwenden möchten. Ich bevorzuge die Verwendung der Seitenüberschrift und stelle das Menü so ein, dass die Seitenüberschrift nicht angezeigt wird. Auf diese Weise kann ich die Seitenüberschrift für Open Graph so verwenden, wie ich es möchte, da sie nirgendwo anders angezeigt wird als im Menütitel oder im Browser-Seitentitel.

Dazu müssen Sie den folgenden Code zwischen "$ timage" und "$ doc" einfügen.

$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');

Dann sollten Sie den Code für "twitter: title" & "og: title" durch diesen Code unten ersetzen, um die "Seitenüberschrift" zu verwenden.

<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />

Wenn Sie stattdessen den "Menütitel" oder den "Browser-Seitentitel" verwenden möchten, ersetzen Sie im Code "$ pageheading" durch "$ title", um den Menütitel zu verwenden, oder "$ browserpagetitle", um den Browser zu verwenden Seitentitel.

Sie können die Überschreibungen hier erstellen:
Erstellen Sie Überschreibungen> Komponenten> com_content> Kategorie
Überschreibungen erstellen> Komponenten> com_content> vorgestellt
Erstellen Sie Überschreibungen> Komponenten> com_contact> Kontakt

Bearbeiten Sie dann die Überschreibungen und fügen Sie den obigen Code an ihren jeweiligen Speicherorten hinzu:
Editor> html> com_content> category> blog.php
Editor> html> com_content> Featured> default.php
Editor> html> com_contact> contact> default.php

Ich habe auch die "if" -Anweisung für das Open Graph Image entfernt, wobei nur die Grundzeile übrig blieb:

$timage= 'https://www.domain.com/custom-open-graph-image.jpg';

Ich habe dies getan, weil die "if" -Anweisung für diese Seiten nicht erforderlich ist, da es kein Intro- oder Volltextbild gibt.

Eine andere wichtige Sache in Bezug auf die "Beschreibungen".

Für KONTAKTE:


Im Code für die Kontaktseite für "twitter: description" & "og: description" muss der "Introtext" durch "metadesc" ersetzt werden, um die für den Kontakt festgelegte Meta-Beschreibung abzurufen. Wenn Sie keine Beschreibung für den Kontakt festlegen, wird für die geöffneten Diagrammbeschreibungs-Tags nichts angezeigt.

Für BLOG & FEATURED Artikel:
Genau wie oben für die Kontakte "Twitter: Beschreibung" & "og: Beschreibung" muss der "Introtext" durch Eddies obigen Code ersetzt werden, um die Meta-Beschreibung zu erhalten, die entweder für den Menüpunkt "Blog" oder "Empfohlener Artikel" festgelegt ist. Wenn Sie dort keine Beschreibung festlegen, wird nichts angezeigt. Sie müssen also nicht danach suchen. Hier ist der Code, den Eddie oben angegeben hat, und wie die Beschreibungszeilen aussehen sollten.

<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />

Ich ziehe es vor, die Zeichenlänge von 45 auf 160 zu ändern, da ich nicht an potenziellen Site-Besuchern interessiert bin, die auf "Köder klicken".

Ich hoffe das ist hilfreich für andere!

 

4. Testen Sie gegen den Twitter-Validator und den Facebook-Linter 

Überprüfen Sie den Artikel auf Ihrer Website anhand des Twitter-Validators: https://cards-dev.twitter.com/validator 

und der

Facebook-Linter:  https://developers.facebook.com/tools/debug/

Und so fügen Sie Ihren Joomla-Artikeln Open Graph-Metadaten hinzu :)

Häufig gestellte Fragen

Was ist das Open Graph-Protokoll?

Mit dem Open Graph-Protokoll können Websites steuern, welche Inhalte angezeigt werden, wenn ihre Website-Inhalte auf Facebook, Twitter oder anderen Open Graph-freundlichen Plattformen geteilt werden. Wenn Ihre Website diese Tags nicht verwendet, kann die Plattform entscheiden, welches Bild angezeigt werden soll, und wird wahrscheinlich ein nicht verwandtes Bild anzeigen.

Verwendet Google Open Graph?

Nein Google verwendet das Open Graph-Protokoll nicht für die Suchmaschinen-Ergebnisseiten. Stattdessen wird es verwendet Strukturierte DatenDies ist eine weitere Methode, mit der Crawler den Inhalt Ihrer Website besser verstehen können. Auch wenn Google per se keine OG-Tags verwendet, ist der Verkehr auf Ihrer Website ein Ranking-Signal. Daher wird es wahrscheinlich Ihren organischen Rankings zugute kommen, eine Social-Media-freundliche Website zu haben.

Wie setzen Sie Open Graph-Tags in Joomla?

Um offene Diagramm-Tags in Joomla festzulegen, können Sie eine Vorlagenüberschreibung verwenden und die Tags aus dem Inhalt Ihrer Artikel füllen, wie im obigen Artikel beschrieben. Alternativ können Sie ein Plugin installieren, mit dem diese Tags automatisch aus dem Inhalt Ihrer Website generiert werden können.

Wie überprüfe ich Open Graph-Tags?

Um Open Graph-Tags zu überprüfen, können Sie entweder den Facebook Linter oder den Sharing Debugger oder den Twitter Card Validator verwenden.

Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

 

Wer sind wir?

CollectiveRay wird von David Attard geleitet - arbeitet seit mehr als 12 Jahren in und um die Webdesign-Nische und bietet umsetzbare Tipps für Leute, die mit und an Websites arbeiten. Wir betreiben auch DronesBuy.net - eine Website für Drohnen-Hobbyisten.

David Attard

 

 

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...