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

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

В каких случаях нужен второй способ установки Пользовательского поиска Google?

Напоминаю, что установка Пользовательского поиска Google, рассмотренная в прошлый раз, состояла из добавления JavaScript-кода СПП на все страницы сайта, содержащие форму и / или результаты поиска, а также HTML-кода, обеспечивающего их отображение. Такой способ установки системы пользовательского поиска, называемый в официальной документации Search via search box, а здесь — первым, был выбран из-за того, что только он позволяет осуществить полноценную интеграцию Пользовательского поиска Google на сайт без нарушения дизайна, применения всплывающих окон, отображения формы и / или результатов поиска на Веб-серверах Google и с поддержкой таких интерактивных функций формы поиска, как, например, автозаполнение. Являясь самым функциональным, подобный способ установки СПП имеет существенный недостаток, заключающийся в снижении скорости загрузки всех страниц сайта, вызванном подключением «тяжелого» JavaScript-кода системы пользовательского поиска. Возможно ли установить Пользовательский поиск Google так, чтобы он не выглядел чужеродно и не уменьшал скорость загрузки сайта? Если Вам необходимы интерактивные функции формы поиска — нет, в противном случае — да. Как это сделать? Выбрать другой способ установки СПП, называемый в официальной документации Search via URL, а в этой статье — вторым. Такой способ установки системы пользовательского поиска подразумевает замену официальной формы поиска на альтернативную, например, на доработанную форму поиска WordPress и подключение JavaScript-кода СПП только на странице Результаты поиска. Стоит ли устанавливать Пользовательский поиск Google вторым способом, и как это сделать?

Преимущества второго способа установки системы пользовательского поиска Google

Первое и важнейшее преимущество второго способа установки Пользовательского поиска Google заключается в том, что при его применении СПП никак не влияет на скорость загрузки сайта. О каком влиянии идет речь, и нужно ли уделять ему внимание? Для получения ответа на данный вопрос достаточно измерить скорость загрузки сайта до и после установки системы пользовательского поиска первым способом, например, с помощью онлайн-сервиса GTmetrix.

В случае моего сайта результат измерения скорости загрузки главной страницы до установки Пользовательского поиска Google выглядел так:

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

а после подключения JavaScript-кода СПП и добавления официальной формы поиска с помощью стандартного виджета Текст изменился так:

Скорость загрузки сайта после установки системы пользовательского поиска

Как видите, установка системы пользовательского поиска привела к понижению оценки скорости загрузки сайта по методике PageSpeed / YSlow на 2 / 10 единиц за счет выполнения 11 запросов к серверам Google, увеличивших размер HTML-кода страницы ≅ на 180 КБайт и время ее загрузки ≅ на 0,5 секунд. На мой взгляд, перечисленные значения велики настолько, что могут быть проигнорированы только в случае полнейшего равнодушия к скорости загрузки сайта.

Второе преимущество второго способа установки Пользовательского поиска Google состоит в том, что его применение сводит процедуру установки JavaScript-кода СПП к его вставке на единственную страницу, предназначенную для отображения результатов поиска, непосредственно в редакторе WordPress.

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

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

Подготовка к установке Пользовательского поиска Google вторым способом

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

Выбор формата отображения результатов

Установка и настройка JavaScript-кода системы пользовательского поиска Google

Как я уже говорил, в этот раз JavaScript-код СПП будет установлен на единственную страницу, предназначенную для отображения результатов поиска, поэтому его установка начинается с ее создания. В моем случае такая страница имеет название Результаты поиска и Постоянную ссылку /gcse/ (естественно, название и Постоянная ссылка могут быть изменены согласно Вашим вкусам и потребностям). В ее Свойствах нужно отключить комментарии, трекбеки и пинги, кроме этого следует исключить данную страницу из всех HTML / XML-карт сайта, генерируемых плагинами Yoast SEO и Dagon Design Sitemap Generator или их аналогами, и, наконец, запретить индексацию Результатов поиска посредством добавления во все секции файла robots.txt директивы:

Disallow: /gcse/

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

<meta name="robots" content="noindex"/>

