Aidez vos lecteurs à trouver votre site parmi leurs sources préférées dans la recherche Google

Si vous êtes propriétaire d'un site Web, vous pouvez aider votre audience à trouver votre publication en tant que source préférée dans la recherche Google. Lorsqu'un utilisateur sélectionne votre site comme source préférée, il est plus susceptible de voir vos contenus dans la section À la une, mis en évidence par un badge "Préféré". Dans le Mode IA et les Aperçus IA, vos contenus peuvent être mis en avant avec un badge "Préféré" pour les utilisateurs qui ont sélectionné votre site comme source préférée.

Sources préférées dans le Mode IA Sources préférées dans la section "À la une"

Disponibilité de cette fonctionnalité

La fonctionnalité des sources préférées est disponible dans le monde entier pour la fonctionnalité À la une dans toutes les langues dans lesquelles la recherche Google est disponible. Les sources préférées peuvent également apparaître dans le Mode IA et les Aperçus IA dans toutes les langues où ces fonctionnalités sont disponibles.

Seuls les sites au niveau du domaine et du sous-domaine peuvent apparaître dans l'outil de préférences de sources. Par exemple, https://www.example.com/ et https://code.example.com/ sont éligibles aux sources préférées, contrairement au sous-répertoire https://www.example.com/blog.

Aider les utilisateurs à choisir votre site comme source préférée

Si votre site apparaît dans l'outil de préférences de sources (pour le vérifier, saisissez votre site dans le champ de recherche de l'outil), vous pouvez utiliser les méthodes suivantes pour inciter vos lecteurs à sélectionner votre site comme source préférée :

  • Implémentation JavaScript standard (recommandé) : intégrez un bouton interactif à vos pages Web pour permettre aux lecteurs d'ajouter facilement votre site en tant que source préférée et de revenir à votre page. En n'ajoutant que deux lignes à votre code HTML, cette option affiche un bouton de style Google automatiquement localisé qui prend en charge la personnalisation de l'appareil et de la langue.
  • Implémentation JavaScript avancée avec des éléments de conception personnalisés : si vous souhaitez utiliser vos propres éléments de conception et personnaliser le bouton JavaScript standard, suivez les instructions sur l'implémentation avancée de JavaScript. Le flux d'UI de l'utilisateur final reste le même que pour l'implémentation JavaScript standard.
  • Implémentation de liens profonds : si vous ne pouvez pas implémenter le bouton interactif (par exemple, si votre CMS ne le prend pas en charge), vous pouvez utiliser un lien profond pour rediriger les utilisateurs vers l'ajout de votre site en tant que source préférée. Pour ce faire, vous pouvez ajouter un lien textuel ou une image cliquable sur vos pages Web. Vous pouvez également utiliser le lien profond dans vos posts sur les réseaux sociaux, vos newsletters ou vos promotions.

Implémentation JavaScript standard (recommandée)

En n'ajoutant que deux lignes à votre code HTML, vous pouvez ajouter un bouton interactif traduit automatiquement, qui permet aux lecteurs d'ajouter facilement votre site comme source préférée et de revenir sur votre page. Vous pouvez également définir le thème du bouton (sombre ou clair) et remplacer la langue du bouton. Nous vous recommandons cette implémentation, car elle offre la meilleure expérience utilisateur aux lecteurs.

Voici à quoi cela ressemblera :

Bouton "Ajouter aux sources préférées" avec JavaScript

Pour intégrer le bouton JavaScript à votre page Web, procédez comme suit :

  1. Ajoutez la balise <script> suivante à votre page Web (de préférence dans l'élément <head>), qui charge la bibliothèque Sources préférées. 
    <script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
  2. Ajoutez la balise <div> suivante à l'endroit où vous souhaitez que le bouton apparaisse dans le corps de votre page Web. 
    <div google-add-preferred-source-btn></div>

Définir le thème du bouton

Par défaut, le bouton "Ajouter aux sources préférées" s'affiche avec un thème clair. Pour modifier le thème, ajoutez l'attribut de données data-theme à votre élément <div> et définissez-le sur light ou dark : 

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

Changer la langue du bouton

Par défaut, le bouton "Ajouter aux sources préférées" s'affiche dans la langue que l'utilisateur a défini dans les paramètres du navigateur. Pour ignorer ce comportement, ajoutez l'attribut de données data-lang à votre élément <div> et définissez-le sur le code de langue de votre choix (liste des codes de langue compatibles) : 

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

Télécharger les codes de langue compatibles

Implémentation JavaScript avancée avec des éléments de conception personnalisés

Par défaut, le bouton JavaScript standard analyse automatiquement le DOM pour trouver les éléments avec l'attribut google-add-preferred-source-btn et affiche le badge standard. Toutefois, pour les intégrations personnalisées dans lesquelles vous souhaitez déclencher le flux à partir de vos propres éléments d'interface utilisateur ou jalons d'application, vous pouvez initialiser le client de manière programmatique et lier le flux à des déclencheurs personnalisés.

Lorsque vous intégrez la bibliothèque Sources préférées dans des interfaces utilisateur personnalisées, des jalons d'application ou des applications de framework modernes, vous pouvez contrôler entièrement les paramètres d'exécution et le lancement du flux de façon programmatique à l'aide de notre SDK JavaScript. Nous proposons deux approches d'intégration distinctes en fonction de vos outils et de votre architecture : les importations de modules ES (ESM) et les files d'attente de rappels de script standards (IIFE). Les deux modèles de distribution proposent des capacités et des méthodes identiques.

Importations de modules ES

Pour les configurations de compilation modernes et les environnements basés sur des modules, importez la bibliothèque directement dans votre 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();
};

Files d'attente de rappels de script standards

Pour les intégrations de tags de script standards, chargez le script suivant dans le <head> de votre document avec l'attribut preferred-sources-control="manual" pour empêcher l'affichage automatique du bouton : 

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

Utilisez ensuite la file d'attente de rappels PREFERRED_SOURCE globale pour initialiser les options et associer les déclencheurs personnalisés : 

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

Pour des implémentations interactives de l'interface et du backend illustrant l'utilisation en direct de boutons, de conteneurs déclaratifs, de scripts IIFE et de bundles de modules ES, consultez la démo des sources préférées.

Si vous ne pouvez pas utiliser JavaScript sur votre site Web, vous pouvez utiliser un lien profond pour rediriger vos utilisateurs vers l'outil de préférences de sources, où ils peuvent ajouter votre site comme source préférée et confirmer leur sélection.

Utilisez le format d'URL suivant en remplaçant example.com par le nom de domaine de votre publication, qui redirige les utilisateurs directement vers votre site dans l'outil de préférences de sources : 

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

Exemple de lien textuel

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

Composants d'image de bouton

Vous pouvez créer votre propre badge promotionnel personnalisé ou télécharger les assets graphiques officiels traduits fournis par Google :

Télécharger les assets de bouton