Lesern helfen, deine Website über bevorzugte Quellen in der Google Suche zu finden

Als Websiteinhaber kannst du dafür sorgen, dass deine Publikation in der Google Suche als bevorzugte Quelle angezeigt wird. Wenn ein Nutzer deine Website als bevorzugte Quelle auswählt, werden deine Inhalte eher im Bereich Schlagzeilen angezeigt und mit einem Badge als „bevorzugt“ gekennzeichnet. Im KI‑Modus und in Übersichten mit KI können deine Inhalte mit einem Badge als „bevorzugt“ hervorgehoben werden, wenn Nutzer deine Website als bevorzugte Quelle ausgewählt haben.

Bevorzugte Quellen im Bereich „Schlagzeilen“

Verfügbarkeit der Funktion

Die Funktion „Bevorzugte Quellen“ ist weltweit für die Funktion „Schlagzeilen“ in allen Sprachen verfügbar, in denen die Google Suche verfügbar ist. Bevorzugte Quellen können auch im KI‑Modus und in Übersichten mit KI in allen Sprachen und Gebieten erscheinen, in denen diese Funktionen verfügbar sind.

Nur Websites auf Domain- und Subdomainebene können im Tool für Quelleneinstellungen angezeigt werden. Beispiel: https://www.example.com/ und https://code.example.com/ sind für bevorzugte Quellen geeignet, das Unterverzeichnis https://www.example.com/blog jedoch nicht.

Nutzern helfen, deine Website als bevorzugte Quelle zu finden

Wenn deine Website im Tool für Quelleneinstellungen angezeigt wird (gib zur Prüfung deine Website in das Suchfeld des Tools ein), kannst du deine Leser auf folgende Weise dazu anregen, deine Website als bevorzugte Quelle auszuwählen:

Standardmäßige JavaScript-Implementierung (empfohlen): Bette einen interaktiven Button in deine Webseiten ein, über die Leser deine Website nahtlos als bevorzugte Quelle hinzufügen können und dann zu deiner Seite zurückgeleitet werden. Indem du deinem HTML-Code nur zwei Zeilen hinzufügst, wird mit dieser Option ein automatisch lokalisierter Button im Google-Stil gerendert, die die Anpassung von Geräten und Sprachen unterstützt.
Erweiterte JavaScript-Implementierung mit benutzerdefinierten Design-Assets: Wenn du deine eigenen Design-Assets verwenden und den standardmäßigen JavaScript-Button anpassen möchtest, folge der Anleitung für die erweiterte JavaScript-Implementierung. Der UI-Ablauf für Endnutzer bleibt derselbe wie bei der standardmäßigen JavaScript-Implementierung.
Deeplink-Implementierung: Wenn du den interaktiven Button nicht implementieren kannst, weil sie beispielsweise von deinem CMS nicht unterstützt wird, kannst du einen Deeplink verwenden, um Nutzer dazu zu bringen, deine Website als bevorzugte Quelle hinzuzufügen. Dazu kannst du einen Textlink oder ein anklickbares Bild auf deinen Webseiten einfügen. Du kannst den Deeplink auch in deinen Beiträgen in sozialen Medien, E‑Mail-Newslettern oder Werbeaktionen nutzen.

Standard-JavaScript-Implementierung (empfohlen)

Indem du deinem HTML-Code nur zwei Zeilen hinzufügst, kannst du einen automatisch übersetzten, interaktiven Button einfügen, mit dem Leser deine Website ganz einfach als bevorzugte Quelle hinzufügen und zu der Stelle auf deiner Seite zurückkehren können, an der sie aufgehört haben. Du kannst auch das Design des Buttons (dunkel oder hell) festlegen und die Sprache des Buttons überschreiben. Wir empfehlen diese Implementierung, da sie die für Leser nutzerfreundlichste ist.

Und so sieht es aus:

So bettest du den JavaScript-Button auf deiner Webseite ein:

Füge deiner Webseite das folgende <script>-Tag hinzu (vorzugsweise im <head>-Element), um die Bibliothek „Bevorzugte Quellen“ zu laden.
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
Füge das folgende <div>-Tag an einer beliebigen Stelle im Text deiner Webseite ein, an der der Button angezeigt werden soll.
```
<div google-add-preferred-source-btn></div>
```

Button-Design festlegen

Der Button „Zu bevorzugten Quellen hinzufügen“ wird standardmäßig in einem hellen Design angezeigt. Wenn du das Design anpassen möchtest, füge dem <div>-Element das Datenattribut data-theme hinzu und lege es auf light oder dark fest:

<div google-add-preferred-source-btn data-theme="dark"></div>

Sprache des Buttons überschreiben

