Scraping Surgeon полное руководство ZimmWriter
Этот материал детально описывает работу с инструментом Scraping Surgeon («Хирург парсинга») в ZimmWriter, который позволяет с хирургической точностью указывать, какие элементы веб-страницы отправлять в ИИ, отсекая лишний мусор вроде сайдбаров, рекламы и отзывов.
По сути, Scraping Surgeon — это способ указать ZimmWriter, какие именно разделы веб-страницы вы хотите отправить искусственному интеллекту для анализа или суммаризации. Для его настройки требуется базовое понимание HTML/CSS (или помощь того, кто в этом разбирается).
В чем практическая польза?
Лучше всего объяснить это на примере. Представьте страницу товара на Amazon — например, iPhone 15 Pro Max.
На этой странице, помимо описания самого смартфона, находится огромное количество посторонней информации: реклама аксессуаров, ссылки на более старые модели, сравнения с другими телефонами, блоки «с этим товаром также покупают» и сотни случайных отзывов.
Если ZimmWriter (или любой другой ИИ-писатель) спарсит страницу целиком и передаст весь этот массив данных в ИИ для написания статьи или обзора, возникнут две серьезные проблемы:
- ИИ запутается: он может приписать характеристики чехла или зарядного устройства к самому смартфону.
- Лишние данные: ИИ может включить в итоговый текст информацию, которая совершенно не важна для вашей задачи (например, цитаты из отзывов покупателей о бракованной доставке).
Scraping Surgeon позволяет полностью отфильтровать этот информационный шум и извлекать только полезный, целевой контент.
Основы: HTML и CSS
Работа Scraping Surgeon строится на использовании ID и классов таблиц стилей CSS, с помощью которых парсер находит нужный контент на странице.
Если у вас нулевые знания в области CSS, вам будет трудно создавать собственные правила для новых сайтов. Но вы все равно можете использовать этот инструмент: как минимум (и это не требует никаких навыков), вы можете зайти в список сохраненных доменов (Saved Domains), выбрать профиль Amazon, добавить туда свой партнерский код (Amazon affiliate tag) и нажать кнопку Update. После этого лучше не менять настройки без крайней необходимости.
Если же вы хотите разобраться во всем сами, ниже приведен краткий ликбез по основам HTML и CSS.
Мини-справочник по HTML
HTML (HyperText Markup Language) — это код разметки страницы, который браузер превращает в красивый интерфейс. Вы можете увидеть его, если кликнете правой кнопкой мыши по любой странице в браузере и выберете «Просмотреть исходный код».
Пример разметки:
<h1>Apple iPhone 15 Pro Max, 1TB</h1>
Этот фрагмент состоит из трех частей:
<h1>— открывающий тег.Apple iPhone 15 Pro Max, 1TB— контент (текст внутри тега).</h1>— закрывающий тег.
Некоторые из наиболее часто используемых тегов:
<h1>,<h2>,<h3>,<h4>и т.д. — заголовки страницы разных уровней.<p>— абзац текста.<div>— универсальный блочный контейнер (коробка, в которую складывают другие элементы).<a>— ссылка на другую страницу (гиперссылка).<img>— картинка.<span>— строчный контейнер (похож на<div>, но используется для оформления элементов прямо внутри строки текста).
Теги HTML можно сравнить с деталями автомобиля — они не обязательно выглядят красиво, но без двигателя и колес машина не поедет. За красивый внешний вид элементов отвечает CSS.
Мини-справочник по CSS
CSS (Cascading Style Sheets) — это правила, которые задают стиль, цвета, шрифты и расположение элементов HTML.
Чтобы применить стиль к нужному тегу, используются CSS-селекторы. Два самых популярных — это ID (идентификатор) и Class (класс). Разработчики сайтов используют их как маркеры или ключевые слова.
Пример HTML-разметки:
<h1 id="productTitle" class="center">Apple iPhone 15 Pro Max, 1TB</h1>
<p class="center tagline">Here are some product details on the new apple iPhone!</p>
Пример стилей в CSS-файле:
#productTitle {
font-weight: 600;
font-size: 28px;
}
.center {
text-align: center;
}
.tagline {
font-weight: 400;
font-size: 22px;
}
- ID селектор: должен встречаться на странице только один раз. В нашем примере это
productTitle, присвоенный заголовку<h1>. В HTML-коде он обозначается какid="productTitle", а в файле стилей CSS — символом решетки#productTitle. - Class селектор: может использоваться на странице многократно. В примере класс
centerназначен и заголовку<h1>, и абзацу<p>. В HTML-коде он записывается какclass="center", а в файле CSS — с точкой.center. - Одному тегу можно присваивать несколько классов сразу, разделяя их пробелом (как
class="center tagline"в теге<p>).
Вложенные теги (Nested Tags)
Последний важный концепт для работы с Scraping Surgeon — вложенность элементов.
<div>
<p>Here is some text</p>
<p>Here is some more text</p>
</div>
В этом примере родительский тег <div> содержит внутри себя два дочерних тега <p>. Они считаются вложенными (дочерними), так как находятся внутри открывающего и закрывающего тегов <div>.
В Scraping Surgeon это работает так: если вы указываете родительский тег, парсер забирает весь контент, находящийся внутри него, включая все дочерние теги. Это критически важное правило, о котором нужно всегда помнить.
Настройка Scraping Surgeon
Меню Scraping Surgeon находится в разделе настроек ZimmWriter (Options), так как работает по принципу «настроил и забыл».
Когда программа обращается к сайту, она проверяет, совпадает ли домен этого сайта с одним из активных правил в Scraping Surgeon. Если совпадение найдено, ZimmWriter парсит страницу строго по заданным вами селекторам.
Domain (Домен)
Правила указания домена:
- Домен должен обязательно содержать точку.
amazon.com— верно.amazon.— верно (позволяет настроить правило сразу для всех региональных зон вроде.co.uk,.de,.ca).amazon— неверно (правило работать не будет).
- Не указывайте префикс
www. - Не указывайте протокол
https.
CSS Title Class/ID or HTML Tags h1 or h2 (Селектор заголовка)
Укажите один CSS-класс (.class), один ID (#id) или один из разрешенных тегов (h1 или h2), который содержит название статьи или товара.
Почему на Amazon мы не используем стандартный тег h1? На страницах Amazon часто бывает несколько тегов h1, что путает ИИ. Вместо этого мы используем уникальный ID #productTitle, который жестко привязан к названию товара.
Пример кода на Amazon:
<h1 id="title" class="a-size-large a-spacing-none">
<span id="productTitle" class="a-size-large product-title-word-break">Apple iPhone 15 Pro Max, 1TB</span>
<span id="titleEDPPlaceHolder"></span>
</h1>
Название товара обернуто в тег <span> с id="productTitle". Все товарные страницы Amazon используют этот идентификатор для вывода названия.
Не используйте неуникальные классы. Например, класс .product-title-word-break повторяется на странице Amazon много раз, поэтому использовать его в качестве селектора заголовка нельзя — парсер соберет кучу лишнего текста.
CSS Image Class/ID (Селектор изображений)
Этот параметр является необязательным. Если вы его укажете, он будет работать в двух инструментах:
- В Penny Arcade: при парсинге страницы ZimmWriter найдет картинку по указанному селектору (поддерживаются форматы jpg, jpeg, png, webp), скачает ее на ваш компьютер и назовет так же, как текстовый файл статьи. При автопубликации на WordPress эта картинка будет автоматически загружена как миниатюра записи (Featured Image).
- В SEO Writer: если вы укажете ссылку на источник для конкретного подзаголовка, ZimmWriter скачает изображение по селектору и сохранит его на диск, добавив к названию порядковый номер (
0001,0002и т.д.). При публикации на WordPress это изображение будет встроено в текст под соответствующим подзаголовком.
Пример для Amazon: в качестве селектора используется #imgTagWrapper. Это родительский тег <div>, внутри которого находится картинка товара.
Помните, что вы несете полную личную ответственность за соблюдение авторских прав на скачиваемые изображения.
CSS Text Classes/IDs or HTML Tags (Селекторы текста)
Вы можете указать до пяти CSS-классов, ID или разрешенных HTML-тегов (p, h2, ul, ol, li, section, span), разделяя их запятыми. Они задают области страницы, из которых нужно извлечь текст.
Стандартный набор селекторов, который ZimmWriter использует для Amazon:
#feature-bullets, #productDescription_feature_div, #prodDetails, #tech, .review-text
Вы можете свободно комбинировать CSS-селекторы и разрешенные HTML-теги, например:
#feature-bullets, p, #prodDetails, ol, .review-text
String to Append to End of URL / Amazon Affiliate Code (Суффикс URL / Партнерский код)
- Для Amazon: введите ваш партнерский идентификатор (например,
abc034-20). - Для остальных доменов: вы можете указать любую строку символов (например, UTM-метки), которую нужно автоматически добавлять к концу URL-адреса.
Как это используется в ZimmWriter:
- В Penny Arcade: если вы используете кастомную структуру (Custom Outline) с переменной
{cta}, ZimmWriter автоматически создаст кнопку призыва к действию в конце раздела, ведущую на исходный URL с добавленным партнерским кодом. - В SEO Writer: при активации чекбокса Trigger product layout для подзаголовка, ZimmWriter сформирует в конце раздела кнопку покупки со ссылкой, содержащей ваш партнерский код.
Treat as Review (Обрабатывать как обзор)
Эта опция применяется только в Penny Arcade при генерации заголовков силами ИИ (когда отключена опция Use original title). Чекбокс указывает ИИ, что при написании заголовка нужно обязательно использовать слово «обзор» (review).
- Без опции: «iPhone 15 Pro Max: Невероятные функции и отличная производительность»
- С опцией: «Обзор iPhone 15 Pro Max: Невероятные функции и отличная производительность»
Enable (Включение правила)
Позволяет временно отключить или включить правило для конкретного домена без его удаления из списка.
Saved Domains (Сохраненные домены)
Вы можете сохранить до 50 уникальных доменов в Scraping Surgeon. База данных работает автоматически — вам не нужно загружать профили вручную перед началом работы.
Кнопки управления
- Save — создает и сохраняет новое правило для домена.
- Update — обновляет и сохраняет изменения в уже существующем правиле.
- Delete — полностью удаляет выбранное правило из базы данных.