Embed Size (px)
DESCRIPTION
Citation preview
поиск для сайта
Seoconference. Казань, 26 сентября 2013г.
Интересные возможностиЯндекс.Поиска для сайта
Елена Першина, Дмитрий Вульбрун
2
Часть I• Проблемы, которые решает поиск• Руководство к действию
Часть II• Коротко про HTML коды формы и результатов• 5 интересных примеров
О чем пойдет речь
3
Часть I: продуктовая
4
Что должен уметь поиск?
Находить нужное
5
Что должен уметь поиск?
6
Ищем!
7
Ищем!
8
Ищем!
9
Ищем!
10
Ищем!
11
Ищем!
12
Ищем!
13
Ищем!
14
Ищем!
15
Ищем!
16
Ищем!
17
Как это работает
18
Что важно в поиске: морфология
19
Реализация
находить нужное
работать с морфологией
20
Что должен уметь поиск?
21
Что важно в поиске: морфология
22
Что еще должен делать поиск?
- направлять пользователя;
- помогать анализировать соответствие контента проекта интересам аудитории.
23
Реализация
направлять пользователя
работать с поисковыми подсказками
24
Что важно в поиске: подсказки
25
Что важно в поиске: подсказки
26
Дополнительно: подсказки
27
Реализация
направлять пользователя
применять фильтры-уточнения
28
Что важно в поиске: фильтры-уточнения
29
Что важно в поиске: фильтры-уточнения
30
Дополнительно: уточнения
31
Реализация
анализ контента сайта
поисковая статистика
32
Статистика
33
Приятный бонус
Возможность дополнительного заработка
поисковая реклама
34
Поисковая реклама
35
Поисковая реклама
36
Поисковая реклама
37
Поисковая реклама
38
Две составляющие поиска
- Внутренняя: поисковая технология большого Яндекса;
- Внешняя: настройки формы поиска и поисковой выдачи, учитывающие пожелания вебмастеров.
39
Форма поиска
40
Форма поиска: Bankir.ru
41
Форма поиска: Rg.ru
42
Форма поиска: Rg.ru
43
Результаты поиска: картинки и видео
44
Итог
45
Поддержка
46
Часть II: техническая
47
48
49
50
51
52
53
54
Коротко про HTML-коды для формы и результатов
55
Получаем HTML кодыГлавная страница сервиса
56
Получаем HTML коды
57
Получаем HTML коды
58
Получаем HTML коды
59
Получаем HTML коды
60
Получаем HTML коды
61
Теперь подробнее. Практика.
62
Что мы имеем?
(рабочее окружение)
63
Рабочее окружение (==environment)
64
Рабочее окружение (==environment)
65
Рабочее окружение (==environment)Очень простая страница
66
Рабочее окружение (==environment)Ну просто очень простая страница
67
Пример 1.Форма поиска.
68
Пример 1. Форма поискаВставляем коды
69
Пример 1. Форма поискаСмотрим что получилось
70
Пример 1. Форма поискаЗапускаем Веб-инспектор
71
Пример 1. Форма поискаНаходим нужный элемент
72
Пример 1. Форма поискаПишем правила для найденного класса (поле для ввода запроса)
73
Пример 1. Форма поискаEnjoy!
74
Пример 1. Форма поискаПишем правила для кнопки
75
Пример 1. Форма поискаEnjoy!
76
Пример 1. Форма поискаПишем еще несколько правил
77
Пример 1. Форма поискаMore. More enjoy!
78
Пример 2.Сниппеты в рамках.
79
Пример 2. Сниппеты в рамкахИзначально выглядит как-то так
80
Пример 2. Сниппеты в рамкахОткрываем Веб-инспектор
81
Пример 2. Сниппеты в рамкахНаходим нужный элемент, копируем стиль
82
Пример 2. Сниппеты в рамкахВставляем стиль в страницу и редактируем
Убираем фон и меняем цвет текста
83
Пример 2. Сниппеты в рамкахСмотрим, что получилось
84
Пример 2. Сниппеты в рамкахДелаем рамку и увеличиваем отступы
85
Пример 2. Сниппеты в рамкахРамки!
86
Пример 2. Сниппеты в рамкахНебольшой тюнинг цветов
87
Пример 2. Сниппеты в рамкахПочти готово!
88
Пример 2. Сниппеты в рамкахМеняем цвет фона на темный*
* В этом случае система сама выберет нужный цвет логотипа
89
Пример 2. Сниппеты в рамкахВот теперь мы молодцы!
90
Пример 3.Увеличим картинки в сниппетах.
91
Пример 3. Увеличиваем картинкиОтличия обычных сниппетов от медийных
92
Пример 3. Увеличиваем картинкиПишем CSS
93
Пример 2. Сниппеты в рамкахГотово!
94
Пример 4.Мобильная головная боль
95
Пример 4. Мобильная версияМета-тег viewport – задаем область просмотра
96
Пример 4. Мобильная версияmedia query – для низкого разрешения
97
Пример 4. Мобильная версияУбираем отступы – тут они нам не нужныМеняем размер шрифтов
98
Пример 4. Мобильная версияЕще немного причешем
99
Пример 4. Мобильная версия
Наслаждаемся результатом!
100
Пример 4. Мобильная версия
Продолжаем наслаждаться
101
Пример 4. Мобильная версия
Счастьюнет предела
102
Пример 5.JavaScript и превью страниц
103
Пример 5. Превью страницПостановка задачи
• Подсветка сниппета при наведении;• По клику на сниппет показываем превью
страницы.
104
Пример 5. Превью страницЖить легче, когда есть JS-события!
105
Пример 5. Превью страницПодготовим верстку страницы
Форма поиска
Результаты Превью
106
Пример 5. Превью страницHTML
107
Пример 5. Превью страницCSS
108
Пример 5. Превью страницЭлементы для работы
109
Пример 5. Превью страницЭлементы для работы
.b-serp-list – область выдачи
.b-serp-item - сниппет
.frtarget – iframe для загрузки превью
110
Пример 5. Превью страницПункт 1. Подсветка при наведении
*Ну очень просто. CSS школьного уровня.
111
Пример 5. Превью страницПункт 1. Подсветка при наведении
112
Пример 5. Превью страницПункт 2. Загрузка превью по клику
113
Пример 5. Превью страницПункт 2. Загрузка превью по клику
114
Пример 5. Превью страницНу теперь-то мы точно собой довольны!
115
Пример 5. Превью страниц
116
117
Полезные ссылки:
- Яндекс.Поиск для сайта: http://site.yandex.ru
- Клуб Яндекс.Поиска для сайта:
http://clubs.ya.ru/sitesearch
- Яндекс.Вебмастер: http://webmaster.yandex.ru
- Рекламная сеть Яндекса: http://partner.yandex.ru
118
Исходные файлы мастер-класса:
http://bit.ly/yass_seoconf2013
119
Елена ПершинаМаркетолог сервисов для вебмастеров
http://site.yandex.ru
http://clubs.ya.ru/sitesearch
wulbrun
Спасибо!
Дмитрий ВульбрунМенеджер проектов
firstlena
1firstlena
1firstlena
