Starting a new project?
отримати консультацію
Залиште свої контактні дані, наш менеджер передзвонить вам.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
У статті я покажу вам, як за допомогою Screaming Frog витягувати дані:
І багато чого іншого з застосуванням XPath Screaming Frog та регулярних виразів. Працювати будемо з реальними сайтами.
Screaming Frog за замовчуванням збирає багато важливої інформації:
Але що, якщо ви хочете використовувати інші точки даних при скануванні вашого сайту?
За допомогою Custom Extraction можна запрограмувати Screaming Frog для вилучення практично будь-якої потрібної вам інформації. Як тільки ви зрозумієте, як його використовувати, зможете проводити складніші обходи та аналіз сайтів.
Ось кілька способів використання Custom Extraction для розробки ідей та рекомендацій для SEO-стратегій наших клієнтів:
Доступ до функції «Custom Extraction» отримуємо в списку Configuration у розділі Custom > Extraction.
Рис. 1 – Розділ Configuration
Потім налаштовуємо правила вилучення. Інструкція допоможе вам з цим.
Рис. 2 – Вікно налаштування правил вилучення
При запуску сканування з використанням настроюваного вилучення можна перемикатися між параметрами фільтра вилучення, щоб прийти до бажаного формату для ваших даних. Так деякі з прикладів з цього керівництва вимагають вибору певного фільтра екстракції.
Дані, які ми витягуємо, доступні на вкладці «Custom». У списку Filter вибираємо Extraction.
Рис. 3 – Витягувані дані
Також він доступний у вигляді стовпчика на вкладці Internal поруч з усіма полями за замовчуванням, які заповнює Screaming Frog.
Що таке XPath?
Повна назва терміна – XML Path Language. XPath застосовується для навігації по елементах і атрибутах в XML-документі.
XPath використовується для вилучення будь-якого HTML-елемента веб-сторінки. Це можуть бути:
У Google Chrome є функція, яка спрощує написання XPath. Використовуючи інструмент Inspect (подивитися код), правою кнопкою миші будь-який елемент і скопіюйте синтаксис XPath.
Рис. 4 – Контекстне меню для копіювання XPath-запитів
Часто буває так, що потрібно змінити те, що надає Chrome, перш ніж вставляти XPath в Screaming Frog. Inspect принаймні допоможе розібратися в синтаксисі.
Основний синтаксис для парсинга XPath:
| Синтаксис | Функція |
| // | Шукати в будь-якому місці документа |
| / | Шукати в корені |
| @ | Виберіть певний атрибут елемента |
| * | Підстановлювальний знак, який використовується для вибору будь-якого елементу |
| [] | Знайдіть конкретний елемент |
| . | Визначає поточний елемент |
| .. | Визначає батьківський елемент |
Загальні функції XPath:
| Оператор | Що робить? |
| starts-with(x,y) | Перевіряє, чи починається x з y |
| contains(x,y) | Перевіряє, чи містить x y |
| last() | Знаходить останній предмет у наборі |
| count(XPath) | Підраховує кількість випадків вилучення XPath |
Нижче у таблицях наводжу приклади вилучення певних елементів сайту. Ви можете скопіювати синтаксис зі стовпця XPath й вставити його в Screaming Frog. Щоб налаштувати витяг відповідно до своїх потреб, змініть синтаксис на свій розсуд.
| 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.
Рис. 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:
Рис. 6 – Переходимо до вилучення даних
Вкладка Configuration > Custom > Extraction:
Рис. 7 – Вікно екстракції
Вставляємо сюди запит XPath, який ми скопіювали з браузера й починаємо сканування сайту:
Рис. 8 – Результати сканування
В результаті сканування отримуємо ціни товарів, які відображаються в окремому стовпці:
Рис. 9 – Витягнуті дані можна експортувати в окремий файл
Тепер для вивантаження витягнутих даних обираємо заголовок стовпчика і натискаємо “Export”.
| Приклади 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 запити для отримання кількості відгуків та середньої оцінки:
Рис. 10 – Витяг даних по 2-х критеріях одночасно
Після сканування отримуємо дані зі сторінок, де такий вид мікророзмітки присутній:
Рис. 11 – Результат
Якщо мікророзмітка виконана за допомогою JSON-LD, то нам допоможуть регулярні вирази, які розглянемо в наступному розділі.
Це формула, яка допомагає фільтрувати потрібні нам текстові рядки й отримувати з них необхідні дані (метасимволи, а ось термін з Вікіпедії).
Нижче наводжу синтаксис, за допомогою якого ми можемо самостійно побудувати регулярні вирази.
*Даний посібник не претендує на детальний гайд, а показує лише приклади.
| Синтаксис | Функція |
| Знаки підставлення | |
| . | Відповідає будь-якому 1 символу |
| * | Відповідає попередньому символу 0 або більше разів |
| ? | Відповідає попередньому символу 0 або 1 раз |
| + | Відповідає попередньому символу 1 або більше разів |
| | | АБО Ж |
| Групи | |
| () | Відповідність укладеним символам в точному порядку |
| [] | Відповідність укладеним символам в будь-якому порядку |
| – | Відповідати будь-яким символам в зазначеному діапазоні |
| Якорі | |
| ^ | Рядок починається з наступного символу |
| $ | Рядок закінчується попереднім символом |
| Екранування | |
| \ | Звертайтеся до символу буквально, а не як до регулярного виразу |
У таблицях нижче ви можете скопіювати синтаксис в стовпці Regex і вставити його в Screaming Frog, щоб здійснити витяг, описаний в стовпці Що отримаємо?. Змініть синтаксис на свій розсуд, щоб налаштувати вилучення відповідно до ваших потреб.
Регулярний вираз допоможе витягти будь-який код, який міститься в тегах
Ви вже підписані на нашу розсилку!
Підтвердіть свій email для завершення підписки.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.