01Що це таке та як це працює
XPath моделює XML або HTML-документ як дерево вузлів: елементи, атрибути, текст, коментарі тощо. Шлях розташування складається з кроків, розділених символами / або //. Кожен крок має вісь (за замовчуванням child), тест вузла (наприклад, div або @href) та необов'язкові предикати у квадратних дужках, які фільтрують набір вузлів (наприклад, [@class='price']). Двигун обробляє шлях від контекстного вузла — часто кореня документа — і повертає набір вузлів у порядку розташування в документі. Такі осі, як ancestor, following-sibling або descendant, дозволяють переміщатися вбік або вгору, а не лише вниз. Предикати можуть використовувати функції, такі як contains(), starts-with() або position(), щоб уточнити відповідність. Оскільки XPath 1.0 реалізовано в кожному браузері та в більшості бібліотек для скрапінгу, він працює однаково в Chrome DevTools, Python lxml, Screaming Frog та користувацьких краулерах.
XPath — це спосіб знайти та виділити конкретні фрагменти коду вебсторінки, наприклад, отримати всі заголовки або перевірити наявність метатегу.
02Що з цим робити
Почніть із вивчення 20% синтаксису, який ви використовуватимете щодня: // для будь-якого нащадка, @attr для атрибутів, text() для внутрішнього тексту та предикатів для фільтрації. Відкрийте Chrome DevTools, натисніть Ctrl+F на панелі Elements і введіть XPath, наприклад //meta[@property='og:title'], щоб переконатися, що він вибирає правильний тег. Створіть шпаргалку з повторюваних патернів вашого сайту — карток товарів, посилань пагінації, елементів навігації (breadcrumb) — і перетворіть їх на повторно використовувані вирази XPath. Додайте ці вирази до конфігурації вашого краулера (Screaming Frog custom extraction, Sitebulb або Python-скрипт), щоб кожен аудит автоматично збирав однакові дані. Заплануйте щотижневу перевірку: запустіть XPath для кількох живих URL-адрес і переконайтеся, що витягнуті значення все ще збігаються з тим, що ви бачите в браузері.
03Як це вимірюється або помічається
Ви побачите XPath у трьох місцях. По-перше, у налаштуваннях SEO-інструментів: поля для власного витягування даних, правила рендерингу JavaScript або валідатори структурованих даних часто підтримують XPath. По-друге, у репозиторіях коду: шукайте xpath, lxml, selenium або // у скраперах та наборах тестів вашої команди. По-третє, у консолях браузерів: введення $x("//h1") миттєво повертає відповідні вузли. Якщо краулер повідомляє про відсутність даних, перевірте, чи XPath все ще відповідає живому DOM — редизайн сайту часто змінює назви класів або елементи-обгортки, що руйнує раніше стабільні шляхи. Раптове зменшення кількості витягнутих полів на багатьох URL — це чітка ознака того, що XPath потребує оновлення.
04Поширені помилки
- Використання абсолютних шляхів на кшталт
/html/body/div[2]/section/div— вони стають недійсними, якщо будь-який елемент-обгортка додається або видаляється. - Покладання на автоматично згенеровані назви класів на кшталт
css-1x2y3z— вони змінюються під час кожного розгортання коду. - Ігнорування просторів імен у XML-картах сайту або Atom-каналах —
//urlнічого не повертає, якщо стандартний простір імен не зареєстровано. - Припущення, що XPath бачить контент, відрендерений за допомогою JavaScript — він бачить лише початковий HTML, якщо ви не запускаєте його у фоновому браузері (headless browser).
- Написання занадто широких виразів на кшталт
//div, які повертають тисячі вузлів і уповільнюють сканування.
05Обмеження
XPath працює з розпарсеним деревом DOM, а не з візуальним макетом. Він не може вибирати елементи на основі обчислених CSS-стилів, положення на екрані або взаємодії з користувачем. Він також не розуміє JSON-LD, вбудований у теги `` — спочатку потрібно витягнути текст скрипта, а потім окремо розпарсити JSON. В XPath 1.0 відсутні регулярні вирази та розширені маніпуляції з рядками; для цього вам знадобляться XPath 2.0/3.0 (Saxon, BaseX) або подальша обробка у вашій мові програмування. Його часто плутають із CSS-селекторами, які коротші для простих випадків, але менш потужні для перебору сусідніх елементів, предків або фільтрації за текстом. Нарешті, XPath не може виконувати запити через межі iframe або shadow DOM без зміни контексту.
06Приклад роботи
Цей вираз знаходить кожну картку товару за стабільним частковим збігом класу, потім переходить до спана з ціною, який має атрибут Schema.org itemprop, і зрештою повертає значення атрибута content — ціну в машиночитальному форматі. Він залишається робочим навіть після редизайну, який додає обгортки div або змінює точний суфікс класу, оскільки contains(@class,'product-card') все ще спрацьовує. Перевірте це в DevTools за допомогою $x("//div[contains(@class,'product-card')]//span[@itemprop='price']/@content"), і ви отримаєте масив вузлів атрибутів, властивості value яких є потрібними вам цінами.
//div[contains(@class,'product-card')]//span[@itemprop='price']/@content
Запис вище написаний GetLoopLoop. Нижче — те, що про цей самий термін тримають незалежні каталоги. Жодне з цього не є джерелом цієї сторінки.
- Також називається
- XML Path Language
- Запроваджено
- 1999
- Розробник
- W3C
- Частина
- XSL Transformations, XQuery, Extensible Stylesheet Language
- Різновид
- мова запитів, мова програмування
Той самий термін у Вікіпедії
Каталогізовано 33 мовами07Поширені запитання
Що таке XPath і чому SEO-інструменти використовують його?
XPath — це мова запитів для вибору вузлів у дереві XML або HTML-документів. Краулери, скрепери та інструменти для аудиту використовують її, оскільки вона дає точний і стабільний спосіб націлитися на такі елементи, як canonical link, H1 або ціна товару, не залежачи від візуального розташування на сторінці.
Чим XPath відрізняється від CSS-селекторів?
Обидва методи вибирають вузли DOM, але XPath може рухатися в будь-якому напрямку через дерево, фільтрувати за текстовим вмістом і вибирати вузли за позицією. CSS-селектори рухаються лише вниз і підбирають збіги за тегом, класом або атрибутом, тому для таких завдань, як «знайти посилання, анкорний текст якого містить "Privacy"», зазвичай потрібен XPath.
Чи потрібно мені вивчати XPath для технічного SEO?
Це залежить від глибини вашого занурення. Якщо ви лише проводите аудити, більшість інструментів дозволяють вибирати елементи простим кліком. Якщо ж ви створюєте власні вибірки у Screaming Frog, кастомні скрепери або конектори для Looker Studio, базові знання XPath окупляться вже за один вечір.
Чому мій XPath нічого не знаходить, хоча на сторінці явно є цей елемент?
Найпоширеніша причина — робота з просторами імен (namespaces), особливо у фідах або SVG. Інша часта причина — спроба знайти відрендерений текст, коли елемент прихований, або використання text() тоді, коли вам потрібен string(.) для об'єднання дочірніх вузлів.
Чи може XPath бачити елементи, які рендериться за допомогою JavaScript?
Тільки після того, як вони з'являться в DOM. XPath оцінює розпарсений HTML, тому, якщо ваш інструмент завантажує вихідний код до виконання JS, динамічно вставлені вузли будуть відсутні, і ваш вираз не поверне результатів.
08Як про це питають уголос
Той самий термін словами, якими про нього питають асистента, а не набирають у рядку пошуку — написано із ситуації, тому кожне питання несе ту ситуацію, з якої виникло.
Використовуйте //span[@itemprop='price']/@content, щоб отримати атрибут ціни Schema.org напряму, або //*[contains(@class,'price')], якщо розмітка непослідовна. Вставте вираз у поле витягування, запустіть тест і переконайтеся, що у попередньому перегляді відображаються очікувані значення перед зустріччю.
Так, майже напевно. Сторінки, відрендерені за допомогою JavaScript, часто мають вузли, яких немає в сирому HTML, який завантажив ваш скрапер. Перемкніть ваш фетчер на headless-браузер або націльтеся на JSON, з якого сторінка отримує дані, і той самий XPath почне повертати значення.
Орієнтуйтеся на схему, а не на стилі. Щось на кшталт //h1 або //*[@itemprop='name'] витримає редизайн, оскільки зміст не змінюється, тоді як такий клас, як .product-title__heading--xl, рідко проходить через редизайн. Перевірте на кількох сторінках з різних шаблонів, перш ніж покладатися на це.