Пошуковий плагін для сайту

Влад Мержевич

У браузері Firefox, починаючи з версії 2.0, є вбудований рядок пошуку, який дозволяє вводити пошукові запити до Google, Яндексу та інших систем без переходу на сайт. Ця ідея стала успішною і пізніше розробники інших браузерів її підхопили. Багато людей, включаючи власників сайтів, вже користуються подібним пошуком, але більшість з них не усвідомлюють, наскільки легко створити власний пошуковий плагін для сайту. Це має багато переваг: користувачі починають активніше використовувати пошук, збільшується кількість відвідувачів, покращується результативність сайту і поліпшується його зручність. Головне — практично немає витрат. Якщо на сайті використовується пошук, "прикрутити" до нього плагін — це легко.

Основу плагіна становить технологія OpenSearch, яка представляє собою колекцію невеликих форматів для розповсюдження результатів пошуку. Ці дані можуть використовуватися браузером для переходу на потрібну сторінку, відображення опису, зображень та інших речей. Оскільки я описав лише малу частину всіх можливостей, направляю бажаючих до повного опису специфікації за адресою http://opensearch.org.

Перейдемо від теорії до практики. Так отже, у вас на сайті вже є пошук, і при введенні запиту виводяться результати за адресою http://mysite.ru/search/?q=бла-бла. Замість "бла-бла" може бути будь-який рядок, звісно. Створюємо файл з розширенням xml, називаємо його search.xml і зберігаємо на сервері. Вміст цього файлу наступний (приклад 1).

Приклад 1. Файл search.xml

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
 <ShortName>Коротка назва сайту</ShortName>
 <Description>Короткий опис пошуку</Description>
 <Image height="16" width="16" type="image/x-icon">http://mysite.ru/favicon.ico</Image>
 <Url type="text/html" method="get" 
  xmlns:referrer="http://a9.com/-/opensearch/extensions/referrer/" 
  template="http://mysite.ru/search/?q={searchTerms}"/>
 <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Перші дві стрічки у прикладі є стандартними. Інші елементи описані нижче.

ShortName — коротка назва сайту, як вона буде відображатися в рядку пошуку браузера, довжина не більше 16 символів. У назві не можна використовувати HTML-теги.

Description — короткий опис пошукової системи. Не повинен перевищувати 1024 символи і містити HTML-теги. Це необов'язковий параметр і його можна опустити.

Image — шлях до іконки сайту у форматі ICO, PNG або JPEG. Розмір іконки зазвичай 16x16 пікселів. Елемент не обов'язковий, і якщо іконки немає, видаліть його з тексту. Обов'язково повинен бути вказаний тип файлу через параметр type, для ICO — image/x-icon, PNG — image/png, JPG — image/jpeg.

Url — шлях до результатів пошуку. У параметрі method пишеться метод відправлення даних (зазвичай GET), а в template вказується повна адреса до пошукової сторінки. Замість пошукового запиту треба написати {searchTerms}. Якщо для роботи пошуку потрібні інші параметри, їх можна вказати тут же через амперсанд (?q={searchTerms}&lang=ua).

InputEncoding — кодування, в якому виводяться результати пошуку.

Залишається тільки увімкнути механізм додавання плагіна в браузер користувача. Це можна зробити двома способами: через тег <link> і JavaScript.

Використання тегу <link>

У тезі <head> додайте наступний рядок.

<link rel="search" type="application/opensearchdescription+xml" title="Назва" href="URL">

Тут Назва назва пошуку, URL відносний або абсолютний шлях до файлу search.xml. Наприклад, для сайту html.in.ua цей рядок виглядає так:

<link rel="search" type="application/opensearchdescription+xml" 
  title="html.in.ua" href="/sites/search/search.xml" />

Після додавання вказаного рядка на сайті при відкритті списку пошукових плагінів буде видно і ваш (рис. 1).

Використання JavaScript

Користувачі не завжди додумуються, що до рядка пошуку можна додати плагін з поточного сайту, тому слід запропонувати їм це зробити явно, натиснувши на посилання. Саме посилання не веде на документ, а на наступний скрипт (приклад 2).

Приклад 2. Скрипт для додавання плагіна в браузер

<script type="text/javascript">
function addEngine() {
  URL = 'http://mysite.ru/search.xml';
  if (window.external && ("AddSearchProvider" in window.external)) {
    window.external.AddSearchProvider(URL);
  } else {
    alert('Ваш браузер не підтримує пошуковий плагін!');
  }
}
</script>

Тут змінна URL містить шлях до файлу search.xml. Скрипт працює в браузерах Firefox, Internet Explorer 7 і новіших. Для інших браузерів буде виведено повідомлення за допомогою alert().

Створити посилання можна різними способами — через тег <a>, вказавши в якості адреси хеш та додавши подію onclick (приклад 3), або взагалі відмовитися від посилання, замінивши його тегом <span> (приклад 4).

Приклад 3. Посилання на скрипт

<p><a href="#" onclick="addEngine()">Встановити плагін</a></p>

У цьому прикладі, щоб посилання не вело на реальну адресу, в якості значення атрибута href стоїть хеш, або, як ще його називають, заглушка. Сам скрипт викликається через подію onclick.

Приклад 4. Виклик скрипта

<p><span
 style="color: blue; border-bottom: 1px dashed blue; cursor: pointer;" 
 onclick="addEngine()">Встановити плагін</span></p>

Тут немає посилання, і його роль виконує тег <span>. Щоб він став схожим на посилання, через стилі змінюється колір тексту, додається підкреслення і змінюється форма курсора.

Технологія OpenSearch не обмежується простим перенаправленням на результати пошуку, за її допомогою також можна виводити в браузері відповідні варіанти слів та навіть зображення. Для цього використовуються пропозиції пошуку.

пошукOpenSearch
SEO текст: Навчіться створювати власний пошуковий плагін для вашого сайту з використанням технології OpenSearch. Збільшуйте активність користувачів, кількість відвідувачів та результативність сайту. Додавайте плагін у браузери за допомогою тегу або JavaScript.

Часті запитання