Если ваша организация изменила адрес или номер телефона и его нужно поправить на всех страницах сайта, необязательно просматривать каждую вручную, чтобы найти те, где есть устаревшая информация. Для этого можно воспользоваться автоматизированными способами поиска нужного слова или словосочетания. В этой статье расскажем о наиболее удобных, на наш взгляд.
Для удобства мы разделили статью на две задачи, связанные с поиском контента на сайте. Рассмотрим поиск слов и словосочетаний и CSS классов.
Задача 1. Поиск слова
Поиск слова или словосочетания - то, с чем сталкивается большая часть пользователей. Например, у вас на сайте поменялась какая-то информация и везде ее нужно изменить. Это может быть производитель оборудования или другая статичная информация. Поиск можно осуществить двумя способами: поисковыми операторами и парсерами.
Поисковые операторы
В поисковых системах есть специальные символы, слова и фразы для конкретизации запроса, они называются поисковыми операторами. Операторов большое количество, ознакомиться с ними можно в документации используемого поисковика: Яндекса или Google.
Нас интересует оператор, который позволяет найти нужное словосочетание в пределах одного сайта, - site:.
Используется он так: site: доменное_имя.ru нужное слово.
Обратите внимание, что для того, чтобы найти упоминания конкретной фразы ее нужно выделить в кавычки. Без кавычек поисковик покажет все похожие вхождения.
Работоспособность данного оператора проверим через поисковые системы Google и Яндекс.
Чтобы по своему запросу в Google или Яндексе получить подходящие результаты, можно использовать не только поисковые операторы, но и специальные символы. Одни из таких — кавычки. Если заключить в них фразу, поисковая система будет искать именно ее, а не отдельные слова в разных комбинациях. Если кавычки не использовать, поисковики могут показать страницы, которые связаны с отдельными словами из запроса.
Рассмотрим на примере: найдем страницы, на которых встречается фраза пример перевода. Вбиваем ее в поисковик без кавычек. Google и Яндекс помимо подходящих страниц нашли:
- Страницы, на которых упоминается отдельные слова из фразы в разных формах: перевод, переводов, пример, примеров, примера и так далее.
- Страницы, на которых упоминаются оба слова из фразы, но они никак не связаны друг с другом.
Когда заключили фразу в кавычки ("пример перевода"), получили меньшее количество страниц, чем в первый раз. Но фраза на них упоминается именно в той форме, которой мы вбили ее в поисковик.
Но это не показывает, что какой-то вариант лучше или хуже. Все зависит от целей поиска. И кстати, кавычки — не единственный спецсимволы, которые помогают уточнить запрос. При желании можете ознакомиться с полным списком символов в Яндексе и Гугл.
Использование оператора site: в Google
Для примера взяли сайт бюро переводов ТранЭкспресс и попытались найти на нем несколько фраз. Одна из них - “подсчет слов”.
Чтобы проиллюстрировать пример точных вхождений и всех схожих фраз мы поочередно вставляем в поисковую строку:
- site:https://www.tran-express.ru/ подсчет слов;
- site:https://www.tran-express.ru/ "подсчет слов".
Google выдал список страниц сайта, на которых встречается эта фраза.
Мы использовали site:https://www.tran-express.ru/ подсчет слов. Фраза была без кавычек и в поиске появилось 33 результата.
Пробуем site:https://www.tran-express.ru/ "подсчет слов". На запрос фразы в кавычках Google показал только 2 результата.
Пробуем другую фразу site:https://www.tran-express.ru/ примеры перевода. Результат без кавычек - 384.
site:https://www.tran-express.ru/ "примеры перевода". В кавычках - 4.
Изучив поисковую выдачу Google, рассмотрим, что выдаст Яндекс.
Использование оператора site: в Яндекс.
Для проверки работоспособности поискового оператора в Яндексе будем искать такие же фразы, что и в гугле.
site:https://www.tran-express.ru/ подсчет слов. К сожалению, Яндекс не выводит количество результатов, но на скриншоте видим, что первая страница поиска заполнена при поиске фразы без кавычек.
site:https://www.tran-express.ru/ "подсчет слов". В кавычках только 2.
Проверяем вторую фразу.
site:https://www.tran-express.ru/ примеры перевода. Также заполненная первая страница.
site:https://www.tran-express.ru/ "примеры перевода". Также 2 результата.
Использовать этот подход рационально, если нужно:
- проверить, отображаются ли конкретные страницы в поиске;
- оперативно получить страницы с использованием конкретной фразы;
- найти определенную информацию на одной-двух страницах.
Если хотите получить полный список страниц с вашей фразой, следует воспользоваться подходом с парсерами, о котором рассказываем ниже.
Парсеры для поиска слов
Для поиска нужной информации на сайте можно воспользоваться парсерами - программами, которые собирают информацию с веб-ресурса и выдают ее в нужном формате. Парсеров существует большое количество: платные и бесплатные, для сбора цен, для совместных покупок и так далее.
Начнем с того, что поиск в парсерах осуществляется на базе поисковых правил. Мы не будем глубоко вдаваться в подробности, рассмотрим только нужный для наших целей функционал.
Правильно поиск конкретных данных называется веб-скрейпингом и включает в себя автоматизированное извлечение данных со страниц веб-сайта по установленным правилам.
Формулировка правил основывается на способах разбора данных:
- XPath. Язык запросов в формате XML/XHTML. Доступ к содержимому, которое ищем, происходит благодаря навигации по DOM (Document Object Model - структура веб-страницы, позволяющая программам взаимодействовать с содержимым, внешним отображением и структурой) через описание пути к нужному элементу. Работа схожа с навигацией в операционных системах, когда мы ищем какой-то файл, находящийся в одной из папок. На примере сайта выглядит так: div->div->p: мы ищем элемент p, который является дочерним у div, который также дочерний для другого div. В формате выражения: //div/div/p.
- XQuery. В основе работы лежит XPath.
- CSSPath. CSS-селекторы cинтаксически имеют сходство с XPath (разница в скорости и лаконичности). Но в отличие от XPath CSS-селекторы работают только вглубь документа. Для поиска используются: элементы, CSS-классы (псевдоклассы и псевдоэлементы тоже), идентификаторы, атрибуты, потомки и дочерние элементы. Также допускается создание комбинаций из перечисленных элементов для более точного поиска.
- HTML Templates. Язык для извлечения данных из HTML документа. Представляет собой комбинацию HTML для описания шаблона поиска нужного фрагмента.
- RegExp (RegEx) - формальный язык регулярных выражений для поиска информации в большом количестве текста.
Ознакомившись с теорией, перейдем к практике. Мы будем взаимодействовать с двумя парсерами: SiteAnalyzer и Screaming Frog SEO Spider
SiteAnalyzer
SiteAnalyzer - программа для SEO-аудита. SiteAnalyzer ранее предлагал бесплатную лицензию за регистрацию. На сегодняшний день у программы также две версии: бесплатная с урезанным функционалом и полная, доступная после покупки лицензии. Ознакомиться со стоимостью лицензий и ограничениями бесплатной версии можете на сайте.
Для работы необходимо скачать программу и зарегистрироваться, процесс скачивания и регистрации пропустим, а остальные этапы пошагово рассмотрим.
Шаг 1. Настройка и получение информации о сайте
Нужно получить список всех страниц. Для этого открываем SiteAnalyzer и вставляем урл сайта. Затем нажимаем на кнопку "Старт". Запускается проверка сайта, длительность зависит от количества страниц на нем.
После проверки вкладки программы заполняются информацией: всеми ссылками с сайта, временем отклика страниц, SEO-информацией и другими данными. Подробно прочитать о каждой из вкладок можно в документации SiteAnalayzer.
В редких случаях парсинг может не получится. Причины у этого могут быть разные. Например, установлена защита на хостинге. Если вы столкнулись с тем, что сайт не парсится, попробуйте сменить User-Agent в SiteAnalayzer.
User-Agent - это строка, которую браузер, а в нашем случае парсер, отправляет на сервер при запросе веб-страниц. Она содержит информацию об операционной системе, браузере и другие данные. Подробную настройку юзер-агента мы рассматривали в отдельной статье.
Чтобы сменить User-Agent, перейдите в настройки, далее кликните на "User-Agent" и выберите YandexBot или GoogleBot. После этого повторите парсинг.
Шаг 2. Поиск
Если парсинг прошел успешно и вы получили основную информацию о сайте, переходим к следующему шагу - поиску интересующей фразы. Для этого переходим во вкладку “Извлечение данных”.
Если добавлены правила для поиска, в графе "Результаты" выводится количество. Мы не задали ни одного правила, поэтому столбец пустой.
Перейдем к этапу внесения правил.
Мы хотим найти словосочетание “подсчет слов”. Для этого воспользуемся методом RegExp. Его выбор объясняется тем, что мы не знаем, в каких HTML тегах данное словосочетание может встречаться. По этой же причине отказываемся от поиска через CSS селекторы.
Чтобы найти фразу, необходимо составить регулярное выражение. Это можно сделать самостоятельно, прочитав документацию. Но самым простым вариантом является использование RegExp генератора. В данном случае правило является абсолютно идентичным искомому тексту.
RegExp можно использовать и для поиска отдельных HTML тегов. Также он позволяет исключать из поиска отдельные элементы, для этого нужна конструкция: [^исключение] - в квадратных скобках указывается искомый элемент, а ^ означает исключение. Правилом [^0-9] мы исключаем из поиска все цифры.
Возвращаемся к SiteAnalyzer и выбираем на верхней панели “Проекты”, в открывшемся окне нажимаем “Настройки”.
Добавляем название правила. Оно может быть любым, но для наглядности лучше использовать формулировку самого правила. Выбираем RegExp и вносим правило. Важно поставить галочку у “Правила извлечения данных”.
Сохраняем и возвращаемся на вкладку “Извлечение данных”. Мы добавили одно правило, появилась дополнительная графа с ним. Нажимаем “Старт” и запускаем проверку.
В нашем случае поиск осуществляется только по форме фразы “подсчет слов”. Если нужно найти и другие варианты этого словосочетания, потребуется добавить дополнительные правила.
Screaming Frog SEO Spider
Другая программа - это Screaming Frog SEO Spider. Предоставляет возможность гибкого сканирования сайта и является одним из лидеров сферы. Ознакомиться со всем функционалом можно в документации. Отметим, что программа также является платной и требует ключ активации.
1. Подготовка. Настраиваем "лягушку"
Как и в случае с сайтаналайзером мы можем менять user agent, для беспроблемного парсинга большинства сайтов рекомендуем его поменять сразу.
Запустив программу наводим курсор на "Configuration" и в появившемся меню выбираем на “Crawl config”.
В открывшейся вкладке ищем пункт “User-Agent” и переходим на него. нас интересует выпадающий список Preset User Agents, раскрываем и выбираем DuckDuckBot. Нажимаем “ok”.
На нашем опыте это самый результативный юзер агент, который парсил без каких-то помех все сайты, которые мы ему скармливали.
Шаг 2. Определяем правило поиска.
Как и в случае с прошлым парсером для поиска необходимо задать правило. Вновь открываем вкладку Configuration, на которой выбираем “Custom Extraction”.
У нас откроется пустая вкладка “Custom Extraction”. Для добавления поискового поля нажимаем add и в поле будет добавлено дефолтная строка под правило поиска.
Добавляем правило для поиска и запускаем парсинг.
После парсинга мы переходим на вкладку "Custom Extraction", в которой отображаются результаты.
Задача 2. Поиск CSS класса
Рассмотрим другую задачу - поиск CSS класса. Данная задача не по силам поисковым операторам, поэтому пользоваться будем парсерами, с которыми уже познакомились: Screaming Frog SEO Spider и SiteAnalyzer
Мы уже упоминали, что можно искать не только слова, но и отдельные элементы на сайте. Например, на сайте lenwood.ru недавно было необходимо найти все элементы с CSS классом:
“wrapper-calculator-block”Для решения данной задачи мы можем воспользоваться XPath и CSSPath, кстати, первый вариант приведен в документации Site-analyzer.
Xpath требует небольшой подготовки и является актуальным для любого парсера, поэтому вынесли его в отдельный раздел, с которого и начнем.
Подготовка Xpath правила (Актуально для всех парсеров)
Используя XPath правило:
//div[@class="wrapper-calculator-block"]Мы получим все элементы div, у которых есть класс.
"wrapper-calculator-block"Лайфхак: получать готовые правила XPath мы можем прямо со страницы в браузере. Для этого нужно нажать cочетание клавиш "Ctrl" + "Shift" + "С". Откроется консоль разработчика, а элементы на странице будут подсвечены. Наводим курсор на нужный элемент и опускаемся в консоль, кликаем правой кнопкой мыши по элементу, выбираем "Копировать", "Копировать XPath".
Имейте в виду, что получить правило таким образом получится не всегда. Зависит от настроек сайта. Например, мы работаем с одним из сайтов, который при копировании Xpath добавляет к правилу айди данной страницы, выглядит это так:
//*[@id="post-1798"]/section/section[2]/div/div[2]/blockquoteДанный функционал настраивается в шаблоне сайта и используется для удобства, например, при работе с элементами через JavaScript. Но для парсинга такой вариант не подходит.
Правило готово, возвращаемся к парсингу.
SiteAnalyzer
Начнем с поиска через Xpath:
Поиск Xpath в SiteAnalyzer
Добавляем полученное правило в SiteAnalayzer и запускаем проверку.
Будьте внимательны, если в вашем правиле находится лишний пробел или другой символ, то оно не сработает.
В дополнительной графе появились результаты поиска.
Элементы найдены, перейдем к CSSPath.
Поиск с использованием CSSPath в SiteAnalyzer
Воспользуемся CSSPath. Для поиска нужного нам элемента нам подойдет правило:
div[class=wrapper-calculator-block]. Заносим его в настройках и запускаем парсинг
Все правила отработали, элементы найдены. Переходим к следующему парсеру.
Screaming Frog SEO Spider
Поиск Xpath в Screaming Frog SEO Spider
В отличии от прошлой программы тут мы сначала определяем правило для поиска, а потом парсим, а не наоборот. Самостоятельное составление правил мы уже рассмотрели, поэтому воспользуемся, а заодно и познакомимся с встроенным функционалом по созданию поисковых правил - "Visual Custom Extraction", суть которого в визуальном выборе нужного элемента на отрисованной веб-странице или в HTML. Весь функционал работает, но для удобства рекомендуем использовать вкладку, работающую с HTML. Пошагово:
После этого у нас появилась строка с шаблоном для добавления правила. Можем изменить название и прописать правильно для поиска в ручную, но мы воспользуемся удобным инструментом автоматического подбора правила для поиска, для этого нажимаем на иконку глобуса.
После клика снова откроется дополнительное окно, в котором мы вводим урл страницы, на которой есть интересующий нас элемент. После загрузки в графе справа в графе “Suggestions” отобразятся правила, размещенные от самого общего до самого конкретного.
Мы перейдем на вкладку “Source HTML” и в верстке найдем нужный нам элемент - <div class=”wrapper-calculator-block”>, кстати, это можно сделать через поиск. В большинстве способ подбора правила через source является удобнее, т.к. позволяет сразу найти нужный для поиска элемент, но если у вас сложности с HTML, то вы можете воспользоваться и рассмотренным выше варианте выбора через визуальный интерфейс. Мы сразу нашли нужный нам элемент и в графе справа “Suggestions” появилось нужное нам правило, осталось только выбрать его и нажать “Ok”.
Правило появилось в нашем списке. Снова жмем “Ok” и сворачиваем настройку правил. Копируем урл нужного нам сайта и добавляем его в поле “Enter URL to spider” рядом с логотипом программы и нажимаем “Start”. Будет запущен парсинг сайта, время, как и в случае с SiteAnalyzer зависит от количества страниц на сайте.
После завершения парсинга вновь жмем по вкладке "Overview" для просмотра результатов.
Поиск с использованием CSSPath в Screaming Frog SEO Spider
Добавляем правило: div[class=wrapper-calculator-block] и запускаем поиск. Дублировать процесс добавления правила не будем, подробно рассмотрели его выше.
На данных примерах видно, что найти нужный элемент на сайте можно несколькими способами. Документация для поиска предлагает использовать XPath, мы используем CSSPath. Свой выбор мы аргументируем тем, что XPath является мощным инструментом для поиска, он позволяет искать по текстовому содержимому элементов, позициям и использовать логические условия. CSSPath таких функций не имеет, он ограничен элементами, классами, идентификаторами и находиться в строгой зависимости от их иерархии.
Используя парсеры, повышайте продуктивность
Поиск нужного конента на сайте - часто встречающаяся задача в работе. Разумеется, можно вручную обойти все страницы на сайте в поисках нужного элемента, но, если на сайте много страниц, то задача может затянуться или вовсе стать невыполнимой. В таких ситуациях лучше всего воспользоваться парсингом: командами из поисковых систем или специализированными программами для работы с сайтом.
В материале мы показали, как с помощью разных инструментов можно находить текстовое содержимое и CSS классы на сайте.
Рекомендуем при выборе инструмента отталкиваться от целесообразности его использования. Если у вас сайт на 10 страниц и вы понимаете, что нужный элемент встречается в 2-3 местах, то проще будет воспользоваться поисковыми операторами, а если работаете с интернет магазином на 1000 страниц, то без специальных программ тут не обойтись.