поиск для сайта

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@yandex-team.ru

wulbrun

Спасибо!

Дмитрий ВульбрунМенеджер проектов

firstlena

1firstlena

1firstlena

firstlena@yandex-team.ru