Google добавил издателям кнопку «Предпочтительные источники» (Preferred Sources). Она убирает лишние действия: читатель нажимает кнопку на вашем сайте, добавляет публикацию в предпочтения и возвращается к статье. В этой заметке разбираем, что даёт эта кнопка, как её добавить и почему важно сначала проверить доступность.
Что делает функция
Preferred Sources влияет на то, что видит конкретный пользователь Google после того, как выберет вашу публикацию. Это персональная настройка, а не способ поднять позиции сайта для всех. Кнопка не гарантирует появление статьи в Top Stories и не улучшает общий рейтинг ресурса.
Она доступна по всему миру для Top Stories в языках, где работает Google Поиск, и может подсвечиваться в AI Overviews и AI Mode там, где эти возможности включены.
Сначала проверьте доступность
Перед тем как ставить кнопку, проверьте, есть ли ваша публикация в инструменте предпочтений Google. Если её там нет — кнопка не решит проблему доступности.
Google поддерживает домены и поддомены, но не поддиректории. Допустимые варианты:
example.comnews.example.com
Недопустимый вариант:
example.com/blog
Если публикация живёт на поддомене, используйте именно его, а не корневой домен.
Кнопка или deep-link: что я заметил
Я протестировал оба варианта на мобильном. Встроенная кнопка открывает отдельную страницу подтверждения: источник уже определён, читателю остаётся нажать «Добавить», и Google возвращает его к статье. После первого клика на сайте это однократное действие.
Deep-link отличается. Он открывает общий экран настроек предпочтений с заполненным поиском по публикации, но читателю всё равно нужно выбрать публикацию и подтвердить выбор. Google также не возвращает его к статье автоматически.
Поэтому на сайте лучше использовать стандартную кнопку. Deep-link имеет смысл в email, соцсетях или CMS, где нельзя вставить скрипт.
Как добавить стандартную кнопку
Загрузите библиотеку один раз из оболочки приложения, темы или небольшого плагина — лучше в <head> документа:
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>Затем разместите контейнер кнопки там, где хотите видеть элемент управления:
<div google-add-preferred-source-btn></div>Библиотека сама определит атрибут и отрисует интерфейс. В стандартной кнопке не нужно жёстко прописывать домен публикации.
Выберите светлую или тёмную тему
По умолчанию используется светлая тема. Для тёмного фона добавьте атрибут data-theme:
<div google-add-preferred-source-btn data-theme="dark"></div>Переопределите язык только при необходимости
Кнопка использует язык браузера читателя по умолчанию. Если странице требуется конкретный поддерживаемый язык, добавьте data-lang:
<div google-add-preferred-source-btn data-lang="en"></div>Deep-link, когда нельзя подключить JavaScript
Deep-link — это обычная ссылка, поэтому её можно добавить через любую CMS или HTML-редактор. Она работает без JavaScript:
https://www.google.com/preferences/source?q=example.comОбразец обычной ссылки:
<p>
<a href="https://www.google.com/preferences/source?q=example.com">
Add Example as a Preferred Source
</a>
</p>Тот же URL можно использовать в контенте страницы, email, соцсетях или промо.
Кнопка в WordPress
Этот пример создаёт виджет WordPress, который можно добавить в любую область виджетов: сайдбар статьи или подвал. В настройках виджета редактор выбирает светлую или тёмную тему и выравнивание кнопки (слева, по центру, справа).
Добавьте код в небольшой кастомный плагин или в functions.php дочерней темы:
class Site_Preferred_Sources_Widget extends WP_Widget {
public function __construct() {
parent::__construct(
'site_preferred_sources',
'Google Preferred Sources',
array( 'description' => 'Displays the Google Preferred Sources button.' )
);
}
private function get_alignment( $value ) {
return in_array( $value, array( 'left', 'center', 'right' ), true )
? $value
: 'center';
}
public function widget( $args, $instance ) {
$theme = isset( $instance['theme'] ) && 'dark' === $instance['theme']
? 'dark'
: 'light';
$alignment = $this->get_alignment(
isset( $instance['alignment'] ) ? $instance['alignment'] : 'center'
);
$justify_content = array(
'left' => 'flex-start',
'center' => 'center',
'right' => 'flex-end',
);
echo $args['before_widget'];
echo '<div style="display:flex;width:100%;justify-content:'
. esc_attr( $justify_content[ $alignment ] )
. ';">';
echo '<div google-add-preferred-source-btn';
if ( 'dark' === $theme ) {
echo ' data-theme="dark"';
}
echo '></div>';
echo '</div>';
echo $args['after_widget'];
}
public function form( $instance ) {
$theme = isset( $instance['theme'] ) && 'dark' === $instance['theme']
? 'dark'
: 'light';
$alignment = $this->get_alignment(
isset( $instance['alignment'] ) ? $instance['alignment'] : 'center'
);
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'theme' ) ); ?>">
<?php esc_html_e( 'Color theme' ); ?>
</label>
<select
class="widefat"
id="<?php echo esc_attr( $this->get_field_id( 'theme' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'theme' ) ); ?>"
>
<option value="light" <?php selected( $theme, 'light' ); ?>>Light</option>
<option value="dark" <?php selected( $theme, 'dark' ); ?>>Dark</option>
</select>
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'alignment' ) ); ?>">
<?php esc_html_e( 'Alignment' ); ?>
</label>
<select
class="widefat"
id="<?php echo esc_attr( $this->get_field_id( 'alignment' ) ); ?>"
name="<?php echo esc_attr( $this->get_field_name( 'alignment' ) ); ?>"
>
<option value="left" <?php selected( $alignment, 'left' ); ?>>Left</option>
<option value="center" <?php selected( $alignment, 'center' ); ?>>Center</option>
<option value="right" <?php selected( $alignment, 'right' ); ?>>Right</option>
</select>
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['theme'] = isset( $new_instance['theme'] )
&& 'dark' === $new_instance['theme']
? 'dark'
: 'light';
$instance['alignment'] = $this->get_alignment(
isset( $new_instance['alignment'] )
? sanitize_key( $new_instance['alignment'] )
: 'center'
);
return $instance;
}
}
function site_register_preferred_sources_widget() {
register_widget( 'Site_Preferred_Sources_Widget' );
}
add_action( 'widgets_init', 'site_register_preferred_sources_widget' );
function site_preferred_sources_widget_script() {
if ( ! is_active_widget( false, false, 'site_preferred_sources', true ) ) {
return;
}
wp_enqueue_script(
'google-preferred-sources',
'https://news.google.com/swg/js/v1/publisher.js',
array(),
null,
array(
'strategy' => 'async',
'in_footer' => true,
)
);
$tracking_script = <<<'JS'
(function () {
if ( window.__preferredSourceButtonTrackingBound ) {
return;
}
window.__preferredSourceButtonTrackingBound = true;
function isPreferredSourceClick( event ) {
var path = typeof event.composedPath === 'function'
? event.composedPath()
: [];
for ( var i = 0; i < path.length; i += 1 ) {
var node = path[i];
if (
node
&& node.nodeType === 1
&& typeof node.hasAttribute === 'function'
&& node.hasAttribute( 'google-add-preferred-source-btn' )
) {
return true;
}
}
return Boolean(
event.target
&& typeof event.target.closest === 'function'
&& event.target.closest( '[google-add-preferred-source-btn]' )
);
}
function hasGoogleTagManager() {
if ( ! window.google_tag_manager ) {
return false;
}
return Object.keys( window.google_tag_manager ).some( function ( key ) {
return key.indexOf( 'GTM-' ) === 0;
} );
}
document.addEventListener( 'click', function ( event ) {
if ( ! isPreferredSourceClick( event ) ) {
return;
}
if ( hasGoogleTagManager() && Array.isArray( window.dataLayer ) ) {
window.dataLayer.push( { event: 'preferred_source_button_click' } );
return;
}
if ( typeof window.gtag === 'function' ) {
window.gtag( 'event', 'preferred_source_button_click' );
}
}, true );
}());
JS;
wp_add_inline_script(
'google-preferred-sources',
$tracking_script,
'after'
);
}
add_action( 'wp_enqueue_scripts', 'site_preferred_sources_widget_script' );После добавления кода откройте «Внешний вид → Виджеты», добавьте виджет Google Preferred Sources в сайдбар или подвал, выберите тему и выравнивание. WordPress загрузит библиотеку один раз, даже если виджет используется в нескольких областях.
Отслеживание кликов в GA4
Виджет использует один делегированный click-listener, потому что Google отрисовывает бейдж после загрузки страницы. Он фиксирует клик, который запускает поток Preferred Sources, но не подтверждает, что читатель завершил выбор в Google.
Если присутствует контейнер Google Tag Manager, слушатель отправляет одно событие в стандартный dataLayer:
window.dataLayer.push( { event: 'preferred_source_button_click' } );А если настроена глобальная функция gtag — событие уйдёт через неё:
window.gtag( 'event', 'preferred_source_button_click' );Вывод
Кнопка «Предпочтительные источники» — простой способ дать читателю один клик до ваших материалов в Top Stories и AI Overviews. Главное — сначала проверить доступность публикации в инструменте Google и выбрать embed вместо deep-link на сайте. Остаётся техническое решение: обычный тег или виджет WordPress.
Нужна помощь с техническими доработками сайта и SEO-оптимизацией? Оставьте заявку: +375 (29) 619-05-79, +375 (29) 840-04-94.
Добавить комментарий