Поиск по сайту как сделать – Поиск на сайте своими руками / Habr

как вставить Яндекс.Поиск на сайт

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

Итак, почему поиск по сайту от поисковых систем является наиболее эффективным? В пользу этого выступает несколько факторов:

• Во-первых, и самое главное: поисковые системы, как бы тривиально это не звучало, специализируются на поиске. Именно поэтому стоит доверять качеству их поисковых алгоритмов.
• Поисковые системы учитывают морфологию языка;
• Используются поисковые подсказки;
• Исправление ошибок в поисковых запросах;
• Учет поисковой статистики.

Поиск по сайту через Яндекс.Поиск

Поисковая система Яндекс предоставляет бесплатный удобный инструмент интеграции поиска: Яндекс.Поиск для сайта.

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

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

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

Поисковую строку можно дополнить инструментом уточнения результатов поиска.

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

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

В статистике поиска вы сможете увидеть подробную информацию о поисковых запросах посетителей сайта за определенный выбранный промежуток времени.

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

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

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

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

Google Search for work предлагает вам широчайшие возможности поиска, используя те же технологии, что и в поиске от «Гугл». Google гарантирует высокую релевантность, т.е. соответствие запросам, функциональность, интеграцию «под ключ».

Перечислим основные возможности поиска по сайту от Google:

• Персонализация.  Вы сможете оформить поиск как вам угодно, сможете убрать логотип Google и разместить свой, изменить цвета, форму, в общем весь внешний вид.
• Многоязычность. Поиск возможен на любом языке, вы можете установить язык по умолчанию или он будет определяться автоматически.
• Смещение результатов. Вы можете вручную настроить рейтинг и выборку результатов поиска в зависимости от даты публикации, например, чем новее материал, тем он выше в результатах.
• Уточнение по ярлыкам, это как уточнение результатов поиска у Яндекс, вы создаете категории материалов, по которым пользователь при необходимости и производит поиск.
• Поиск изображений и иллюстрация результатов поиска изображениями, размер которых вы можете менять, или они настроятся автоматически;
• Отсутствие рекламы;
• Индексирование по требованию, т.е. если вы добавили новый материал, или внесли изменения в старый, то вы сами можете отправить робота гугл зафиксировать обновления.
• Синонимы. Каталог запросов автоматически заполняется синонимами, различными вариантами написания слов (Тойота, Toyota), а так же аббревиатурами и их расшифровкой.
• Выбор URL для автозаполнения. Здесь вы вручную сможете настраивать и контролировать список подсказок, которые открываются у пользователя при начале ввода запроса.
• К преимуществам поиска от Google относится то, что вы можете осуществлять поиск не по одному сайту, а по нескольким.
• Связь поиска по сайту с другими сервисами Google. На Google Analytics вы сможете отслеживать статистику запросов и поведение посетителей, а сервис AdWords позволит вам зарабатывать на размещении рекламы.

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

Инструкция: как вставить Яндекс.Поиск на сайт

Теперь разберем установку Яндекс.Поиск для сайта на примере нашего сайта Nubex. Код сервиса можно вставить в cms, интегрировав в сайт, а можно просто вставить код в любой подходящий блок сайта.

1. Зайдите на сайт Яндекс.Поиск для сайта и нажмите кнопку «Установить поиск».

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

3. Выполните настройки внешнего вида поисковой строки: цвет, шрифт, с фоном или без. Переходите к шагу 3.

4. На третьем шаге выполняются точные настройки того, как будет выглядеть результат поиска и на какой странице он будет находиться (на странице Яндекса или на вашем сайте). Внизу страницы расположен предпросмотр результатов, на который вы можете ориентироваться. Перейдите к 4ому шагу.

5. Проверьте работу поиска по вашему сайту. И перейдите к следующему шагу.

6. Теперь вам необходимо скопировать код сервиса и установить на сайт. Обратите внимание, что для поиска и результатов поиска два разных кода. Зачем это нужно? Можно настроить поисковую строку в одном поле или в боковой колонке, а результаты выводить на отдельной странице. Таким образом пользователь будет задавать запрос и перекидываться на станицу с результатами.

