На этой странице обсуждается, как можно настроить внешний вид окна поиска и результатов поиска с помощью панели управления. Если вы хотите реализовать структуру своей поисковой системы с помощью файла контекста, см. раздел «Проектирование внешнего вида с помощью страницы XML ».
- Обзор
- Разработка отдельных компонентов пользовательского интерфейса поиска
- Размещение результатов с помощью элемента поиска
- Настройка макета элемента поиска
- Разработка окна поиска
- Разработка результатов
- Предварительный просмотр вашей поисковой системы
- Реализация дизайна на вашем сайте
Обзор
Вы можете изменить как поле поиска, так и результаты поиска вашей программируемой поисковой системы либо в панели управления, либо в файле контекста XML. Если у вас есть несколько поисковых систем, управлять ими и настраивать их с помощью панели управления довольно просто. Просто перейдите на вкладку « Внешний вид », выберите стиль, спроектируйте компоненты, нажмите « Сохранить », и все готово. На этой странице рассказывается, как все это сделать. Однако если вы создаете большое количество поисковых систем и управляете ими, даже эта простая процедура — если ее повторять для нескольких поисковых систем — становится утомительной. В таких случаях лучше работать с XML. Если вы решите использовать XML, сначала прочтите эту страницу, чтобы получить представление о том, как все работает; после этого прочтите страницу « Проектирование внешнего вида с помощью XML », чтобы узнать об элементах и атрибутах XML.
Если вы не уверены, следует ли вам просто использовать панель управления или использовать формат XML, см. страницу «Основы », на которой обсуждаются преимущества и проблемы каждого формата.
Примечание. Прежде чем приступить к разработке внешнего вида своей системы пользовательского поиска, прочтите Руководство по внедрению программируемой поисковой системы . Это краткий документ, в котором рассказывается, как следует обращаться с брендингом и атрибуцией Google.
Размещение результатов с помощью элемента поиска
Элемент поиска — это объект, который вы можете встроить на свою веб-страницу, что позволяет выполнять широкие настройки. Он может отображать окно поиска и результаты поиска либо вместе на одной веб-странице, которую просматривает читатель, либо на разных веб-страницах.
Примечание. Элемент поиска в сочетании с компактным макетом хорошо работает на мобильных устройствах.
Вы также можете воспользоваться программируемым API-интерфейсом управления элементами поиска для дальнейшей настройки пользовательского интерфейса поиска. Многие настройки поддерживаются через атрибуты HTML. Например, вы можете выбрать один из шести макетов для страницы результатов или установить количество возвращаемых результатов поиска.
Программируемая поисковая система больше не поддерживает вариант хостинга iframe. Мы рекомендуем макеты «Две страницы» или «Только результаты» в элементе «Поиск» в качестве новых параметров. Ознакомьтесь с нашим сообщением в блоге для получения дополнительной информации.
Разработка отдельных компонентов пользовательского интерфейса поиска
Вы можете настроить внешний вид своей поисковой системы, выполнив следующие действия:
- На вкладке « Внешний вид » панели управления выберите макет элемента поиска и нажмите кнопку «Сохранить».
- На вкладке « Темы » выберите тему и нажмите кнопку «Сохранить»:
- Если вы хотите настроить тему, сделайте следующее (в противном случае перейдите к следующему шагу):
- Щелкните вкладку Настроить .
- Выберите соответствующие элементы управления на странице.
- Определите новые значения.
Если вы передумаете, вы всегда можете вернуться к значениям по умолчанию, нажав кнопку « Сброс ». Поэкспериментируйте со значениями, просматривая изменения .
- Если вы включили поиск изображений, выберите нужный макет.
- Нажмите Сохранить .
- Щелкните вкладку Настроить .
- Используйте миниатюру , чтобы включить или отключить автоматические миниатюры изображений в результатах поиска.
- Внедрите дизайн на свой сайт.
- Макет элемента поиска
- Поле поиска
- Результаты поиска
- Вкладки уточнения
- Акции
- Логотип (только на хостинге Google)
- Настройте окно поиска .
- Опционально . Включите автозаполнение .
- Внедрите окно поиска на свои веб-страницы.
- Измените цвета:
- Выберите вкладку « Управление поиском ».
- Установите значения для цветов окна поиска:
- Поисковый ввод: Цвет рамки - цвет рамки вокруг поля ввода для поисковых запросов.
- Кнопка поиска: Цвет рамки - цвет рамки вокруг кнопки поиска. Тонкие линии границы могут быть незаметны, если цвет аналогичен цвету кнопки.
- Кнопка поиска: Цвет фона - цвет кнопки поиска.
- Нажмите Сохранить .
- Измените стиль шрифта для кнопки поиска (и остальной части элемента):
- Выберите вкладку Глобальные стили .
- В раскрывающемся списке Текст выберите семейство шрифтов.
Параметр изменяет шрифт не только текста в кнопке поиска, но и текста всего элемента, включая вкладку уточнения и фрагменты результатов.
- Нажмите Сохранить .
- В панели управления выберите вкладку Автодополнение .
- Установите флажок Включить автозаполнение. .
- Щелкните Сохранить изменения .
Примечание. Поскольку запросы с автозаполнением создаются для каждой поисковой системы, требуется несколько часов, прежде чем автозаполнение начнет появляться в вашей поисковой системе.
- Если вы впервые включаете автозаполнение в существующей поисковой системе, вам необходимо удалить фрагмент кода для окна поиска, который вы вставили на свою веб-страницу. Замените его новым, сгенерированным на вкладке «Получить код». Более подробные инструкции см. в разделе « Внедрение дизайна на вашем сайте ».
- Индивидуальные результаты
- Результаты поиска изображений
- Тип шрифта
- Цвета текста
- Вкладки уточнения
- Акции
- Логотип (только на хостинге Google)
- Выберите вкладку Глобальные стили .
- В селекторе Стиль элемента: цвет фона выберите цвет. Кроме того, вы можете ввести значение цвета в текстовое поле.
- Нажмите Сохранить .
- Выберите вкладку « Результаты ».
- Определите следующие значения:
- Оформление результатов (нормальное состояние) — каждый отдельный результат формирует блок заголовка, фрагмента результата и ссылки. Этот параметр управляет цветом отдельных результатов. Если вы хотите изменить фон для всех результатов, см. раздел Цвет фона .
- Цвет границы - граница каждого отдельного результата.
- Цвет фона - цвет фона каждого отдельного результата.
- Стиль результатов (состояние наведения) — набор определений управляет цветом отдельного результата при наведении на него курсора мыши.
- Цвет границы - граница результата.
- Цвет фона - фон результата.
- Нажмите Сохранить .
- Выберите вкладку Глобальные стили .
- В раскрывающемся списке Текст выберите семейство шрифтов.
Параметр изменяет шрифт для всего элемента, включая кнопку поиска, вкладки уточнения и фрагменты результатов.
- Нажмите Сохранить .
- Выберите вкладку « Результаты ».
- Определите следующие значения:
- Цвета текста заголовков — этот набор определений управляет цветами заголовков фрагментов результатов. Заголовок — это первая строка каждого результата.
- Цвет ссылки — название результирующего сниппета.
- Посещенный цвет - заголовок после того, как на него нажал пользователь.
- Цвет при наведении — заголовок, когда пользователь наводит указатель мыши на ссылку.
- Активный цвет — заголовок, когда пользователь переходит по ссылке.
- Цвет текста сниппета — основная часть сниппетов результатов. Это текст, который представляет собой небольшой образец содержимого веб-страницы.
- Цвет текста URL-адреса — URL-адрес в нижней части каждого фрагмента результатов.
- Нажмите Сохранить .
- Выберите вкладку « Управление поиском ».
- Установите цвета для вкладок уточнения:
- Вкладка «Уточнение» (обычное состояние) — набор элементов управления для меток уточнения, которые не находятся в фокусе.
- Цвет границы - цвет границы вокруг вкладок, которые в данный момент не выбраны. Тонкая линия может быть незаметна, если цвет границы подобен цвету фона.
- Цвет фона - цвет вкладок, которые в данный момент не выбраны.
- Вкладка «Уточнение» (состояние «выбрано»): набор элементов управления для метки уточнения, которую пользователь только что выбрал, щелкнув. Вкладка, которую пользователь щелкнул последним, принимает выбранное состояние.
- Цвет границы — цвет границы вокруг выделенной в данный момент вкладки.
- Цвет фона — цвет выбранной в данный момент вкладки.
- Вкладка «Уточнение» (обычное состояние) — набор элементов управления для меток уточнения, которые не находятся в фокусе.
- Нажмите Сохранить .
- Выберите вкладку « Акции ».
- Определите следующие значения:
- Цвета текста заголовка — этот набор определений управляет цветами заголовка результатов рекламной акции.
- Посещенный цвет - заголовок после того, как на него нажал пользователь.
- Цвет при наведении — только для элемента . Заголовок, когда пользователь наводит указатель мыши на ссылку.
- Активный цвет — только для элемента . Заголовок, когда пользователь нажимает на ссылку.
- Цвет текста сниппета — описание акции. Если у вашей акции нет описания, настройка ничего не меняет.
- Цвет текста URL -адреса — URL-адрес в нижней части каждой рекламной акции.
- Стиль продвижения — только для элемента .
- Цвет рамки - граница вокруг результата продвижения.
- Цвет фона - цвет фона результата акции.
- Нажмите Сохранить .
- Выберите вкладку Логотип .
- Определите следующие значения:
- URL-адрес логотипа — местоположение изображения. URL-адрес должен указывать на файл изображения, а не на веб-страницу (файл HMTL) с изображением. Изображение может быть в формате JPG, PNG или GIF, не превышающем 100 пикселей по высоте и 100 пикселей по ширине.
- Ссылка на логотип — необязательно . Если вы хотите, чтобы логотип ссылался на веб-страницу (например, на вашу домашнюю страницу), введите URL-адрес.
- Высота логотипа . Значение по умолчанию – 100. Если размер изображения превышает 100 x 100 пикселей, система пользовательского поиска автоматически изменяет его размер.
- Нажмите Сохранить .
- Щелкните Сохранить и получить код на любой вкладке внешнего вида.
- Скопируйте фрагмент кода, сгенерированный на вкладке « Получить код ».
Если вы выбрали макет с двумя столбцами, скопируйте два фрагмента кода: один для окна поиска, а другой для результатов.
Если вы выбрали двухстраничный макет, введите URL-адрес веб-страницы, на которой будут отображаться результаты для вашей поисковой системы. Введите имя параметра запроса, встроенное в URL-адрес, который анализируется страницей результатов поиска. Наконец, скопируйте два фрагмента кода.
Фрагмент кода для макета только результатов предназначен для случая, когда результаты поиска отображаются на новой странице. Введите имя параметра запроса, встроенное в URL-адрес, который анализируется страницей результатов поиска. Наконец, скопируйте фрагмент кода результатов поиска. - Вставьте код на каждую страницу, где вы хотите разместить окно программируемой поисковой системы. Вы можете вставить код в любое место внутри
<body></body>вашей веб-страницы.Примечание. Для максимальной кросс-браузерной совместимости рекомендуется, чтобы ваши HTML-страницы использовали поддерживаемый тип документа, такой как
<!DOCTYPE html>.Если вы используете эффекты наведения для элемента поиска, ваша HTML-страница должна использовать поддерживаемый тип документа, такой как
<!DOCTYPE html>.
Если вы выбрали макет с двумя столбцами, вставьте код окна поиска в один столбец и код результатов в другой столбец.
Если вы выбрали двухстраничный макет, вставьте код для окна поиска на веб-страницу, где вы хотите, чтобы окно поиска отображалось, и код для результатов на веб-странице, где вы хотите, чтобы результаты поиска отображались.
Если вы выбрали макет только для результатов, вставьте фрагмент кода на веб-страницу, где должны отображаться результаты поиска.
Настраиваемые компоненты
Компоненты, которые вы можете настроить, зависят от выбранного макета элемента вашей поисковой системы. Например, панель управления позволяет добавить логотип только для поисковых систем, размещенных в Google; нельзя добавить логотип в поисковые системы, используя другие варианты хостинга.
С помощью панели управления можно определить следующие компоненты:
Настройка макета элемента поиска
У вас есть возможность настроить отображение пользовательского интерфейса поиска на веб-странице. Вы можете поместить поле поиска и раздел результатов в один и тот же столбец или отобразить их в отдельных столбцах с полем поиска в одном столбце и разделом результатов в другом столбце или даже на другой странице.
Ваши варианты макета (нажмите на ссылку, чтобы увидеть демонстрации):
| Вариант | Описание |
|---|---|
| Наложение | Отображение результатов поиска в виде наложения. |
| Две страницы Простой Несколько окон поиска/разделов результатов | Поле поиска и раздел результатов поиска размещены на двух разных веб-страницах. Примечание . Раздел результатов поиска также содержит поле поиска. Пользователи могут отправлять запросы непосредственно на странице результатов поиска. |
| Полная ширина | Поле поиска и раздел результатов поиска занимают всю ширину страницы или столбца, в который вы вставили элемент поиска. |
| Две колонки | Поле поиска и раздел результатов поиска находятся в разных столбцах или разделах вашей веб-страницы. Чтобы закрыть раздел результатов поиска, пользователь щелкает значок X рядом с окном поиска. |
| Компактный | Как и вариант полной ширины, он занимает всю ширину страницы или столбца, но в разделе результатов отображается меньше результатов, поэтому он занимает меньше места по вертикали при расширении на веб-странице. Совет. Этот параметр оптимизирован для смартфонов и мобильных устройств. |
| Только результаты Поиск по URL Поиск через окно поиска | Результаты поиска размещаются на одной из ваших веб-страниц, а страница результатов поиска не содержит окна поиска. Используйте собственное окно поиска, чтобы отправить поисковый запрос. Примечание . Программируемая поисковая система, которая не показывает рекламу, не имеет возможности отключить брендинг. |
| Размещено в Google Текущее окно Новое окно | Окно поиска размещается на одной из ваших веб-страниц. Результаты поиска отображаются на веб-странице, размещенной в Google, которую можно открыть в том же или новом окне. |
Разработка окна поиска
Вы можете вставить поле поиска в любое место HTML-кода вашей веб-страницы, хотя по соглашению поля поиска размещаются вверху (или близко к верху) веб-страницы, как в следующем примере:
Рис. 1. Веб-страница с окном поиска, расположенным вверху.
Чтобы создать и оформить поле поиска, выполните следующие действия:
Настройка поля поиска для элемента поиска
Вы можете настроить поле поиска, выполнив следующие действия на вкладках стилей:
В разделе предварительного просмотра под вкладками стилей отображаются изменения, внесенные вами в настройки.
Включение автозаполнения
Автозаполнение предлагает варианты запросов для ваших пользователей, когда они вводят свои поисковые запросы в поле поиска. Это похоже на необязательные запросы, которые вы видите в поиске Google.
Рисунок 2. При вводе всего нескольких символов в поле поиска открывается раскрывающийся список с вариантами для различных поисковых запросов.
Программируемая поисковая система адаптирует автозаполнение специально для вашей поисковой системы. Он использует другой алгоритм, который использует несколько источников, включая запросы к вашей поисковой системе, а также ключевые слова и фразы, извлеченные из содержимого веб-сайтов, которые охватывает ваша поисковая система.
Поскольку автозаполнение запросов частично основано на конкретном содержании веб-страниц, покрываемых вашей поисковой системой, программируемая поисковая система не создает автозаполнения для поисковых систем, выполняющих поиск по всему Интернету. Другими словами, только поисковые системы, выполняющие поиск по включенным сайтам — заранее определенному набору веб-сайтов — могут иметь автозаполнение запросов. Вы можете настроить охват вашей поисковой системы на вкладке Сайты панели управления.
В отличие от других настроек, описанных на этой странице, автозаполнение находится не на вкладке « Внешний вид », а в разделе «Автозаполнение» панели управления.
Чтобы включить автозаполнение, сделайте следующее:
Разработка результатов
Вы можете изменить следующие компоненты страницы результатов:
Цвет фона
Чтобы изменить цвет фона всех результатов, выполните следующие действия на вкладках стилей:
Вы также можете изменить цвет границы, окружающей весь элемент, выбрав стиль элемента: селектор цвета границы или введя значение цвета в текстовом поле.
Индивидуальные результаты
Если вы хотите визуально выделить отдельные результаты или выделить результаты, выбранные пользователями, вы можете определить границы и фон для отдельных результатов.
Рисунок 3: Результаты с выделенными отдельными результатами и отдельным результатом, который выделяется при наведении курсора мыши.
Чтобы изменить цвета отдельных результатов, выполните следующие действия на вкладках стилей:
Результаты поиска изображений
Для результатов поиска изображений доступны три макета: классический, столбец и всплывающее окно.
Тип шрифта
Чтобы изменить стиль шрифта текста в результатах, выполните следующие действия на вкладках стилей:
Цвета текста
Чтобы изменить цвета текста в результатах, выполните следующие действия на вкладках стилей:
Вкладки уточнения
Если вы создали метки уточнения в своей поисковой системе, метки отображаются в виде вкладок в элементе поиска. Вы можете использовать панель управления, чтобы изменить цвета вкладок уточнения.
Чтобы настроить вкладку уточнений, перейдите на вкладки стилей и выполните следующие действия:
Акции
Если вы создали продвижение в своей поисковой системе, вы можете изменить его внешний вид на вкладках стилей. Рекламные акции — это особый тип результатов поиска, которые вы создаете.
Чтобы настроить свои промоакции, перейдите на вкладки стилей и выполните следующие действия:
Логотип (только на хостинге Google)
Если вы разрешаете Google размещать свою страницу результатов, вы можете включить логотип или маленькое изображение рядом с полем поиска на странице результатов поиска. Изображение должно быть в формате .jpg, .png или .gif, размещенным на веб-сайте (вашем собственном или с веб-сайта, на который не распространяются авторские права). У вас есть возможность связать URL-адрес с изображением, превратив его в кликабельное изображение.
Ниже приведен пример страницы результатов с логотипом.
Рисунок 4: Окно поиска с изображением
Чтобы добавить или изменить логотип на странице результатов, размещенной в Google, выполните следующие действия на вкладках стилей:
Предварительный просмотр вашей поисковой системы
Если вы введете запрос и нажмете « Поиск » , вы сможете просмотреть результаты, включая уточнения и рекламные акции.
Примечание. Для предварительного просмотра выбранного макета и выполнения каких-либо настроек окно поиска можно просмотреть в правой части раздела « Внешний вид» в разделе «Макет» .
Реализация дизайна на вашем сайте
После того, как вы разработали внешний вид своей поисковой системы, вы можете реализовать ее на своей веб-странице, выполнив следующие действия: