замовити дзвінок
+38 057 782-28-00
замовити дзвінок
Starting a new project?
отримати консультацію
Читайте наш Telegram 👈
20
4

У статті я покажу вам, як за допомогою 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, щоб здійснити витяг, описаний в стовпці Що отримаємо?. Змініть синтаксис на свій розсуд, щоб налаштувати вилучення відповідно до ваших потреб.

Регулярний вираз допоможе витягти будь-який код, який міститься в тегах


Оновлення Google червень 2021

Хлібні крихти: в чому користь для сайту

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

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

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.