SEO
10 липня 2025

Автоматизація SEO-задач: як пришвидшити роботу за допомогою Tampermonkey і ChatGPT

SEO-задачі часто потребують збору даних зі сторінок сайтів, а для збору цих даних залучаються «молодші наукові співробітники». І як це робить молодший SEO-спеціаліст? З мого досвіду — ручками, про якусь автоматизацію зазвичай не йдеться.

Автоматизація в SEO економить час і нерви. Час = гроші, нерви = здоров’я. Тож далі я розгляну як зберегти і те, й інше та отримати той самий результат.

Які SEO-задачі оптимізує Tampermonkey

Tampermonkey — це популярне розширення для браузера, яке дає змогу запускати користувацькі скрипти (user scripts) на сайтах. Воно надає користувачам можливість змінювати або доповнювати функціональність сторінок, які вони відвідують.

Я полегшую собі робочу рутину, використовуючи Tampermonkey таким  чином:

  • додаю фіксовані кнопки перемикання мов на сервісах Google та інших сайтах, де перемикачі відсутні або незручно розміщені (один клік і інтерфейс уже англійською);
  • копіюю в буфер потрібний набір даних зі сторінки в одне натискання, наприклад, результати аналізу з Pagespeed Insights або типи схем мікророзмітки зі сторінки валідації;
  • копіюю в буфер в один клік пару анкор-посилання на сторінках фільтрів в інтернет-магазинах — зручно для збору URL, наприклад, для підбору сторінок для перелінкування;
  • автоматично імітую клік на потрібному елементі при відкритті сторінки, наприклад, у результатах пошуку Google, щоб одразу бачити загальну кількість результатів видачі;
  • створюю свої кнопки для спілкування з ChatGPT, щоб в одне натискання кнопки вставляється промпт, який збережений за цією кнопкою.

В кінці матеріалу я наведу довший список способів використання скриптів Tampermonkey для SEO-фахівців, але до того розберу як саме налаштовувати найкорисніші функції для браузера.

Як налаштувати Tampermonkey для SEO-задач

І найголовніше питання: чи треба бути для цього програмістом? 

Ні, не треба.

Для більшості задач не потрібні знання javascript, html, css тощо. Якщо якийсь рівень знань є — це прискорить отримання потрібного результату. Без технічних знань треба трохи довше спілкуватися зі штучним інтелектом.

Порядок налаштування виглядає так:

  1. Встановлюєте Tampermonkey.
  2. Визначаєте що і де скрипт має робити.
  3. Відкриваєте ChatGPT і формулюєте для нього задачу.
  4. Отримуєте код і копіюєте його в Tampermonkey.

Встановлення Tampermonkey

Щоби встановити Tampermonkey, зайдіть в офіційний магазин розширень для Chrome і натисніть «Add to Chrome». 

Щоби встановити Tampermonkey, зайдіть в офіційний магазин розширень для Chrome і натисніть «Add to Chrome». 

У вікні згоди погоджуйтесь додати розширення до браузера.

У вікні згоди погоджуйтесь додати розширення до браузера.

Після цього увімкніть режим розробника. Для цього натисніть три крапки в правому верхньому куті й оберіть «Extensions — Manage Extensions».

Після цього увімкніть режим розробника. Для цього натисніть три крапки в правому верхньому куті й оберіть «Extensions — Manage Extensions».

У новому вікні змініть положення перемикача в правому верхньому куті.

У новому вікні змініть положення перемикача в правому верхньому куті.

За необхідності перезавантажте браузер. 

Написання скрипта за допомогою ChatGPT

Особисто мені незручно, що Google сховав дані про кількість сторінок у пошуку. Хочу бачити цю інформацію одразу, тому для прикладу розгляну скрипт, який виведе цю цифру для мене.

Відкриваю пошук Google, пишу «site:netpeak.net». Або ось вам посилання, щоб не робити зайвих рухів. 

Усталено треба натиснути Tools, щоби побачити кількість результатів видачі.

Усталено треба натиснути Tools, щоби побачити кількість результатів видачі.

