Главная › Новости

Интеграция Пользовательского поиска Google и WordPress

Опубликовано: 01.09.2018

Поиск от google для сайта

Около месяца назад я попробовал заменить на своем сайте встроенный поиск WordPress поисковой системой AdSense для поиска . Мне хотелось получить Пользовательский поиск Google «простым способом», однако эксперимент подтвердил бессмысленность данной авантюры . После этого я наконец-то взял в руки официальное руководство и во второй раз познакомился с системой пользовательского поиска (она же — СПП) Google, изменившейся настолько, что предыдущая статья про ее интеграцию с WordPress утратила актуальность.

Зачем устанавливать Пользовательский поиск Google?

После замены встроенного поиска WordPress Пользовательским поиском Google посетители Вашего сайта получат следующие дополнительные функции поиска: во-первых, в область поиска добавятся страницы, комментарии, а также документы популярных форматов, во-вторых, появится возможность поиска изображений, в-третьих, будет учитываться морфология поисковых запросов, в-четвертых, результаты поиска будут сортироваться по уменьшению релевантности (сортировка по уменьшению даты также будет доступна), в-пятых, в результатах поиска будут отображаться миниатюры изображений, содержащихся в найденных документах, в-шестых, в результатах поиска будут подсвечиваться найденные слова, в-седьмых, в результатах поиска будут транслироваться объявления AdSense, за клики по которым Вам будут начисляться деньги. Вас интересует добавление перечисленных возможностей на собственный сайт? Если да, то я надеюсь, что Вам поможет эта статья, посвященная интеграции СПП и WordPress. В рассмотренном случае интеграция включает создание, настройку базовых функций и установку системы пользовательского поиска без каких-либо нарушений дизайна сайта, без применения всплывающих окон и без отображения формы / результатов поиска на Веб-серверах Google, а также подключение СПП к Google AdSense для показа рекламных объявлений / учета доходов и, наконец, к Google Analytics для наблюдения за использованием поисковой системы посетителями.

WordPress — обзор необходимых бесплатных плагинов

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

