Insluitingen van sociale media toevoegen aan artikelen in WordPress

0
58

Als je een link naar je WordPress-artikel hebt gestuurd en het is niet uitgevouwen om de afbeelding, titel en beschrijving weer te geven, dat komt omdat u uw Open Graph-metatags niet in WordPress hebt ingesteld. We laten u zien hoe u ze kunt configureren om uw aanwezigheid op sociale media te verbeteren.

Wat zijn Open Graph-metatags?

De configuratie voor het insluiten van sociale media gebeurt via een standaardindeling, oorspronkelijk gemaakt op Facebook, genaamd “the Open Graph Protocol.”

Kortom, ze zien er als volgt uit <meta&gt ; HTML-tags, meestal in de koptekst van uw site:

<meta property=”og:image” content=”https://i.imgur.com/imagelink.jpg”> <meta property=”og:title” content=”Websitetitel” /> <meta property=”og:description” content=”Websitebeschrijving” /> <meta property=”og:type” content=”article” /> <meta property=”og:url” content=”https://example.com/” />

Hoewel dit zou werken voor een gewone website, kunt u dit echter niet zomaar in uw WordPress HTML plakken. Dit komt omdat WordPress een content management systeem (CMS) is en het de titel, beschrijving en afbeelding moet invullen, afhankelijk van het artikel dat je hebt gelinkt.

Er zijn twee manieren om dit te doen — handmatig, met enkele bewerkingen in uw PHP-bestanden, of automatisch met een plug-in. Minder afhankelijkheden van plug-ins is altijd beter, dus we raden aan om het handmatig toe te voegen als je technisch onderlegd bent.

Advertentie

Maar als je dat niet bent, of gedeelde hosting gebruikt en geen toegang hebt tot uw systeembestanden, er is niets mis met het configureren met een plug-in.

Handmatig tags toevoegen aan PHP

PHP wordt gebruikt om het HTML-bestand automatisch te genereren wanneer een gebruiker hierom vraagt. De PHP-code die wordt gebruikt om de header te genereren, is afhankelijk van het thema dat u gebruikt. Het bevindt zich technisch gezien in header.php, maar dit roept een functie aan met de naam wp_head(), dus het is beter om daar een nieuwe actie aan toe te voegen in functions.php, hier te vinden:

wordpress/wp-content/themes/theme/functions.php

Als je niet vertrouwd bent met teksteditors, kun je een plug-in installeren met de naam Head, Footer en Post Injections waarmee je code kunt toevoegen via de plug-in-instellingen, hoewel je waarschijnlijk gewoon de onderstaande plug-in moet gebruiken als je’ voeg toch plug-ins toe.

Anders kunt u een opdrachtregeleditor zoals nano of micro gebruiken, of u kunt dit bestand naar uw bureaublad overbrengen om het te bewerken. Hoe dan ook, open dit in uw teksteditor naar keuze en scrol naar beneden:

Plak vervolgens de volgende functie:

functie fb_opengraph() { global $post;   if(is_single()) { if(has_post_thumbnail($post->ID)) { $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID), 'medium'); } else { $img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg'; } if($uittreksel = $post->post_uittreksel) { $uittreksel = strip_tags($post->post_uittreksel); $uittreksel = str_replace("", "'", $uittreksel); } else { $excerpt = get_bloginfo('description'); } ?>   <meta-eigenschap="og:title" content="<?php echo the_title(); ?>"/> <meta property="og:description" content="<?php echo $uittreksel; ?>"/> <meta-eigenschap="og:type" content="artikel"/> <meta-eigenschap="og:url" content="<?php echo the_permalink(); ?>"/> <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/> <meta property="og:image" content="<?php echo $img_src; ?>"/>   <?php } anders { opbrengst; } } add_action('wp_head', 'fb_opengraph', 5);

In wezen controleert dit of de pagina een enkele post of een hoofdpagina is, en configureert de beschrijving en afbeelding dienovereenkomstig. Houd er rekening mee dat /img/opengraph_image.jpg voor niet-artikelpagina's wordt gebruikt, dus u moet daar iets plaatsen.

Vervolgens voegt het alle OG-metatags toe, met behulp van de gegevens die de pagina momenteel gebruikt. Dit zou onmiddellijk van kracht moeten worden, hoewel u mogelijk moet wachten tot de caches zijn vernieuwd.

Een plug-in gebruiken

Dit configureren met een plug-in is eenvoudiger. U zult willen zoeken naar “Open Graph en Twitter Card Tags,” en installeer het:

Activeer het en ga naar de instellingen :

Advertentie

Er is geen veel om hier te configureren, omdat het allemaal automatisch wordt ingesteld, maar je kunt aangepaste tekst opgeven voor de startpagina en standaardbeschrijvingen, en een standaardafbeelding uploaden voor niet-postpagina's.

U zou de wijzigingen moeten zien werken onmiddellijk nadat u op toepassen hebt gedrukt.

Enkele andere grotere plug-ins, zoals YoastSEO, zullen ook metatags configureren, maar deze plug-in doet dit eenvoudig zonder extra bulk.