Усталено треба натиснути Tools, щоби побачити кількість результатів видачі.

Є кілька варіантів реалізації скрипта, щоб одразу бачити результати.

Інформація з’являється при натисканні на елемент на сторінці. Значить треба зробити скрипт, який натискає на цей елемент замість мене, але спочатку скрипт має ідентифікувати потрібний елемент.

Щоб визначити елемент, натискаю Ctrl + Shift + C (для Google Chrome) і наводжу мишку на кнопку Tools (1). Внизу сторінки мені підсвічується код, який відповідає за відображення кнопки.

Внизу сторінки мені підсвічується код, який відповідає за відображення кнопки.

Копіюю підсвічений фрагмент у буфер обміну.

Копіюю підсвічений фрагмент у буфер обміну.

Підготовка завершена, час писати код. Відкриваю ChatGPT. Пишу йому промпт:

Привіт! Треба твоя допомога

[тут вставляю скопійований код]

Мені потрібен скрипт для tampemonkey для сайту https://www.google.com.ua/search?q=*. Скрипт має дочекатися повного завантаження сторінки і після цього клікнути на елемент, код якого я тобі дав.

Що мені подобається в чаті, так це що він часто ще й пояснює, що він зробив і як це має працювати. Тому, якщо ви не знаєте принципів роботи коду, потроху розберетеся, просто читаючи його роз’яснення. 

У відповідь отримую код і коментарі.

У відповідь отримую код і коментарі.

// ==UserScript==
// @name         Auto Click on Google Tools Button
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Автоматичний клік на елемент «Tools» на сторінці пошуку Google
// @author       Ти
// @match        https://www.google.com.ua/search?q=*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Функція для перевірки наявності елемента і виконання кліку
    function clickOnElement() {
        const targetElement = document.querySelector('#hdtb-tls');
        if (targetElement) {
            targetElement.click();
            console.log('Елемент «Tools» натиснуто!');
        } else {
            console.log('Елемент «Tools» не знайдено.');
        }
    }

    // Дочекатися завантаження сторінки
    window.addEventListener('load', () => {
        console.log('Сторінка завантажена, шукаємо елемент...');
        clickOnElement();
    });
})();

Додавання скрипта у Tampermonkey 

Скрипт є, час його використати. Відкриваю сторінку з пошуком гугла і клікаю на іконку в правій верхній частині. Іконка може бути на панелі.

Відкриваю сторінку з пошуком гугла і клікаю на іконку в правій верхній частині. Іконка може бути на панелі.

Або під іконкою всіх розширень.

Або під іконкою всіх розширень.

По кліку на іконку розширення, з'явиться меню. Обираю «Створити новий скрипт».

По кліку на іконку розширення, з'явиться меню. Обираю «Створити новий скрипт».

Відкриється нова вкладка.

Відкриється нова вкладка.

Рядки з першого по десятий — дані, які дозволяють скрипту правильно відпрацьовувати й робити це там, де потрібно. Розберу кожний із них:

  1. // @name         Auto Click on Google Tools Button

Назва, яка буде відображатися на сторінці переліку скриптів. Її можете змінити, щоби легше було шукати скрипт.

  1. // @namespace    http://Tampermonkey.net/

Ідентифікатор, що позначає кому належить скрипт. Він не впливає на виконання коду, але корисний для структурування та уніфікаціїї.

  1. // @version      1.0

Версія скрипта. Не впливає на його роботу, а потрібна для того, щоб відстежувати зміни. Коли скрипт пише ChatGPT, за кожного наступного запиту з проханням щось змінити, він буде змінювати і версію скрипта  — на 1.1, 1.2 тощо. 

  1. // @description  Автоматичний клік на елемент «Tools» на сторінці пошуку Google

Опис скрипта. Доповнює інформацію з name, може бути порожній.

  1. // @author       Ти

Хто автор скрипта. ChatGPT каже, що це я, хоч це й не правда. Ні на що не впливає.

  1. // @match        https://www.google.com.ua/search?q=*

