Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

2. The preferred-source button

What this is

Google lets a reader mark your site as a source they prefer. Once they do, your pages carry a badge in Top Stories — and in AI Overviews and AI Mode. The lever is two lines of HTML, and most sites do not have them.

Why this matters for auditlodge.com

The button is already on auditlodge.com. What follows is the same markup, so any new template or new page you build carries it too — and so you can check the one thing that is easy to get wrong: the library line belongs in <head>.

What we found on auditlodge.com

Paste the script line in <head> and the div where the button should appear; it renders in the reader’s own language automatically. Checked 1 page: https://auditlodge.com/

  • the button is already on this page
  • their doc says load the script preferably in <head>

Pages read for this check: https://auditlodge.com/.

NOT CHECKED - Google decides eligibility algorithmically and there is no way to apply. Whether this domain appears in the picker can only be seen in Google’s own picker, by a person.

Step 1 — Add the library line to <head>

This goes in the <head> of every page of auditlodge.com:

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

Step 2 — Put the button where a reader will see it

This line renders the button itself. Put it where you want it to appear — near the top of an article works, a footer does not:

<div google-add-preferred-source-btn></div>

Step 3 — Keep a plain link as the fallback

If a page of auditlodge.com cannot run scripts, this ordinary link does the same job for auditlodge.com:

<a href="https://www.google.com/preferences/source?q=auditlodge.com">Add auditlodge.com as a preferred source</a>

In the words of the company that published this

Google: “Embed an interactive button to your web pages, which lets readers seamlessly add your site as a preferred source and returns them to your page. By adding only two lines to your HTML, this option renders an automatically localized, Google-styled button that supports device and language customization.”

Their page: developers.google.com/search/docs/appearance/preferred-sources

How to check you did it right

  • Load https://auditlodge.com/ and look for the button where you put it.
  • Open the fallback link on its own — it should land on Google’s preferred-source page naming auditlodge.com.
  • View source and confirm the library line is inside <head> and not somewhere in the body.

What it looks like when it is working

  • A reader on auditlodge.com can add you in one press, and auditlodge.com carries the badge for them afterwards.
  • NOT CHECKED - Google decides eligibility algorithmically and there is no way to apply. Whether this domain appears in the picker can only be seen in Google’s own picker, by a person.

In two lines

  • The button is already on auditlodge.com. What follows is the same markup, so any new template or new page you build carries it too — and so you can check the one thing that is easy to get wrong: the library line belongs in <head>.
  • First add the library line to <head>, then put the button where a reader will see it, then keep a plain link as the fallback.

The words in plain English

  • <head> — the hidden top part of a web page’s code, where settings and tags live - visitors never see it, machines read it first.
  • AI Overviews and AI Mode — Google’s own AI answers, shown above or instead of the usual results; Top Stories is its news strip.
  • preferred source — a site a reader has told Google they trust; Google then favours it in that reader’s results and AI answers.

The finished file is in your pack at packs/02-preferred-sources/preferred-sources-button.html.