– Читать 10 минут –

19 октября 2021

Как создать внутренний поиск на сайте

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — УДОБСТВО

Инструкцию одобрил
Tech Head of SEO в TRINET.Group

Рамазан Миндубаев

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

Содержание

Использование расширенного поиска на сайтах
Как добавить поиск Google на сайт
Как внедрить поиск на сайт с помощью модулей
3.1. Живой ajax-поиск для сайтов на OpenCart
3.2. Поиск Google для сайтов на WordPress
Как сделать поиск по сайту на HTML своими руками
Как добавить голосовой поиск на сайт
Заключение
FAQ

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

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

Пример живого поиска на сайте

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

Поиск по товарам и категориям в интернет-магазине

Пример реализации поиска с уточнением категории товара

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

Чтобы включить сбор данных о поиске на сайте нужно узнать, какой используется параметр для этой функции. Увидеть его можно в строке URL-адреса при поиске на сайте. Например, может использоваться параметр /search/?search="запрос пользователя" либо search.php?s="поисковый запрос":

Параметры поиска в строке браузера

Затем перейдем в раздел «Администратор» Google Analytics и выберем нужное представление. В настройках включим отслеживание поиска по сайту:

Отслеживание поиска по сайту в Google Analytics

Включение отслеживания поиска по сайту в Google Analytics

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

Параметры запроса и категории внутреннего поиска в Google Analytics

Указание параметров запроса для отслеживания поиска по сайту

Параметр категории также можно узнать из адресной строки при расширенном поиске в конкретной категории. После внесения параметров нажмем «Сохранить».

Просмотреть поисковые запросы посетителей можно в разделе «Поведение» — «Поиск по сайту»:

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

Статистика поиска по сайту

Как добавить поиск Google на сайт

На сайт можно добавить поиск Гугл. В начале необходимо получить идентификатор поисковой системы:

Добавление поиска Google на сайт

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

Заполним поля, указав адрес своего сайта, нужный язык и название поисковой системы. После этого нажмем «Создать»:

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

Добавление поиска Google на сайт

Затем нужно получить html-код для размещения на сайте:

Код системы пользовательского поиска Google для сайта

Получение кода поиска Google для сайта

Скопируем полученный код на сайт:

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

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

Как внедрить поиск на сайт с помощью модулей

Добавить быстрый расширенный поиск можно с помощью соответствующих модулей для своей CMS. Рассмотрим примеры бесплатных расширений, которые можно быстро установить на сайт.

Живой ajax-поиск для сайтов на OpenCart

[Free] Ajax live search — бесплатный плагин живого ajax-поиска для интернет-магазинов на OpenCart.

Плагин ajax-поиска для интернет-магазинов на OpenCart

Модуль ajax-поиска для OpenCart

Модуль совместим с OpenCart 2-3 версий, поддерживает мультиязычность, быстро и просто устанавливается, не изменяя исходный код ресурса.

Чтобы установить модуль, скачаем архив для нужной версии OpenCart:

Скачивание модуля Ajax live search для OpenCart

Выбор модуля нужной версии OpenCart

В загруженном архиве необходимо поменять расширение: .zip на .xml:

Изменение расширения модуля поиска

После этого нужно загрузить данный файл через административную панель сайта. Перейдем в «Установщик дополнений» и нажмем «Загрузить».

Загрузка модуля

После установки либо удаления модулей OpenCart необходимо обновлять кэш модификаторов, иначе изменения не отобразятся на сайте. Перейдем в раздел «Менеджер дополнений» и нажмем «Обновить»:

Обновление кэша после загрузки модуля

После этого перейдем в «Дополнения», установим там модуль «Ajax Live Search» и перейдем к его редактированию:

Установка модуля Ajax live search для OpenCart

Редактирование модуля поиска

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

Редактирование модуля Ajax live search для OpenCart

Включение модуля Ajax live search

Затем можно проверить работу поиска на сайте:

Проверка работы модуля на сайте

Модуль установлен корректно, на сайте работает улучшенный поиск.

Поиск Google для сайтов на WordPress

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

Плагин поиска WP Google Search

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