На яких сторінках буде працювати скрипт. У прикладі — на всіх сторінках, що починаються на https://www.google.com.ua/search?q=. На це вказує зірочка в кінці URL. За бажання, визначити сторінки можна за допомогою регулярного виразу в самому скрипті.

  1. // @grant        none

Вказує дозволи, необхідні скрипту. У моєму прикладі вказано none — означає, що скрипту не потрібен доступ до будь-яких спеціальних API або функцій Tampermonkey.

Ще раз наголошу, що скрипт написаний чатом майже ніколи не потребує змін.

Вставка коду

Отже, на минулому етапі я натиснув «Створити новий скрипт» і тепер у відкритій вкладці можу все виділити і видалити.

Отже, на минулому етапі я натиснув «Створити новий скрипт» і тепер у відкритій вкладці можу все виділити і видалити.

Вставляю в це поле скрипт, який написав ChatGPT.

Вставляю в це поле скрипт, який написав ChatGPT.

Далі треба зберегти зміни. Натискаю File — Save, або Ctrl + S на клавіатурі.

Далі треба зберегти зміни. Натискаю File — Save, або Ctrl + S на клавіатурі.

Після цього відкриється вікно зі списком збережених скриптів.

Після цього відкриється вікно зі списком збережених скриптів.

Перевірка роботи скрипта

Відкриваю вкладку, де проводив пошук і оновлюю її. За бажання, можна тестувати на інших сторінках.

Після оновлення сторінки одразу натискається кнопка tools і з’являється панель із даними. 

Після оновлення сторінки одразу натискається кнопка tools і з’являється панель із даними. 

Як покращити скрипт

Для SEO-задач лише кількості сторінок у видачі може бути недостатньо, зазвичай їх треба ще скопіювати, вставити в табличку, видалити непотрібні коми. Або ж можна попросити ChatGPT доповнити скрипт для автоматизації циї дій.

Для цього натискаю Ctrl + Shift + C і наводжу курсор кількість результатів (1), потім — копіюю підсвічений код у консолі (2).

Для цього натискаю Ctrl + Shift + C і наводжу курсор кількість результатів (1), потім — копіюю підсвічений код у консолі (2).

Зі скопійованим кодом звертаюся в той самий чат, де раніше генерував код, і пишу йому промпт:

Гарний скрипт, дякую! Та треба до нього додати функцію: потрібно під час кліку на елемент нижче:
<div id="result-stats">About 6,060 results<nobr> (0.12 seconds)&nbsp;</nobr></div> витягувати з нього кількість результатів і записувати в буфер обміну. Треба тільки число — без пробілів, літер, розділових знаків. 

Отримав відповідь. 

Треба тільки число — без пробілів, літер, розділових знаків.

// ==UserScript==
// @name         Auto Click on Google Tools Button and Copy Results Count
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Автоматичний клік на елемент «Tools» та копіювання кількості результатів у буфер обміну
// @author       Ти
// @match        https://www.google.com.ua/search?q=*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Функція для перевірки наявності елемента і виконання кліку
    function clickOnTools() {
        const targetElement = document.querySelector('#hdtb-tls');
        if (targetElement) {
            targetElement.click();
            console.log('Елемент «Tools» натиснуто!');
        } else {
            console.log('Елемент «Tools» не знайдено.');
        }
    }

    // Функція для копіювання тексту у буфер обміну
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(() => {
            console.log(`Скопійовано в буфер обміну: ${text}`);
        }).catch(err => {
            console.error('Помилка при копіюванні в буфер обміну:', err);
        });
    }

    // Функція для отримання кількості результатів і запису в буфер обміну
    function extractAndCopyResultsCount() {
        const resultStatsElement = document.querySelector('#result-stats');
        if (resultStatsElement) {
            const textContent = resultStatsElement.textContent;
            const match = textContent.match(/\d[\d,]*/); // Знаходимо перше число з можливими комами
            if (match) {
                const resultCount = match[0].replace(/[^\d]/g, ''); // Видаляємо всі символи, крім цифр
                copyToClipboard(resultCount);
            } else {
                console.log('Кількість результатів не знайдено.');
            }
        } else {
            console.log('Елемент «result-stats» не знайдено.');
        }
    }

    // Додавання обробника кліку на елемент #result-stats
    function addClickHandlerToResultStats() {
        const resultStatsElement = document.querySelector('#result-stats');
        if (resultStatsElement) {
            resultStatsElement.addEventListener('click', extractAndCopyResultsCount);
            console.log('Обробник кліку додано до елемента «result-stats».');
        } else {
            console.log('Елемент «result-stats» не знайдено для додавання обробника.');
        }
    }

    // Дочекатися завантаження сторінки
    window.addEventListener('load', () => {
        console.log('Сторінка завантажена.');
        clickOnTools();
        addClickHandlerToResultStats();
    });
})();