например, с помощью плагина Yoast SEO, однако этот вариант менее предпочтителен с точки зрения краулингового бюджета.

После завершения подготовки страницы Результаты поиска следует перевести редактор WordPress в текстовый режим и вставить в поле ввода ее содержимого JavaScript-код СПП, полученный в Панели управления Пользовательского поиска Google с помощью кнопки Сохранить и получить код на закладке Вид, Тема или Настроить в разделе Внешний вид либо кнопки Получить код на закладке Основные сведения в разделе Настройка:

Вставка кода на страницу 'Результаты поиска'

Как и в прошлый раз, для изменения значений параметров результатов поиска, заданных по умолчанию, можно добавить в последнюю строку JavaScript-кода СПП нужные атрибуты или их HTLM5-валидные аналоги. Например, для отображения 5, а не 10 результатов поиска на странице, открытия ссылок с них в текущем, а не в новом окне и соблюдения требований HTML5 последняя строка JavaScript-кода системы пользовательского поиска должна выглядеть так:

<div class="gcse-searchresults-only" data-linkTarget="_self" data-resultSetSize="5"></div>

Для завершения установки JavaScript-кода системы пользовательского поиска необходимо нажать кнопку Опубликовать. Сразу после этого следует проверить его работоспособность путем открытия в браузере URL страницы Результаты поиска, дополненного GET-параметром q, содержащим поисковый запрос, например, https://sergeysl.ru/gcse/?q=freebsd (обязательно учтите, что если Вы выбрали другое название параметра запроса, которое будет добавляться в URL, в Панели управления Пользовательского поиска Google, здесь и далее необходимо заменить q на новое значение).

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

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

<?php } ?>

а затем вставить между представленными строками соответствующие правила CSS, заключенные в теги <style type="text/css"> и </style>. Например, на этом сайте внешний вид результатов поиска определяется следующим кодом, расположенным в файле header.php применяемой темы WordPress:

<head>
...
<?php if (is_page('gcse')) { ?>
<style type="text/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-above-wrapper-area,
div.gsc-adBlock,
div.gsc-refinementsArea,
img.gs-image,
table.gsc-above-wrapper-area-container,
table.gsc-table-result,
table.gsc-resultsHeader,
td.gsc-configLabelCell,
td.gsc-orderby-container,
td.gsc-result-info-container,
td.gsc-table-cell-snippet-close,
td.gsc-table-cell-thumbnail.gsc-thumbnail,
td.gsc-twiddleRegionCell.gsc-twiddle-opened {
  border: none !important;
}
</style>
<?php } ?>
...
</head>

Представленный код скрывает «лишние элементы» страницы Результаты поиска, а также «исправляет» параметры шрифта заголовков найденных результатов. Если подкорректировать 11 и 12 строки, данный набор правил CSS подойдет для любого сайта с установленной системой пользовательского поиска.

Доработка формы поиска WordPress для работы с Пользовательским поиском Goolge

Код формы поиска WordPress (чаще всего он находится в файле searchform.php используемой темы) выглядит примерно так:

<form role="search" method="get" class="search-form" action="<?php echo home_url('/') ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x('Search for:', 'label') ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x('Search …', 'placeholder') ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x('Search for:', 'label') ?>" />
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x('Search', 'submit button') ?>" />
</form>

В Вашей теме он может немного отличаться, однако в любом случае его задача заключается в создании формы, предназначенной для выполнения GET-запроса к главной странице сайта с передачей параметра s, содержащего поисковый запрос — текст, введенный в одноименное поле ввода типа search. Если открывается страница результатов поиска, в это поле помещается текст поискового запроса, предоставленный функцией get_search_query(), если любая другая страница — значение атрибута placeholder, представляющее из себя предложение ввести поисковый запрос, исчезающее при получении фокуса.

Для «переориентации» формы поиска WordPress на совместную работу с Пользовательским поиском Google нужно сделать, чтобы она:

  1. выполняла GET-запрос к странице Результаты поиска, а не к главной;
  2. передавала текст поискового запроса как значение параметра с именем q, а не s;
  3. получала текст поискового запроса при открытии страницы Результаты поиска без применения функции get_search_query().

