Как использовать предпочитаемые источники, чтобы читатели чаще находили ваш сайт в Google Поиске

Если у вас есть свой сайт, вы можете использовать функцию "Предпочтительные источники", чтобы его было проще находить в Google Поиске. После того как пользователь добавит сайт в список таких источников, ваш контент с большей вероятностью будет показываться в разделе Главные новости со значком "Предпочтительный источник". В режиме ИИ и обзорах от ИИ ваш контент может быть отмечен значком "Предпочтительный источник", если пользователи выбрали ваш сайт в качестве предпочтительного источника.

Предпочтительные источники в режиме ИИ Предпочитаемые источники в разделе "Главные новости"

Доступность функции

Функция предпочтительных источников доступна по всему миру в разделе "Главные новости" и на всех языках, поддерживаемых Google Поиском. Предпочтительные источники также могут появляться в режиме ИИ и обзорах от ИИ на всех языках и во всех регионах, где доступны эти функции.

В инструменте выбора источников могут показываться только сайты на уровнях домена и субдомена. Например, https://www.example.com/ и https://code.example.com/ могут быть предпочтительными источниками, а подкаталог https://www.example.com/blog — нет.

Что сделать, чтобы ваш сайт чаще выбирали в качестве предпочитаемого источника

Если ваш сайт есть в инструменте выбора источников (чтобы проверить это, введите адрес сайта в поле поиска инструмента) и вы хотите, чтобы читатели чаще указывали его в качестве предпочтительного источника, можно сделать следующее:

  • Стандартная реализация JavaScript (рекомендуется). Добавьте на свои веб-страницы интерактивную кнопку, которая позволит читателям легко добавлять ваш сайт в качестве предпочтительного источника и возвращаться на него. Вам нужно добавить всего две строки в HTML-код, чтобы на сайте появилась кнопка в стиле Google, которая автоматически локализуется и поддерживает настройку в зависимости от устройства и языка.
  • Расширенная реализация JavaScript с собственными элементами дизайна. Если вы хотите использовать собственные объекты и настроить кнопку JavaScript, следуйте инструкциям по расширенной реализации JavaScript. Интерфейс для конечного пользователя остается таким же, как и при стандартной реализации.
  • Реализация ссылки на контент. Если вы не можете добавить интерактивную кнопку (например, ваша CMS не поддерживает ее), то можете использовать ссылку на контент, чтобы направлять пользователей на страницу, где они могут добавить ваш сайт в список предпочтительных источников. Для этого добавьте на веб-страницы текстовую ссылку или изображение, на которое можно нажать. Вы также можете использовать ссылку на контент в сообщениях в социальных сетях, новостных рассылках и промоакциях.

Стандартная реализация JavaScript (рекомендуется)

Добавив всего две строки в HTML-код, вы получите интерактивную кнопку с автоматическим переводом. С ее помощью читатели смогут легко добавить ваш сайт в список предпочтительных источников и вернуться к тому месту на странице, где они остановились. Вы также можете выбрать тему кнопки (тёмную или светлую) и переопределить язык кнопки. Мы рекомендуем этот вариант, поскольку он наиболее удобен для пользователей.

Вот как это будет выглядеть:

Кнопка "Добавить в список предпочтительных источников" с кодом JavaScript

Чтобы встроить кнопку JavaScript на веб-страницу, сделайте следующее:

  1. Добавьте на веб-страницу тег <script> (желательно в элементе <head>), который загружает библиотеку предпочтительных источников. 
    <script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
  2. Добавьте тег <div> в любое место на веб-странице, где должна появиться кнопка. 
    <div google-add-preferred-source-btn></div>

Как задать тему кнопки

По умолчанию для кнопки "Добавить в предпочтительные источники" установлена светлая тема. Чтобы изменить ее, добавьте атрибут данных data-theme в элемент <div> и задайте для него значение light или dark. 

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

Как переопределить язык кнопки

По умолчанию кнопка "Добавить в предпочтительные источники" показывается на языке пользователя, выбранном в настройках браузера. Чтобы изменить это, добавьте атрибут данных data-lang в элемент <div> и укажите нужный код языка (скачайте список поддерживаемых кодов языков). 

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

Скачать список поддерживаемых кодов языков

Расширенная реализация JavaScript с собственными элементами дизайна

По умолчанию кнопка JavaScript автоматически сканирует DOM на наличие элементов с атрибутом google-add-preferred-source-btn и отрисовывает стандартный значок. Однако если вы хотите запускать процесс с помощью собственных элементов интерфейса или этапов приложения, то можете инициализировать клиент программно и привязать процесс к специальным триггерам.

При интеграции библиотеки предпочтительных источников в пользовательские интерфейсы, этапы приложения или современные фреймворки вы можете полностью управлять настройками времени выполнения и инициацией процесса с помощью нашего JavaScript SDK. В зависимости от ваших инструментов и архитектуры вы можете выбрать один из двух способов интеграции: импорт модулей ES (ESM) или стандартные очереди обратных вызовов скриптов (IIFE). Обе модели распространения предоставляют одинаковые возможности и методы.

Импорт модулей ES

В современных системах сборки и средах на основе модулей библиотека импортируется непосредственно в код. 

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

Стандартные очереди обратных вызовов скриптов

Если вы используете стандартную интеграцию с тегом script, загрузите следующий скрипт в раздел <head> документа с атрибутом preferred-sources-control="manual", чтобы предотвратить автоматическую отрисовку кнопки: 

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

Затем используйте глобальную очередь обратных вызовов PREFERRED_SOURCE, чтобы инициализировать параметры и связать специальные триггеры: 

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

Чтобы посмотреть, как работают интерактивные реализации на стороне клиента и сервера, в которых используются кнопки, декларативные контейнеры, скрипты IIFE и пакеты модулей ES, откройте демонстрацию предпочтительных источников.

Если на вашем сайте нельзя использовать JavaScript, вы можете добавить ссылку на контент, чтобы направлять пользователей в инструмент выбора источников, где они смогут добавить ваш сайт в список предпочтительных источников и подтвердить свой выбор.

Используйте следующий формат URL, заменив example.com на доменное имя вашего издания. Ссылка будет вести на ваш сайт в инструменте выбора источников. 

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>

Объекты изображений кнопок

Вы можете создать собственный значок или скачать официальные переведенные графические объекты, предоставленные Google:

Скачать объекты для кнопок