7. Код результатов поиска бывает 2ух разных типов: iframe и html&css. В чем разница? Iframe более простой вариант кода, он больше подходит для сайтов со сложным дизайном, однако ограничивает в настройке внешнего вида результатов. Html&CSS – результаты поиска будут оформлены в соответствии с css-стилем вашего сайта, а код встраивается во всю структуру страницы сайта.

8. Теперь заходим в административную панель сайта. Мы решили установить поисковую строку на главной странице нашего сайта, поэтому переходим в раздел «Документы сайта» -> «Колонка на главной». И нажимаем кнопку «Создать текстовый блок».

9. В поле для вставки текста нажмите кнопку «Источник». У вас откроется HTML-код страницы, сюда и вставляйте скопированный код формы поиска и результатов. Нажмите кнопку «Сохранить».

10. Обновите страницу вашего сайта. Строка поиска должна была появиться. 

Заключение

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

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

nubex.ru

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

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

Вариант 1: Добавить простую форму, которая будет пересылать запрос на страницу поисковой системы

Выглядит это примерно так:

<form action="http://google.com/search" name="search-form" target="_blank">
    <input type="hidden" name="q" value="site:https://phpland.org" />
    <input name="q" value="" />
    <input type=submit value="Найти" />
</form>

Посмотреть результат можно в песочнице «Codepen»: https://codepen.io/phpland/pen/BPXrJG

Мы заполняем форму (которая состоит из одного поля и кнопки отправить) на нашем сайте и отправляем её методом GET на сайт Google/Yandex, который принимает данные и показывает нам результаты, которые он нашел на странице поисковой системы. Благодаря скрытому input мы можем сказать поисковой системе, что искать нужно только на нашем сайте, а не по всему интернету. Такой вариант работает при условии, что поисковая система уже проиндексировала наш сайт и находит у себя наши страницы.

---

Вариант 2: Встроить поиск Yandex или Google на свой сайт

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

Для начало нам нужно перейти на сайт https://site.yandex.ru/searches/ (зарегистрироваться) и нажать кнопку «Добавить поиск».

