For Astro publishers

Become the source Google remembers.

Add Google's preferred sources button to an Astro site with one integration. Give readers a clear way to choose your publication, then show up more often when they search.

npx astro add @puralex/astro-google-preferred-source

Try it live

Astro: 4 through 7
Locales: 51 supported
Setup: 1 command

Preferred source signal

A small button with recurring reach.

Use Google's native flow, or deeplink with the official translated badge assets.

latest local election results

From your sources: Magnifito NewsReader preference turns into visible placement in future searches.

Top StoriesThe sites readers choose can appear more often for them.

Why it matters

Search traffic is easier to keep when readers choose you.

Preferred sources turn a passing visit into an audience signal. The integration keeps the implementation small while the call to action stays visible and trustworthy.

2×

More clicks

Google reports that readers click through to a site twice as much on average once they pick it as a preferred source.

Top

Stories visibility

Preferred sources can get boosted placement in Top Stories and a dedicated results section.

Long

Durable loyalty

A reader's choice persists, so every future search is another chance to surface first.

One

Component

Script injection, theming, localization, and client APIs stay inside the Astro package.

Strategy & UX

Where to place the button for highest conversion.

Preferred sources turn casual visitors into loyal repeat readers. Use these proven placement patterns to maximize opt-ins while maintaining a premium editorial design.

🔥 Highest Conversion

1. End of Article / Post

Why it works: Peak intent. When a reader reaches the end of your story, their trust and satisfaction with your reporting are at their absolute highest.

your-site.com/articles/state-of-search

📍OPTIMAL PLACEMENT ZONE (100% READ)

Enjoyed this investigation?Follow on Google Search

View code snippet▼

<article class="story">
  <h1>Your Article Title</h1>
  <p>Article content...</p>
  
  <!-- Place right at the conclusion before comments/related stories -->
  <aside class="story-footer-optin">
    <h3>Never miss our next story</h3>
    <GooglePreferredSourceDeeplink
      url="your-site.com"
      variant="pill"
      label="Follow on Google Search"
    />
  </aside>
</article>

👁️ Maximum Visibility

2. Header / Top Navigation

Why it works: Zero-scroll presence. Visible on every page visit without scrolling, right alongside search, theme toggles, and social icons.

your-site.com

View code snippet▼

<header class="site-header">
  <Logo />
  <nav class="nav-links">
    <a href="/news">News</a>
    <GooglePreferredSourceDeeplink
      url="your-site.com"
      variant="outline"
      size="sm"
      label="Follow"
    />
  </nav>
</header>

⚡ High Engagement

3. Scroll-Triggered Floating Pill

Why it works: Catches actively engaged readers as they scroll past 50% of an article, offering an unobtrusive floating reminder.

your-site.com/deep-dive (60% scrolled)

📍FLOATING DOCK (50%+ SCROLL)

Enjoying this story?Add to Google

View code snippet▼

<!-- Sticky bottom dock or scroll-triggered toast -->
<div class="floating-reader-dock">
  <span class="indicator">🟢</span>
  <span>Enjoying this story?</span>
  <GooglePreferredSourceDeeplink
    url="your-site.com"
    variant="pill"
    size="sm"
    label="Add to Google"
  />
</div>

✍️ Personal Trust

4. Author Bio / Columnist Card

Why it works: Connects author credibility directly with publication loyalty for opinion columns, newsletters, and beat reporting.

your-site.com/opinion/alex-kirov

OPINION & ANALYSIS

The Future of Preferred Web Discovery

📍AUTHOR TRUST LOCKUP

Alex KirovSenior Tech Columnist

Follow Publication

View code snippet▼

<div class="author-card">
  <img src={author.avatar} alt={author.name} />
  <div>
    <h4>{author.name}</h4>
    <p>{author.bio}</p>
  </div>
  <GooglePreferredSourceDeeplink
    url="your-site.com"
    variant="minimal"
    size="sm"
    label="Follow Publication"
  />
</div>

📬 Off-Site Reach

