В данной статье мы узнаем как использовать ChatGPT, чтобы создать своё собственное SEO-расширение для браузера, загрузить его в Google Chrome и использовать ежедневно и бесплатно.
Расширения для Chrome позволяют легко и быстро выполнять скучные и повторяющиеся задачи. Такие расширения могут помочь сэкономить огромное количество времени в работе по оптимизации. Но большинство не задумывается о том, как их создавать.
Причина в том, что маркетологи не знают как написать свой комплексный инструмент, поэтому они используют любой инструмент, который им доступен. Тем не менее, не всегда нужно тратить время на освоение сложных навыков или деньги на дорогостоящего разработчика, чтобы создать новый и полный набор инструментов.
Сейчас можно использовать ChatGPT, чтобы создать расширение для SEO, загрузить его в Google и использовать ежедневно и бесплатно. Вот как это сделать.
Шаг 1: Составьте список требований
Понять что вы хотите получить от расширения для Chrome – это первый шаг в процессе. Я рекомендую контент-маркетологам подумать об этом перед тем, как писать запросы для ChatGPT, и записать все спецификации и требования.
Обычно требования бывают двух типов:
- Задача: Что должно делать расширение?
- Функция: Как расширение должно отображать информацию?
Дисклеймер: Этот процесс описывает создание расширения, которое будет работать только на вашем компьютере, что означает – вы не сможете его продать или загрузить в магазин расширений Google Chrome. Для этого вам нужно полностью следовать требованиям Google, которые описаны здесь.
В этой статье мы будем использовать пример простого расширения для SEO, которое я сделал сам. Итак, вот мои требования.
Информационные требования
Я хочу, чтобы SEO-расширение рассказывало мне об элементах на странице для их быстрого обзора, без необходимости просматривать код сайта и искать нужные:
- Тег Title
- Тег Description
- Заголовки
- Внутренние ссылки (в виде списка)
- Изображения (включая URL)
- Тег Canonical
Требования к характеристикам и поведению
Я хочу, чтобы моё расширение отображало мне всплывающее окно, когда я кликну на иконку расширения в браузере Chrome.
На скриншоте можно посмотреть, что мы будем создавать и как оно будет отображаться в Хроме.
Замечание: Это простая версия приложения, которая не включает стили CSS для простоты. Мы сфокусируемся на функциональности, а не на внешнем виде.
Как можно увидеть на скриншоте выше, нужно удостовериться, чтобы результат работы расширения был виден вам на вкладке в Хроме в виде всплывающего окна.
Большинство SEO-расширений так и работают. Они показывают необходимую информацию во всплывающем окне по клике на иконку расширения.
Шаг 2: Напишите детализированное описание для ChatGPT
Теперь, когда вы готовы к написанию промта для потенциального SEO-расширения, вы можете обратить к ChatGPT с детальными инструкциями. Повторюсь, ваш промт должен быть как можно более детализированным и конкретным.
Большинство промтов, которые я вижу у маркетологов – очень короткие. А из коротких промтов получаются плохие результаты.
Вот как можно написать хороший промт:
Во-первых, нужно рассказать ChatGPT о своих целях. Для этого можно следовать указаниям из шага 1:
Напиши мне код для расширения для Chrome, которое будет помогать мне находить SEO-элементы на страницах моего сайта. Элементы, которые нужно находить: H1, H2, H3, тег title, тег description, канонический URL, количество H1 и H2, а также количество внутренних ссылок, включая их URL.
После того как вы рассказали ChatGPT о целях, которые нужно достигнуть, нужно конкретизировать как именно должно вести себя расширение.
Функции расширения Chrome: когда кликают на расширение, появляется окно. Окно включает в себя кликабельное меню. В меню сделай три кнопки. По клику по первой кнопке, мне показываются инструкции о том, как работать с расширением. При клике по второй кнопке, мне показываются H1, H2, H3, тег title, тег description и канонический URL. При клике по третьей кнопке, мне показывается количество H1 и H2, количество внутренних ссылок (включая их URL).
Нам нужно быть ОЧЕНЬ конкретными в том, чего мы хотим достичь. Чтобы добиться этого, добавим ещё одно предложение к промту, которое указывает как нужно загружать промт.
Дай мне каждый файл отдельно, дав им названия.
Этим предложением, вы просите ChatGPT разделить файлы на части. Это важно для шага 4.
Шаг 3: Попросите ChatGPT написать код
Пора взять все предложения, которые мы написали, скопировать их и отправить ChatGPT:
Одна из лучших возможностей ChatGPT – писать код без всяких проблем.
Поэтому, ChatGPT предоставит нам четыре разных блока кода, согласно нашим инструкциям.
Заметка: Когда вы создаёте новое расширение для Chrome, вам нужно несколько разных типов файлов, в зависимости от сложности самого расширения. Например, сейчас нам нужно только четыре типа файлов, которые мы загрузим в аккаунт в Chrome:
- Manifest.json
- Popup.html
- Popup.js
- Content.js
Использование ChatGTP подразумевает, что маркетологам не нужно учить как строятся эти технические файлы, и в этом смысл этого руководства, но всё же важно знать для чего они нужны.
В дополнение, я рекомендую экспертам digital-маркетинга изучить как можно больше об этих файлах. Это может понадобиться для решения технических проблем и для понимания того, как сделать расширение ещё лучше. У Google есть специальное руководство – Chrome Browser Actions – если вы захотите углубиться в изучение.
Manifest.json
Файл manifest.json – конфигурационный файл, необходимый каждому расширению для Chrome.
Он содержит метаданные для расширения, такие как имя, версия, описание, иконки и разрешения. Он также определяет файл по умолчанию, который отображает всплывающие окно при клике на иконку расширения.
Popup.html
Файл popup.html содержит интерфейс расширения для Chrome. Он определяет макет и содержимое, которое отобразиться при клике на иконку расширения.
В нашем случае, он содержит кнопку для инструкции, SEO-элементов и статистику в виде секции с результатами для отображения собранной информации.
Popup.js
Файл popup.js содержит код JavaScript, который взаимодействует с интерфейсом расширения Chrome.
Он обрабатывает клики по кнопкам и отсылает сообщения в скрипт контента (ен включён в предоставленный код) для получения SEO-элементов из текущей активной страницы.
Он также обновляет интерфейс, чтобы отобразить полученную информацию в разделе результатов при нажатии соответствующих кнопок.
Content.js
Файл content.js ответственен за взаимодействие со страницей и извлечение необходимых данных.
В нашем случае, он “слушает” сообщения из всплывающего окна расширения и выполняет полученные инструкции.
Шаг 4: Экспорт кода из ChatGTP в файлы
Теперь, когда у нас есть код для трёх типов файлов, следующий шаг – скачать информацию для этих файлов в понятный для расширения формат.
Вот как можно это сделать:
Скачайте программу Sublime Text
Sublime Text это редактор с возможностью совместной работы, который из коробки поддерживает все языки программирования и языки разметки. Пользователи могут скачивать файлы и загружать их куда-нибудь ещё.
Копируем и вставляем код
Теперь, когда у нас есть код и Sublime Text, нам нужно скопировать код из ChatGTP и вставить его в нужные вкладки Sublime Text, прежде, чем мы сможем сохранить их себе на рабочий стол. В свою отдельную вкладку мы вставляем код:
Когда вы нажимаете “Вставить”, вы увидите вкладку, название которой может выглядеть так:
Стоит упомянуть, чтобы в данных примерах Sublime Text не выбирает заголовки автоматически, поэтому вы можете самостоятельно назначить их.
Когда вы сохраняете файл на ваш компьютер, вы сможете указать название файла. Это никак не повлияет на ваше расширение:
Вы можете сохранить в отдельную папку, которую назовёте “Моё SEO расширение” или типа того.
Шаг 5. Загрузите файлы в аккаунт расширений Chrome
После выполнения самой сложной части этого руководства – написания кода – настало время загрузки файлов в свой аккаунт.
Чтобы сделать это, нужно открыть панель управления расширениями. В адресной строке браузера введите: chrome://extensions/
Далее выполните следующие шаги для корректной загрузки файлов:
- Переключитесь в “Режим разработчика” в правом верхнем углу браузера. Это позволит открыть функционал загрузки файлов.
- Кликните “Загрузить распакованное расширение” и выберите созданные четыре файла для загрузки.
После клика “Загрузить распакованное расширение” откроется окно для поиска файлов.
Загрузите все четыре файла в панель управления расширениями. Если вы всё сделали правильно, в списке расширений вы увидите своё. Выглядеть это будет примерно так:
Теперь расширение практически к тестированию.
Мы создали расширение с тремя кнопками:
- Инструкции по использованию расширения.
- Кнопка для поиска SEO-элементов на странице.
- Кнопка поиска ссылок.
Каждая кнопка, которую вы кликните, даст возможность прочитать информацию со страницы и сделать быструю оценку того, правильно ли оптимизирована страница для поиска.
Шаг 6. Исправление ошибок и чистка кода
Не волнуйтесь, если вы увидите ошибки в своём расширении. Они неизбежны, но их легко пофиксить.
С версией ChatGPT, которая использовалась при написании статьи, за кодом он обращался к руководству Google до декабря 2021 года, а с тех пор многое в нём изменилось.
Устаревшая версия манифеста
Это означает, что код может быть старые и не обновлённым до последней версии, требуемой для расширения Chrome в файле манифеста.
Одна из таких ошибок показывает, что файл Manifest.json устарел, что означает, что его нужно обновить, согласно требованиям с января 2023 года.
Очень вероятно, что у вас будет такая ошибка:
Чтобы исправить ошибку, всего лишь нужно в строке “manifest_version”: 2 в редакторе кода (например, Sublime) заменить цифру “2” на цифру “3”, что и является последней версией на данный момент (на момент обновления данной статьи).
Как только выполните, загрузите расширение ещё раз.
Ошибка загрузки расширения
Очень важно удалить все ссылки на иконки и изображения (или добавить сами файлы изображений и иконок).
Иначе вы получите ошибку “Не удаётся загрузить расширение”. Потому что вы не указали правильные ссылки на иконки и изображения.
В примере мы не добавляли никаких изображений или иконок, поэтому проще всего удалить ту часть кода, которая этого требует.
Чтобы это сделать:
- Откройте файл Manifest.json.
- Найдите строки, где есть ссылки на иконки. В моём случае это строки с 10 по 14.
- Удалите эти строки из кода и сохраните файле.
- Снова попробуйте загрузить расширение в панель управления.
На этот раз, без ошибок, допущеных ChatGPT, мы имеет чистое и рабочее расширение, готовое к тестированию.
Если вы всё сделали правильно, то должны увидеть что-то похожее (как мы публиковали на скриншоте в начале статьи):
Создавайте свои собственные расширения для Chrome
Если вы снова и снова терпите неудачу, это может привести к разочарованию, особенно если вы не умеете кодить. Я знаю, потому что сам был на вашем месте.
Однако, помните, что при работе с ИИ нельзя досконально точно описать, что вам нужно. Возможно вам понадобится корректировать свои запросы несколько раз, чтобы заставить работать расширение как вам нужно.
Вот несколько советов, чтобы снизить вероятность появления ошибок и попытаться исправить их:
- Скопируйте текст ошибки и отправьте в тот же диалог с ChatGPT, попросив её исправить. Обычно инструмент очень хорош в объяснении что не так с кодом простыми словами. Затем примените рекомендованные исправления.
- Попробуйте убрать некоторые требования к расширение, если вы чувствуете, что код слишком громоздкий и сложный. Начните с малого. Создайте приложение, которое просто будет находить тайтлы на странице. Протестируйте его. И если всё хорошо, добавьте новый кусочек функционал. Протестируйте его. Повторите.
- Если ChatGPT не предлагает вам хорошее решение, используйте старый добрый Google. Есть шансы, что настоящие люди уже решили эти моменты.
Надеюсь, что с этим руководством, вы сможете использовать мощь ChatGPT и узнать как создать ваше следующее расширение для SEO.
Источник: https://searchengineland.com/chatgpt-seo-chrome-extension-427841