После этого заполнить поле «Техническое название поиска» (например «phpland»), указать «Область поиска» (https://phpland.org).

Далее перейти в левом меню по ссылке «Результаты поиска» и выбрать «Показывать результаты на моей странице», здесь нужно указать страницу, на которой будет отображаться результат поиска, например /search.php.

Далее нужно перейти в левом меню по ссылки «Код для вставки на сайт» и скопировать код формы поиска и разместить его там, где вы хотите чтобы находился ваш поиск. Можно прям на странице /search.php.

Далее нужно скопировать код результатов поиска и вставить его в том месте, где вы хотите чтобы отображались результаты поиска, например на странице /search.php.

Теперь если мы перейдём на нашу страницу /search.php, то должны увидеть форму поиска и если мы введём какое не будь ключевое слово, то увидим ниже результаты поиска.

Посмотреть результат можно на нашем сайте сообщества, перейдя по ссылке https://phpland.org/search

При желание можно настроить внешний вид формы на сайте Яндекса и/или просто перезаписать CSS стили.

Примерно также работает и поиск Google: https://cse.google.com

---

Вариант 3: Написать свой поиск на PHP

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

---

Каждый из вариантов имеют свои плюсы и минусы.

Лично я не вижу смысла писать свой поиск на PHP для большинства случаев (если сайт индексируется поисковыми системами), хотя уже не раз приходилось делать это. Почему? Потому что написать хороший поиск, который будет не просто искать точное совпадение, но будет учитывать разные параметры (способы написания, синонимы, и т.д.) займёт у нас много времени, которое мы можем потратить на более важные вещи в жизни. Однако это хорошая задача, для тех, кто хочет научиться программировать на PHP и повысить свой скилл… 🙂

Для себя я выбрал второй вариант, так как он для меня подошел больше всего, а какой вариант выбрали вы?

---

Вёрстка сайта с нуля 2.0 Пройди новый Видеокурс и научись верстать сайты любой сложности. Получить курс

Порекомендуй друзьям:

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий:

phpland.org

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

Вы здесь: Главная — CSS — CSS3 — Как сделать поиск по сайту на HTML

На этом уроке мы научимся встраивать строку поиска в адаптивное меню навигации, используя при этом только HTML/CSS код.

Демонстрация примера.

HTML разметка

Внутри меню навигации <nav> у нас будет три пункта меню в виде ссылок и встроен блок с классом search-box, внутри которого форма для поиска с полем поиска и кнопкой.

<nav>
  <a href="#">Главная</a>
  <a href="#">Услуги</a>
  <a href="#">Контакты</a>
  <div>
  <form action="#">
    <input type="text" placeholder="Поиск.." name="search">
    <button type="submit">Отправить</button>
  </form>
  </div>
</nav>

Вся эта конструкция до стилизации выглядит таким вот образом.

CSS код

Зададим светло-зелёный цвет фона для панели навигации.

nav {
  background-color: #dcedc8;
}

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

nav a {
  float: left;
  display: block;
}

Меняем цвет фона под ссылками при наведении.

nav a:hover {
  background-color: #8bc34a;
}

Стилизуем активный элемент для выделения пункта меню текущей страницы.

nav a.active {
  background-color: #8bc34a;
  color: #fff;
}

Располагаем контейнер для поиска на правой части панели навигации.

nav .search-box {
  float: right;
}

Стилизуем поле для поиска внутри панели навигации.

nav input[type=text] {
  padding: 5px;
  margin-top: 7px;
  border: none;
}

Стилизуем кнопку Отправить внутри контейнера с поиском, располагая её правее по отношению к строке поиска (float:right).

nav .search-box button {
  float: right;
  padding: 5px;
  margin-top: 7px;
  margin-right: 15px;
  background: #8bc34a;
  border: none;
  cursor: pointer;
}

Меняем цвет кнопки при наведении.

nav .search-box button:hover {
  background: #bdbdbd;
}

До ширины экрана 625 пикселей панель навигации выглядит хорошо.

После 625 пикселей конструкция ломается, необходимо делать медиа-запрос для маленьких устройств.

Медиа-запросы

Первым делом отменим обтекание везде, где оно было (float:none), это позволит всем элементам занять вертикальное положение, на ширине экрана меньше, чем 625 пикселей.

@media screen and (max-width: 625px) {
  nav .search-box {
    float: none;
}
  nav a, nav input[type=text], nav .search-box button {
    float: none;
    display: block;
    text-align: left; /* ссылки слева */
    width: 100%; /* на всю ширину экрана */
}
  nav input[type=text] {
    border: 1px solid #689f38; /* рамка для строки поиска */
  }
}

Добавить иконку на кнопку Отправить

1) Добавить ссылку между тегами head:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2) Вставить иконку между тегами button:

<button type="submit"><i></i></button>

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

Посмотреть код целиком можно на Codepen

See the Pen Search Bar with Submit icon by porsake (@porsake) on CodePen.

• Создано 31.10.2018 10:20:35
• Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru//images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

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

180

Внутренний поиск по сайту – это поисковая функция на вашем ресурсе. Например, он может представлять собой виджет для поиска в WordPress или производить поиск продукта в плагине WooCommerce. Если у вас сайт больше чем на пару десятков страниц, вам определенно нужна такая функция внутреннего поиска. Вот несколько проверенных приемов для того, чтобы внутренний поиск на вашем сайте был полезен посетителям.

Внутренний поиск на информационных сайтах

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

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

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

Показатели хорошего внутреннего поиска

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

Есть несколько показателей, важных для посетителя сайта:

• Это должно быть заметно. Если вы хотите, чтобы люди использовали функцию внутреннего поиска, не прячьте её в подвал сайта. Добавление её в верхнюю часть боковой панели или в шапку будет гораздо лучшим решением;
• Должно быть ясно, что это функция поиска. Очень важно. Голого поля ввода без заголовка, кнопки запуска или поясняющей надписи будет недостаточно.