5. Email Newsletters & Social Bios

Why it works: Email clients block JavaScript. The deeplink generates a direct URL that triggers Google preference confirmation in 1 click.

📬 Mail Client — Weekly Digest #42

View code snippet▼

<!-- Inside email templates or Linktree/social bio -->
<div class="email-footer">
  <p>Read our stories first in Google Search:</p>
  <GooglePreferredSourceDeeplink
    url="your-site.com"
    variant="button"
    label="Add us as a Preferred Source →"
  />
</div>

How it works

Live on your site in three deliberate steps.

Use the standard button by default. Move to the advanced client API only when your product needs a custom trigger.

Install

One command adds the integration and registers it in your Astro config.

npx astro add @puralex/astro-google-preferred-source

Render the button

Place it in a layout, article footer, or reader-facing membership area.

<GooglePreferredSourceButton
  theme="light"
  lang="en"
/>

Let readers opt in

Visitors confirm in their Google preferences and start seeing more of your work.

// no manual script tags

Check eligibility first: only domain-level and subdomain-level sites can be preferred sources. Subdirectories like example.com/blog are not eligible. Test your site in the source preferences tool.

Try it live

Language and theme playground.

Google localizes the native button into 51 languages. Pick a locale, switch themes, and inspect the rendered result.

LanguageTheme

The button text is localized by Google. Selecting a language sets data-lang; theme sets data-theme. Google's script scans the page once at load, so the preview re-renders inside an isolated frame on every change.

Reference

Standard mode, advanced mode, and deeplinks.

The common path is intentionally short. The rest is here for custom product surfaces, no-JavaScript links, and official asset embedding.

Standard button

Add the integration to astro.config.mjs, then render the component anywhere readers will see it.

The button only renders for sites that appear in Google's source preferences tool.

// astro.config.mjs
import googlePreferredSource from '@puralex/astro-google-preferred-source';

export default defineConfig({
  integrations: [googlePreferredSource()],
});

---
import GooglePreferredSourceButton from '@puralex/astro-google-preferred-source/components/GooglePreferredSourceButton.astro';
---

<GooglePreferredSourceButton theme="light" lang="en" />

Advanced custom trigger

Use this when your interface needs its own button design, placement, or product copy.

To use a custom trigger, set mode: 'advanced' in your Astro config and call addPreferredSource() from your own UI.

---
// Use mode: 'advanced' in astro.config.mjs
---

<button id="preferred-source-btn">Add as preferred source</button>

<script>
  import { init, addPreferredSource } from '@puralex/astro-google-preferred-source/client';

  init({ theme: 'dark', lang: 'en' });

  document
    .getElementById('preferred-source-btn')
    ?.addEventListener('click', () => addPreferredSource());
</script>

Deeplinks & Badges

Zero-JavaScript deeplinks with built-in official Google badges, retina 2x resolution, and automatic localization.

Supports custom themes (light/dark), locale codes (en, ko, ja, etc.), standalone badge components, and custom slot styling.

---
import GooglePreferredSourceDeeplink from '@puralex/astro-google-preferred-source/components/GooglePreferredSourceDeeplink.astro';
---

<GooglePreferredSourceDeeplink
  url="magnifito.github.io"
  lang="ko"
  theme="light"
/>

Google에서 선호하는 출처로 추가

<!-- Or with standalone badge component -->
import GooglePreferredSourceBadge from '@puralex/astro-google-preferred-source/components/GooglePreferredSourceBadge.astro';

<button class="custom-btn">
  <GooglePreferredSourceBadge lang="en" theme="dark" />
</button>

Interactive showcase

From standard badges to exotic integrations.

Explore production-ready examples ranging from clean minimal badges and frosted-glass toasts to 3D holographic cards and cyberpunk terminal HUDs.

Modern Stadium Pill

variant="pill"

Crisp vector Google 'G' icon with arbitrary text and smooth hover elevation.

Follow on Google

