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.

Fonti preferite in AI Mode Fonti preferite in Notizie principali

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 sono disponibili queste funzionalità.

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 tornare alla tua pagina. Aggiungendo solo due righe al codice HTML, questa opzione esegue il rendering di un pulsante localizzato automaticamente e in stile Google che supporta la personalizzazione del dispositivo e della lingua.
  • Implementazione avanzata di JavaScript con asset di progettazione personalizzati: Se vuoi utilizzare i tuoi asset di progettazione e personalizzare il pulsante JavaScript standard, segui le istruzioni per l'implementazione avanzata di JavaScript. 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, se 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 su cui è possibile fare clic nelle 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 codice HTML, puoi aggiungere un pulsante interattivo tradotto automaticamente, che consente ai lettori di aggiungere facilmente il tuo sito come fonte preferita e 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:

Pulsante Aggiungi alle fonti preferite con JavaScript

Per incorporare il pulsante JavaScript nella tua pagina web:

  1. Aggiungi il seguente tag <script> alla tua pagina web (preferibilmente nell'elemento <head>), che carica la libreria Fonti preferite. 
    <script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
  2. 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 modificare il tema, aggiungi l'attributo dei dati data-theme al tuo elemento <div> e impostalo su light o dark: 

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

Esegui 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 eseguire l'override di questo comportamento, aggiungi l'attributo dei 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 di JavaScript avanzato con asset di design personalizzati

Per impostazione predefinita, il pulsante JavaScript standard analizza automaticamente il DOM alla ricerca di elementi con l'attributo google-add-preferred-source-btn e visualizza il badge standard. Tuttavia, per le integrazioni personalizzate in cui vuoi attivare il flusso dai tuoi elementi dell'interfaccia utente 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 dei tag di script standard, 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>

Quindi utilizza la coda di callback PREFERRED_SOURCE globale 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 origini preferite.

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>
 
<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 asset dei pulsanti