Внутренний поиск по сайту можно выделить, например, так:

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

Страницы результатов поиска для информационных веб-сайтов

Поле для ввода поискового запроса – только первый шаг на пути к созданию функции внутреннего поиска. Шаг номер два – сама страница с результатами поиска. Прежде всего, нужно проверить несколько свойств:

1. Ключевое слово должно выделяться на странице с результатами поиска. Если бы вы захотели решить, по какому результату кликнуть, то просмотрели бы выдачу и быстро перешли по какой-то одной ссылке. Ваша собственная страница с результатами поиска – инструмент, а не конечное место назначения. Выделение ключевого слова, используемого в поиске (как у Google) намного облегчает просмотр результатов.
2. Страницы с результатами поиска содержат отрывки из текста с ключевыми словами. На самом деле сложно выбрать результат, если на странице с результатами внутреннего поиска показывают только заголовки. Вот почему Google иногда игнорирует подготовленные мета-описания, показывая вместо этого текстовый отрывок со страницы с ключевым словом. Это помогает вашим посетителям. Для внутреннего поиска по сайту это тоже подходит.
3. Результаты поиска ранжируются по релевантности. Для всех пользователей WordPress важно знать: с версии 3.7 платформа сортирует результаты поиска по релевантности. Однако плагины вроде SearchWP или сервисы вроде Algolia по-прежнему намного усиливают функцию внутреннего поиска и обеспечивают управление релевантностью. Раньше сортировка результатов шла по дате (самая свежая информация выдавалась первой), что было совершенно бессмысленно. Подавайте самые подходящие результаты первыми.
4. Результаты внутреннего поиска не индексируются Google. Представьте поисковую машину, нацеленную на максимально быстрое предоставление своим пользователям нужной информации. Google Knowledge Graph (Граф знаний. Wikipedia) вставляет ответ прямо в вашу страницу с результатами поиска.

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

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

Ценные данные для оптимизации веб-сайта

Есть еще одно преимущество хорошей функции внутреннего поиска по сайту. Она помогает при анализе ключевых слов. В Google Analytics в «Поведение» > «Поиск по сайту» > «Условия поиска» вы найдете все ключевые слова, которые вводили люди при использовании функции внутреннего поиска на вашем сайте.

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

Пользовательская поисковая машина

Google предлагает функцию использования своей поисковой машины для пользовательского веб-сайта. Она называется Пользовательская Поисковая Машина (Custom Search Engine — CSE). С её помощью вы можете легко добавить функцию внутреннего поиска на сайт. Эта функция показывает результаты так, как их выводил бы Google для запросов site:yoursite.com.

Эту функцию поиска можно ограничить конкретной частью вашего веб-сайта, или даже конкретной страницей. Хороший вариант для онлайн-магазинов – ограничить результаты поиска, используя тип данных Продукт. Если вы добавляете определенный тип, все его потомки автоматически включаются в условия поиска (подробнее о типах данных – на schema.org).

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

Также есть функция добавления рекламных объявлений Adsense. Но не стоит использовать её на сайте онлайн-магазина, ведь так вы просто перенаправите посетителей на другие сайты или, что еще хуже, заплатите за переходы по своим объявлениям на собственный сайт.

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

Гугл предоставляет возможность создать свой собственный внутренний поиск по сайту, с применением технологий google. Все делается достаточно просто. Если есть аккаунт в этом поисковике, то просто открыть страницу по адресу https://cse.google.com/cse/all и создать поиск со своими настройками и внешним видом.

После этого скопировать полученный код и внедрить в свой проект. В каждой cms-системе есть свои возможности внедрения кода, но в основном используется модуль, виджет и прочие названия для вставки html-кода.

Используете ли вы внутренний поиск по сайту в своем варианте? Как вы улучшили свои внутренние страницы результатов поиска? Было бы неплохо узнать ваш опыт в этом деле и дополнительные советы в комментариях.

 

