Pomóż czytelnikom znaleźć Twoją witrynę dzięki preferowanym źródłom w wyszukiwarce Google

Jeśli jesteś właścicielem witryny, możesz pomóc odbiorcom znaleźć Twoją publikację jako preferowane źródło w wyszukiwarce Google. Gdy użytkownik wybierze Twoją witrynę jako preferowane źródło, Twoje treści będą częściej wyświetlać się w sekcji „Najważniejsze artykuły” i będą wyróżnione plakietką „Preferowane”. W Trybie AI i przeglądach od AI Twoje treści mogą być wyróżnione plakietką „preferowane” dla użytkowników, którzy wybrali Twoją witrynę jako preferowane źródło.

Preferowane źródła w Trybie AI Preferowane źródła w Najważniejszych artykułach

Dostępność funkcji

Funkcja preferowanych źródeł jest dostępna globalnie w sekcji „Najważniejsze artykuły” we wszystkich językach, w których działa wyszukiwarka Google. Preferowane źródła mogą też pojawiać się w Trybie AI i przeglądach od AI we wszystkich językach i lokalizacjach, w których te funkcje są dostępne.

W narzędziu do ustawiania preferencji dotyczących źródeł mogą się wyświetlać tylko witryny na poziomie domeny i subdomeny. Na przykład domeny https://www.example.com/ i https://code.example.com/ kwalifikują się jako preferowane źródła, ale podkatalog https://www.example.com/blog już nie.

Jak pomóc użytkownikom znaleźć Twoją witrynę jako preferowane źródło informacji

Jeśli Twoja witryna pojawia się w narzędziu do ustawiania preferencji dotyczących źródeł (aby to sprawdzić, wpisz adres witryny w polu wyszukiwania narzędzia), możesz skorzystać z poniższych metod, aby zachęcić czytelników do wybrania Twojej witryny jako preferowanego źródła:

  • Standardowa implementacja JavaScriptu (zalecana): umieść na swoich stronach internetowych interaktywny przycisk, który pozwoli czytelnikom bezproblemowo dodać Twoją witrynę jako preferowane źródło i wrócić na Twoją stronę. Ta opcja wymaga dodania tylko 2 wierszy do kodu HTML i powoduje wyrenderowanie automatycznie zlokalizowanego przycisku w stylu Google, który obsługuje dostosowywanie do urządzenia i języka.
  • Zaawansowana implementacja JavaScriptu z użyciem niestandardowych komponentów projektu: jeśli chcesz używać własnych komponentów projektu i dostosować standardowy przycisk JavaScript, postępuj zgodnie z instrukcjami zaawansowanej implementacji JavaScriptu. Interfejs użytkownika końcowego pozostaje taki sam jak w przypadku standardowej implementacji JavaScript.
  • Implementacja precyzyjnego linku: jeśli nie możesz zaimplementować przycisku interaktywnego (np. Twój CMS go nie obsługuje), możesz użyć precyzyjnego linku, aby przekierować użytkowników do dodania Twojej witryny jako preferowanego źródła. Możesz to zrobić, dodając na stronach internetowych link tekstowy lub obraz, który można kliknąć. Możesz też użyć precyzyjnego linku w postach w mediach społecznościowych, newsletterach lub promocjach.

Standardowa implementacja JavaScriptu (zalecana)

Dodając tylko 2 wiersze do kodu HTML, możesz dodać automatycznie przetłumaczony interaktywny przycisk, który umożliwia czytelnikom bezproblemowe dodanie Twojej witryny jako preferowanego źródła i powrót do miejsca, w którym przerwali czytanie. Możesz też ustawić motyw przycisku (ciemny lub jasny) oraz zastąpić język przycisku. Zalecamy tę implementację, ponieważ zapewnia ona czytelnikom największą wygodę.

Oto jak to będzie wyglądać:

Przycisk „Dodaj do preferowanych źródeł” z JavaScriptem