Як оновити код в Tampermonkey

Є два шляхи оновлення коду.

  1. На будь-якій вкладці клікніть на іконку Tampermonkey (1), оберіть Dashboard (2) і далі в переліку скриптів, клікніть на той, що треба змінити (3).

На будь-якій вкладці клікніть на іконку Tampermonkey (1), оберіть Dashboard (2) і далі в переліку скриптів, клікніть на той, що треба змінити (3).

На будь-якій вкладці клікніть на іконку Tampermonkey (1), оберіть Dashboard (2) і далі в переліку скриптів, клікніть на той, що треба змінити (3).

Далі відкриється вже знайомий інтерфейс, де треба знову виділити весь код і замість нього вставити новий (4).

Далі відкриється вже знайомий інтерфейс, де треба знову виділити весь код і замість нього вставити новий (4).

  1. Другий варіант — через сторінку роботи скрипта. Звідси шлях до редактора коду коротший. Іконка Tampermonkey розміщена в правому верхньому куті.

Іконка Tampermonkey розміщена в правому верхньому куті.

Червоним підсвічує кількість скриптів, що працюють на цій сторінці. Клікніть на іконку (1) й обирайте додаткове меню біля потрібного скрипту зі списку (2).

Клікніть на іконку (1) й обирайте додаткове меню біля потрібного скрипту зі списку (2).

У додатковому меню клікніть Edit (3).

У додатковому меню клікніть Edit (3).

Відкриється редактор коду. Після внесення змін не забудьте зберегти оновлений скрипт.

Перевірка роботи оновленого коду

Відкрийте вкладку пошуку, оновіть її. Якщо кількість результатів пошуку присутня на сторінці, перша частина коду вже спрацювала. Тепер треба скопіювати дані. Клікніть на кількість результатів пошуку.

А як зрозуміти, що інформація скопіювалась?

  1. Дія відобразиться в консолі.

Дія відобразиться в консолі.

  1. Можете просто натиснути Ctrl+V, клікнувши попередньо на будь-яке текстове поле.

Можете просто натиснути Ctrl+V, клікнувши попередньо на будь-яке текстове поле.

Якщо результати збігаються, все працює.

Інші приклади автоматизації SEO-задач

Далі менш детально розбиратиму, що роблю, але покажу кілька прикладів, як ще Tampermonkey може полегшити вам роботу.

Підрахунок кількості виділених символів

Раніше я копіював текст в Google Docs або в Google Translate і натискав Ctrl + Shift + C. Але це зайвий клопіт. Відкрийте ChatGPT, введіть промпт:

Але це зайвий клопіт. Відкрийте ChatGPT, введіть промпт:

Відповідь буде наступною:

