заказать звонок
+38 057 782-28-00
заказать звонок
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
111
8

В статье я покажу вам, как с помощью Screaming Frog извлекать данные:

  • микроразметки;
  • HTML;
  • встроенного JavaScript.

И многого другого с применением XPath и регулярных выражений. Работать будем с реальными сайтами.


1. Зачем использовать функцию пользовательского извлечения?

Screaming Frog по умолчанию собирает много важной информации:

  • заголовки страниц;
  • элементы H1;
  • канонические теги и т. д..

Но что, если вы хотите использовать другие точки данных при сканировании вашего сайта?

С помощью Custom Extraction можно запрограммировать Screaming Frog для извлечения практически любой нужной вам информации. Как только вы поймете, как его использовать, сможете проводить более сложные обходы и анализ сайтов.

Вот несколько способов использования Custom Extraction для разработки идей и рекомендаций для SEO-стратегий наших клиентов:

  • извлеките дату публикации, чтобы проанализировать SEO-эффективность контента по возрасту;
  • извлеките количество комментариев к статьям блога, чтобы показать клиенту, какие темы вызывают наибольшее участие пользователей;
  • извлеките свойство доступности продукта из разметки схемы сайта электронной торговли, чтобы понять, как Google индексировал товары, которые отсутствуют на складе.

2. Как использовать Custom Extraction Screaming Frog

Доступ к функции Custom Extraction получаем в раскрывающемся списке Configuration в разделе Custom > Extraction.

Screaming Frog Configuration

Рис. 1 — Раздел Configuration

Затем настраиваем правила извлечения. Инструкция поможет вам с этим.

Screaming Frog extraction

Рис. 2 — Окно настройки правил извлечения

  • Имя экстрактора: будет отображаться в заголовке столбца для пользовательских извлечений.
  • Метод извлечения: выберите XPath, Regex или CSSPath.
  • Правило: здесь вы вводите синтаксис XPath или регулярного выражения.
  • Фильтр извлечения: выберите Извлечь внутренний HTML (Extract Inner HTML), Извлечь элемент HTML (Extract HTML Element), Извлечь текст (Extract Text) или Извлечь значение функции (Function Value) (обратите внимание, что эти параметры недоступны с регулярным выражением).

При запуске сканирования с использованием настраиваемого извлечения можно переключаться между параметрами фильтра извлечения, чтобы прийти к желаемому формату для ваших данных. Так некоторые из примеров из этого руководства требуют выбора определенного фильтра экстракции.

Данные, которые мы извлекаем, доступны на вкладке Custom. В раскрывающемся списке Filter выбираем Extraction.

Screaming Frog Extractor

Рис. 3 — Извлекаемые данные

Также он также в виде столбца на вкладке Internal рядом со всеми полями по умолчанию, которые заполняет Screaming Frog.


3. Извлечение с помощью XPath

Что такое XPath?

Полное название термина — XML Path Language. XPath применяется для навигации по элементам и атрибутам в XML-документе.


3.1 Когда можно использовать XPath

XPath используется для извлечения любого HTML-элемента веб-страницы. Это могут быть:

  • теги div, span, p;
  • заголовки;
  • любой другой элемент HTML.

В Google Chrome есть функция, которая упрощает написание XPath. Используя инструмент Inspect (посмотреть код), кликните правой кнопкой мыши любой элемент и скопируйте синтаксис XPath.

Screaming Frog menu

Рис. 4 — Контекстное меню для копирования XPath-запросов

Часто бывает так, что нужно изменить то, что предоставляет Chrome, прежде чем вставлять XPath в Screaming Frog. Inspect по крайней мере поможет разобраться в синтаксисе.


3.2 Базовый синтаксис для XPath Web Scraping

Основной синтаксис для парсинга XPath:

Синтаксис Функция
// Искать в любом месте документа
/ Искать в корне
@ Выберите определенный атрибут элемента
* Подстановочный знак, используемый для выбора любого элемента
[] Найдите конкретный элемент
. Определяет текущий элемент
.. Определяет родительский элемент

 

Общие функции XPath:

Оператор Что делает
starts-with(x,y) Проверяет, начинается ли x с y
contains(x,y) Проверяет, содержит ли x y
last() Находит последний предмет в наборе
count(XPath) Подсчитывает количество случаев извлечения XPath

 