Для того чтобы форма поиска WordPress начала вести себя именно так, необходимо внести в представленный выше код три изменения:

  1. для изменения URL страницы, к которой будет выполняться запрос, нужно заменить в PHP-коде, формирующем значение атрибута action тега form, аргумент функции home_url() на Постоянную ссылку страницы Результаты поиска;
  2. для изменения имени параметра, содержащего текст поискового запроса, следует заменить значение атрибута name тега input типа search с s на q;
  3. для получения текста поискового запроса при открытии страницы Результаты поиска без использования функции get_search_query() достаточно заменить ее вызов PHP-кодом is_page('gcse') ? esc_attr($_GET['q']) : "", проверяющим, что открывается страница Результаты поиска, а затем получающим поисковый запрос из стандартного массива $_GET и подготавливающим его для использования в качестве значения атрибута value тега input типа search (удаляющим из него все HTML-теги) с помощью функции esc_attr().

После выполнения описанных доработок код формы поиска WordPress должен выглядеть примерно так (измененные строки выделены):

<form role="search" method="get" class="search-form" action="<?php echo home_url('/gcse/') ?>">
  <label>
    <span class="screen-reader-text"><?php echo _x('Search for:', 'label') ?></span>
    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x('Search …', 'placeholder') ?>" value="<?php echo is_page('gcse') ? esc_attr($_GET['q']) : "" ?>" name="q" title="<?php echo esc_attr_x('Search for:', 'label') ?>" />
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x('Search', 'submit button') ?>" />
</form>

Его сохранение завершает установку СПП на сайт. Обязательно учтите, что код формы поиска WordPress может содержаться не только в файле searcform.php, но и в файлах header.php и / или sidebar.php применяемой темы. Естественно, Вы должны найти и доработать все его экземпляры.

Подключение системы пользовательского поиска Google к AdSense и Analytics

В связи с тем, что процедуры интеграция Пользовательского поиска Google с Google AdSense и Google Analytics были рассмотрены в прошлый раз, данный раздел добавлен исключительно для порядка. Все соответствующие инструкции без каких-либо изменений подходят для второго способа установки СПП.

Как известно, сниппеты некоторых сайтов в поисковой выдаче Google содержат строку поиска. Вебмастера могут влиять на ее появление с помощью специальной микроразметки Sitelinks Searchbox, предназначенной для предоставления сведений о поисковой системе сайта, при этом решение о добавлении строки поиска в сниппет принимается поисковыми алгоритмами Google. Стоит ли связываться с микроразметкой Sitelinks Searchbox, если ее присутствие ничего не гарантирует? Я считаю, что имеет смысл добавить ее хотя бы ради самоуспокоения. Дополнительным аргументом в пользу моей точки зрения может служить тот факт, что плагин Yoast SEO автоматически добавляет микроразметку Sitelinks Searchbox (по умолчанию она подразумевает использование встроенного поиска WordPress, но может быть адаптирована под систему пользовательского поиска или отключена). Если Вы согласны с такими доводами, можно переходить от слов к делу.

Google поддерживает микроразметку Sitelinks Searchbox в форматах LD+JSON и Microdata, при этом рекомендуется первый вариант (именно он реализован в плагине Yoast SEO). Код микроразметки Sitelinks Searchbox в формате LD+JSON, соответствующий Пользовательскому поиску Google, выглядит так:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://sergeysl.ru/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://sergeysl.ru/gcse/?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

После изменения URL сайта в выделенных строках он должен быть добавлен в HTML-код главной страницы сайта между тегами <head> и </head>.

В теории все выглядит примерно так, а практика зависит от наличия плагина Yoast SEO. Что делать, если он установлен, и что, если не установлен?

Как я уже сказал, при использовании плагина Yoast SEO микроразметка Sitelinks Searchbox уже присутствует на сайте, и Вам достаточно всего лишь адаптировать ее под СПП посредством изменения значения свойства target, определяющего шаблон поискового запроса. Разработчики плагина Yoast SEO предусмотрели для решения подобной задачи фильтр wpseo_json_ld_search_url. Для приведения значения свойства target в соответствие системе пользовательского поиска с его помощью нужно добавить в файл functions.php применяемой темы WordPress следующие строки:

