Google’s caller Preferred Sources embed removes 1 action from the process of adding a publication arsenic a Preferred Source.
With the embed, a scholar adds the tract and returns to the article. A deeplink sends the scholar to Google’s root preferences tool, wherever the tract still has to beryllium selected and confirmed.
This elemental guideline shows really to adhd the fastener to your website and provides WordPress widget codification you tin use.
What Google’s Preferred Sources Feature Does
Preferred Sources affects what an individual Google personification sees aft selecting your publication. It does not amended your site’s rankings for everyone aliases guarantee that your articles will look successful Top Stories.
According to Google’s documentation, it is disposable globally for Top Stories successful the languages wherever Google Search is available. Preferred sources tin besides beryllium highlighted successful AI Overviews and AI Mode wherever those experiences are available.
See also: Google’s Liz Reid: Personalization Can Help Small Publishers
Check Eligibility Before You Add The Button
First, hunt for your publication successful Google’s source preferences tool. If it does not look there, adding the fastener will not lick the eligibility issue.
Google supports domains and subdomains, but not subdirectories. These are valid targets:
- example.com
- news.example.com
This is not a valid target:
- example.com/blog
If the publication lives connected a subdomain, usage that big alternatively than assuming the guidelines domain is interchangeable.
Add The Standard Preferred Sources Button
Google recommends its modular JavaScript implementation because it is localized automatically and returns the scholar to the page wherever they started.
Standard Button Vs. Deeplink: What I Observed
I tested some routes connected mobile. With the embedded button, Google opens a publication-specific confirmation page. The root is already identified, the scholar taps Add, and Google returns them to the article. After the first click connected your website, it is simply a single-action flow.
The embed fastener opens a publication-specific page wherever the scholar only needs to pat Add. (Image from author, August 2026)The deeplink is different. It opens the wide Source preferences surface pinch the publication hunt filled in, but the scholar still has to prime the publication’s checkbox. Google besides does not automatically return them to the article. In practice, the embed removes 1 other action, truthful it creates little friction.
Image from author, August 2026The deeplink opens the wide Source preferences page, wherever the scholar still needs to prime the publication.
This is why I would usage the modular fastener connected a website if it is possible. The deeplink still makes consciousness successful email, societal posts, aliases a CMS wherever the book cannot beryllium added.
Load the room erstwhile from the exertion shell, theme, aliases a mini tract plugin, preferably successful the document’s <head>:
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>Then spot the fastener instrumentality wherever you want the power to appear:
The room detects the property and renders the interface. You do not request to hard-code the publication’s domain successful the modular button.
Choose A Light Or Dark Theme
The ray taxable is the default. For a acheronian background, adhd the data-theme attribute:
<div google-add-preferred-source-btn data-theme="dark"></div>
Google’s Preferred Sources fastener successful the default ray theme. (Image from author, August 2026)
Google’s Preferred Sources fastener pinch the acheronian taxable enabled. (Image from author, August 2026)
Override The Language Only When Necessary
The fastener uses the reader’s browser connection by default. If a page requires a circumstantial supported language, adhd data-lang:
<div google-add-preferred-source-btn data-lang="en"></div>Use The Deeplink When You Cannot Add JavaScript
The deeplink is an mean link, truthful you tin adhd it done immoderate CMS aliases HTML editor. It useful without JavaScript.
You tin adhd it arsenic an mean link:
<p> <a href="https://www.google.com/preferences/source?q=example.com"> Add Example arsenic a Preferred Source </a> </p>The aforesaid URL tin beryllium utilized successful page content, email, societal posts, aliases promotions.
Add The Button To WordPress
This illustration creates a WordPress widget that tin beryllium added to immoderate widget area, specified arsenic an article sidebar aliases footer. The widget settings fto an editor prime Google’s Light aliases Dark colour taxable and align the fastener left, center, aliases right.
Add the codification to a mini civilization plugin aliases a kid theme’s functions.php file:
class Site_Preferred_Sources_Widget extends WP_Widget { nationalist usability __construct() { parent::__construct( 'site_preferred_sources', 'Google Preferred Sources', array( 'description' => 'Displays the Google Preferred Sources button.' ) ); } backstage usability get_alignment( $value ) { return in_array( $value, array( 'left', 'center', 'right' ), existent ) ? $value : 'center'; } nationalist usability 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']; } nationalist usability 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 } nationalist usability 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', existent ) ) { 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; usability isPreferredSourceClick( arena ) { var way = typeof event.composedPath === 'function' ? event.composedPath() : []; for ( var one = 0; one < path.length; one += 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]' ) ); } usability hasGoogleTagManager() { if ( ! window.google_tag_manager ) { return false; } return Object.keys( window.google_tag_manager ).some( usability ( cardinal ) { return key.indexOf( 'GTM-' ) === 0; } ); } document.addEventListener( 'click', usability ( arena ) { if ( ! isPreferredSourceClick( arena ) ) { 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' ); } }, existent ); }()); JS; wp_add_inline_script( 'google-preferred-sources', $tracking_script, 'after' ); } add_action( 'wp_enqueue_scripts', 'site_preferred_sources_widget_script' );After adding the code, unfastened Appearance > Widgets, adhd Google Preferred Sources to the sidebar aliases footer, past take the colour taxable and alignment. WordPress loads the room erstwhile moreover if the widget is utilized successful much than 1 widget area.
Track Preferred Sources Button Clicks In GA4
The widget uses 1 delegated click listener because Google renders the badge aft the page loads. It records a click that starts the Preferred Sources flow; it does not corroborate that the scholar completed the action successful Google.
If a Google Tag Manager instrumentality is present, the listener pushes 1 arena to the default dataLayer:
window.dataLayer.push( { event: 'preferred_source_button_click' } );In GTM, create a Custom Event trigger named preferred_source_button_click. Use it to occurrence a GA4 Event tag pinch the aforesaid arena name.
If GTM is not detected but gtag.js is installed, the listener uses Google’s gtag.js arena command instead:
window.gtag( 'event', 'preferred_source_button_click' );Use GTM Preview aliases GA4 DebugView to corroborate the arena erstwhile earlier publishing the change. You tin besides usage this arena arsenic a KPI successful your SEO reporting.
In Summary
Preferred Sources is not a nonstop ranking factor, but it tin summation repetition visibility among readers who explicitly take your publication. That gives publishers a applicable measurement to build a returning assemblage successful Top Stories and, wherever available, AI Overviews and AI Mode.
The SEO use is not a cosmopolitan ranking boost. It is the chance to gain much visibility pinch the readers who already worth your work.
More Resources:
- Preferred Sources & AI Mode Are Creating Filter Bubbles – A New Discovery Problem
- Google Preferred Sources Hit 345K, Expand Into AI Search
- Google’s Preferred Sources Is Now A Global SEO Signal
Featured Image: Vahan Petrosyan/MCP
English (US) · 
Indonesian (ID) · 