3.3 Примеры пользовательского извлечения XPath

Ниже в таблицах привожу примеры извлечения определенных элементов сайта. Вы можете скопировать синтаксис из столбца XPath и вставить его в Screaming Frog. Чтобы настроить извлечение в соответствии со своими потребностями, измените синтаксис по своему усмотрению.

Как извлечь общие элементы HTML

XPath Что извлекает?
//h1 Извлекает все теги H1
//h3[1] Извлечение первого тега H3 (в квадратных скобках указывается номер элемента)
//div/p Любой тег <p> содержащийся в  <div>
//div[@class=»] Элементы в тегах <div> с определенным классом, указанным в кавычках
//*[@class=»] Любые элементы в определенном классе
//ul/li[last()] Последние элементы в маркированных списках <li>  <ul>
count(//h2) Количество заголовков H2 (установите фильтр извлечения на  Function Value)
//a[contains(.,’подробнее’)] Любая ссылка с анкорным текстом Подробнее
//a[starts-with(@title,’Заголовок’)] Любую ссылку с заголовком Заголовок

 

Пример извлечения цены

В первую очередь нам необходимо получить XPath-запрос.
Для этого на странице товара щелкаем правой кнопкой мыши по цене и выбираем пункт Inspect (Посмотреть код).
После этого мы увидим в коде сайта элемент с ценой. Далее кликаем на цену и выбираем пункт Copy > Copy Full XPath.

Screaming Frog XPath-запрос

Рис. 5 — Пример получения XPath-запроса цены товара

Получаем код в таком формате:

/html/body/div[1]/section[2]/div/div/div[2]/div/div[2]/div[1]/div[2]/form/div[1]/p/span/bdi/span

Теперь переходим в Screaming Frog:

Screaming Frog Custom extraction

Рис. 6 — Переходим к извлечению данных

Вкладка Configuration > Custom > Extraction:

Screaming Frog window Extractor

Рис. 7 — Окно экстракции

Вставляем сюда запрос XPath, который мы скопировали из браузера и начинаем сканирование сайта:

Screaming Frog scan result

Рис. 8 — Результаты сканирования

В результате сканирования получаем цены товаров, которые отображаются в отдельном столбце:

Screaming Frog export

Рис. 9 — Извлеченные данные можно экспортировать в отдельный файл

Теперь для выгрузки извлеченных данных выбираем заголовок столбца и нажимаем “Export”.

Как извлечь общие атрибуты HTML

Примеры XPath Что извлекает?
//@href Все ссылки
//a[starts-with(@href,’mailto’)]/@href Ссылки, которые начинаются “mailto” (email адрес)
//img/@src Все URL адреса источников изображений
//img[contains(@class,»)]/@src Все URL адреса источников изображений с именем класса
//link[@rel=’alternate’] Элементы с атрибутом rel
//@hreflang Все значения hreflang

 

Как извлечь разметку схемы в формате микроданных

Эти правила XPath можно использовать, когда разметка веб-сайта находится в формате микроданных. Например:

Примеры XPath Что извлекает?
//*[@itemtype]/@itemtype Все типы микроразметки на странице
//*[contains(@itemtype,’BreadcrumbList’)]/*[@itemprop]/a/@href Все ссылки на хлебные крошки
//*[@itemprop=’name’]/@content Название товара
//*[@ itemprop = ‘description’]/@content Описание товара
//*[@itemprop=’price’]/@content Цена товара
//*[@itemprop=’availability’]/@href Наличие товара
//*[@itemprop=’ratingCount’]/@content Количество отзывов
//*[@itemprop=’ratingValue’]/@content Средняя оценка

 

Пример извлечения данных об отзывах

Вводим 2 XPath запроса для получения количества отзывов и средней оценки:

Screaming Frog extraction 2 elements

Рис. 10 — Извлечение данных по 2-м критериям одновременно

После сканирования получаем данные со страниц, где такой вид микроразметки присутствует:

Screaming Frog result extraction

Рис. 11 — Результат

Если микроразметка выполнена с помощью JSON-LD, то нам помогут регулярные выражения, которые рассмотрим в следующей главе.


4. Пользовательское извлечение с помощью Regex

Что такое регулярное выражение?

Это формула, которая помогает фильтровать нужные нам текстовые строки и получать из них необходимые данные (метасимволы, а вот термин из Википедии).

Ниже привожу синтаксис, с помощью которого мы можем самостоятельно построить регулярные выражения.

*Данное руководство не претендует на подробный гайд, а показывает лишь примеры.

Синтаксис Функция
Подстановочные знаки
. Соответствует любому 1 символу
* Соответствует предыдущему символу 0 или более раз
? Соответствует предыдущему символу 0 или 1 раз
+ Соответствует предыдущему символу 1 или более раз
| ИЛИ ЖЕ
Группы
() Соответствие заключенным символам в точном порядке
[] Соответствие заключенным символам в любом порядке
Соответствовать любым символам в указанном диапазоне
Якоря
^ Строка начинается с следующего символа
$ Строка заканчивается предыдущим символом
Экранирование
\ Обращайтесь к символу буквально, а не как к регулярному выражению

 


4.1 Примеры пользовательского извлечения Regex

В таблицах ниже вы можете скопировать синтаксис в столбце Regex и вставить его в Screaming Frog, чтобы выполнить извлечение, описанное в столбце “Что получим?”. Измените синтаксис по своему усмотрению, чтобы настроить извлечение в соответствии с вашими потребностями.

Регулярное выражение поможет извлечь любой код, который содержится в тегах <script>. Для маркетологов это означает, что вы сможете извлекать ​​информацию об идентификаторах отслеживания клиентов, которые используются в их аналитических или рекламных платформах.

Вот несколько примеров:

Регулярное выражение Что получим?
[«‘](UA-.*?)[«‘] Идентификатор отслеживания Google Analytics
[«‘](AW-.*?)[«‘] Идентификатор конверсии Google Рекламы и/или тег ремаркетинга
[«‘](GTM-.*?)[«‘] Google Tag Manager и / или Google Optimize ID
fbq\([«‘]init[«‘], [«‘](.*?)[«‘] Идентификатор пикселя Facebook

 

Пример проверки наличия кода GTM на всех страницах сайта:

Screaming Frog custom extraction tab

Рис. 12 — Проверка с помощью регулярных выражений

Для получения данных о коде GTM копируем из таблицы выше регулярное выражение и вставляем в Custom Extraction, после чего начинаем сканирование сайта.

Screaming Frog website scan result

Рис. 13 — Результат сканирования

В отчете сканирования мы видим, что все страницы сайта имеют код GTM.

Ранее для парсинга всех типов микроразметки в формате JSON-LD можно было воспользоваться регулярным выражением [«‘]@type[«‘]: *[«‘](.*?)[«‘]. Оно извлекает все типы микроразметки, которые имеются на странице.
Но сейчас для парсинга микроразметки нам надо поставить соответствующую галочку в разделе Configuration > Spider > Extraction > Structured Data.

Screaming Frog JSON-LD

Рис. 14 — Выбор данных для извлечения

Результат такого сканирования видим ниже:

Screaming Frog several criteria

Рис. 15 — Извлечение данных по нескольким критериям

Но чтобы получить более точные данные определенного типа микроразметки, вернемся к регулярным выражениям. И для примера возьмём микроразметку Организации.

[«‘]@type[«‘]: *[«‘]Organization[«‘].*?[«‘]name[«‘]: *[«‘](.*?)[«‘] Извлечь название организации
[«‘]streetAddress[«‘]: *[«‘](.*?)[«‘] Извлеките почтовый адрес
[«‘]addressLocality[«‘]: *[«‘](.*?)[«‘] Извлечь адресную локализацию
[«‘]addressRegion[«‘]: *[«‘](.*?)[«‘] Извлечь регион адреса
[«‘]telephone[«‘]: *[«‘](.*?)[«‘] Извлеките номер телефона
[«‘]sameAs[«‘]: *\[(.*?)\] Извлеките ссылки «sameAs»

 

В результате сканирования по двум регулярным выражениям получили вот такие данные:

Screaming Frog scan result criteria

Рис. 16 — Результат сканирования

На этом все. Мы разобрали примеры на реальных проектах, из которых видно, что получить можно любые данные. Главное — знать, как.


Обновление Google июнь 2021

Хлебные крошки: в чем польза для сайта

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.