<GooglePreferredSourceDeeplink
  url="your-site.com"
  variant="pill"
  label="Follow on Google"
  theme="light"
/>

Dark Solid Button

variant="button"

Dark mode rectangular button with rounded corners and arbitrary localized text.

선호하는 출처로 추가

<GooglePreferredSourceDeeplink
  url="your-site.com"
  variant="button"
  label="선호하는 출처로 추가"
  theme="dark"
/>

Outline / Ghost Pill

variant="outline"

Transparent background that inherits any surface with a Google-blue hover accent.

Add as Preferred Source

<GooglePreferredSourceDeeplink
  url="your-site.com"
  variant="outline"
  label="Add as Preferred Source"
/>

Google Gradient Glow

variant="glow"

Integrated 4-color Google gradient border with glowing aura on hover.

Follow on Google Search

<GooglePreferredSourceDeeplink
  url="your-site.com"
  variant="glow"
  label="Follow on Google Search"
  theme="dark"
/>

Vector Badge Card

variant="badge"

Card-style container with scalable vector SVG icon and razor-sharp typography.

Add as a preferred source on Google

<GooglePreferredSourceDeeplink
  url="your-site.com"
  variant="badge"
  label="Add as a preferred source on Google"
/>

Minimal Inline Chip

variant="minimal"

Ultra-compact micro-button for author bylines, header bars, or breadcrumbs.

Follow Source

<GooglePreferredSourceDeeplink
  url="your-site.com"
  variant="minimal"
  size="sm"
  label="Follow Source"
/>

Google Gradient Card

Popular

Card with radiant Google gradient background and vector pill button.

Never miss a top storyFollow on Google

<div class="google-aura-card">
  <div class="aura-glow"></div>
  <div class="aura-content">
    <span>Never miss a top story</span>
    <GooglePreferredSourceDeeplink
      url="your-site.com"
      variant="pill"
      label="Follow on Google"
    />
  </div>
</div>

Frosted Glass Reader Banner

Glassmorphism

Backdrop-filtered floating notification banner with live reader status.

Reading on Magnifito?

Add to Google

<div class="glass-toast">
  <div class="toast-meta">
    <span class="toast-dot"></span>
    <strong>Reading on Magnifito?</strong>
  </div>
  <GooglePreferredSourceDeeplink
    url="your-site.com"
    variant="outline"
    size="sm"
    label="Add to Google"
  />
</div>

Editorial Publisher Callout

Editorial

Refined serif journalism layout with author attribution and button trigger.

"Independent journalism powered by our readership."

<div class="editorial-box">
  <p>"Independent journalism powered by readers."</p>
  <div class="editorial-footer">
    <span>MAGNIFITO EDITORIAL</span>
    <GooglePreferredSourceDeeplink
      url="your-site.com"
      variant="pill"
      size="sm"
      label="Preferred Source"
    />
  </div>
</div>

Cyberpunk Terminal HUD

Exotic

Monospace cyber deck with CRT scanlines, neon glowing borders, and live telemetry status.

> LINK_PROTOCOL: ESTABLISHED

INITIATE_PREF_SOURCE →

<div class="cyber-terminal">
  <div class="cyber-body">
    <code>&gt; LINK_PROTOCOL: ACTIVE</code>
    <GooglePreferredSourceDeeplink url="your-site.com" variant="raw" class="cyber-btn">
      <GoogleIcon size={18} />
      <span>INITIATE_PREF_SOURCE →</span>
    </GooglePreferredSourceDeeplink>
  </div>
</div>

3D Holographic Foil Card

3D Motion

Interactive 3D tilt perspective with iridescent specular shimmer on cursor hover.

✦GOOGLE SEARCH SIGNAL

선호하는 출처로 등록

<div class="holo-card">
  <div class="holo-foil"></div>
  <div class="holo-inner">
    <span>✦ GOOGLE SEARCH SIGNAL</span>
    <GooglePreferredSourceDeeplink
      url="your-site.com"
      variant="pill"
      label="선호하는 출처로 등록"
    />
  </div>
