Пользовательский поиск от Google на блоге

Пользовательский поиск от Google на блоге WordPress

Здравствуйте, уважаемые читатели блога WPnotes.ru! Сегодня я расскажу и покажу как установить на блоге замену стандартному поиску WordPress. Зачем устанавливать другую форму поиска я попытаюсь объяснить в нескольких абзацах ниже.

Поисковая форма WordPress напоминает поисковые сервисы на момент их появления в середине 90-х годов. То есть достаточно упомянуть искомое слово в статье и вы без труда найдете его, но при этом не будет учитываться такое понятие как релевантность, да и удобство подачи результатов поиска особо не радует.

Google или тот же Яндекс ушли далеко вперед в этих вопросах и дать возможность читателям пользоваться более совершенными возможностями очень важно для продвижения ресурса.

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

В добавок пользовательский поиск от Google позволяет размещать рекламные объявления в полученных результатах. Здесь вы уже совмещаете удобство с возможностью заработка. Сразу отмечу что тему монетизации поисковых запросов рассмотрю отдельно.

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

Поиск на сайте от Google

Получить код для пользовательского поиска можно двумя путями. Через Google Adsense или же Систему пользовательского поиска. Предположу, что у вас нет аккаунта в Adsense и воспользуюсь вторым вариантом.

пользовательский поиск от Google на сайте

Вводите адрес вашего блога/сайта, выбираете русский язык.

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

Остается только получить код.

получить код поиска Google

Выглядит код поиска следующим образом.

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

Вы можете вставить его целиком, например, в виджет «Текст» и поместить в сайдбаре. Либо сам скрипт вставить в файл header.php или footer.php, а последнюю стоку уже вставлять в то место, где вы планируете разместить форму поиска.

<gcse:search></gcse:search>

Это самый простой вариант, но рассмотрим настройки немного подробнее.

Настройки пользовательского поиска Google

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

Я рассмотрю лишь самые основные настройки, вы всегда сможете прочитать подробности в руководстве.

5 вкладок настройки:

  • Основные сведения. Задайте описание поисковой системы, а если вы планируете сразу начать показ объявлений в поисковой выдаче, то перечислите ключевые слова. Таким образом контекстная реклама будет соответствовать тематике запросов. Русский язык очень богат и в случае синонимов, реклама может быть совсем другого направления.
  • Получение дохода. Если у вас уже имеется аккаунт ,то можете включить эту функцию. Более подробно на Google Adsense я остановлюсь в будущем.
  • Панель администратора. Возможность добавить дополнительного пользователя.
  • Индексирование. Вашей статьи нет в индексе? Нет проблем — здесь вы можете указать URL.
  • Дополнительно — загрузка XML-файла.

Внешний вид — настраиваем форму показа результатов поиска.

настройка внешнего вида результатов поиска Google

Во вкладке «Темы» задаем внешний вид формы поиска.

внешний вид формы поиска от Google

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

собственная настройка внешнего вида формы поиска Google

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

уменьшенные изображения страниц в результатах поиска

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

Как добавить форму поиска на сайт в нужное место?

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

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

код формы поиска Google с расширенными функциями

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

<div id='cse' style='width: 100%;'>Loading</div>

Я убрал из него слово Loading, и ширину (width) указал в пикселях а не процентах.

Следующая часть это сам скрипт, который я вставил в файл footer.php. И последняя, третья часть кода — это стиль. Я вставил его в конце файла style.css. Выбрал я этот код на будущее, так как можно при желании и небольших знаниях CSS поменять оформление.

При внесении изменений не забудьте сделать резервные копии файлов. В случае если вы сделаете ошибку, то без труда сможете возобновить работу сайта.

Теперь открываем файл header.php и пытаемся логически найти то место, куда следует вставить первую часть кода. В каждом шаблоне это будет свое уникальное место и мой пример всего лишь частный случай, но тем не менее смысл должен быть понятен.

Я без труда, сразу определил место для кода после названия и описания сайта, форма поиска встала как раз под описанием. Но меня такое расположение не устраивало и необходимо было задать его при помощи CSS. В шапке у меня пустое пространство справа куда я и планировал поместить поиск, для этих целей я воспользовался position absolute.

Вот как это выглядит, пришлось поэкспериментировать с пикселями, но это дело двух минут.

<div id='cse' style='width:320px;position:absolute;top:28px;right:150px;'></div>

Top указывает на отступ сверху, а right — справа. Для успешного выполнения подобного рода задач, конечно, рекомендуется иметь начальные знания по CSS и HTML.

Но правильнее будет указать позицию поисковой формы непосредственно в файле style.css, воспользовавшись селектором идентефикатора.

#cse {
position: absolute;
top: 28px;
right: 150px;
}

Конечный результат:

Шапка WPnotes.ru

На этом позвольте мне закончить, а на десерт старый добрый мультик «Жил-был пёс».

До встречи на WPnotes.ru!

Понравилась статья? Поделитесь с друзьями:


 

Навигация по записям