Standardmäßig wird der Button „Zu bevorzugten Quellen hinzufügen“ in der Sprache des Nutzers angezeigt, die in seinen Browsereinstellungen festgelegt ist. Wenn du dieses Verhalten überschreiben möchtest, füge deinem <div>-Element das Datenattribut data-lang hinzu und lege es auf den gewünschten Sprachcode fest. Lade die Liste der unterstützten Sprachcodes herunter.

<div google-add-preferred-source-btn data-lang="en"></div>

Unterstützte Sprachcodes herunterladen

Erweiterte JavaScript-Implementierung mit benutzerdefinierten Design-Assets

Standardmäßig wird mit dem Standard-JavaScript-Button das DOM automatisch nach Elementen mit dem Attribut google-add-preferred-source-btn gescannt und das Standard-Badge gerendert. Bei benutzerdefinierten Integrationen, bei denen du den Ablauf über eigene UI-Elemente oder Anwendungsmeilensteine auslösen möchtest, kannst du den Client jedoch programmatisch initialisieren und den Ablauf an benutzerdefinierte Trigger binden.

Wenn du die Bibliothek „Bevorzugte Quellen“ in personalisierte Benutzeroberflächen, Anwendungsmeilensteine oder moderne Framework-Anwendungen einbindest, kannst du mit unserem JavaScript SDK die vollständige programmatische Kontrolle über Laufzeiteinstellungen und die Ablaufinitiierung übernehmen. Je nach Tools und Architektur bieten wir zwei verschiedene Integrationsansätze an: ES-Modulimporte (ESM) und Standard-Script-Callback-Warteschlangen (IIFE). Beide Bereitstellungsmodelle bieten identische Funktionen und Methoden.

ES-Modulimporte

Bei modernen Build-Konfigurationen und modulbasierten Umgebungen importierst du die Bibliothek direkt in deinen Code.

import { preferredSource } from
  "https://news.google.com/swg/js/v1/publisher.mjs";

// 1. Initialize directly using the imported module instance
preferredSource.init({
  theme: 'light', // Theme choice: "light" or "dark" (default "light")
  lang: 'en'      // Optional: override language (defaults to page language)
});

// 2. Programmatically bind flow invocation using a click handler
const button = document.querySelector('#myButton');
button.onclick = () => {
  preferredSource.addPreferredSource();
};

Standard-Script-Callback-Warteschlangen

Bei Standardintegrationen mit Script-Tag lädst du das folgende Skript im <head> deines Dokuments mit dem Attribut preferred-sources-control="manual", um zu verhindern, dass Buttons automatisch gerendert werden:

<script async preferred-sources-control="manual" src="https://news.google.com/swg/js/v1/publisher.js"></script>

Hinweis: Wenn das Attribut preferred-sources-control="manual" ausgelassen wird, werden alle Elemente mit dem Attribut google-add-preferred-source-btn gesucht und sofort initialisiert.

Nutze dann die globale Callback-Warteschlange PREFERRED_SOURCE, um Optionen zu initialisieren und benutzerdefinierte Trigger zu binden:

<script>
  (self.PREFERRED_SOURCE = self.PREFERRED_SOURCE || []).push(
    function(preferredSource) {
      // 1. Initialize with options
      preferredSource.init({
        theme: 'light',
        lang: 'en'
      });

      // 2. Programmatically bind trigger button
      const button = document.querySelector('#myButton');
      button.addEventListener('click', () => {
        preferredSource.addPreferredSource();
      });
  });
</script>

Interaktive Frontend- und Backend-Implementierungen, die die Live-Nutzung über Buttons, deklarative Container, IIFE-Skripts und ES-Modul-Bundles zeigen, findest du in der Demo zu bevorzugten Quellen.

Deeplink-Implementierung

Wenn du auf deiner Website kein JavaScript verwenden kannst, kannst du alternativ einen Deeplink verwenden, um deine Nutzer zum Tool für Quelleneinstellungen weiterzuleiten. Dort können sie deine Website als bevorzugte Quelle hinzufügen und ihre Auswahl bestätigen.

Verwende das folgende URL-Format und ersetze example.com durch den Domainnamen deiner Publikation. So werden Nutzer direkt zum Tool für Quelleneinstellungen auf deiner Website weitergeleitet:

https://www.google.com/preferences/source?q=Your_Website's_URL

Beispiel für einen Textlink

<a
  href="https://www.google.com/preferences/source?q=example.com">
  Add as Preferred Source
</a>

Beispiel für einen anklickbaren Bildlink

<a
  href="https://www.google.com/preferences/source?q=example.com">
  <img src="path/to/your/button.png" alt="Add as Preferred Source">
</a>

Button-Bild-Assets

Du kannst dein eigenes Werbe-Badge entwerfen oder offizielle übersetzte Grafikinhalte herunterladen, die von Google bereitgestellt werden:

Button-Assets herunterladen