</div>

Sticky Floating Reader FAB

Interactive

Floating action pill for fixed viewports with pulse micro-animation.

Follow on Google

<div class="floating-fab-container">
  <div class="fab-pulse"></div>
  <GooglePreferredSourceDeeplink
    url="your-site.com"
    variant="pill"
    label="Follow on Google"
    theme="dark"
    class="fab-pill"
  />
</div>

Official assets

Translated badges ready to embed.

Light and dark variants are included for every official asset language. Open a card to copy the matching deeplink markup.

Danish

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="da"
  theme="light"
/>

German

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="de"
  theme="light"
/>

English

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="en"
  theme="light"
/>

Spanish

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="es"
  theme="light"
/>

Estonian

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="et"
  theme="light"
/>

French

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="fr"
  theme="light"
/>

Hindi

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="hi"
  theme="light"
/>

Hebrew

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="iw"
  theme="light"
/>

Japanese

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="ja"
  theme="light"
/>

Korean

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="ko"
  theme="light"
/>

Norwegian (Bokmal)

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="no"
  theme="light"
/>

Portuguese (Brazil)

PT-BR

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="pt-BR"
  theme="light"
/>

Russian

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="ru"
  theme="light"
/>

Swedish

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="sv"
  theme="light"
/>

Turkish

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="tr"
  theme="light"
/>

Ukrainian

Embed code

<GooglePreferredSourceDeeplink
  url="your-site.com"
  lang="uk"
  theme="light"
/>

Let your LLM do it

Using an AI coding assistant? Copy this prompt and paste it into your agent. It will install the integration and wire up the button.

Set up Google preferred sources in this Astro project using the @puralex/astro-google-preferred-source integration:

1. Run: npx astro add @puralex/astro-google-preferred-source
2. Import GooglePreferredSourceButton from '@puralex/astro-google-preferred-source/components/GooglePreferredSourceButton.astro' in the main layout and render it in the header or footer so it appears on every page.
3. The integration supports a standard mode (Google-rendered button, default) and an advanced mode (mode: 'advanced', custom trigger via the client API). Use standard unless I ask otherwise.
4. Remind me to check site eligibility at https://www.google.com/preferences/source — only domain-level and subdomain-level sites qualify.

Docs: https://magnifito.github.io/astro-google-preferred-source/

Give loyal readers a direct signal.

One command, one Astro component, and your publication can ask to become a preferred source at the moment readers are paying attention.

npx astro add @puralex/astro-google-preferred-source

Star on GitHub View on npm

Resources

Useful links for rollout.

Check eligibility, read Google's implementation notes, and verify supported languages before launching.

Become the source Google remembers.

A small button with recurring reach.

Search traffic is easier to keep when readers choose you.

More clicks

Stories visibility

Durable loyalty

Component

Where to place the button for highest conversion.

1. End of Article / Post

2. Header / Top Navigation

3. Scroll-Triggered Floating Pill

4. Author Bio / Columnist Card

5. Email Newsletters & Social Bios

Publisher Placement Rule of Thumb

Live on your site in three deliberate steps.

Install

Render the button

Let readers opt in

Language and theme playground.

Standard mode, advanced mode, and deeplinks.

Standard button

Advanced custom trigger

Deeplinks & Badges

From standard badges to exotic integrations.

Modern Stadium Pill

Dark Solid Button

Outline / Ghost Pill

Google Gradient Glow

Vector Badge Card

Minimal Inline Chip

Google Gradient Card

Frosted Glass Reader Banner

Editorial Publisher Callout

Cyberpunk Terminal HUD

3D Holographic Foil Card

Sticky Floating Reader FAB

Translated badges ready to embed.

Danish

German

English

Spanish

Estonian

French

Hindi

Hebrew

Japanese

Korean

Norwegian (Bokmal)

Portuguese (Brazil)

Russian

Swedish

Turkish

Ukrainian

Let your LLM do it

Give loyal readers a direct signal.

Useful links for rollout.