Αλλαγή της thumbnail εικόνας όταν κοινοποιώ την ιστοσελίδα μου στα social media

Έχω έρθει αρκετές φορές αντιμέτωπος με την εξής απορία, από ιστοσελίδες φίλων.

” Όταν κοινοποιώ τον σύνδεσμο της ιστοσελίδας μου στα κοινωνικά δίκτυα (Facebook, Viber κτλ), η εικόνα thumbnail που δημιουργείται είναι μία τυχαία που δεν εκπροσωπεί την ιδέα του site μου – της συγκεκριμένης σελίδας”.

Γιατί υπάρχει αυτό το πρόβλημα;

Τα κοινωνικά δίκτυα αναζητούν να αλιεύσουν μία εικόνα του site για να την προβάλουν, αντί να είναι απλώς ένα link. Αυτή η εικόνα, συνήθως, είναι η πρώτη που συναντάει o “μηχανισμός ανάγνωσης” που έχουν τα social για τις ιστοσελίδες. Έτσι, μπορεί να είναι στην καλύτερη περίπτωση το λογότυπο, ή εικόνες από κάποιο slider ή κάποιο άρθρο. Υπάρχει περίπτωση αυτή η εικόνα να είναι ένα τυχαίο εικονίδιο, και το αποτέλεσμα σίγουρα δεν θα μας ικανοποιεί.

Πώς θα δηλώσω συγκεκριμένη εικόνα για thumbnail της ιστοσελίδας μου;

Ένας πολύ απλός τρόπος είναι να εγκαταστήσεις κάποιο SEO plugin (που άλλωστε θα είναι χρήσιμο γενικότερα για την ιστοσελίδα), όπως το Yoast SEO ή το Rank Math SEO, τα οποία στις ρυθμίσεις τους έχουν ειδικό πεδίο για ακριβώς αυτό τον σκοπό.
Διαφορετικά η λύση θα έρθει με τον παρακάτω κώδικα.

Κώδικας

Αυτό που χρειάζεται να γίνει για custom λύση είναι να δηλώσεις τα απαραίτητα <meta> tags πριν το </header>. Συγκεκριμένα με την βοήθεια του WordPress Filter ‘wp_head‘, θα συμπληρώσεις στο functions.php τον παρακάτω κώδικα.

Δες σχετικά, αν δεν θέλεις να πειράξεις το functions.php.

function custom_thumbnail_img_meta_header() {
	if(is_front_page()){ $img = 'https://_____img_url_____.png'; ?>

            <meta property="og:image" content="<?php echo $img; ?>" />
            <meta name="twitter:image" content="<?php echo $img; ?>" />

  <?php }
}
add_action( 'wp_head', 'custom_thumbnail_img_meta_header' );

Αυτό που κάνει είναι να προσθέσει τα απαραίτητα <meta> tags όταν κοινοποιούμε την αρχική σελίδα (διαφορετικά αν το θες για όλες τις σελίδες σβήνεις το if statement).

Χρειάζεται να αλλάξεις το url του $img, για να δείχνει την επιθυμητή εικόνα.

Επιπρόσθετα <meta> tags που μπορείς να προσθέσεις για ένα πιο ολοκληρωμένο αποτέλεσμα, σύμφωνα με το Open Graph protocol, είναι τα παρακάτω:

    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="200">
    <meta property="og:image:height" content="200">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://url_of_site.gr/"/>
    <meta property="og:title" content="Site title" />
    <meta property="og:description" content="Site description" />