starting-constructor.ru

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

Здравствуйте, дорогие друзья!

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

Навигация по статье:

Способы создания поиска на сайте

Если перед вами возник вопрос создания поиска на сайте? Вы можете пойти несколькими путями:

1. 1.Воспользоваться стандартным механизмом поиска той CMS, которую вы используете.
2. 2.Воспользоваться плагином или модулем поиска.
3. 3.Нанять программиста, чтобы он написал модуль поиска для вашего сайта.
4. 4.Сделать поиск на сайте при помощи специальных сервисов Яндекс.Поиск и системы пользовательского поиска Google.

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

Вариант с программистом, конечно, позволит создать более качественную систему поиска чем стандартные плагины или модули, но до поиска яндекса или Google ему всё же далеко. Да и стоить это будет не дешево.

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

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

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

Поиск для сайта при помощи Яндекс.Поиск

Чтобы сделать поиск для сайта при помощи поисковой формы Яндекс вам нужно:

1. 1.Зайти на главную страницу сервиса по этому адресу: https://site.yandex.ru. Пройти авторизацию, или, если у вас нет учетной записи в Яндексе, зарегистрироваться. После чего, нажимаем на кнопку «Установить поиск».

2. 2.На следующей странице в поле «Техническое название поиска» вводим название, которое будет отображаться только для нас, а в поле «Название поиска для стандарта Opensearch» вводим название для стандарта Opensearch.
3. 3.После чего выбираем фильтр. Если ваш сайт не содержит никакого противозаконного контента, можно выбрать «Без ограничений».
4. 4.В следующем пункте, при нажатии на кнопку «Добавить сайты и исключения», откроется форма, в которой нам нужно указать адрес сайта, или группу сайтов, в пределах которых будет осуществляться поиск. Это особенно удобно в случае, если у вас есть несколько ресурсов схожей тематики. В случае, если вы введете несколько адресов, пользователю, в поисковой выдаче, будут отображаться страницы с нескольких, указанных вами, сайтов.


Вводим адрес и нажимаем на кнопку «Добавить».

5. 5.Указываем адрес электронной почты, на который вы хотите получать уведомления, и нажимаем кнопку «Далее к шагу 2».

6. 6.На следующей странице нам необходимо настроить внешний вид формы нашего будущего поиска Яндекс. Выбираем тип формы:


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



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

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

8. 8.Переходим на следующую страницу настроек. Здесь нам нужно протестировать, как работает поиск, и если есть что-то, что нас не устраивает, мы можем вернуться на предыдущий шаг и исправить это. Если все в порядке, переходим на следующую страницу.
9. 9.Здесь мы видим сгенерированный кусок кода нашей формы поиска, который нужно скопировать вставить в шаблон страницы сайта в том месте, где вы хотите его расположить.

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

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

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

1. 1.Заходим в административную часть сайта и переходим в раздел «Внешний вид» => «Виджеты».
2. 2.В область сайдбара перетягиваем новый виджет «Текст».

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

4. 4.Переходим на сайт и смотрим на полученный результат.

В большинстве случаев нужно при помощи CSS-свойств подогнать внешний вид под дизайн сайта.

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

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

С уважением Юлия Гусарь

impuls-web.ru

Как сделать поиск по сайту на php и html

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

 Обратимся к готовым формам

Как сделать поиск по сайту быстро и без особых усилий? Этот вопрос часто задают себе владельцы сайтов, не знающие язык html настолько глубоко, чтобы написать скрипт поиска самостоятельно. Специально для них известные поисковые системы предусмотрели простую установку стандартизированных поисковых форм. Имеются в виду функции внутреннего поиска от Яндекс и Гугл. Давайте рассмотрим, как их установить.

Для инсталлирования поиска от Яндекс необходимо зайти на «Яндекс-сайт» и кликнуть на ссылку «Установить поиск» в шапке страницы.

Зарегистрировавшись (если еще нет аккаунта в Яндексе) или введя логин и пароль, пользователь попадает на страницу пошаговой установки поиска по сайту.

