In dit artikel gaan we bespreken hoe je Facebook Open Graph en Twitter Cards aan Joomla kunt toevoegen zonder een plug-in of module.
Als je de afgelopen tien jaar niet onder een steen hebt geleefd, heb je waarschijnlijk heel vaak mensen artikelen op Facebook zien delen met een mooie afbeelding en titel, en iets soortgelijks op Twitter met grote mooie kaarten met een grote beeld.
De beste manier om dit onder controle te houden, is door het implementeren van wat de Open Graph protocol. Dit is een set tags die hints geven aan Twitter, Facebook en andere crawlers over welke inhoud ze moeten gebruiken.
U kunt dit eenvoudig in Joomla doen zonder een extensie van derden te installeren door een sjabloonoverschrijving te maken.
Hier is hoe dit te doen:
Twitter-kaarten Joomla
Bij het implementeren van Twitter-kaarten met behulp van Joomla open graph-tags - in plaats van dat een afbeelding willekeurig wordt weergegeven, of helemaal geen afbeelding, zal uw Joomla-artikel de beste afbeelding voorstellen om te gebruiken.
Zie het onderstaande voorbeeld van de CollectiveRay Twitter-feed.
Facebook Open Graph voorbeeld
Aan de andere kant - op Facebook, met behulp van de Joomla Open Graph-tags, zien uw berichten, wanneer ze worden gedeeld, er als volgt uit.
Joomla Open Graph-tags inschakelen
1. Maak een sjabloonoverschrijving voor artikelen
Extensies > Sjablonen > Sjablonen > (uw sjabloon) Details en bestanden > Overschrijvingen maken > Componenten > com_content > artikel
Nadat u de artikelsjabloon-overschrijving hebt gemaakt, kunt u de metadata toevoegen aan de overschrijving die zal worden gebruikt om uw artikel weer te geven. In wezen moet u de volgende inhoud aan het artikel toevoegen, zodat de metagegevens uit uw artikel worden opgehaald.
2. Voeg de metadata toe voor Facebook / Twitter Open Graph
Ga naar Extensies > Sjablonen > Sjablonen > (uw sjabloon) Details en bestanden > Editor > html > com_content > artikelen > default.php
Voeg de onderstaande code toe bovenaan tussen de php-tags: - let een beetje op waar u dit toevoegt, u zou uw sjabloon tijdelijk kunnen breken als u het op de verkeerde plaats toevoegt ... dus maak een volledige back-up van het bestand voordat u een van deze bewerkingen uitvoert
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('" ','"',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="info@dart-creations.com";/> <meta property="og:url" content="'.str_replace('" ','"',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. Pas de Open Graph-tags aan uw waarden aan
De bovenstaande code is aangepast om: CollectiveRay, bewerk dus uiteraard de waarden naar de items die u voor uw eigen site wilt.
Dit zijn de regels die u moet wijzigen:
$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
Dit zou de locatie van de standaardafbeelding moeten zijn, mocht uw artikel geen introafbeelding of een volledige tekstafbeelding hebben.
<meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations">
De bovenstaande @-waarde moet worden gewijzigd om uw Twitter-gebruikersnaam weer te geven.
<meta property="og:email" content="info@dart-creations.com";/>
Het bovenstaande e-mailadres moet worden bijgewerkt naar uw eigen e-mailadres.
Het bovenstaande moet worden bijgewerkt naar de naam van uw site.
In plaats van de xxxxxxxxxxx van de fb:admins-tag, moet je de numerieke id invoeren van de Facebook-gebruiker die dingen als Page Insights gaat uitvoeren. Om het nummer te vinden, wil je misschien kijken naar een tool als deze tool - vind mijn Facebook-ID.
Suggestie van de lezer:
Eddie stelde voor dat je de lengte van de beschrijving kunt beperken tot een bepaald aantal tekens als je de onderstaande code gebruikt:
Misschien wilt u de lengte van de beschrijving beperken tot ongeveer 45 tekens door mb_strimwidth of substr als volgt te gebruiken:
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($this->item->introtext),0,45).'"/>
or
Ed heeft ook een tweede suggestie gedaan waarmee je de gegevens uit de metabeschrijving van het artikel kunt halen, wat een behoorlijk goede suggestie is.
Ik heb de code een beetje aangepast en heb het volgende:
.
Dit wordt geproduceerd door deze code (opmerking ">" is verwijderd):
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'"=""/>
Je kunt zien dat ik de metabeschrijving krijg, beperkt tot 45 tekens, en ellips toevoegen als de beschrijving wordt afgekapt. Op deze manier kan ik mijn beschrijving "klikken" voor een betere CTR terwijl mijn introtekst leesbaar blijft in overeenstemming met de "stijl" of "stem" van mijn website. Door de metabeschrijving te gebruiken, kan ik ook een deel van deze code toevoegen aan een overschrijving voor categorieën!
Een andere lezer: Thomas Meredith merkte hieronder op dat de code
was kwetsbaar voor XSS-kwetsbaarheden en de juiste code zou moeten zijn:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
We hebben de code bijgewerkt met deze correctie, en u zou hetzelfde moeten doen.
Laten we u helpen uw Joomla beter te beheren
Meer updates van onze bezoekers
Als je het onderstaande gesprek volgt, zul je merken dat zelfs als de bovenstaande code voor de meeste situaties werkt, er specifieke gevallen zijn waarin de code niet werkt. Michael van N8 Solutions nam het op zich om een oplossing te vinden voor die gevallen waarin dit niet werkte.
In de geest van de open-source Joomla-gemeenschap deelden ze de code met de rest van de bezoekers in de onderstaande opmerkingen. Ik reproduceer de code en de opmerkingen van Michael letterlijk, voor de duidelijkheid:
Ik heb het probleem niet alleen voor de pagina "Contact" kunnen oplossen, maar ook voor de pagina's met menu-items "Blog" en "Uitgelicht".
Ten eerste, wat ik hierboven schreef voor de contactpagina, voor het pakken van de "naam" wordt het contact opgeslagen zoals het werkt. De "twitter:title" & "og:title" zouden er zo uit moeten zien als je de opgeslagen naam van het contact wilt gebruiken.
<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />
Als u echter de informatie uit het menu wilt gebruiken, kunt u dat doen met deze nieuwe code die ook werkt voor "Blog" & "Uitgelichte" menu-itempagina's.
U kunt ervoor kiezen om de "Menutitel", "Browserpaginatitel" of de "Paginakop" te gebruiken. Ik gebruik liever de paginakop en stel het menu zo in dat de paginakop niet wordt weergegeven. Op deze manier kan ik de paginakop voor Open Graph gebruiken zoals ik dat wil, omdat het nergens anders verschijnt, in tegenstelling tot de menutitel of de browserpaginatitel die dat wel zal doen.
Om dit te doen, moet u de onderstaande code toevoegen tussen "$timage" en boven "$doc".
$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');
Vervang dan de code voor "twitter:title" & "og:title" door onderstaande code om de "Page Heading" te gebruiken.
<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />
Als u in plaats daarvan de "Menutitel" of de "Browserpaginatitel" wilt gebruiken, vervangt u in de code "$pageheading" door ofwel "$title" om de menutitel te gebruiken of "$browserpagetitle" om de browser te gebruiken Pagina titel.
U kunt de overschrijvingen hier maken:
Overschrijvingen maken > Componenten > com_content > categorie
Overschrijvingen maken > Componenten > com_content > aanbevolen
Overschrijvingen maken > Componenten > com_contact > contact
Bewerk vervolgens de overschrijvingen en voeg de bovenstaande code toe op hun respectievelijke locaties:
Editor > html > com_content > categorie > blog.php
Editor > html > com_content > aanbevolen > default.php
Editor > html > com_contact > contact > default.php
Ik heb ook de "if"-instructie voor de Open Graph-afbeelding verwijderd, waardoor alleen de basisregel overblijft:
$timage= 'https://www.domain.com/custom-open-graph-image.jpg';
Ik deed dit omdat de "if"-instructie niet nodig is voor deze pagina's omdat er geen introafbeelding of volledige tekstafbeelding is.
Nog iets van belang met betrekking tot de "Beschrijvingen".
Voor CONTACTEN:
In de code voor de contactpagina voor de "twitter:description" & "og:description" moet de "introtext" worden vervangen door "metadesc" om de metabeschrijving te pakken die voor het contact is ingesteld. Als u geen beschrijving voor het contact instelt, wordt er niets weergegeven voor de open grafiekbeschrijvingstags.
Voor BLOG & AANBEVOLEN artikelen:
Net zoals hierboven voor de contacten, moet de "twitter:description" & "og:description" de "introtext" worden vervangen door Eddie's code hierboven om de metabeschrijving te pakken die is ingesteld voor het blog- of het Featured Article Menu-item. Nogmaals, als u daar geen beschrijving instelt, wordt er niets weergegeven. U hoeft er dus niet naar te zoeken, hier is de code die Eddie hierboven heeft gegeven en hoe de beschrijvingsregels eruit moeten zien.
<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, " ...").'" />
Ik geef er de voorkeur aan om de karakterlengte te veranderen van 45 naar 160 omdat ik niet geïnteresseerd ben in "Bait Clicking" potentiële sitebezoekers.
Ik hoop dat dit nuttig is voor anderen!
4. Test tegen de Twitter-validator en de Facebook Linter
Controleer het artikel op uw website met de Twitter-validator: https://cards-dev.twitter.com/validator
en
Facebook-Linter: https://developers.facebook.com/tools/debug/
En zo voeg je Open Graph-metadata toe aan je Joomla-artikelen :)
Veelgestelde Vragen / FAQ
Wat is het Open Graph-protocol?
Het Open Graph-protocol is een manier om websites in staat te stellen te bepalen welke inhoud wordt weergegeven wanneer de inhoud van hun website wordt gedeeld op Facebook, Twitter of andere platforms die Open Graph-vriendelijk zijn. Als uw website deze tags niet gebruikt, kan het platform beslissen welke afbeelding wordt weergegeven en zal het waarschijnlijk een niet-gerelateerde afbeelding weergeven.
Gebruikt Google Open Graph?
Nee Google gebruikt het Open Graph-protocol niet voor de resultatenpagina's van zoekmachines. In plaats daarvan gebruikt het Gestructureerde gegevens, een andere methode waarmee crawlers de inhoud op uw website beter kunnen begrijpen. Hoewel Google op zich geen OG-tags gebruikt, is het verkeer naar uw website een ranking-signaal, dus het zal uw organische rankings waarschijnlijk ten goede komen om een social-media-vriendelijke website te hebben.
Hoe stel je Open Graph-tags in Joomla in?
Om open graph-tags in Joomla in te stellen, kunt u een sjabloonoverschrijving gebruiken en de tags invullen vanuit de inhoud van uw artikelen, zoals we in het bovenstaande artikel hebben beschreven. Als alternatief kunt u een plug-in installeren die deze tags automatisch kan genereren op basis van uw website-inhoud.
Hoe controleer je Open Graph-tags?
Om Open Graph-tags te controleren, kunt u de Facebook Linter of Sharing Debugger gebruiken, of de Twitter-kaartvalidator gebruiken.
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
en nog veel meer ...