Blog
Πως Να Προσθεσετε το Κουμπι Preferred Sources της Google στην Ιστοσελιδα σας
- September 3, 2026
- Posted by: Δρ Αντώνιος Μιχαήλ
- Category: SEO & Google Search
Μάθε πώς να προσθέσεις το κουμπί Preferred Sources της Google σε έναν ιστότοπο, δες τη διαφορά ανάμεσα σε embed και deeplink, και φτιάξε ένα WordPress widget με light ή dark theme.
Το νέο Preferred Sources embed της Google αφαιρεί ένα βήμα από τη διαδικασία προσθήκης μιας δημοσίευσης ως Preferred Source.
Με το embed, ο αναγνώστης προσθέτει τον ιστότοπο και επιστρέφει αμέσως στο άρθρο. Ένα deeplink στέλνει τον αναγνώστη στο εργαλείο προτιμήσεων πηγών της Google, όπου ο ιστότοπος πρέπει και πάλι να επιλεγεί και να επιβεβαιωθεί.
Αυτός ο απλός οδηγός δείχνει πώς να προσθέσεις το κουμπί στον ιστότοπό σου και δίνει έτοιμο κώδικα για WordPress widget που μπορείς να χρησιμοποιήσεις κατευθείαν.
Τι Κάνει Το Preferred Sources Feature Της Google
Το Preferred Sources επηρεάζει το τι βλέπει ένας συγκεκριμένος χρήστης της Google αφού επιλέξει τη δημοσίευσή σου. Δεν βελτιώνει τη θέση του site σου στα αποτελέσματα για όλους τους χρήστες, ούτε εγγυάται ότι τα άρθρα σου θα εμφανίζονται στα Top Stories.
Σύμφωνα με την επίσημη τεκμηρίωση της Google, το feature είναι διαθέσιμο παγκοσμίως για τα Top Stories, σε όλες τις γλώσσες όπου λειτουργεί η Google Search. Οι preferred πηγές μπορούν επίσης να αναδειχθούν στα AI Overviews και στο AI Mode, εκεί όπου αυτές οι εμπειρίες είναι διαθέσιμες.
Έλεγξε Την Επιλεξιμότητα Πριν Προσθέσεις Το Κουμπί
Πρώτα, αναζήτησε τη δημοσίευσή σου στο εργαλείο προτιμήσεων πηγών της Google. Αν δεν εμφανίζεται εκεί, η προσθήκη του κουμπιού δεν θα λύσει το θέμα της επιλεξιμότητας.
Η Google υποστηρίζει domains και subdomains, όχι όμως subdirectories. Αυτοί οι στόχοι είναι έγκυροι:
example.comnews.example.com
Αυτός δεν είναι έγκυρος στόχος:
example.com/blog
Αν η δημοσίευση βρίσκεται σε subdomain, χρησιμοποίησε αυτό ακριβώς το host και μην υποθέσεις ότι το root domain είναι εναλλάξιμο με αυτό.
Πρόσθεσε Το Standard Preferred Sources Button
Η Google προτείνει τη standard υλοποίηση σε JavaScript, γιατί μεταφράζεται αυτόματα ανάλογα με τη γλώσσα του χρήστη και επαναφέρει τον αναγνώστη στη σελίδα από την οποία ξεκίνησε.
Standard Button Vs. Deeplink: Τι Παρατήρησα
Δοκίμασα και τις δύο επιλογές σε mobile. Με το ενσωματωμένο (embedded) κουμπί, η Google ανοίγει μια σελίδα επιβεβαίωσης ειδική για τη συγκεκριμένη δημοσίευση. Η πηγή είναι ήδη αναγνωρισμένη, ο αναγνώστης πατάει Add, και η Google τον επαναφέρει στο άρθρο. Μετά το αρχικό κλικ στον ιστότοπό σου, όλη η διαδικασία είναι single-action.
Το deeplink είναι διαφορετικό. Ανοίγει τη γενική οθόνη Source preferences με τη δημοσίευση ήδη συμπληρωμένη στην αναζήτηση, αλλά ο αναγνώστης πρέπει και πάλι να επιλέξει το checkbox της δημοσίευσης. Επιπλέον, η Google δεν τον επαναφέρει αυτόματα στο άρθρο. Στην πράξη, το embed αφαιρεί ένα επιπλέον βήμα, οπότε δημιουργεί λιγότερο friction.
Γι' αυτό τον λόγο, αν είναι εφικτό, θα χρησιμοποιούσα το standard button σε έναν ιστότοπο. Το deeplink έχει ακόμα νόημα σε email, social posts, ή σε ένα CMS όπου δεν μπορεί να προστεθεί το script.
Φόρτωσε τη βιβλιοθήκη μία φορά από το application shell, το theme, ή ένα μικρό plugin του site, κατά προτίμηση μέσα στο <head> του εγγράφου:
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
Στη συνέχεια τοποθέτησε το container του κουμπιού εκεί όπου θέλεις να εμφανίζεται το control:
<div google-add-preferred-source-btn></div>
Η βιβλιοθήκη εντοπίζει το attribute και κάνει render το interface. Δεν χρειάζεται να βάλεις hard-coded το domain της δημοσίευσης στο standard button.
Διάλεξε Light Ή Dark Theme
Το light theme είναι το προεπιλεγμένο (default). Για σκούρο φόντο, πρόσθεσε το attribute data-theme:
<div google-add-preferred-source-btn data-theme="dark"></div>
Άλλαξε Τη Γλώσσα Μόνο Όταν Χρειάζεται
Το κουμπί χρησιμοποιεί από προεπιλογή τη γλώσσα του browser του αναγνώστη. Αν μια σελίδα απαιτεί συγκεκριμένη υποστηριζόμενη γλώσσα, πρόσθεσε το data-lang:
<div google-add-preferred-source-btn data-lang="en"></div>
Χρησιμοποίησε Το Deeplink Όταν Δεν Μπορείς Να Προσθέσεις JavaScript
Το deeplink είναι ένας απλός σύνδεσμος, οπότε μπορείς να τον προσθέσεις μέσα από οποιοδήποτε CMS ή HTML editor. Λειτουργεί χωρίς JavaScript.
https://www.google.com/preferences/source?q=example.com
Μπορείς να τον προσθέσεις ως έναν απλό σύνδεσμο:
<p>
<a href="https://www.google.com/preferences/source?q=example.com">
Add Example as a Preferred Source
</a>
</p>
Το ίδιο URL μπορεί να χρησιμοποιηθεί μέσα σε περιεχόμενο σελίδας, email, social posts, ή προωθητικές ενέργειες.
Πρόσθεσε Το Κουμπί Στο WordPress
Αυτό το παράδειγμα δημιουργεί ένα WordPress widget που μπορεί να προστεθεί σε οποιαδήποτε widget area, όπως το sidebar ενός άρθρου ή το footer. Οι ρυθμίσεις του widget επιτρέπουν στον editor να επιλέξει Light ή Dark χρωματικό θέμα της Google και να στοιχίσει το κουμπί αριστερά, στο κέντρο, ή δεξιά.
Πρόσθεσε τον κώδικα σε ένα μικρό custom plugin ή στο functions.php ενός child theme:
class Site_Preferred_Sources_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'site_preferred_sources',
'Google Preferred Sources',
array( 'description' => 'Displays the Google Preferred Sources button.' )
);
}
private function get_alignment( $value ) {
return in_array( $value, array( 'left', 'center', 'right' ), true )
? $value
: 'center';
}
public function widget( $args, $instance ) {
$theme = isset( $instance['theme'] ) && 'dark' === $instance['theme']
? 'dark'
: 'light';
$alignment = $this->get_alignment(
isset( $instance['alignment'] ) ? $instance['alignment'] : 'center'
);
$justify_content = array(
'left' => 'flex-start',
'center' => 'center',
'right' => 'flex-end',
);
echo $args['before_widget'];
echo '<div style="display:flex;width:100%;justify-content:'
. esc_attr( $justify_content[ $alignment ] )
. ';">';
echo '<div google-add-preferred-source-btn';
if ( 'dark' === $theme ) {
echo ' data-theme="dark"';
}
echo '></div>';
echo '</div>';
echo $args['after_widget'];
}
public function form( $instance ) {
$theme = isset( $instance['theme'] ) && 'dark' === $instance['theme']
? 'dark'
: 'light';
$alignment = $this->get_alignment(
isset( $instance['alignment'] ) ? $instance['alignment'] : 'center'
);
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'theme' ) ); ?>">
<?php esc_html_e( 'Color theme' ); ?>
</label>
<select
class="widefat"
id="<?php echo esc_attr( $this->get_field_id( 'theme' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'theme' ) ); ?>"
>
<option value="light" <?php selected( $theme, 'light' ); ?>>Light</option>
<option value="dark" <?php selected( $theme, 'dark' ); ?>>Dark</option>
</select>
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'alignment' ) ); ?>">
<?php esc_html_e( 'Alignment' ); ?>
</label>
<select
class="widefat"
id="<?php echo esc_attr( $this->get_field_id( 'alignment' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'alignment' ) ); ?>"
>
<option value="left" <?php selected( $alignment, 'left' ); ?>>Left</option>
<option value="center" <?php selected( $alignment, 'center' ); ?>>Center</option>
<option value="right" <?php selected( $alignment, 'right' ); ?>>Right</option>
</select>
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['theme'] = isset( $new_instance['theme'] )
&& 'dark' === $new_instance['theme']
? 'dark'
: 'light';
$instance['alignment'] = $this->get_alignment(
isset( $new_instance['alignment'] )
? sanitize_key( $new_instance['alignment'] )
: 'center'
);
return $instance;
}
}
function site_register_preferred_sources_widget() {
register_widget( 'Site_Preferred_Sources_Widget' );
}
add_action( 'widgets_init', 'site_register_preferred_sources_widget' );
function site_preferred_sources_widget_script() {
if ( ! is_active_widget( false, false, 'site_preferred_sources', true ) ) {
return;
}
wp_enqueue_script(
'google-preferred-sources',
'https://news.google.com/swg/js/v1/publisher.js',
array(),
null,
array(
'strategy' => 'async',
'in_footer' => true,
)
);
$tracking_script = <<<'JS'
(function () {
if ( window.__preferredSourceButtonTrackingBound ) {
return;
}
window.__preferredSourceButtonTrackingBound = true;
function isPreferredSourceClick( event ) {
var path = typeof event.composedPath === 'function'
? event.composedPath()
: [];
for ( var i = 0; i < path.length; i += 1 ) {
var node = path[i];
if (
node
&& node.nodeType === 1
&& typeof node.hasAttribute === 'function'
&& node.hasAttribute( 'google-add-preferred-source-btn' )
) {
return true;
}
}
return Boolean(
event.target
&& typeof event.target.closest === 'function'
&& event.target.closest( '[google-add-preferred-source-btn]' )
);
}
function hasGoogleTagManager() {
if ( ! window.google_tag_manager ) {
return false;
}
return Object.keys( window.google_tag_manager ).some( function ( key ) {
return key.indexOf( 'GTM-' ) === 0;
} );
}
document.addEventListener( 'click', function ( event ) {
if ( ! isPreferredSourceClick( event ) ) {
return;
}
if ( hasGoogleTagManager() && Array.isArray( window.dataLayer ) ) {
window.dataLayer.push( { event: 'preferred_source_button_click' } );
return;
}
if ( typeof window.gtag === 'function' ) {
window.gtag( 'event', 'preferred_source_button_click' );
}
}, true );
}());
JS;
wp_add_inline_script(
'google-preferred-sources',
$tracking_script,
'after'
);
}
add_action( 'wp_enqueue_scripts', 'site_preferred_sources_widget_script' );
Αφού προσθέσεις τον κώδικα, πήγαινε στο Appearance > Widgets, πρόσθεσε το Google Preferred Sources στο sidebar ή στο footer, και μετά επίλεξε το χρωματικό θέμα και τη στοίχιση. Το WordPress φορτώνει τη βιβλιοθήκη μία φορά, ακόμα κι αν το widget χρησιμοποιείται σε περισσότερες από μία widget areas.
Παρακολούθησε Τα Κλικ Στο Κουμπί Preferred Sources Στο GA4
Το widget χρησιμοποιεί έναν delegated click listener, γιατί η Google κάνει render το badge αφού έχει ήδη φορτώσει η σελίδα. Καταγράφει ένα κλικ που ξεκινάει τη διαδικασία Preferred Sources, δεν επιβεβαιώνει όμως ότι ο αναγνώστης ολοκλήρωσε την επιλογή μέσα στο περιβάλλον της Google.
Αν υπάρχει container Google Tag Manager, ο listener στέλνει ένα event στο default dataLayer:
window.dataLayer.push( { event: 'preferred_source_button_click' } );
Μέσα στο GTM, δημιούργησε ένα Custom Event trigger με όνομα preferred_source_button_click. Χρησιμοποίησέ το για να ενεργοποιήσεις ένα GA4 Event tag με το ίδιο όνομα event.
Αν δεν εντοπιστεί GTM αλλά υπάρχει εγκατεστημένο το gtag.js, ο listener χρησιμοποιεί αντ' αυτού την εντολή event του gtag.js:
window.gtag( 'event', 'preferred_source_button_click' );
Χρησιμοποίησε το GTM Preview ή το GA4 DebugView για να επιβεβαιώσεις το event μία φορά πριν δημοσιεύσεις την αλλαγή. Μπορείς επίσης να χρησιμοποιήσεις αυτό το event ως KPI στο SEO reporting σου.
Συνοπτικά
Το Preferred Sources δεν είναι απευθείας ranking factor, μπορεί όμως να αυξήσει την επαναλαμβανόμενη προβολή ανάμεσα σε αναγνώστες που επιλέγουν ρητά τη δημοσίευσή σου. Αυτό δίνει στους publishers έναν πρακτικό τρόπο να χτίσουν ένα κοινό που επιστρέφει, στα Top Stories και, όπου είναι διαθέσιμο, στα AI Overviews και στο AI Mode.
Το SEO όφελος δεν είναι μια καθολική ώθηση στη θέση κατάταξης. Είναι η ευκαιρία να κερδίσεις μεγαλύτερη προβολή στους αναγνώστες που ήδη εκτιμούν τη δουλειά σου.