Перейдем в раздел «Плагины» и выберем «Добавить новый». Затем найдем плагин по названию и нажмем «Установить»:

Установка плагина поиска

После установки жмем «Активировать». После этого нужно настроить поиск, перейдя в появившийся раздел «WP Google Search»:

Активация плагина поиска WP Google Search

Для работы плагина понадобится настроить поиск Google, как это было описано ранее в пункте 2.

После этого вернемся в админку WordPress и перейдем в «Редактор».

Редактор страниц в админ-панели WordPress

Редактор в админке WordPress

Затем нужно отредактировать и обновить шаблон страницы page.php, добавив в нужное место строку поиска с помощью скопированного кода:

Редактирование кода page.php в WordPress

Добавление кода поиска в page.php

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

Идентификатор поиска Google

Этот код внесем в админку сайта:

Настройка плагина поиска WP Google Search

После этих действий на всех страницах сайта, кроме главной, появится поиск Google:

Пример поиска Google на сайте

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

Внутренний поиск Google для CMS WordPress

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

Для добавления поиска на главную страницу нужно отдельно править шаблон front-page.php и добавлять в него код поиска.

Как сделать поиск по сайту на HTML своими руками

Если вы владеете навыками программирования и готовы написать код для поиска самостоятельно, то можно создать форму поиска с помощью HTML и CSS своими руками. Для этого добавьте в нужное место сайта строку поиска с помощью такого кода:

<div class="mysearch">
<input type="text" placeholder="Поиск по сайту">
</div>

/* После этого добавьте стили CSS, например, задайте внешний вид окна поиска таким образом:*/

.mysearch input[type=text] {
float: left; /* Выравниваем строку поиска по левому краю, а все остальные элементы обтекают ее по правому краю.*/
background: #e0d1d1; /* Устанавливаем цвет фона */
padding: 10px;/* Задаем поля вокруг текста */
border: 2px solid black; /* Устанавливаем рамку */
margin-top: 15px; /* Задаем отступ сверху */
margin-right: 12px; /* Задаем отступ справа */
font-size: 14px; /* Указываем размер шрифта */
}

Как добавить голосовой поиск на сайт

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

Для добавления голосового поиска на сайт можно использовать Web Speech API — бесплатную технологию движка Chromium, которая позволяет преобразовывать голос в текст с помощью добавления на свой ресурс определенного кода JavaScript. Такое распознавание голоса можно внедрять в поиск любого веб-сайта или онлайн-магазина.

Также для добавления голосового поиска можно использовать плагины и модули нужной CMS, например, Voice Search или Universal Voice Search для сайтов на WordPress.

Плагины голосового поиска для сайтов WordPress

Плагины для голосового поиска WordPress

Сергей Кокшаров «Как получать больше трафика из голосового поиска»

Заключение

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

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

FAQ

Как работает система поиска на сайте?

Поиск на сайте работает на основе скрипта, который обрабатывает текст, введенный пользователем в форму поиска. Скрипт поиска может быть встроен в CMS, добавлен с помощью кода, предлагаемого поисковыми системами, или написан самостоятельно на PHP и других языках программирования.

Как сделать поиск по сайту?

Поиск на сайте можно добавить с помощью плагинов и модулей CMS, например, установив модуль Ajax live search для интернет-магазина на OpenCart. Для сайтов WordPress подойдет плагин WP Google Search, который позволяет внедрить на ресурс поиск Google.

Как добавить строку поиска Google на сайт?

Google позволяет создать систему пользовательского поиска. Для этого нужно указать адрес своего сайта и получить идентификатор, после чего будет сгенерирован код для добавления на ресурс. После внедрения HTML-кода на сайте будет отображаться строка поиска Google.

Как включить голосовой поиск на сайте?

Для включения голосового поиска на сайте можно использовать плагины и модули, например, плагин WordPress Universal Voice Search. Также для включения голосового поиска на любых сайтах подойдет Web Speech API — бесплатная технология движка Chromium, осуществляющая распознавание голоса в текст.

Эта статья — часть модуля «Список задач» в Serpstat

«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.

Начать работу со «Списком задач»

Оцените статью по 5-бальной шкале

4.8 из 5 на основе 5 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы