How To Add Google’s Preferred Sources Button To Your Website via @sejournal, @vahandev
All Paid Media PPC News Social MediaAdvertising Video Advertising Columns Ask A PPC ExpertNEW PPC Pulse Webinar ChatGPT Ads Or GEO: What To Buy, What To Earn Audit where ChatGPT places your brand, then get the rule for when Ads win, when GEO wins, and when running both beats either one. Digital Marketing All Digital Marketing Analytics & Data Ecommerce Lead Generation Content Marketing Social Platforms Google YouTube Reddit LinkedIn TikTokNEW WordPress Other CMS Platforms Webinar ChatGPT Ads Or GEO: What To Buy, What To Earn Audit where ChatGPT places your brand, then get the rule for when Ads win, when GEO wins, and when running both beats either one. SEJ Live Webinars Rundowns PodcastNEW Ebooks All Resources Webinar Where AI Gets Its Answers In Your Industry Google rankings don't show which sources AI cites. Get the breakdown by engine and industry, plus the steps to earn a place in it. SEJ STAFF Vahan Petrosyan 6 hours ago ⋅ 9 min read SEJ STAFF Vahan Petrosyan Director of Technology at Search Engine Journal Bio Follow Google’s new Preferred Sources embed removes one action from the process of adding a publication as a Preferred Source. With the embed, a reader adds the site and returns to the article. A deeplink sends the reader to Google’s source preferences tool, where the site still has to be selected and confirmed. This simple guide shows how to add the button to your website and provides WordPress widget code you can use. Preferred Sources affects what an individual Google user sees after selecting your publication. It does not improve your site’s rankings for everyone or guarantee that your articles will appear in Top Stories. According to Google’s documentation, it is available globally for Top Stories in the languages where Google Search is available. Preferred sources can also be highlighted in AI Overviews and AI Mode where those experiences are available. See also: Google’s Liz Reid: Personalization Can Help Small Publishers First, search for your publication in Google’s source preferences tool. If it does not appear there, adding the button will not solve the eligibility issue. Google supports domains and subdomains, but not subdirectories. These are valid targets: If the publication lives on a subdomain, use that host rather than assuming the root domain is interchangeable. Google recommends its standard JavaScript implementation because it is localized automatically and returns the reader to the page where they started. I tested both routes on mobile. With the embedded button, Google opens a publication-specific confirmation page. The source is already identified, the reader taps Add, and Google returns them to the article. After the initial click on your website, it is a single-action flow. The deeplink is different. It opens the general Source preferences screen with the publication search filled in, but the reader still has to select the publication’s checkbox. Google also does not automatically return them to the article. In practice, the embed removes one extra action, so it creates less friction. The deeplink opens the general Source preferences page, where the reader still needs to select the publication. This is why I would use the standard button on a website if it is possible. The deeplink still makes sense in email, social posts, or a CMS where the script cannot be added. Load the library once from the application shell, theme, or a small site plugin, preferably in the document’s <head>: <script async src="https://news.google.com/swg/js/v1/publisher.js"></script> Then place the button container where you want the control to appear: <div google-add-preferred-source-btn></div> The library detects the attribute and renders the interface. You do not need to hard-code the publication’s domain in the standard button. The light theme is the default. For a dark background, add the data-theme attribute: <div google-add-preferred-source-btn data-theme="dark"></div> Google’s Preferred Sources button in the default light theme. (Image from author, August 2026) Google’s Preferred Sources button with the dark theme enabled. (Image from author, August 2026) The button uses the reader’s browser language by default. If a page requires a specific supported language, add data-lang: <div google-add-preferred-source-btn data-lang="en"></div> Use The Deeplink When You Cannot Add JavaScript The deeplink is an ordinary link, so you can add it through any CMS or HTML editor. It works without JavaScript. https://www.google.com/preferences/source?q=example.com You can add it as an ordinary link: <p> <a href="https://www.google.com/preferences/source?q=example.com"> Add Example as a Preferred Source </a> </p> The same URL can be used in page content, email, social posts, or promotions. This example creates a WordPress widget that can be added to any widget area, such as an article sidebar or footer. The widget settings let an editor select Google’s Light or Dark color theme and align the button left, center, or right. Add the code to a small custom plugin or a child theme’s functions.php file: 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' ); After adding the code, open Appearance > Widgets, add Google Preferred Sources to the sidebar or footer, then choose the color theme and alignment. WordPress loads the library once even if the widget is used in more than one widget area. The widget uses one delegated click listener because Google renders the badge after the page loads. It records a click that starts the Preferred Sources flow; it does not confirm that the reader completed the selection in Google. If a Google Tag Manager container is present, the listener pushes one event 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 fire a GA4 Event tag with the same event name. If GTM is not detected but gtag.js is installed, the listener uses Google’s gtag.js event command instead: window.gtag( 'event', 'preferred_source_button_click' ); Use GTM Preview or GA4 DebugView to confirm the event once before publishing the change. You can also use this event as a KPI in your SEO reporting.
Source: Search Engine Journal
This article has been carefully curated and reformatted for educational and informational purposes. Full credit goes to the original publisher.
📚 Visit more helpful articles on Joab Peters Blog
No comments