Aby umieścić przycisk JavaScript na stronie internetowej, wykonaj te czynności:

  1. Dodaj do strony internetowej ten tag <script> (najlepiej w elemencie <head>), który wczytuje bibliotekę preferowanych źródeł. 
    <script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
  2. Dodaj ten tag <div> w dowolnym miejscu w treści strony internetowej, w którym chcesz wyświetlać przycisk. 
    <div google-add-preferred-source-btn></div>

Ustawianie motywu przycisku

Domyślnie przycisk „Dodaj do preferowanych źródeł” wyświetla się w jasnym motywie. Aby dostosować motyw, dodaj atrybut danych data-theme do elementu <div> i ustaw go na light lub dark: 

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

Zastępowanie języka przycisku

Domyślnie przycisk „Dodaj do preferowanych źródeł” wyświetla się w języku użytkownika na podstawie ustawień przeglądarki. Aby zmienić to zachowanie, dodaj atrybut danych data-lang do elementu <div> i ustaw go na preferowany kod języka (pobierz listę obsługiwanych kodów języków): 

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

Pobierz obsługiwane kody języków

Zaawansowana implementacja JavaScriptu z użyciem niestandardowych komponentów projektu

Domyślnie standardowy przycisk JavaScript automatycznie skanuje DOM pod kątem elementów z atrybutem google-add-preferred-source-btn i renderuje standardową plakietkę. W przypadku integracji niestandardowych, w których chcesz uruchamiać proces z własnych elementów interfejsu lub etapów aplikacji, możesz zainicjować klienta programowo i powiązać proces z niestandardowymi wyzwalaczami.

Podczas integrowania biblioteki Preferowane źródła z niestandardowymi interfejsami użytkownika, etapami aplikacji lub nowoczesnymi aplikacjami frameworka możesz w pełni programowo kontrolować ustawienia środowiska wykonawczego i inicjowanie przepływu za pomocą naszego pakietu JavaScript SDK. W zależności od narzędzi i architektury udostępniamy 2 różne podejścia do integracji: importowanie modułów ES (ESM) i standardowe kolejki wywołań zwrotnych skryptu (IIFE). Oba modele dystrybucji udostępniają identyczne funkcje i metody.

Importy modułów ES

W przypadku nowoczesnych konfiguracji kompilacji i środowisk opartych na modułach zaimportuj bibliotekę bezpośrednio do kodu. 

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

Standardowe kolejki wywołań zwrotnych skryptów

W przypadku standardowych integracji tagów skryptu wczytaj ten skrypt w sekcji <head> dokumentu z atrybutem preferred-sources-control="manual", aby zapobiec automatycznemu renderowaniu przycisku: 

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

Następnie użyj globalnej kolejki wywołań zwrotnych PREFERRED_SOURCE, aby zainicjować opcje i powiązać niestandardowe wyzwalacze: 

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

Aby zobaczyć interaktywne implementacje frontendu i backendu, które pokazują użycie na żywo w przypadku przycisków, kontenerów deklaratywnych, skryptów IIFE i pakietów modułów ES, zapoznaj się z demonstracją preferowanych źródeł.

Jeśli nie możesz używać JavaScriptu w swojej witrynie, możesz zamiast tego użyć precyzyjnego linku, aby przekierowywać użytkowników do narzędzia do określania preferencji dotyczących źródeł, w którym mogą dodać Twoją witrynę jako preferowane źródło i potwierdzić swój wybór.

Użyj poniższego formatu adresu URL i zastąp symbol example.com nazwą domeny publikacji, która prowadzi użytkowników bezpośrednio do Twojej witryny w narzędziu do określania preferencji dotyczących źródeł: 

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

Przykładowy link tekstowy

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

Komponenty z obrazem przycisku

Możesz zaprojektować własną plakietkę promocji lub pobrać oficjalne przetłumaczone zasoby graficzne udostępnione przez Google:

Pobierz zasoby przycisku