• Like
Seoconference yandex-pershina-wulbrun
Upcoming SlideShare
Loading in...5
×

Seoconference yandex-pershina-wulbrun

  • 1,102 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,102
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
6
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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