// ==UserScript==
// @name         Text Selection Counter
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Counts selected text characters with and without spaces.
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Створення елемента для відображення результату
    const resultBox = document.createElement('div');
    resultBox.id = 'selection-counter-box';
    Object.assign(resultBox.style, {
        position: 'fixed',
        bottom: '10px',
        right: '10px',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        color: 'white',
        padding: '10px',
        borderRadius: '5px',
        zIndex: '9999',
        fontSize: '14px',
        fontFamily: 'Arial, sans-serif',
        display: 'none',
        maxWidth: '200px',
        wordWrap: 'break-word',
        textAlign: 'center'
    });
    document.body.appendChild(resultBox);

    // Функція для обробки виділення тексту
    function handleSelection() {
        const selection = window.getSelection();
        const text = selection.toString();

        if (text) {
            const lengthWithSpaces = text.length;
            const lengthWithoutSpaces = text.replace(/\s+/g, '').length;

            // Оновлення тексту в результатах
            resultBox.innerHTML = `
                <strong>Selected Text:</strong><br>
                <strong>With Spaces:</strong> ${lengthWithSpaces}<br>
                <strong>Without Spaces:</strong> ${lengthWithoutSpaces}
            `;

            // Відображення блоку результатів
            resultBox.style.display = 'block';
        } else {
            // Приховати блок, якщо нічого не виділено
            resultBox.style.display = 'none';
        }
    }

    // Слухач для зміни виділення тексту
    document.addEventListener('selectionchange', handleSelection);
})();

Створить новий скрипт і оновіть сторінку. Виділіть якийсь текст (1), внизу праворуч має з’явитися форма, що показує кількість виділених символів (2).

Виділіть якийсь текст (1), внизу праворуч має з’явитися форма, що показує кількість виділених символів (2).

Якщо підрахунок коректний — усе працює вірно. Але не зайве потестувати на іншому сайті, наприклад, на Netpeak Joutnal.

Але не зайве потестувати на іншому сайті, наприклад, на Netpeak Joutnal.

О! На цьому сайті елемент недостатньо високо і його перекривають інші віджети. Щоби виправити це, можна або попросити чат поставити елемент ще вище (z-index зробити не 9999, а 99999999), або додати блоку функцію, що буде переміщувати його вгору, якщо навести на нього курсор. Давайте спробую другий варіант. Повертаюся в ChatGPT. 

Давайте спробую другий варіант. Повертаюся в ChatGPT. 

Отримав код. 

// ==UserScript==
// @name         Text Selection Counter with Move Option
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Counts selected text characters and allows moving the counter block up or down the page.
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Створення головного елемента для результатів
    const resultBox = document.createElement('div');
    resultBox.id = 'selection-counter-box';
    Object.assign(resultBox.style, {
        position: 'fixed',
        bottom: '10px',
        right: '10px',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        color: 'white',
        padding: '10px',
        borderRadius: '5px',
        zIndex: '9999',
        fontSize: '14px',
        fontFamily: 'Arial, sans-serif',
        display: 'none',
        maxWidth: '200px',
        wordWrap: 'break-word',
        textAlign: 'center',
    });

    // Створення блоку для переміщення
    const moveBox = document.createElement('div');
    moveBox.id = 'move-box';
    moveBox.innerHTML = '⇅';
    Object.assign(moveBox.style, {
        position: 'absolute',
        top: '-25px',
        right: '10px',
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        color: 'black',
        padding: '5px',
        borderRadius: '5px',
        cursor: 'pointer',
        fontSize: '12px',
        fontWeight: 'bold',
    });

    resultBox.appendChild(moveBox);
    document.body.appendChild(resultBox);

    let isAtTop = false; // Стан положення блоку (знизу або зверху)

    // Обробка переміщення блоку
    moveBox.addEventListener('mouseenter', () => {
        if (isAtTop) {
            resultBox.style.bottom = '10px';
            resultBox.style.top = '';
            isAtTop = false;
        } else {
            resultBox.style.top = '10px';
            resultBox.style.bottom = '';
            isAtTop = true;
        }
    });

    // Функція для обробки виділення тексту
    function handleSelection() {
        const selection = window.getSelection();
        const text = selection.toString();

        if (text) {
            const lengthWithSpaces = text.length;
            const lengthWithoutSpaces = text.replace(/\s+/g, '').length;

            // Оновлення тексту в результатах
            resultBox.innerHTML = `
                <strong>Selected Text:</strong><br>
                <strong>With Spaces:</strong> ${lengthWithSpaces}<br>
                <strong>Without Spaces:</strong> ${lengthWithoutSpaces}
            `;
            resultBox.appendChild(moveBox); // Повертаємо кнопку «⇅» після оновлення HTML

            // Відображення блоку результатів
            resultBox.style.display = 'block';
        } else {
            // Приховати блок, якщо нічого не виділено
            resultBox.style.display = 'none';
        }
    }

    // Слухач для зміни виділення тексту
    document.addEventListener('selectionchange', handleSelection);
})();

