Seoconference yandex-pershina-wulbrun

1,478 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,478
On SlideShare
0
From Embeds
0
Number of Embeds
945
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Seoconference yandex-pershina-wulbrun

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

×