6 инструментов SEO-специалиста для решения рутинных задач

Доброго времени суток всем! Меня зовут Таракановский Владимир, работаю в сфере веб-разработки 5 лет. В этой статье я покажу, как справляться с рутинными задачами по SEO, используя консоль браузера и язык программирования javascript. Знания последнего вам не потребуются.

Как работать с консолью браузера
Парсинг сайтов из органической выдачи из Яндекса и Google
Проверка нахождения элементов на странице
Проверка на существование внешних ссылок на странице
Проверка существования robots.txt и sitemap.xml в корне сайта и содержание файлов
Проверка на наличие alt у изображений
Подбор ключевых фраз в Wordstat для статей

Эта инструкция для тех, кто не знает, как работать в консоли браузера. Остальным я предлагаю перейти к изучению инструментов ниже.

Для вызова консоли на выбранной странице нужно воспользоваться одним из предложенных способов.

1. Нажать Ctrl+Shift+I (Ctrl+Shift+C в Opera)

2. Правая кнопка мыши - выбрать пункт "Исследовать элемент" в firefox и Яндекс браузере, "Инспектировать элемент" в Opera, "Проверить элемент" Edge, "Просмотреть код" в Google Chrome

В появившейся консоли браузера выберите пункт "Console" или "Консоль" и поставить курсор напротив синей стрелочки. В итоге у вас должно получиться что-то изображенное ниже

Как перейти в консоль javascript Таракановский Владимир

Надеюсь, у Вас все получилось, и можно приступать к изучению полезных инструментов. Итак, бизнесмены, интернет-маркетологи, продвиженцы, программисты и все те, кто просто заинтересовался, поехали!

Задача: анализ конкурентов из Топ-10 по поисковому запросу для понимания дальнейших действий.
Рутина: надо скопировать адрес сайта в таблицу сравнения.
Дополнительные проблемы: лишнее потраченное время по сравнению получения данных кодом.
Преимущества данного кода: позволяет получить в 5 кликов сайты естественной (органической выдачи). Исключаются сайты контекстной рекламы и таких дополнительных сервисов, как "Видео", "Картинки", "Карты" и прочие подобные.

1. Вбиваете нужный поисковый запрос и нажимаете "Поиск" или Enter.
2. На странице выдачи переходите в консоль браузера на вкладку "Console" или "Консоль", как показано на инструкции выше.
3. Вставляете приведенный ниже код. Для каждой поисковой системы свой.

/*1. Парсинг сайтов из органической выдачи из Яндекса */ clear(); const yandex_serp = []; let serp_selector=".path .link b" || ".typo a"; const pagination_yandex_serp = () =>{ const current_url=window.location.href.search("p="); const pagination_page=Number(window.location.href.slice(current_url+2))||0; return pagination_page; } document.querySelectorAll(".serp-item").forEach((item)=>{ if(item.innerText.search("реклама")==-1 && item.querySelector(".link") !==null && item.dataset.fastWzrd!=="companies" && item.dataset.fastWzrd!=="ydo" && item.dataset.fastWzrd!=="videowiz" && item.dataset.fastWzrd!=="images" && item.dataset.fastWzrd!=="entity_search"){ yandex_serp.push(item.querySelector(serp_selector).innerText); } }); const yandex_serp_with_pos=yandex_serp.map((ya_serp, i)=>`№${i+1+pagination_yandex_serp()*10} - ${ya_serp}`); console.log(`${yandex_serp.join(`\t`)} ${yandex_serp_with_pos.join(`\n`)}`);

/*2. Парсинг сайтов из органической выдачи из Гугла */ clear(); const google_serp=[]; document.querySelectorAll(".g").forEach((item)=>{ let position_arrow = item.querySelector("cite").innerText.search(" ›"); google_serp.push(item.querySelector("cite").innerText.slice(0, position_arrow)); }); const google_serp_with_pos=google_serp.map((go_serp, i)=>`№${i} - ${go_serp}`); console.log(`${google_serp.join(`\t`)} ${google_serp_with_pos.join(`\n`)}`);

4. Результат, полученный в строку без номера позиции, вставляете в Excel. Результат в столбик с позицией - для наглядности.

Практический результат можно увидеть на картинке

Пример получения данных органической выдачи по запросу в Яндексе Таракановский Владимир

Итог: экономия времени и преодоление прокрастинации для людей, не любящих рутину.

Задача: найти элементы в верстке, которые мешают или помогают продвижению по мнению seo-специалиста.

Рутина: поиск каждого элемента через вкладку "Elements" или исходный код сайта.

Дополнительные проблемы: уходит много времени и этих элементов может быть много или не быть вообще. Также есть высокая вероятность пропуска элемента из-за рутинности задачи.

Преимущества данного кода: получение в 3 действия всех нужных нам элементов с их текстом.

1. Заходите на нужную страницу сайта.
2. В консоли браузера переходите на вкладку "Консоль", как показано на инструкции выше.
3. Вставляете приведенный ниже код.

/*3. Проверка нахождения элементов на странице */ const nodes_site=['title', 'h1', 'strong', 'b', 'i', 'em']; nodes_site.map(node_text=>{let node_text_el = document.querySelectorAll(node_text); console.log(`Количество элементов ${node_text} = ${node_text_el.length}`); if(node_text_el.length>0){ node_text_el.forEach((item)=>{console.log(`Текст элемента ${node_text}: ${item.innerText}`)})} });

Краткие пояснения:
title: название страницы, которое мы видим по вкладке
h1: заголовок 1-го уровня. Как правило, он почти всегда самый крупный по размеру.
strong и b: создание жирного текста с помощью верстки.
i и em: создание курсивного начертания с помощью верстки

Результат работы кода можно увидеть на изображении

Нахождение нужных элементов на странице сайта с помощью кода Таракановский Владимир

Итог: оперативный и полный поиск элементов на странице с их содержанием.

Задача: поиск ссылок, ведущих на другие сайты. Как известно seo-специалистам, такие ссылки надо закрывать атрибутом rel="nofollow" для предотвращения передачи веса другому сайту.

Рутина: поиск каждой ссылки через вкладку "Elements" или исходный код страницы.

Дополнительные проблемы: уходит много времени и внешних ссылок может быть много или не быть вообще. Также есть высокая вероятность пропуска элемента из-за рутинности задачи.

Преимущества данного кода: получение в 3 действия всех нужных нам внешних ссылок.

/*4. Проверка на внешние ссылки */ clear(); const links_site=[]; document.querySelectorAll("a").forEach((item)=>{links_site.push(item.href)}); const nofollow_links=(site_address)=>{ const nofollow_link=links_site.filter(link_site=>link_site.search(site_address)==-1); if (nofollow_link.length>0) {console.log(nofollow_link.join(`\n`));} else {console.log('Внешние ссылки не найдены!');} } nofollow_links(window.location.hostname);

Пример работы кода сайта

Проверка страницы сайта на внешние ссылки Таракановский Владимир

Итог: оперативный и полный поиск внешних ссылок на странице.

Задача: проверка файлов robots.txt и sitemap.xml при первоначальном анализе сайта на продвижение.

Рутина: вбивание названия этих файлов вручную и ожидание загрузки каждого.

Дополнительные проблемы: нет.

Преимущества данного кода: получение информации о нахождении данных файлов в корне сайта и их содержания, находясь на любой странице сайта.

Примечание: как писал Н.А. Некрасов в стихотворении "Поэт и гражданин" "Поэтом можешь ты не быть, но гражданином быть обязан". Примерно так и здесь: файл sitemap.xml на некоротых сайтах может находиться не в корневой папке сайта, но файл robots.txt обязан там находиться с указанием, где находится sitemap.xml.

1. Заходите на любую страницу проверяемого сайта.
2. В консоли браузера переходите на вкладку "Консоль", как показано на инструкции выше.
3. Вставляете приведенный ниже код.

/*5. Проверка существования robots.txt и sitemap.xml и их содержание*/ clear(); const input_rs=['robots.txt', 'sitemap.xml']; input_rs.map(async (rs)=>{ let response = await fetch(`/${rs}`); let status_file = await response.ok; let text_file = await response.text(); if (status_file) {console.log(`Файл ${rs} есть в корне сайта! Его содержимое: ${text_file}`);} else {console.log(`Файл ${rs} не найден!`);} });

Пример работы кода

Результат проверки на существование в корне сайта файлов robots.txt и sitemap.xml и их содержание Таракановский Владимир

Итог: ускорение времени на получение информации о файлах robots.txt и sitemap.xml.

Задача: проверить изображения на наличие альтернативного текста (alt) и его качество.

Рутина: поиск каждого изображения через вкладку "Elements" или исходный код страницы.

Дополнительные проблемы: уходит много времени и изображений может быть много. Также есть высокая вероятность пропуска элемента из-за рутинности задачи.

Преимущества данного кода: получение в 3 действия всех alt-ов изображений и список некачественно заполненных alt-ов. Некачественно заполненный alt не содержит букв и количество символов меньше 3-х.

clear(); const image_alt=[]; const image_no_alt=[]; document.querySelectorAll("img").forEach((has_alt)=>{ if (has_alt.alt.search(/(.?[a-zA-Zа-яёА-ЯЁ]{3,}\s?.*)/gm)>-1) {image_alt.push(has_alt.alt);} else {image_no_alt.push(`Alt: ${has_alt.alt}, адрес: ${has_alt.src}`);} }); if (image_no_alt.length>0) {console.log(`Атрибут alt отсутствует или некачественный у следующих изображений: ${image_no_alt.join(`\n`)}`);} if (image_alt.length>0) {console.log(`Текст атрибута alt: ${image_alt.join(`\n`)}`);}

Пример работы кода

Заполненность атрибута alt у изображений и качество заполнения Таракановский Владимир

Итог: оперативный и полный поиск альтернативного текста изображения (alt) на странице и качество заполнения атрибута.

Задача: подобрать ключевые слова для написания статей для блога через Wordstat.

Рутина: каждый запрос (где, когда) надо вбивать вручную.

Дополнительные проблемы: увеличение времени на подбор.

Преимущества данного кода: создает список ключевых фраз для wordstat. При клике по запросу осуществляется переход в Wordstat с ключевой фразой и заданной геолокацией.

1.Заходите в файл article_word.html, предварительно скачав (ссылка для скачивания будет ниже).
2. Выбираете город, нужную продукцию и ключевые слова (какая, где).
3. Нажать кнопку "Получить фразы для Wordstat", после чего у Вас ниже кнопки появится список фраз.
4. Кликаете по получившейся ключевой фразе и переходите в новой вкладке в Wordstat.

Пример работы кода

Пример подбор ключевых фраз для Wordstat Таракановский Владимир

Итог: генерация ключевых фраз и прямой переход в Wordstat

Добавить города. На данный момент городов от Урала и дальше на восток России нет.
Возможность удалить ненужный товар или бренд. Вдруг Вы допустили ошибку или решили не использовать это?

Весь код, приведенный можно будет скачать с github отсюда, нажав на зеленую кнопку "code" и выбрав "Download zip". 1-5 инструменты - файл seo.js, ключевые слова - article_word.html