Google поиск для сайта.

Автор: Sajhan | 11.06.2015

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

Говорить о релевантности, морфологии и т.д. здесь не приходится. К тому же такая система поиска может создать серьёзную нагрузку на сайт.

Гораздо более практично и удобно использовать специализированные сервисы, вроде Системы Пользовательского Поиска (СПП) или как его называют иначе, Google поиск для сайта. В данной статье я хочу помочь вам не только познакомиться и разобраться с этим сервисом, но и предложить более гибкий и не документированный способ её установки на сайт.

Создание пользовательского поиска для сайта в Google

Шаг 1: регистрация

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

Шаг 2: создание СПП

На открывшейся странице «Пользовательский поиск» кликните кнопку «Add» (Добавить)

создание пользовательского google поиска

На открывшейся странице:

в поле «Сайты, на которых выполняется поиск» укажите доменное имя сайта со знаком звёздочки (*) на конце, например: www.chuvyr.ru/*;

в списке «Язык» выберите пункт «русский».

В поле «Название поисковой системы» укажите произвольное имя, оно нужно лишь для вашего удобства.

Кликаем кнопку «Создать».

Шаг 3: настройка поисковой системы

СПП создана, но не спешите получить её код, а лучше кликните кнопку «Панель управления» и произведите настройку.
Я не буду расписывать все настройки СПП, вместо этого приведу список рекомендованных изменений для получения оптимального результата.

  • Раздел «Настройка».
    Вкладка «Основные сведения».
    Голосовой ввод – лучше отключить.
  • Раздел «Внешний вид».
    Вкладка «Вид» — выберите вариант «на развороте» и кликните кнопку «Сохранить».
    Вкладка «Настроить» — произведите изменение настроек, начиная с «Настройки результата» и заканчивая «Сниппет результата» в соответствии с оформлением вашего сайта.

Примечание: ценой использования Google поиска для сайта будет отображение в результатах поиска рекламы AdSense. При желании, в разделе «Настройки», на вкладке «Основные сведения», вы можете кликнуть кнопку «Улучшить СПП и отключить рекламу». Но такая услуга будет уже платной.

отключение рекламы в google поиске

Поэтому лучше в разделе «Настройка», перейти на вкладку «Получение дохода» и, если у вас уже есть аккаунт в Google Adsense, включить монетизацию поисковой системы.

включение монетизации в google поиске

В этом случае, на странице результата поиска будут отображаться рекламные объявления, при клике по котором, вы будете получать свой процент.

Шаг 4: работа с кодом формы поиска СПП на сайте

Теперь, когда настройка СПП произведена, перейдите в раздел «Настройка», на вкладку «Основные сведения» и, в секции «Детали», кликните кнопку «Получить код».

На первой странице вы получите код формы поиска. Он может выглядеть следующим образом:

<script>
(function() {
var cx = '005926700554073419751:g41kr85mqy8';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

Именно его предлагается разместить в том месте, где вы хотите, чтобы отображалась форма поиска.

Но можно поступить и проще. Вместо JavaScript со всеми наворотами, я использую вот такой HTML-кодом простой формы:

<form action="http://www.chuvyr.ru/p/search.html" method="get">
<input id="query_input" type="search" name="q" size="30" maxlength="50" required />
</form>

Очевидно, что вместо указанного в атрибуте action тега FORM значения, вам нужно прописать URL-адрес своей страницы, где будет выводиться результат поиска, но об этом чуть позже.

Главное, что форма может быть оформлена как угодно, лишь бы в ней было поле ввода поискового запроса с name=»q». Это тот параметр, который передаётся странице с выводом результата поиска.
Для того же чтобы в поле ввода поискового запроса сохранялось указанное пользователем значение, можно использовать простенькое JavaScript дополнение:

<script>//<![CDATA[
var s=location.search,m=[];if(s!=''){s=decodeURIComponent(s.substr(1));if
(m=s.match(new RegExp('q=([^&]*)')))document.getElementById
('query_input').value=m[1].replace(/+/g, ' ')}
//]]></script>

Указывать CDATA не обязательно, но для блогов на Blogger это будет не лишним.

Шаг 5: получение и размещение кода результата поиска на созданной странице сайта

Теперь, когда вы разместили форму поиска, можно приступать и к созданию страницы для вывода результата поиска.

Получить код вывода результата поиска можно, перейдя в раздел «Настройка», на вкладку «Основные сведения», кликните кнопку «Получить код» в секции «Детали», а на открывшейся странице кнопку «Далее: получите код для результатов поиска». Он может выглядеть следующим образом:

<script>
(function() {
var cx = '005926700554073419751:g41kr85mqy8';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Как вы видите, он отличается от предыдущего лишь gcse тегом. На самом деле вызов скрипта cse.google.com/cse.js достаточно проводить лишь один раз. Но если мы используем упрощенную форму, то всё становится гораздо проще.
Создание страницы зависит от используемой вами платформы или движка сайта. У себя в блоге на Blogger я просто создал страницу с заголовком и содержанием «search», что создало нужный мне URL-адрес. Дальше просто – копируем в неё код и сохраняем.

Дополнительно будет не лишним добавить в CSS такое правило:

.gsc-selected-option{white-space:nowrap}

Что позволит избежать проблем с текстом в списке «Упорядочить».


Автор статьи — «Константин Кирилюк»
Независимый аналитик в области поисковой оптимизации»
Константин в Google+

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *