Okuyucularınızın Google Arama'daki tercih edilen kaynaklar aracılığıyla sitenizi bulmasına yardımcı olma

Web sitesi sahibiyseniz kitlenizin, yayınınızı Google Arama'da tercih edilen kaynak olarak bulmasına yardımcı olabilirsiniz. Bir kullanıcı, sitenizi tercih edilen kaynak olarak seçtiğinde içeriğinizin "En Çok Okunan Haberler" bölümünde "tercih edilen" rozetiyle öne çıkarılarak gösterilme olasılığı artar. AI Modu ve AI Bakışı'nda, sitenizi tercih edilen kaynak olarak seçen kullanıcılar için içeriğiniz "tercih edilen" rozetiyle öne çıkarılabilir.

AI Modu'nda tercih edilen kaynaklar "En Çok Okunan Haberler"de tercih edilen kaynaklar

Özelliğin kullanılabilirliği

Tercih edilen kaynaklar özelliği, Google Arama'nın sunulduğu tüm dillerde "En Çok Okunan Haberler" özelliği için dünya genelinde kullanılabilir. Tercih edilen kaynaklar, AI Modu ve AI Bakışı'nın kullanılabildiği tüm dillerde ve yerel ayarlarda da görünebilir.

Kaynak tercihleri aracında yalnızca alan adı ve alt alan adı düzeyindeki siteler gösterilebilir. Örneğin, https://www.example.com/ ve https://code.example.com/ tercih edilen kaynaklar için uygundur ancak https://www.example.com/blog alt dizini uygun değildir.

Kullanıcıların sitenizi tercih edilen kaynak olarak bulmasına yardımcı olma

Siteniz kaynak tercihleri aracında görünüyorsa (kontrol etmek için sitenizi aracın arama kutusuna yazın), okuyucularınızı sitenizi tercih edilen kaynak olarak seçmeye yönlendirmek için aşağıdaki yöntemleri kullanabilirsiniz:

  • Standart JavaScript uygulaması (önerilir): Web sayfalarınıza etkileşimli bir düğme yerleştirin. Bu düğme, okuyucuların sitenizi tercih edilen kaynak olarak sorunsuz bir şekilde eklemesine olanak tanır ve onları sayfanıza geri döndürür. Bu seçenek, HTML'nize yalnızca iki satır ekleyerek cihaz ve dil özelleştirmesini destekleyen, otomatik olarak yerelleştirilmiş, Google tarzı bir düğme oluşturur.
  • Özel tasarım öğeleriyle gelişmiş JavaScript uygulaması: Kendi tasarım öğelerinizi kullanmak ve standart JavaScript düğmesini özelleştirmek istiyorsanız gelişmiş JavaScript uygulama talimatlarını uygulayın. Son kullanıcı kullanıcı arayüzü akışı, standart JavaScript uygulamasıyla aynı kalır.
  • Derin bağlantı uygulama: Etkileşimli düğmeyi uygulayamazsanız (örneğin, İYS'niz desteklemiyorsa) kullanıcıları sitenizi tercih edilen kaynak olarak eklemeye yönlendirmek için derin bağlantı kullanabilirsiniz. Bunu, web sayfalarınıza bir metin bağlantısı veya tıklanabilir bir resim ekleyerek yapabilirsiniz. Derin bağlantıyı sosyal medya gönderilerinizde, e-posta bültenlerinizde veya tanıtımlarınızda da kullanabilirsiniz.

Standart JavaScript uygulaması (önerilir)

HTML'nize yalnızca iki satır ekleyerek otomatik olarak çevrilmiş, etkileşimli bir düğme ekleyebilirsiniz. Bu düğme, okuyucuların sitenizi tercih edilen kaynak olarak sorunsuz bir şekilde eklemesine ve sayfanızda kaldıkları yere geri dönmesine olanak tanır. Ayrıca düğmenin temasını (koyu veya açık) ayarlayabilir ve düğme dilini geçersiz kılabilirsiniz. Okuyuculara en iyi kullanıcı deneyimini sunduğu için bu uygulamayı öneririz.

Şu şekilde görünür:

JavaScript ile tercih edilen kaynaklara ekleme düğmesi

JavaScript düğmesini web sayfanıza yerleştirmek için aşağıdakileri yapın:

  1. Tercih Edilen Kaynaklar kitaplığını yükleyen aşağıdaki <script> etiketini web sayfanıza (tercihen <head> öğesine) ekleyin.
    <script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
  2. Düğmenin web sayfanızın gövdesinde görünmesini istediğiniz yere aşağıdaki <div> etiketini ekleyin.
    <div google-add-preferred-source-btn></div>

Düğme temasını ayarlama

"Tercih Edilen Kaynaklar'a ekle" düğmesi varsayılan olarak açık temada görünür. Temayı ayarlamak için data-theme veri özelliğini <div> öğenize ekleyin ve light veya dark olarak ayarlayın:

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

Düğme dilini geçersiz kılma

"Tercih Edilen Kaynaklar'a ekle" düğmesi varsayılan olarak kullanıcının tarayıcı ayarlarına göre kullanıcının dilinde gösterilir. Bu davranışı geçersiz kılmak için data-lang veri özelliğini <div> öğenize ekleyin ve tercih ettiğiniz dil koduna ayarlayın (desteklenen dil kodlarının listesini indirin):

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

Desteklenen dil kodlarını indirin

Özel tasarım öğeleriyle gelişmiş JavaScript uygulaması

Varsayılan olarak, standart JavaScript düğmesi DOM'u google-add-preferred-source-btn özelliğine sahip öğeler için otomatik olarak tarar ve standart rozeti oluşturur. Ancak akışı kendi kullanıcı arayüzü öğelerinizden veya uygulama aşamalarınızdan tetiklemek istediğiniz özel entegrasyonlar için istemciyi programatik olarak başlatabilir ve akışı özel tetikleyicilere bağlayabilirsiniz.

Tercih Edilen Kaynaklar kitaplığını özel kullanıcı arayüzlerine, uygulama aşamalarına veya modern çerçeve uygulamalarına entegre ederken JavaScript SDK'mızı kullanarak çalışma zamanı ayarları ve akış başlatma üzerinde tam programatik kontrol sağlayabilirsiniz. Araçlarınıza ve mimarinize bağlı olarak iki farklı entegrasyon yaklaşımı sunuyoruz: ES Modülü içe aktarmaları (ESM) ve standart komut dosyası geri çağırma kuyrukları (IIFE). Her iki dağıtım modeli de aynı capability nesnelerini ve yöntemleri kullanır.

ES Modülü içe aktarmaları

Modern derleme kurulumları ve modül tabanlı ortamlar için kitaplığı doğrudan kodunuza aktarın.

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

Standart komut dosyası geri çağırma kuyrukları

Standart komut dosyası etiketi entegrasyonları için, düğmenin otomatik olarak oluşturulmasını önlemek amacıyla aşağıdaki komut dosyasını preferred-sources-control="manual" özelliğiyle birlikte belgenizin <head> bölümüne yükleyin:

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

Ardından, seçenekleri başlatmak ve özel tetikleyicileri bağlamak için genel PREFERRED_SOURCE geri çağırma kuyruğunu kullanın:

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

Düğmeler, bildirim temelli kapsayıcılar, IIFE komut dosyaları ve ES Modülü paketleri üzerindeki canlı kullanımı gösteren etkileşimli ön uç ve arka uç uygulamalarını incelemek için Tercih Edilen Kaynaklar demosuna göz atın.

Web sitenizde JavaScript kullanamıyorsanız kullanıcılarınızı kaynak tercihleri aracına yönlendirmek için alternatif olarak derin bağlantı kullanabilirsiniz. Bu araçta kullanıcılar sitenizi tercih edilen kaynak olarak ekleyip seçimlerini onaylayabilir.

Aşağıdaki URL biçimini kullanın ve example.com yerine, kullanıcıları doğrudan kaynak tercihleri aracındaki sitenize yönlendiren yayınınızın alan adını girin:

https://www.google.com/preferences/source?q=Your_Website's_URL
<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>

Düğme resmi öğeleri

Kendi özel tanıtım rozetinizi tasarlayabilir veya Google tarafından sunulan resmi, çevrilmiş grafik öğeleri indirebilirsiniz:

Düğme öğelerini indirin