Для создания СПП нужно войти в аккаунт Пользовательского поиска Google , нажать кнопку Создать систему пользовательского поиска, а затем на странице СПП — Создание СПП перечислить Сайты, на которых выполняется поиск:, выбрать Язык и подкорректировать Название поисковой системы (в моем случае включен поиск по всему сайту, для поиска во всех поддоменах домена sergeysl.ru следовало бы заменить sergeysl.ru/* на *.sergeysl.ru/*):

Как подключить шрифты в WordPress, Elementor, Astra и любую тему

После нажатия кнопки СОЗДАТЬ и прочтения поздравлений с тем, что Вы установили на сайт систему пользовательского поиска Google, нужно нажать кнопку Панель управления или воспользоваться ссылкой Изменение поисковой системы в левой части страницы для перехода к Панели управления созданной СПП.

Начальная настройка функций системы пользовательского поиска выполняется в разделе Настройка на закладке Основные сведения. Здесь необходимо задать Ключевые слова для поиска (можно использовать как отдельные слова и фразы), заключенные в кавычки и разделенные пробелами (рекомендации по работе с ключевыми словами есть в справочной системе Пользовательского поиска ), включить / выключить Поиск изображений / Голосовой ввод и, наконец, изменить список Сайтов, на которых выполняется поиск (значения перечисленных здесь и далее параметров можно изменить в любое время).

Кроме описанных опций, на закладке Основные сведения присутствуют две свернутых по умолчанию группы дополнительных параметров, для раскрытия которых предназначены ссылки Advanced и Дополнительно. Если первая из этих групп, позволяющая включить / выключить Транслитерацию и выбрать Кодировку СПП, крайне редко вызывает интерес, то вторая, предназначенная для управления Исключенными из поиска сайтами, требует самого пристального внимания, потому что именно благодаря ей можно избавиться от дублирования результатов поиска (напоминаю, что я отказался от AdSense для поиска из-за отсутствия поддержки удаления сайтов , являющегося дополнительной функцией Пользовательского поиска Google).

В случае сайтов, сделанных на базе WordPress, использующих Постоянные ссылки (ЧПУ) вида /sample-post/ и не использующих навигационные цепочки (они же — хлебные крошки / breadcrumbs) , имеет смысл добавить в список Исключенных из поиска сайтов, как минимум, главную страницу, страницы постраничной навигации, рубрик, меток, авторов, архивов и карту сайта в формате HTML. Для того, чтобы поместить каждую из перечисленных страниц или их групп в указанный список, следует нажать кнопку Добавить, а затем в открывшемся окне Указать сайт для исключения из поиска (правила указания страниц и их групп с помощью шаблонов URL с примерами имеются в справочной системе Пользовательского поиска ), выбрать переключатель Исключить только эту страницу или шаблон URL и нажать кнопку Сохранить. Например, в моем случае «удаление» главной страницы выглядело так:

А полный список Исключенных из поиска сайтов, соответствующий всем перечисленным выше условиям, в настоящее время выглядит так:

Заполнение списка Исключенных из поиска сайтов завершает создание и начальную настройку функций СПП. Вы можете нажать кнопку Общедоступный URL и перейти по ссылке из всплывающего окна Общедоступный URL вашей поисковой системы: для поверхностной оценки работоспособности созданной системы пользовательского поиска и уточнения содержания списков Ключевых слов, Сайтов, на которых выполняется поиск:, а также Исключенных из поиска сайтов.

Если СПП работает корректно, необходимо заняться начальной настройкой ее внешнего вида в разделе Внешний вид. Важнейший момент этого этапа настройки системы пользовательского поиска заключается в выборе формата результатов поиска на закладке Вид (в отличие от любых других параметров внешнего вида, изменение формата результатов поиска может потребовать повторную установку кода СПП на сайт). Здесь нужно выбрать значение только результаты, потому что именно оно позволяет осуществить интеграцию системы пользовательского поиска на сайт без нарушения дизайна, без применения всплывающих окон и без отображения формы / результатов поиска на Веб-серверах Google:

После выбора формата результатов поиска следует перейти на закладку Тема и выбрать одну из предварительно настроенных тем оформления СПП (например, в моем случае выбрана тема Обычный), а затем на закладку Настроить, позволяющую откорректировать часть опций выбранной темы. Кроме этого, на закладке Уменьшенные изображения можно включить / выключить отображение уменьшенных изображений в результатах поиска. Для проверки изменений, сделанных на любой из закладок раздела Внешний вид, необходимо использовать уменьшенный макет настраиваемой системы пользовательского поиска, расположенный в правой части страницы. Если нажать кнопку Сохранить, а затем ввести поисковый запрос в поле Пример поисковой строки и нажать кнопку Поиск или клавишу <Enter>, на уменьшенном макете отобразится текущий внешний вид СПП. Как только он начнет соответствовать Вашим требованиям, можно перейти к установке системы пользовательского поиска на сайт (обязательно учтите, что на данном этапе не стоит добиться идеального внешнего вида СПП).

Установка системы пользовательского поиска Google на сайт с WordPress

Для получения кода СПП следует нажать кнопку Сохранить и получить код на закладке Вид, Тема или Настроить раздела Внешний вид либо кнопку Получить код на закладке Основные сведения раздела Настройка. Код системы пользовательского поиска предоставляется в таком виде:

Во избежание вопросов замечу, что кнопка Сведения о результатах поиска предназначена для изменения названия параметра URL, который будет добавляться в поисковые запросы. В большинстве случаев подойдет значение по умолчанию q. Если Вы хотите изменить его, не забудьте передать новое название параметра URL в форму поиска в виде значения атрибута queryParameterName тега <gcse:searchbox-only>.

Установка СПП начинается со вставки первой части полученного кода, начинающейся с тега <script> и заканчивающейся тегом </script>, перед закрывающим HTML-тегом </head> или после открывающего HTML-тега <body>. Как правило, указанные теги находятся в файле header.php, входящем в состав используемой темы WordPress. В связи с тем, что система пользовательского поиска загружается асинхронно, точное место вставки рассматриваемого фрагмента кода не имеет принципиального значения (даже для Google Page Speed ), однако необходимо учесть, что он должен находиться выше кода формы и результатов поиска.

На следующем этапе установки СПП нужно создать страницу, на которой будут отображаться результаты поиска. В моем случае она имеет название Результаты поиска и Постоянную ссылку /gcse/ (название и Постоянная ссылка могут быть изменены с учетом соблюдения единственного условия, которое заключается в соответствии Постоянной ссылки и значения рассмотренного ниже атрибута resultsUrl тега <gcse:searchbox-only>). В Свойствах добавленной страницы необходимо отключить комментарии, трекбеки и пинги, кроме этого, следует исключить ее из всех используемых XML / HTML-карт сайта, генерируемых с помощью плагинов XML Sitemap Generator for WordPress и Dagon Design Sitemap Generator или их аналогов, и, наконец, запретить индексацию Результатов поиска в файле robots.txt посредством добавления во все его секции директивы:

Disallow: /gcse/

После завершения подготовки страницы Результаты поиска нужно переключить редактор WordPress в текстовый режим и вставить в поле ввода ее содержимого код результатов поиска, имеющий следующий вид:

<gcse:searchresults-only></gcse:searchresults-only>

Необходимо отметить, что по умолчанию на страницах результатов поиска отображается по 10 результатов. Для установки любого другого количества результатов поиска на страницах достаточно указать его в виде значения атрибута resultSetSize тега <gcse:searchresults-only>. Кроме этого, по умолчанию ссылки из результатов поиска открываются в новой вкладке. Для их открытия в текущей вкладке нужно добавить атрибут linkTarget тега <gcse:searchresults-only> и присвоить ему значение _self.

С учетом таких замечаний код результатов поиска, отображающий, например, по 5 результатов поиска на странице и обеспечивающий открытие ссылок в текущей вкладке, должен иметь следующий вид:

<gcse:searchresults-only resultSetSize="5" linkTarget="_self"></gcse:searchresults-only>

На последнем этапе установки системы пользовательского поиска необходимо установить форму поиска с помощью виджета или посредством изменения файлов используемой темы WordPress. Как в первом, так и во втором случае код формы поиска выглядит следующим образом (значение упоминавшегося ранее атрибута resultUrl содержит URL страницы Результаты поиска):

<gcse:searchbox-only resultUrl="https://sergeysl.ru/gcse"></gcse:searchbox-only>

При использовании виджетов нужно удалить существующий виджет Поиск, а затем добавить виджет Текст, ввести Заголовок (если он действительно необходим) и вставить в поле Содержимое код формы поиска. В случае редактирования файлов используемой темы WordPress следует найти, а затем заменить имеющийся в них код стандартной формы поиска. Обычно он находится в файле header.php, sidebar.php или searchform.php.

Последнее замечание, касающееся установки СПП, связано с тем, что использование тегов <gcse:xxx> / </gcse:xxx> нарушает соответствие сайта стандартам HTML5 (оно же — валидность HTML5). Для устранения данной проблемы нужно заменить «запрещенные» теги на HTML5-валидные теги div . При выполнении такой замены необходимо руководствоваться двумя простыми правилами, первое из которых требует, чтобы атрибут class тега <div> содержал имя заменяемого тега <gcse:xxx>, преобразованное в формат gcse-xxx, а второе — чтобы любые другие атрибуты тега <gcse:xxx>, добавленные к тегу <div>, были дополнены префиксами data-. Другими словами, для сохранения валидности HTML5 описанные выше варианты кода результатов и формы поиска должны выглядеть так:

<div class="gcse-searchresults-only"></div> <div class="gcse-searchresults-only" data-resultSetSize="5" data-linkTarget="_self"></div> <div class="gcse-searchbox-only" data-resultsUrl="https://sergeysl.ru/gcse"></div>

На этом можно закончить описание установки системы пользовательского поиска. На мой взгляд, представленной информации будет достаточно для добавления СПП на любой сайт, сделанный на базе WordPress. Независимо от этого я рекомендую Вам не только изучить документ Custom Search Element Control API , но и посетить блог , а также и форум поддержки Пользовательского поиска Google.

Многие статьи, посвященные установке системы пользовательского поиска, заканчиваются примерно на этом месте. К сожалению, авторы таких мануалов лукавят, не желая лезть в дальнейшие дебри разбираться с дополнительной настройкой внешнего вида СПП. Я не спорю, что добавленная система пользовательского поиска с первых минут демонстрирует великолепную работу, однако мне почему-то кажется, что ее неожиданный внешний вид в лучшем случае способен вызвать легкое замешательство, а в худшем — шокировать. Например, я не думал, что форма и результаты поиска, установленные на мой сайт , будут выглядеть настолько уныло (обратите внимание на отступы, поля, границы, шрифты и прочие «искажения» внешнего вида):

Естественно, меня не устроил показанный внешний вид СПП, и я приступил к изучению соответствующих рекомендаций «наших западных партнеров». К счастью, они быстро развеяли мои сомнения по поводу выбора Пользовательского поиска Google и подтвердили, что можно не только избавиться от описанной проблемы, но и адаптировать внешний вид СПП под дизайн любого сайта. Давайте попробуем разобраться, как это сделать.

Тонкая настройка внешнего вида системы пользовательского поиска Google

HTML-код компонентов СПП построен с использованием относительно сложной (по крайней мере, для вебмастеров-любителей вроде меня) табличной верстки , при этом внешний вид всех его элементов определяется соответствующими правилами CSS. Часть этих правил хранится в CSS-файлах, находящихся на серверах Google, часть добавляется непосредственно в HTML-код сайта. Подключение CSS-файлов и добавление правил CSS выполняет код системы пользовательского поиска, при этом состав первых и содержание вторых определяются значениями параметров, выбранных на закладках Темы и Настроить раздела Внешний вид Панели управления Пользовательского поиска Goolge. Описанный механизм настройки внешнего вида СПП имеет единственное ограничение, заключающееся в том, что Панель управления Пользовательского поиска Goolge позволяет изменить лишь некоторую часть соответствующих параметров. Например, с ее помощью не получится устранить «неожиданные» изменения внешнего вида системы пользовательского поиска, происходящие из-за пересечения правил CSS, заданных в используемой теме WordPress, и правил CSS, связанных с СПП (в моем случае возник именно такой конфликт). Для преодоления подобных ограничений Панели управления Пользовательского поиска Goolge следует создать дополнительный набор правил CSS, который позволит изменить любые параметры внешнего вида любых элементов системы пользовательского поиска. Единственная сложность, которая может возникнуть в процессе создания указанного набора, заключается в выявлении CSS-селекторов, позволяющих выбрать интересующие нас элементы СПП. Где и как найти нужные CSS-селекторы?

Прежде чем дать ответ на данный вопрос, необходимо отметить две вещи, которые, на мой взгляд, не следует делать. Во-первых, я не рекомендую искать готовые наборы правил CSS в Сети. Конечно же, они существуют, но не учитывают особенности используемой темы WordPress и, соответственно, не могут применяться без серьезной доработки. Во-вторых, я не советую питать иллюзии по поводу «официальной» рекомендации, доступной в Панели управления Пользовательского поиска Google на странице получения кода и заключающейся в переходе по ссылке код V1, позволяющей открыть страницу Получение кода V1 для встраивания результатов поиска, предлагающую загрузить этот файл CSS и изменить его так, как нужно Вам, а также изучить документацию по JavaScript и CSS , если хотите добиться большего. Указанный CSS-файл опять же является готовым набором правил CSS и отличается от упомянутых аналогов только пугающим масштабом (содержит >300 строк), значительно усложняющим настройку внешнего вида системы пользовательского поиска.

Я предлагаю использовать для поиска CSS-селекторов и просмотра правил, в которые они входят, Инструменты разработчика браузера Google Chrome . Кроме всего прочего, они позволяют выполнять подробнейший анализ HTML-кода на предмет применяемых правил CSS. Для запуска Инструментов разработчика нужно выбрать одноименный пункт меню, нажать клавишу <F12> или комбинацию клавиш <Ctrl>+<Shift>+<I>. Для отображения параметров того или иного элемента следует нажать на панели инструментов кнопку , а затем щелкнуть по нему. В результате в левой части окна Инструментов разработчика отобразится HTML-код элемента, а также имя связанного с ним CSS-селектора, а в правой — список соответствующих правил CSS, учитывающий наследование, а также макет элемента, содержащий результирующие значения отступов (margin), полей (padding) и границ (border). Другими словами, после нажатия кнопки и щелчка по элементу Вы увидите все, что касается правил CSS. Для улучшения понимания написанного имеет смысл рассмотреть несколько примеров.

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

На представленном скриншоте виден (и специально выделен) не только свернутый HTML-код интересующей нас ячейки, но и соответствующий ей CSS-селектор. Без дополнительных объяснений можно сказать, что для скрытия ячейки нужно создать примерно такое правило CSS с селектором td.gsc-clear-button:

td.gsc-clear-button { display: none !important; }

Обратите внимание на конструкцию !important. Она увеличивает приоритет определенного нами значения свойства CSS. Другими словами, значение свойства, в определении которого есть !important, сработает даже при наличии других определений того же свойства в других правилах CSS.

В качестве более сложного примера подойдет изменение внешнего вида кнопки Поиск, являющейся частью формы поиска. Например, меня не устроили ее поля, отступы, высота, минимальная ширина, закругленные углы, и шрифт, отличающийся от заданного в используемой теме WordPress. Как и прежде, для исправления внешнего вида указанной кнопки необходимо выбрать ее с помощью Инструментов разработчика, которые опять предоставят все интересующие нас сведения:

В левой части представленного скриншота виден (и специально выделен) не только HTML-код интересующей нас кнопки, но и соответствующий ей CSS-селектор, в правой видны (и выделены) все определения значений свойств CSS, которые требуют изменения. Как и в предыдущем случае, без каких-либо дополнительных объяснений понятно, что для корректировки внешнего вида кнопки Поиск нужно добавить примерно такое правило CSS с селектором td.gsc-search-button:

input.gsc-search-button { font-size: inherit !important; font-weight: inherit !important; height: inherit !important; min-width: inherit !important; margin: 0 0 0 3px !important; padding: 4px !important; border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; }

Создание правил CSS для всех остальных компонентов СПП выполняется аналогично. Например, в моем случае для получения текущего внешнего вида формы поиска пришлось добавить к описанным выше правилам следующие правила CSS:

table.gsc-search-box { border: none !important; margin: 0 !important; width: 172px !important; } td.gsc-input, td.gsc-search-button { border: none !important; padding: 0 !important; } td.gsc-input { border: none !important; padding: 0 !important; }

Для изменения внешнего вида результатов поиска оказалось достаточно таких правил CSS:

.gsc-result .gs-title { height: inherit !important; } a.gs-title, a.gs-title b { font-size: 20px !important; font-weight: bold !important; } div.gsc-refinementsArea, div.gsc-above-wrapper-area, div.gsc-adBlock, img.gs-image, table.gsc-above-wrapper-area-container, table.gsc-resultsHeader, table.gsc-table-result, td.gsc-result-info-container, td.gsc-orderby-container, td.gsc-twiddleRegionCell.gsc-twiddle-opened, td.gsc-configLabelCell, td.gsc-table-cell-thumbnail.gsc-thumbnail, td.gsc-table-cell-snippet-close { border: none !important; }

Последний вопрос, касающийся дополнительного набора правил CSS, заключается в том, куда их лучше всего поместить.

Правила CSS, определяющие внешний вид формы поиска, должны быть доступны на всех страницах сайта, поэтому можно разместить их, например, с помощью плагина Simple Custom CSS (я использую именно этот плагин) или добавить в файл style.css, входящий в состав используемой темы WordPress.

Правила CSS, задающие внешний вид результатов поиска, могут быть доступны только на одной странице Результаты поиска, поэтому я (и Google Page Speed ) предлагаю подключить их только на ней. Проще всего сделать это путем добавления описываемых правил CSS, заключенных в теги <style type="text/css"> и </style>, непосредственно в текст страницы Результаты поиска перед кодом результатов поиска, однако это привет к нарушению валидность HTML-кода. Если Вы хотите сохранить ее, необходимо поместить между тегами <head> и </head> (напоминаю, что обычно они находятся в файле header.php, входящем в состав используемой темы WordPress) PHP-код, позволяющий идентифицировать страницу с Постоянной ссылкой /gcse/ (аргументом функции is_page() может быть не только Постоянная ссылка, но и ID или название страницы):

<?php if (is_page('gcse')) { ?> <?php } ?>

а затем вставить между представленными строками рассматриваемые правила CSS, опять-таки обрамленные тегами <style type="text/css"> и </style>.

На этом можно закончить описание тонкой настройки внешнего вида системы пользовательского поиска, позволяющей получить вполне достойный результат.

Интеграция системы пользовательского поиска Google с Google AdSense

Для того, чтобы начать получение дохода от показа объявлений Google AdSense на странице Результаты поиска, следует подключить СПП к аккаунту Google AdSense. Для выполнения этой операции достаточно открыть Панель управления Пользовательского поиска Google, а затем выбрать раздел Настройка, перейти на закладку Получение дохода и перевести переключатель Монетизация поисковой системы в положение Вкл:

Через некоторое время на странице Результаты поиска начнут показываться объявления Google AdSense, за клики по которым Вам будут начисляться деньги.

После включения монетизации часто возникает вопрос о получении разнообразной аналитической информации. Такая возможность существует и заключается в применении клиентского канала , который связан с системой пользовательского поиска. Для его создания необходимо войти в аккаунт Google AdSense, перейти на закладку Мои объявления, в левой части страницы выбрать раздел Поиск, подраздел Клиентские каналы, а затем нажать кнопку + Новый клиентский канал. В открывшемся окне Добавление нового клиентского канала следует ввести Название и нажать кнопку Сохранить. Затем нужно выбрать созданный клиентский канал в списке Поиск > Клиентские каналы и скопировать его Идентификатор (он выделен):

В последнюю очередь необходимо связать созданный клиентский канал с СПП. Для этого следует указать скопированный идентификатор как значение атрибута adchannell тега <gcse:searchresults-only> (или data-adchannel при использовании HTML5-валидных тегов div).

После обновления кода результатов поиска все сведения о показе объявлений Google AdSense на странице Результаты поиска будут привязаны к созданному клиентскому каналу, и Вы сможете формировать для него отчеты, содержащие подробную информацию о монетизации системы пользовательского поиска.

Интеграция системы пользовательского поиска Google с Google Analytics

Для получения подробнейших сведений об использовании СПП посетителями сайта нужно настроить отчеты Google Analytics Поиск по сайту . Для выполнения этой операции необходимо открыть Панель управления Пользовательского поиска Google, а затем выбрать раздел Журнал и статистика, перейти на закладку Google Analytics и выбрать Профиль Google Analytics. Это приведет к отображению информации об Аккаунте и появлению ссылки Добавить параметры:

Теперь следует щелкнуть по ссылке Добавить параметры, а затем в открывшемся окне Настройка отчетов Google Analytics для поиска по сайту ввести в поле Параметры запроса символ q (если название параметра URL, добавляемого в поисковые запросы, было изменено, нужно указать вместо q новое значение):

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

Через некоторое время начнется сбор информации об использовании СПП посетителями сайта. Не забудьте, что сведения за текущий день появляются в отчетах Google Analytics Поиск по сайту только после полуночи.

Заключение

Я надеюсь, что эта статья поможет Вам создать, настроить, и установить на свой сайт на базе WordPress одну из мощнейших систем пользовательского поиска, а затем монетизировать ее с помощью Google AdSense и получать информацию о том, что искали посетители, с помощью Google Analytics. Кроме всего прочего, Вы сможете сохранить валидность HTML-кода, практически идеально адаптировать внешний вид СПП под дизайн сайта, а также настроить инструменты получения и обработки аналитических сведений о монетизации системы пользовательского поиска. В связи с тем, что разделы справочной системы Пользовательского поиска, посвященные продвижениям , уточнениям и синонимам , давно доступны на русском языке, я решил не уделять им внимание и постарался сосредоточиться только на тех вопросах установки, настройки и интеграции СПП Google, которые не имеют внятных ответов (по крайней мере, в Рунете). Спасибо за внимание!

Поделитесь ссылкой в социальной сети или блоге: