Google Preferred Sources: How to Add Custom Buttons With JavaScript

Quick answer: Google gives publishers three ways to add a Preferred Source option: a standard JavaScript button, an advanced JavaScript implementation for custom UI, and a deeplink. The advanced option lets publishers trigger the same flow from their own buttons or website components. 

For publishers, this matters because Preferred Sources can make their content more visible to users who have selected the site in Google Search, including eligible experiences such as Top Stories, AI Overviews, and AI Mode. However, the implementation itself is not a ranking factor or an SEO shortcut.

What Is Google Preferred Sources?

Google Preferred Sources is a personalization feature that lets users tell Google which publishers they want to see more often.

When someone selects a website as a Preferred Source, that publisher’s content can receive a preferred badge and be surfaced more prominently for that user in places such as Top Stories. Google also says Preferred Sources can appear in AI Overviews and AI Mode where those experiences are available.

This is important to understand: Preferred Sources is primarily a user preference feature, not a publisher ranking program.

Example: Imagine someone regularly reads a technology publication and wants to see more of its reporting. They can select that publication as a Preferred Source. Google can then use that preference when presenting relevant content to that person.

Google currently says the feature is available globally for Top Stories, while its availability in AI Mode and AI Overviews depends on those experiences being available in the relevant language or locale.

What Did Google Change?

The Preferred Sources feature itself is not entirely new. What is new for publishers is Google’s expanded guidance on how they can integrate the feature into their own websites.

Google’s August 20 documentation explains three implementation options:

• Standard JavaScript implementation: Google’s recommended option with an automatically localized, Google-styled button. 
• Advanced JavaScript implementation: Lets publishers use their own design and programmatically trigger the Preferred Sources flow. 
• Deeplink implementation: Provides a direct link to Google’s source preferences tool when JavaScript cannot be used.

The advanced option is the most interesting change for developers and publishers with custom website experiences.

Instead of placing Google’s standard badge wherever it fits, a publisher can connect the Preferred Sources action to an existing button, component, or application milestone.

In other words, the user flow stays the same, but publishers get more control over how that flow is triggered.

How the Google Preferred Sources JavaScript Implementation Works

Google’s advanced implementation provides two approaches: ES Module imports (ESM) and standard script callback queues (IIFE). Both expose the same capabilities.

1. Load Google’s Publisher Module

The first step is to connect your website to Google’s Preferred Sources functionality. Google provides a JavaScript module that contains the code needed to use the feature.

You can import the preferredSource object directly:

import { preferredSource } from

  “https://news.google.com/swg/js/v1/publisher.mjs”;

This approach makes sense for websites already using module-based JavaScript or modern frontend frameworks, the same kind of setup many publishers already rely on for structured data on their pages.

If your site uses a traditional script setup, Google also provides the publisher.js implementation with a manual control option. For the standard button, use:

<script async src=”https://news.google.com/swg/js/v1/publisher.js”></script>

2. Initialize the Preferred Sources Client

After loading the module, you initialize the Preferred Sources client.

For example:

preferredSource.init({

  theme: ‘light’,

  lang: ‘en’

});

The theme controls whether the interface uses a light or dark presentation, while lang can override the page’s language setting.

Google’s standard implementation automatically handles language based on the user’s browser settings, but the advanced implementation gives developers more direct control over these settings.

3. Trigger addPreferredSource()

This is where the advanced implementation becomes useful.

Instead of relying on Google’s automatically rendered button, you can connect the action to your own button:

const button = document.querySelector(‘#myButton’);

button.onclick = () => {

  preferredSource.addPreferredSource();

};

Now your existing website element can trigger the Preferred Sources flow.

For example, a publisher might have a branded “Follow this publication on Google” area within its article template. The button can use the Preferred Sources functionality while remaining part of the site’s existing interface.

4. Connect It to Your Own UI

The biggest advantage is flexibility. A publisher does not have to redesign its page around Google’s default badge. The action can be connected to an existing component, custom button, or another application milestone.

This can be particularly useful for:

• News websites with custom article templates
• Publisher membership experiences
• Modern JavaScript applications
• Custom frontend frameworks
• Websites with strict design systems

Google specifically describes the advanced implementation as useful for custom user interfaces, application milestones, and modern framework applications; the same setups are worth a quick technical SEO check while you’re in the code. 

Google Preferred Sources: Standard vs. Advanced JavaScript vs. DeepLink

The standard JavaScript option is Google’s recommended approach because it requires only a small implementation and provides an automatically localized button that returns readers to the page they were viewing.

The advanced option is better when the website already has a custom interface and developers need programmatic control.

The deeplink is the simplest fallback. It can also be useful in places where JavaScript cannot run, including social posts or email promotions. Use this pattern:

https://google.com/preferences/source?q=yourdomain.com

Note: Replace yourdomain.com with your actual domain.

Does Google Preferred Sources Improve SEO?

Not directly. Google does not say that adding the Preferred Sources button improves organic rankings. In fact, Google explicitly says publishers do not need to implement any of these methods to appear as a Preferred Source.

Important eligibility note: Only domains that appear in Google’s source preferences tool (google.com/preferences/source) are eligible to prompt users. If your domain doesn’t show up there, the button won’t enable for your site. 

The important distinction is between eligibility and user preference.

Adding the button does not make a site eligible. It gives existing readers a convenient way to select the site as a Preferred Source.

So think of it as an audience and visibility feature, not a ranking tactic.

For SEO teams, it’s not about whether this increases their rankings; it’s more about whether this helps their existing audience choose their publication as a preferred source.

That is a much more realistic expectation.

What Does Preferred Sources Mean for AI Search?

This is where the feature becomes especially interesting for publishers.

Google says selected Preferred Sources can be highlighted with a preferred badge in AI Overviews and AI Mode.

That means a user’s source preference can influence how Google’s AI search experiences present content from publishers they have chosen.

However, this should not be confused with a guarantee of AI citations.

A Preferred Source selection does not mean every article will appear in an AI Overview or AI Mode response. Relevance, content quality, search context, and Google’s broader systems still matter.

For publishers, the bigger opportunity is building a strong relationship with readers who already value their content, which circles back to writing content AI search engines are more likely to quote in the first place. 

That fits an important shift in AI search: visibility is increasingly about being a source users recognize and trust, not simply ranking for a keyword.

Best Practices for Implementing Preferred Sources

1. Make the CTA easy to find. Place it where readers who already value your content are likely to notice it, such as near article engagement elements. 
2. Don’t disguise what the button does. Tell readers clearly that the action adds your publication as a Preferred Source in Google. 
3. Keep the interaction consistent with the rest of the site. A custom implementation should feel like part of your website, not a disconnected widget. 
4. Test the implementation across devices. Check mobile and desktop layouts, different browsers, and different language settings where relevant. 
5. Don’t present Preferred Sources as a ranking hack. It is a user preference mechanism, not a guaranteed way to improve rankings. 
6. Monitor whether users actually engage with it. Treat the button as an audience-development feature, similar to how you’d track any E-E-A-T signal that builds reader trust over time. 

Conclusion

Google Preferred Sources gives publishers another way to build a direct relationship with readers inside Google’s search ecosystem.

The important update is not simply the existence of a new button. Google now provides publishers with more flexibility in how they integrate that functionality into their websites.

For most sites, the standard JavaScript implementation is the easiest choice. Publishers with custom interfaces or modern web applications may benefit more from the advanced JavaScript implementation, while the deeplink remains a practical option when JavaScript is unavailable.

The SEO takeaway is equally important: don’t treat Preferred Sources as a ranking shortcut. Its value is in helping interested readers signal that they want to see your publication more often. Something we keep coming back to in our own work at Crawl Vision when clients ask whether a new Google feature is worth the dev time. 

And as Google continues bringing publisher preferences into AI Overviews and AI Mode, that audience signal is becoming increasingly relevant to the future of search visibility.