function change_json_ld_search_url() {
  return home_url('/gcse/').'/q={search_term}'
}
add_filter('wpseo_json_ld_search_url', 'change_json_ld_search_url');

Для оценки полученного результата необходимо открыть Инструмент проверки структурированных данных, ввести URL главной страницы сайта и нажать кнопку ЗАПУСТИТЬ ТЕСТ. После этого нужно щелкнуть по элементу WebSite и убедиться, что его свойства url и target имеют корректные значения:

Результат проверки структурированных данных после изменения свойства target

Также я сказал, что плагин Yoast SEO поддерживает удаление микроразметки Sitelinks Searchbox с сайта. Для решения этой задачи разработчиками предусмотрен фильтр disable_wpseo_json_ld_search. Он включается путем добавления в файл functions.php используемой темы WordPress следующей строки:

add_filter('disable_wpseo_json_ld_search', '__return_true');

Признаком корректного удаления микроразметки Sitelinks Searchbox может служить исчезновение секции potentialAction из элемента WebSite:

Результат проверки структурированных данных после удаления микроразметки Sitelinks Searchbox

Что делать тем, у кого до сих пор не установлен плагин Yoast SEO? В первую очередь нужно очень серьезно задуматься о смене SEO-плагина, а пока мысли будут приходить в порядок, придется поместить между тегами <head> и </head> PHP-код, осуществляющий идентификацию главной страницы сайта:

<?php if (is_home()) { ?>

<?php } ?>

а затем вставить между представленными строками код микроразметки Sitelinks Searchbox в формате LD+JSON. Для того чтобы он не требовал вмешательства во время переезда на новый домен и / или перехода на протокол HTTPS (вел себя аналогично описанной выше функциональности плагина Yoast SEO), имеет смысл заменить статически заданные URL на PHP-код, подставляющий их актуальные значения. С учетом сказанного для добавления микроразметки Sitelinks Searchbox, соответствующей Пользовательскому поиску Google, достаточно поместить в файл header.php применяемой темы WordPress следующий код:

<head>
...
<?php if (is_home()) { ?>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "<?php echo home_url('/') ?>",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "<?php echo home_url('/gcse/') ?>?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>
<?php } ?>
...
</head>

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

Есть, как минимум, три причины, по которым необходимо отключить встроенный поиск WordPress после установки СПП:

  1. после доработки формы поиска посетители не смогут использовать его естественным образом;
  2. ему не будет соответствовать добавленная или измененная микроразметка Sitelinks Searchbox;
  3. плохие люди и / или скрипты смогут создавать с его помощью лишнюю нагрузку на Веб-сервер.

Если Вы согласны с перечисленными аргументами, для отключения встроенного поиска WordPress можно воспользоваться плагином Disable Search.

Если Вы не хотите устанавливать дополнительный плагин, нужно добавить в файл functions.php применяемой темы WordPress следующие строки:

function disable_wordpress_search($query) {
  if (is_search()) {
    unset($_GET['s'], $_POST['s'], $_REQUEST['s'], $query->query['s'], $query->query_vars['s']);
    $query->is_search = false;
    $query->is_404 = true;
    status_header(404); 
    nocache_headers();
  }
}
add_action('parse_query', 'disable_wordpress_search'); 

Представленный код добавляет обработчик события parse_query, выполняющий идентификацию запросов к встроенному поиску WordPress с помощью функции is_search(), удаляющий из них все параметры, так или иначе связанные с поиском, делающий редирект на 404-страницу, устанавливающий 404-код ответа HTTP и добавляющий HTTP-заголовки, запрещающие кеширование, посредством функций status_header() и nocache_headers(), соответственно.

Заключение

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

Понравилась статья?

Подпишитесь на RSS или почтовую рассылку;

Присоединяйтесь в Twitter, Facebook, Google+, VK;

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

Оставить комментарий