Оновив скрипт в Tampermonkey, оновив сторінку. Працює, але мені не подобається, що стрілки ↑↓ малопомітні.

Працює, але мені не подобається, що стрілки ↑↓ малопомітні.

Якщо навести на них курсор, то коли блок переміститься вгору, стрілок взагалі не буде видно. 

Якщо навести на них курсор, то коли блок переміститься вгору, стрілок взагалі не буде видно. 

Це не зручно, тож я ще поправлю код.

Це не зручно, тож я ще поправлю код.

Результат:

Результат:

Після тестування видно, що «переміщувач» блока тепер ліворуч від наших даних, кількість символів рахується, але при натисканні ця інформація в буфер не попадає.

Після тестування видно, що «переміщувач» блока тепер ліворуч від наших даних, кількість символів рахується, але при натисканні ця інформація в буфер не попадає.

Результат.

Тепер тест. Виділяю текст (1), клікаю на число в створеному блоці (2) й отримую число в буфері обміну (3). Тепер можу вставити його де потрібно. Усе працює!

Тепер можу вставити його де потрібно. Усе працює!

Примітка: мені не потрібен цей великий чорний блок (alert), який з’являється і сповіщає про кількість скопійованих символів, бо доведеться його кожен раз закривати. Можна попросити чат прибрати це сповіщення, але швидше знайти рядок у коді, де пишеться alert('тут якийсь текст'). У прикладі це наступний рядок:

alert(`Copied to clipboard: ${text}`);

Треба закоментувати цей рядок, поставивши на початку два слеши:

// alert(`Copied to clipboard: ${text}`);

І все, повідомлення не буде вискакувати.

Кнопки для копіювання зображень

Промпт:

Кнопки для копіювання зображень  Промпт:

Код з відповіді перевіряю на зображенні.

Перевіряю на зображенні.

Відкриваю картинку в браузері, є кнопки, але ліва не працює. 

Відкриваю картинку в браузері, є кнопки, але ліва не працює. 

Дивлюся, що за помилка через консолі. Натискаю Ctrl + Shift + J.

Дивлюся, що за помилка через консолі. Натискаю Ctrl + Shift + J.

Щоби зрозуміти, що це означає, копіюю рядок і відправляю в ChatGPT.

Щоби зрозуміти, що це означає, копіюю рядок і відправляю в ChatGPT.

Отримую пояснення і новий варіант коду.

Отримую пояснення і новий варіант коду.

Тестую другий код. Клік на першу кнопку копіює зображення і його можна вставити, наприклад, у фотошоп або в Google Docs. При кліку на другу кнопку копіює посилання на це зображення.

Лайфгак 1

Якщо любите працювати з клавіатурою, то рекомендую переходити від кнопки до кнопки, натискаючи Tab:

  • один раз Tab + Enter для кнопки копіювання зображення, а коли з’явиться повідомлення — ще раз Enter і воно закриється;
  • два рази Tab + Enter для другої кнопки. 

Лайфгак 2

Можна доробити скрипт, щоб після закриття повідомлення про успішне копіювання вкладка теж закривалася. Якщо для вашого процесу це зручно, ось код.

Зауважте, у скрипта є обмеження.

Скрипт для зменшення кількості кліків

Для використання функцій у деяких сервісах доводиться клікати на випадаючі списки. Зрозуміло, що не можна наліпити кнопки на всі випадки життя в інтерфейсі — доводиться ховати їх.

До прикладу, Serpstat. Мені для роботи треба перебирати і відбирати ключові запити, а також скопіювати їх у буфер.

До прикладу, Serpstat. Мені для роботи треба перебирати і відбирати ключові запити, а також скопіювати їх у буфер.

Для цього треба натиснути «Operations» і «Copy keywords to clipboard».