В поле «Название поиска» нужно будет объяснить предназначение установки формы. Особой роли это не играет, и на процесс поиска не повлияет, но система сделала заполнение этого поля обязательной процедурой. Кликнув на ссылку «Добавить сайты», следует внести адрес своего ресурса. Кроме того, система попросит пользователя ввести  электронный адрес. На него будут приходить сервисные сообщения от Яндекс, статистика и прочая информация. Если в этом поле указать почтовый ящик, созданный не в Yandex, на него придет ссылка для подтверждения работоспособности.

Второй этап — определение внешнего вида поискового модуля.

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

На третьем этапе пользователю необходимо настроить отображение результатов поиска.

После внесения необходимых настроек пользователю будет предложено проверить работу поиска.

Для этого нужно ввести в поисковую строку любой запрос и нажать «Найти». После этого загрузится страница с результатами поиска. Если появились вопросы — пользователь сможет вернуться назад и изменить настройки. Если все удовлетворило — можно переходить на последний этап установки.

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

Установить поисковую форму от Google еще проще. Но для этого обязательно необходимо зарегистрировать собственный аккаунт в этой системе.

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

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

Те, кто заходят получать дополнительный доход, должны учесть, что пользователи их сайтов при выводе результатов поискового запроса сначала увидят рекламные ссылки от Google и лишь ниже — результаты поиска по сайту.

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

Вот, собственно, и все — на финальном этапе нужно скопировать готовый код и установить его в исходники сайта.

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

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

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

Тестирование скрипта на локальном сервере

Можно организовать поиск по сайту на php, установив собственный скрипт. Обязательным условием при этом является поддержка языка php сервером хостинга, на котором находится сайт пользователя.

В качестве примера используем бесплатный скрипт «Поиск по сайту 1.1».

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

В папке search находятся файлы дистрибутива скрипта:

Перед установкой нелишним будет проверить работоспособность скрипта. Для этого можно попробовать установить его на локальном сервере Denwer.

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

Определив страницу, на которой должна находится поисковая форма, нужно добавить на нее следующий код:

Обновив страницу, мы увидим следующую поисковую форму:

Все, что остается — протестировать скрипт. Если все устроит — можно устанавливать его на рабочий сайт.

wildo.ru

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

Существует столько сайтов, но как выделится на фоне остальных, как найти такую «фишку», чем бы ваш сайт запомнился на фоне остальных. Чтобы человек вспоминал сайт и он ассоциировался с каким-нибудь элементом сайта, который оформлен необычно. И я расскажу и покажу как можно из простой поиск на сайте — оформить красиво и оригинально!

Реальный пример поиска:

Посмотреть примерСкачать

Уроки о том, как оформить красиво элементы на сайте:

С помощью статей выше вы можете оформить обычные элементы на сайте оригинальным образом.

Полноэкранный поиск по сайту

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

Для этого эффекта использовались переходы CSS, которые и создают анимацию. Тут сразу хочу сказать что данное оформление поиска является экспериментальным и тестировалось только в современных браузерах, которые поддерживают свойства CSS3. На демо форма поиска находится в правом верхнем углу страницы.

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

Видео по установке формы поиска на WordPress

Процесс установки я решил не писать, а снять видео об этом. Я думаю это будет в более понятной для вас форме. Вам лишь нужно просто повторять за мной.

Необходимые файлы

Вывод

Урок получился небольшой, но это если не учитывать видео. Думаю, благодаря видео каждый способен установить такую форму поиска на свой сайт. Она необычна и пока что я не видел сайтов в рунете, которые использовали бы такой вид формы поиска. Если вам понравилась данная форма поиска — попробуйте сделать ее на своём сайте, ведь вы сможете убрать ее в любое время, если она не приживется.

 

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Как сделать поиск по сайту — делаем красивый поиск по сайту 5.00/5 (100.00%) 2 голос(ов)

Чтобы получать свежие статьи — выберите любой удобный для вас мессенджер ниже — просто кликните по нему:

sitehere.ru