Membantu pembaca menemukan situs Anda melalui sumber pilihan di Google Penelusuran

Sebagai pemilik situs, Anda dapat membantu audiens menemukan publikasi Anda sebagai sumber pilihan di Google Penelusuran. Saat pengguna memilih situs Anda sebagai sumber pilihan, konten Anda akan berpeluang lebih besar untuk muncul di "Berita Utama", yang ditandai dengan badge "pilihan". Di Mode AI dan Ringkasan AI, konten Anda dapat ditandai dengan badge "pilihan" bagi pengguna yang telah memilih situs Anda sebagai sumber pilihan.

Ketersediaan fitur

Fitur sumber pilihan tersedia secara global untuk fitur "Berita Utama" dalam semua bahasa di negara tempat Google Penelusuran tersedia. Sumber pilihan juga dapat muncul di Mode AI dan Ringkasan AI dalam semua bahasa dan lokalitas di negara tempat fitur tersebut tersedia.

Hanya situs tingkat domain dan tingkat subdomain yang memenuhi syarat untuk muncul di alat preferensi sumber. Misalnya, https://www.example.com/ dan https://code.example.com/ sama-sama memenuhi syarat untuk sumber pilihan, tetapi subdirektori https://www.example.com/blog tidak memenuhi syarat.

Cara membantu pengguna menemukan situs Anda sebagai sumber pilihan

Jika situs Anda muncul di alat preferensi sumber (untuk memeriksa, masukkan situs Anda di kotak penelusuran alat), Anda dapat menggunakan metode berikut untuk memandu pembaca memilih situs Anda sebagai sumber pilihan:

Penerapan JavaScript standar (direkomendasikan): Sematkan tombol interaktif ke halaman web Anda agar pembaca dapat menambahkan situs Anda sebagai sumber pilihan dengan mudah, lalu kembali ke halaman Anda. Cukup dengan menambahkan dua baris kode ke HTML, opsi ini akan merender tombol bergaya Google yang dilokalkan secara otomatis serta mendukung penyesuaian perangkat dan bahasa.
Penerapan JavaScript lanjutan dengan aset desain kustom: Jika Anda ingin menggunakan aset desain sendiri dan menyesuaikan tombol JavaScript standar, ikuti petunjuk penerapan JavaScript lanjutan. Alur UI pengguna akhir tetap sama dengan penerapan JavaScript standar.
Penerapan deeplink: Jika Anda tidak dapat menerapkan tombol interaktif (misalnya, karena CMS Anda tidak mendukungnya), Anda dapat menggunakan deeplink untuk mengarahkan pengguna agar menambahkan situs Anda sebagai sumber pilihan. Anda dapat melakukannya dengan menambahkan link teks atau gambar yang dapat diklik di halaman web Anda. Anda juga dapat menggunakan deeplink di postingan media sosial, newsletter email, atau promosi.

Penerapan JavaScript standar (direkomendasikan)

Cukup dengan menambahkan dua baris kode ke HTML, Anda dapat menyematkan tombol interaktif yang diterjemahkan secara otomatis. Tombol ini memudahkan pembaca untuk menambahkan situs Anda sebagai Sumber Pilihan dan membawa mereka kembali ke posisi terakhir di halaman Anda. Anda juga dapat menetapkan tema tombol (gelap atau terang), serta mengganti bahasa tombol. Kami merekomendasikan penerapan ini karena metode ini memberikan pengalaman pengguna terbaik bagi pembaca.

Berikut tampilannya:

Untuk menyematkan tombol JavaScript di halaman web Anda, lakukan hal berikut:

Tambahkan tag <script> berikut ke halaman web Anda (sebaiknya di dalam elemen <head>) untuk memuat library Sumber Pilihan.
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
Tambahkan tag <div> berikut di bagian mana pun pada isi halaman web Anda yang ingin Anda pasangi tombol tersebut.
```
<div google-add-preferred-source-btn></div>
```

Menentukan tema tombol

Secara default, tombol "Tambahkan ke Sumber Pilihan" muncul dalam tema terang. Untuk menyesuaikan tema, tambahkan atribut data data-theme ke elemen <div> dan setel ke light atau dark:

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

Mengganti bahasa tombol

Secara default, tombol "Tambahkan ke Sumber Pilihan" ditampilkan dalam bahasa pengguna berdasarkan setelan browser mereka. Untuk mengubah setelan ini, tambahkan atribut data data-lang ke elemen <div> Anda dan setel ke kode bahasa yang diinginkan (download daftar kode bahasa yang didukung):

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

Download kode bahasa yang didukung

Penerapan JavaScript lanjutan dengan aset desain kustom

Secara default, tombol JavaScript standar secara otomatis memindai DOM untuk elemen dengan atribut google-add-preferred-source-btn dan merender badge standar. Namun, untuk integrasi kustom tempat Anda ingin memicu alur dari elemen UI atau momen penting aplikasi Anda sendiri, Anda dapat melakukan inisialisasi klien secara terprogram dan mengikat alur ke pemicu kustom.

Saat mengintegrasikan library Sumber Pilihan ke dalam antarmuka pengguna kustom, momen penting aplikasi, atau aplikasi framework modern, Anda dapat memegang kendali terprogram sepenuhnya atas setelan runtime dan inisiasi alur menggunakan JavaScript SDK kami. Kami menyediakan dua pendekatan integrasi yang berbeda, bergantung pada alat dan arsitektur Anda: impor Modul ES (ESM) dan antrean callback skrip standar (IIFE). Kedua model distribusi ini menyediakan kapabilitas dan metode yang sama.

Impor Modul ES

Untuk konfigurasi build modern dan lingkungan berbasis modul, impor library secara langsung ke dalam kode Anda.

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

Antrean callback skrip standar

Untuk integrasi tag skrip standar, muat skrip berikut di bagian <head> dokumen Anda dengan atribut preferred-sources-control="manual" untuk mencegah tombol dirender secara otomatis:

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

Catatan: Jika atribut preferred-sources-control="manual" dikosongkan, sistem akan mencari dan segera melakukan inisialisasi elemen apa pun yang memiliki atribut google-add-preferred-source-btn.

Kemudian, gunakan antrean callback PREFERRED_SOURCE global untuk melakukan inisialisasi opsi dan mengikat pemicu kustom:

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

Untuk melihat contoh penerapan frontend dan backend interaktif yang menunjukkan penggunaan langsung pada tombol, container deklaratif, skrip IIFE, dan bundle Modul ES, pelajari demo Sumber Pilihan.

Penerapan deeplink

Jika tidak dapat menggunakan JavaScript di situs, Anda dapat menggunakan deeplink sebagai alternatif untuk mengarahkan pengguna ke alat preferensi sumber, tempat mereka dapat menambahkan situs Anda sebagai sumber pilihan dan mengonfirmasi pilihan mereka.

Gunakan format URL berikut dan ganti example.com dengan nama domain publikasi Anda, yang akan mengarahkan pengguna langsung ke situs Anda di alat preferensi sumber:

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

Contoh link teks

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

Contoh link gambar yang dapat diklik

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

Aset gambar tombol

Anda dapat mendesain badge promosi kustom Anda sendiri atau mendownload aset visual resmi yang diterjemahkan yang disediakan oleh Google:

Download aset tombol