Aiuta i lettori a trovare il tuo sito tramite le fonti preferite nella Ricerca Google

Se sei il proprietario di un sito web, puoi aiutare il tuo pubblico a trovare la tua pubblicazione come fonte preferita nella Ricerca Google. Quando un utente seleziona il tuo sito come fonte preferita, è più probabile che i tuoi contenuti vengano visualizzati nella sezione "Notizie principali", evidenziati con un badge "preferita". In AI Mode e AI Overview, i tuoi contenuti possono essere evidenziati con un badge "preferita" per gli utenti che hanno selezionato il tuo sito come fonte preferita.

Disponibilità della funzionalità

La funzionalità delle fonti preferite è disponibile a livello globale per la funzionalità "Notizie principali" in tutte le lingue supportate dalla Ricerca Google. Le fonti preferite possono essere visualizzate anche in AI Mode e AI Overview in tutte le lingue e le impostazioni internazionali in cui queste funzionalità sono disponibili.

Solo i siti a livello di dominio e di sottodominio sono idonei a essere visualizzati nello strumento delle preferenze delle fonti. Ad esempio, https://www.example.com/ e https://code.example.com/ sono idonei per le fonti preferite, ma la sottodirectory https://www.example.com/blog non lo è.

Come aiutare gli utenti a trovare il tuo sito come fonte preferita

Se il tuo sito viene visualizzato nello strumento Preferenze fonti (per verificare, inserisci il tuo sito nella casella di ricerca dello strumento), puoi utilizzare i seguenti metodi per guidare i tuoi lettori a selezionare il tuo sito come fonte preferita:

Implementazione JavaScript standard (consigliata): incorpora un pulsante interattivo nelle tue pagine web, che consente ai lettori di aggiungere facilmente il tuo sito come fonte preferita e di tornare alla tua pagina. Aggiungendo solo due righe al tuo codice HTML, questa opzione fa il rendering di un pulsante con stile Google localizzato automaticamente che supporta la personalizzazione del dispositivo e della lingua.
Implementazione JavaScript avanzata con asset di design personalizzati: se vuoi utilizzare i tuoi asset di design e personalizzare il pulsante JavaScript standard, segui le istruzioni per l'implementazione JavaScript avanzata. Il flusso dell'interfaccia utente per l'utente finale rimane lo stesso dell'implementazione JavaScript standard.
Implementazione del deep link: se non puoi implementare il pulsante interattivo (ad esempio, il tuo CMS non lo supporta), puoi utilizzare un deep link per indirizzare gli utenti ad aggiungere il tuo sito come fonte preferita. Puoi farlo aggiungendo un link di testo o un'immagine cliccabile alle tue pagine web. Puoi anche utilizzare il deep link nei tuoi post sui social, nelle newsletter via email o nelle promozioni.

Implementazione JavaScript standard (consigliata)

Aggiungendo solo due righe al tuo codice HTML, puoi aggiungere un pulsante interattivo tradotto automaticamente, che consente ai lettori di aggiungere facilmente il tuo sito come fonte preferita e di tornare al punto in cui avevano interrotto la lettura della pagina. Puoi anche impostare il tema del pulsante (scuro o chiaro), oltre a sostituire la lingua del pulsante. Consigliamo questa implementazione perché offre la migliore esperienza utente ai lettori.

Ecco come sarà visualizzato l'URL:

Per incorporare il pulsante JavaScript nella tua pagina web:

Aggiungi il seguente tag <script> alla tua pagina web (preferibilmente nell'elemento <head>), che carica la libreria delle fonti preferite.
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
Aggiungi il seguente tag <div> in qualsiasi punto del corpo della pagina web in cui vuoi che venga visualizzato il pulsante.
```
<div google-add-preferred-source-btn></div>
```

Imposta il tema del pulsante

Per impostazione predefinita, il pulsante "Aggiungi alle fonti preferite" viene visualizzato con un tema chiaro. Per regolare il tema, aggiungi l'attributo dati data-theme al tuo elemento <div> e impostalo su light o dark:

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

Fai l'override della lingua del pulsante

Per impostazione predefinita, il pulsante "Aggiungi alle fonti preferite" viene visualizzato nella lingua dell'utente in base alle impostazioni del browser. Per fare l'override di questo comportamento, aggiungi l'attributo dati data-lang al tuo elemento <div> e impostalo sul codice lingua che preferisci (scarica l'elenco dei codici lingua supportati):

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

Scarica i codici lingua supportati

Implementazione JavaScript avanzata con asset di design personalizzati

Per impostazione predefinita, il pulsante JavaScript standard analizza automaticamente il DOM per trovare gli elementi con l'attributo google-add-preferred-source-btn e fa il rendering del badge standard. Tuttavia, per le integrazioni personalizzate in cui vuoi attivare il flusso dai tuoi elementi UI o dai traguardi dell'applicazione, puoi inizializzare il client in modo programmatico e associare il flusso ad attivatori personalizzati.

Quando integri la libreria Preferred Sources in interfacce utente personalizzate, in traguardi dell'applicazione o in applicazioni framework moderne, puoi assumere il pieno controllo programmatico delle impostazioni di runtime e dell'avvio del flusso utilizzando il nostro SDK JavaScript. Forniamo due approcci di integrazione distinti a seconda dei tuoi strumenti e della tua architettura: importazioni di moduli ES (ESM) e code di callback di script standard (IIFE). Entrambi i modelli di distribuzione espongono funzionalità e metodi identici.

Importazioni di moduli ES

Per configurazioni di build moderne e ambienti basati su moduli, importa la libreria direttamente nel codice.

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();
};

Code di callback degli script standard

Per le integrazioni standard dei tag di script, carica il seguente script nell'elemento <head> del documento con l'attributo preferred-sources-control="manual" per impedire il rendering automatico del pulsante:

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

Nota: se l'attributo preferred-sources-control="manual" viene omesso, verranno cercati e inizializzati immediatamente tutti gli elementi con l'attributo google-add-preferred-source-btn.

Poi utilizza la coda di callback globale PREFERRED_SOURCE per inizializzare le opzioni e associare gli attivatori personalizzati:

<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>

Per implementazioni frontend e backend interattive che mostrano l'utilizzo in tempo reale in pulsanti, contenitori dichiarativi, script IIFE e bundle di moduli ES, esplora la demo delle fonti preferite.

Implementazione dei deep link

Se non puoi utilizzare JavaScript sul tuo sito web, puoi utilizzare un deep link per indirizzare gli utenti allo strumento Preferenze fonti, dove possono aggiungere il tuo sito come fonte preferita e confermare la selezione.

Utilizza il seguente formato dell'URL e sostituisci example.com con il nome di dominio della tua pubblicazione, che indirizza gli utenti direttamente al tuo sito nello strumento Preferenze fonti:

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

Esempio di link di testo

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

Esempio di link immagine cliccabile

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

Asset immagine pulsante

Puoi progettare il tuo badge promozionale personalizzato o scaricare gli asset grafici ufficiali tradotti forniti da Google:

Scarica gli asset dei pulsanti