По-перше, це дві дії. По-друге… Особисто мій мозок все одно працює так, що доводиться кожен раз читати, де ж та опція, на яку треба тицяти в списку. Може колись він і запам’ятає, що треба обирати останній пункт у списку.

Зроблю кнопку, щоби зменшити кількість кліків і роздумів. Цього разу відправлю чату запит.

Зроблю кнопку, щоби зменшити кількість кліків і роздумів. Цього разу відправлю чату запит.

#content > div.react_product_heading.product_heading > div > div.df > div.react_dropdown_handler.dropdown_handler.links_handler — це CSS селектор, набір id, класів і псевдокласів, які дають застосовувати стилі до конкретних елементів в html-коді. 

Щоб знайти селектор, треба виділіти потрібний елемент, натиснути його в коді правою кнопкою миші (1), обрати Copy (2) і Copy selector (3):

Щоб знайти селектор, треба виділіти потрібний елемент, натиснути його в коді правою кнопкою миші (1), обрати Copy (2) і Copy selector (3)

Отже, чат написав такий код.

Після встановлення скрипта, додається кнопка, що мілісекунди робить одразу два кліки.

Після встановлення скрипта, додається кнопка, що мілісекунди робить одразу два кліки.

Так само можна зробити, щоб вона клікала на 3-4-5 кнопок на сторінці, або вставляла текст, або його копіювала. Загалом — це шлях для об’єднання кількох дій в одне натискання.

ВАЖЛИВО: багато сайтів не мають постійних класів у верстці. Тобто зараз класи в елементів вказані одні, а після перезавантаження сторінки будуть інші. У такому випадку скрипт дуже імовірно перестане працювати. Щоб цього уникнути, шукайте селектори, які залишатимуться незмінними, або використовуйте XPath, спеціальний синтаксис, який точно вказує, де знаходиться певний елемент в HTML-структурі. Про нього детальніше розкажу нижче.

Така ж проблема може виникнути, якщо на сайті просто зміниться структура. Буває. Доведеться переписати скрипт / змінити селектори.

Якщо вам треба переписати скрипт за якийсь час, скопіюйте його в новий у чат і скажіть, що в цей код треба внести певні зміни.

Копіювання даних через XPath

Надсилаю ChatGPT запит.

Надсилаю ChatGPT запит.

Отримую код. Тепер приклад:

  1. Відкриваю улюблений https://netpeak.net/
  2. Натискаю Ctrl + Shift + C, наводжу курсор і клікаю на потрібний елемент. Для прикладу, хочу зібрати всі посилання у блоці «Most shared».

Для прикладу, хочу зібрати всі посилання у блоці «Most shared».

  1. Клацаю правою кнопкою і обираю «Copy XPath». 

Клацаю правою кнопкою і обираю «Copy XPath». 

  1. В XPath треба внести зміни, а для цього — вставити в текстове поле. Зроблю це в полі адреси сайту.

В XPath треба внести зміни, а для цього — вставити в текстове поле. Зроблю це в полі адреси сайту.

  1. Треба прибрати [1] біля div і  додати в кінці «/@href»

Треба прибрати [1] біля div і  додати в кінці

Рекомендую розібратися з синтаксисом XPath. Стане в пригоді.

  1. Виділяю і копіюю в буфер новий покращений XPath. Натискаю Ctrl + A, Ctrl + C. 
  2. Далі натискаю на створену кнопку. Відкриється вікно.

Далі натискаю на створену кнопку. Відкриється вікно.

  1. Відкриваю документ і вставляю отримані дані. Готово!

Відкриваю документ і вставляю отримані дані. Готово!

Що варто вказувати в промптах до ChatGPT 

Кілька підказок, що допоможуть вам зекономити час при підготовці скриптів.

  1. Елементи iframe. Якщо треба робити якісь дії з елементами в iframe — скажіть про це чату. Просто повідомити йому селектор останнього елемента не буде достатньо, оскільки взаємодія з елементами в iframe має особливості. Спочатку дайте шлях до iframe, а потім до елемента в iframe, а ШІ вже розбереться, як це розписати.
  2. SPA-сайти. Якщо контент, з яким має працювати скрипт, відсутній у коді отриманої браузером сторінки або потрібні елементи додаються в код сторінки динамічно за допомогою JS, про це теж треба повідомити ChatGPT. Є різні способи відстежити появу / зміну елементів і він зможе запропонувати рішення.
  3. Помилка скрипта. Іноді причину того, що скрипт не працює (або не працюють якісь його функції) можна піддивитись на вкладці console в інструментах розробника (Ctrl + Shift + J). Звідти копіюйте текст помилки, закидуйте в ChatGPT і він її виправить. 
  4. Не просіть чат одразу зробити багато задач: змінити стилі, поміняти логіку, перемістити елементи. Майже гарантовано він щось забуде зробити або зробить не те, що треба. Краще вносити правки поступово.
  5. Буває, що після запиту на зміни, чат  присилає не весь код, а лише змінену частину. Якщо не хочете розбиратися куди цей шмат вставляти, попросіть чат написати вам «повну версію скрипта». Він перепише. Якщо код задовгий, то доведеться натиснути на кнопку «Continue Generating» або подібну.
  6. Навпаки, якщо ви певні, що зміни треба внести умовно лише в трьох рядках, попросіть чат написати, де саме. А краще, нехай напише, який шмат коду потребує заміни. Це буде швидше, ніж чекати, поки він заради трьох рядків передруковує 150.
  7. Чат може на ключові моменти в коді додавати коментарі, а також виводити в консоль повідомлення про те, як виконується код. Тобто, якщо код не спрацював повністю, консоль покаже, де саме він обривається.
  8. Подумайте, чи варто витрачати час на написання скрипта. Може саме для цієї задачі його написання займе більше часу, ніж виконання вручну.

З чим іще можуть допомогти Tampermonkey i ChatGPT

На початку цього лонгріду я обіцяв навести більший список використання Tampermonkey для SEO-фахівців. Виконую обіцянку. Ось як ще я використовую Tampermonkey:

  1. Змінюю формат даних на сторінках, наприклад, замінюю 274.7K на 274700.
  2. Додаю елементи на сайт, наприклад, додав панель із потрібними emoji, щоби при натисканні на одне з них воно вставлялося в форму, де стоїть курсор.
  3. Одним кліком роблю кілька — копіюю з youtube iframe для вставки на сайті. 
  4. В одне натискання збираю перелік товарів на сторінці каталогу.
  5. Автоматично рахую символи на сторінці або у виділеному фрагменті з можливістю копіювання в буфер обміну при кліку по числу.
  6. Приховую / показую зображення на сторінці в один клік або автоматично за якоюсь умовою (налаштування можна запам’ятовувати в local storage).
  7. Так само підсвічую посилання і їхні атрибути.
  8. В один клік копіюю в буфер структуру статті (h1-h2-h…).
  9. Автоматично заповнюю / очищую форми на сторінках.
  10. Одним натисканням на кнопку копіюю текст, а другим вставляю його в кілька різних форм на сторінці, водночас автоматично розбиваючи текст на потрібні частини.
  11. Комбіную перераховані вище варіанти.

Дуже сподіваюсь, що ви напишете мені, що я використовую лише 5% потужностей мозку скриптів і накидаєте мені ще варіантів, як можна їх використовувати. Робіть це в LinkedIn.

Замість висновків

  1. SEO-задачі часто виконуються вручну, але автоматизація через Tampermonkey допомагає значно скоротити час і зусилля.
  2. Tampermonkey дає змогу створювати власні функції на сторінках: від копіювання елементів до автоматичних кліків, що корисно для щоденних задач SEO-фахівця.
  3. Налаштування Tampermonkey не вимагає знання програмування: достатньо чітко сформулювати задачу для ChatGPT і вставити  в Tampermonkey згенерований код.
  4. За потреби скрипт легко вдосконалити: змінити вигляд елементів, розміщення чи прибрати спливаючі повідомлення.
9
0
9
(5 out of 5 based on 3 marks)