{"id":14275,"url":"\/distributions\/14275\/click?bit=1&hash=bccbaeb320d3784aa2d1badbee38ca8d11406e8938daaca7e74be177682eb28b","title":"\u041d\u0430 \u0447\u0451\u043c \u0437\u0430\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0434\u0430\u0432\u0446\u044b \u0430\u0432\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"f72066c6-8459-501b-aea6-770cd3ac60a6"}
Владимир Таракановский

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

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

Краткое содержание

Как работать с консолью браузера

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

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

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

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

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

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

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

Парсинг сайтов из органической выдачи из Яндекса и Google

Задача: анализ конкурентов из Топ-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 действия всех нужных нам внешних ссылок.

Как пользоваться:

1. Заходите на нужную страницу сайта.
2. В консоли браузера переходите на вкладку "Консоль", как показано на инструкции выше.
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 в корне сайта и содержание файлов

Задача: проверка файлов 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 у изображений

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

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

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

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

Как пользоваться:

1. Заходите на нужную страницу сайта.
2. В консоли браузера переходите на вкладку "Консоль", как показано на инструкции выше.
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. При клике по запросу осуществляется переход в Wordstat с ключевой фразой и заданной геолокацией.

Как пользоваться:

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

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

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

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

Планируемые доработки:

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

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

У Вас есть:

  • замечания по работе кода,
  • предложения по улучшению представленных инструментов
  • другие рутинные задачи по seo или контекстной рекламе?

Пишите об этом в комментариях, будем решать вместе!

Спасибо за прочтение!

0 показов
56 открытий
0
3 комментария
Дмитрий Кулагин

да, действительно удобно, обычно парсером делаю

Ответить
Развернуть ветку
Владимир Таракановский
Автор

Спасибо, Дмитрий! Если Вас не затруднит, можете оценить и прокомментировать эту же статью, только в разделе seo, перейдя по ссылке?

6 инструментов SEO-специалиста для решения…
Доброго времени суток всем! Меня зовут Таракановский Владимир, работаю в сфере веб-разработки 5…
vc.ru
Ответить
Развернуть ветку
Дмитрий Кулагин

промахнулись с разделом) Это бывает на vc, когда случайно в свой блог постишь вместо нужной категории

Ответить
Развернуть ветку
Написать комментарий...
0 комментариев
Раскрывать всегда