Intro
Здравствуйте, уважаемые читатели. Хотелось бы представиться и в двух словах рассказать вам, о чем будет эта статья.
Мы с коллегами находимся в процессе активной реинкарнации моей старой, аж из 2014 года, веб-студии mindgroup‑web. На дизайн можете не смотреть. В то время мы были молодыми, начинающими разработчиками, которые умели создавать сайты на Wordpress, писать простенькие скрипты на JS и неплохо разбирались в тогдашнем SEO.
PS. С дизайном у нас до сих пор тяжеловато, поэтому мы в поисках талантливого дизайнера, начинающего свой путь.
Это было интересное время ссылочного и контентного продвижения. Мне удавалось писать довольно неплохие информационные и коммерческие тесты. Почему берусь это утверждать? Все проекты, которые мы брали в продвижение, по итогу приносили поисковый трафик.
Мой рекорд — 15 000 дневных уникальных посетителей на сайте информационной тематики. В то время мы делили нишу топ поисковой выдачи с еще одним конкурентом. Сейчас, при написании статьи, попытался найти его в результатах поиска — увы, он, как и мой проект, канул в лету. Спасибо за интересное состязание.
В общем и целом, в то время нам не удалось раскрутить бизнес на широкую ногу. Доход был маленький. Продавать мы толком не умели, а разрабатывать сложные программные продукты не позволяло отсутствие скилла.
Все разбежались кто куда. Ваш покорный слуга ушел на завод в коммерческую разработку. Проще говоря — работать на дядю.
Собственно, в данный момент я являюсь Senior Fullstack Developer. За плечами опыт работы в таких компаниях, как Яндекс, Лаборатория Касперского, Сбер. Основной стек — JS/React/NextJs/NodeJs/Express/NestJS. БД — Postgres. CI/CD — GitLab. Реже Python/C.
Также мы с коллегами уже несколько лет выступаем в роли преподавателей и наставников в ряде онлайн-школ. Из больших — Hexlet, Innopolis. Мы разрабатывали собственные программы обучения и обучали по ним. Как нам казалось — довольно неплохо.
Сейчас мы занимаемся подготовкой собственной небольшой онлайн школы.
Вокруг образовательной активности и возможности немного свободного времени уделять заказной разработке, мы решили попробовать себя в деле — десяток лет спустя.
Также на данный момент ведем разработку собственных небольших проектов, которые призваны выступить в роли стартового портфолио.
Про один из них и хотелось бы рассказать в этой статье.
Над чем работаем?
Идея родилась довольно банально. При переносе фотографий с iPhone на домашний компьютер обнаружилось довольно большое количество файлов с расширением .HEIC, которые наотрез отказывались открываться стандартными редакторами.
Пути два — устанавливать специализированный конвертер на ПК либо искать онлайн-сервис конвертации. Собственно последние предлагают ограниченное количество файлов в бесплатных вариантах использования.
Мы же программисты. Почему бы не написать собственный сервис. Так появился https://iConvertio.ru
Обоснование ценности проекта
Изначально проект призван стать частью портфолио, поэкспериментировать в плане современных реалий SEO и попробовать в деле свежую версию Next App Router. О последнем, кстати, будет пара слов ниже.
Беглый анализ конкурентов показывает довольно большое количество потенциального органического трафика. Сходу пример по запросам.
На этом этапе достаточно для обоснования идеи. Тема онлайн-конвертации файлов довольно популярна в органике. Значит, можно попробовать.
Необходимые ресурсы есть. Кроме дизайнера ))
Примерные подсчеты будут ниже, но сразу понятно, что они довольно скромные.
Тем самым мы получаем возможность поэкспериментировать, пополнить портфолио, получить ссылочный донор для будущих тематических проектов и, при успешном получении трафика, монетизировать его.
Первичный анализ ниши
При работе над новым или существующим сайтом я всегда буду топить за одну простую истину: показатель его качества — отсутствие вопросов у потенциальных пользователей.
Поясню. Если мы работаем над интернет-магазином одежды и несколько раз в день на контактные адреса получаем вопрос от покупателя в духе «А как правильно подобрать размер в плечах?», это означает только одно. Наш проект не дает ответ на боль пользователя или дает его в неудобном виде.
Задача — эту боль решить. Добавить таблицу размеров в видимое место карточки товара. Записать подробное видео, посмотрев которое, даже ребенок сможет понять, как правильно сделать.
Эта идея далеко не нова, и мы придерживались ее еще во времена работы над первыми проектами.
Здесь мы убиваем сразу всех зайцев: удовлетворяем посетителя, максимально облегчая ему процесс достижения целевого действия (он ведь хочет купить майку — а теперь и знает, как правильно подобрать размер), максимально привлекательно выглядим в глазах поисковиков. Да, речь про те самые поведенческие. Люди проводят больше времени на сайте. Тепловые карты увеличиваются. Мы получаем больший процент конверсии. Win/Win.
В случае с нашим приложением основанная ценность — это получить файл в нужном формате. Нужно предоставить удобную форму загрузки, быструю конвертацию и удобную возможность скачивания. Плюс понятный отклик приложения в случае возникновения потенциальных ошибок.
Получилось следующее.
Примерный прототип понятен. Практически у всех конкурентов плюс-минус схожее решение.
Осталось понять — по каким целевым запросам и темам продвигать.
Тут столкнулись с первой проблемой. Сейчас много популярных инструментов стали, по понятным причинам, недоступны. Если я раньше я мог взять пару тройку конкурентов, в бесплатном тарифе собрать отчет по наиболее популярным страницам и запросам, сейчас это стало сильно проблематично.
Идем старым добрым обходным путем. Берем стартовую тему — конвертация формата HEIC в PNG. Смотрим выдачу. Берем 4–5 сайтов с первой страницы. Бегло анализируем их.
Все предоставляют разный набор направлений конвертации.
Heic в Png,
MKV в MP4,
Gif в JPG.
На этом этапе задача собрать выборку по потенциальным темам. Получилось что‑то в районе 300 тем (направлений конвертации).
Дальше в ход идет Wordstat, упомянутый выше. Мне было достаточно просто понять — есть ли интерес в выдаче. Проверяем статистику в формате «Конвертировать <формат>». Если набор и частотность запросов идет где‑то от 1000 в месяц — в целом подходящее направление.
Так за пару часов было определено 14 тем, которые сейчас реализованы на сайте.
Этого вполне хватит для старта и проверки — выстрелит сайт или нет. В том случае, если дальше мы решим его развивать, можно будет провести более детальный анализ. Проанализировать направления конвертации, собрать все ключи старым добрым KeyCollecto, поставить в планы подготовить все посадочные страницы и реализовать на них, собственно, сам процесс конвертации.
Но делать это будем только в случае, если пойдет хороший, стабильный органический трафик.
Про стек разработки
Приложение максимально упрощено. Бэкенд — это RestApi на Express. Отдельное направление конвертации — отдельный эндпоинт, где реализована вся логика.
Фронт на NextJS, чтобы удовлетворить потребностям SEO. Здесь заодно хотелось попробовать в работе App Router, потому что все предыдущие проекты на этом фреймворке делались на Page Router.
В целом от Next впечатления в основном положительные. Есть пара моментов, о которых хотелось бы рассказать.
Во‑первых, я не удовлетворен показателями сайта в мобильной версии. Проверяю через Google Page Speed.
В десктопной версии все ОК.
Здесь понадобилось минимальное усилие. Добавление атрибутов aria для достижения удобства людям с ограниченными возможностями.
А вот мобильная версия подкачала.
Надо отметить пару моментов. Сейчас проект размещается на VPS, причем не самого дешевого (среднего) тарифа. Понятно, что можно накинуть серверных мощностей, но это не решение проблемы.
Сама страница по своей сути — это текст, минимальные иконки и форма загрузки. Здесь вообще нет тяжелого контента, долгих вычислений и т. д. Плюс мы имеем дело с SSR, где большая часть страницы уходит нам легковесным заранее сгенерированным HTML.
Оптимизировать особо и нечего. Отчеты сообщают о потенциальной проблемы итоговых чанков сборки.
Да, потенциально можно попробовать поковыряться в настройках сборки в Next. Но в целом, с учетом максимальной легковесности фронта, из коробки хотелось бы попадать в зеленую зону.
Второй момент можно записать в эпик фейл.
Изначально деплой Next приложения предлагается выполнять двумя командами — сборка и старт:
npm run build
npm run start
Здесь у нас собирается итоговый бандл и запускается встроенный сервер. Приходится подключать Apache, который берет на себя управление SSL и прокси между входящими запросами и нашим Next сервером, работающим на выбранном порту.
В целом штука рабочая. Здесь можно записать себе в техдолг, убрать встроенный Next сервер и оставить чистый Apache — благо у нас все страницы генерируются при сборке и на лету мы ничего не собираем.
Проблема возникла откуда не ждали. Production сборка имела проблему — при переходе между страницами (рутами), приложение 2–4 секунды не реагировало. Только после этого происходил редирект.
Здесь нужно упомянуть решение с деплоем. Ради эксперимента сам старт процесса был возложен на управление PM2 — менеджером процессов, который мы регулярно используем для управлением серверных NodeJS процессов.
Идея простая — PM2 запускает Next сервер и смотрит за этим процессом, автоматически перезапуская его при возникновении проблем и обеспечивая автозапуск при рестарте самого сервера. В целом план выглядел неплохо.
В сети были найдены инструкции. В директории node_modules/next/dist/bin лежит файл next.js, который как раз запускает наш сервер. И достаточно под PM2 запускать этот файл — и будет нам счастье.
Собственно, так и сделали. И началась проблема с рутами.
Быстрая ретроспектива.
Сами ссылки в приложении реализуются через компонент Link из next/link.
Поиски решения проблемы привели к довольно большому количеству публикаций, где у людей схожие проблемы.
Решения в духе добавления компоненту <Link> пропсов shallow={true} prefetch={true}, не решали проблем.
Добавление лоадеров через нативное решение с файлов loading.tsx также не решало проблему. Приложение сперва зависало, потом переходило на новый роут, и там уже показывался лоадер.
Многие грешили на недоработки в новой версии App Router.
Явная проверка генерации страниц. В отчетах о сборке — все страницы сайта сгенерированы, и помечены static. Значит, переход на новый роут — это просто запрос и получение готовой html. Без долгих процессов повторной генерации.
Справедливости ради, быстрого решения, да и вообще идей по исправлению, найдено не было. Признаться, уже был готов переехать на Page Router. Но где‑то случайно на глаза попалась статья, в которой явно рекомендовалось — возьмите и попробуйте запускать приложение через стандартный npm run start, который, по идее, запускает тот же скрипт из node_modules.
Попробовал. Приложение завелось и стало летать на околокосмических скоростях. В итоге, нужно было посмотреть повнимательнее исходный код скрипта запуска. По умолчанию всегда стартует development режим, в котором Next на каждый запрос пересобирает страницу. Отсюда и постоянные задержки между переходами — каждый раз страница просто генерируется заново.
Что поделать, так и приходит опыт.
Задел на будущее
Много времени на старте ушло именно на подготовку инфраструктуры приложения. Настройка линтера, форматера, процесса сборки. Последний, кстати, я подробно разбирал в этой серии статей.
Получилось неплохо. Этот подход использую на многих небольших проектах.
Немало было потрачено на реализацию базовой архитектуры бекенда и фронта, подготовки API-слоя, слоя обработки ошибок, базовых компонентов.
Но все это имеет смысл. Сейчас добавить новое направление конвертации можно за пару часов, на фронте добавить компонент загрузки, указать нужные типы файлов, написать пару параграфов текста.
На бэке добавить новый эндпоинт и логику конвертации.
Если все пойдет очень хорошо и трафика будет много, можно без проблем добавить мощностей: запустить на соседнем сервере новый экземпляр приложения и повесить балансировщик нагрузки. Надеюсь, придет час, когда нам это понадобится.
SEO подготовка самого сайта
Касательно удобства и обеспечения целевого действия разобрались — файлы конвертируются.
Что касается технической оптимизации, то по наблюдениям до сих пор основными моментами являются:
тег title,
тег description,
упоминание ключевых запросов в заголовке h1 и подзаголовках,
органическое включение в текст страницы словоформ, связанных с целевой темой.
Если кратко. В теге title пишем в естественном виде целевой запрос, по возможности добавляя словоформы из низкочастотных запросов.
Пример. У нас целевой запрос «Конвертировать HEIC в PNG», плюс словоформы, содержащие слова «бесплатно», «онлайн».
Разумеется, мы не занимаемся спамом в метатегах, в духе:
Конвертировать HEIC в PNG бесплатно онлайн
Здесь довольно естественно можно составить с использованием всех слов:
Бесплатная онлайн конвертация HEIC в PNG.
Что касается заголовков, то здесь еще больше разбавляем, придерживаясь идеи в том, что текст должен быть полезен, помогать решить проблему и нести полезную нагрузку. Я бы предложил следующие варианты:
процесс конвертации,
почему стоит выбрать онлайн конвертер,
бесплатно перевести HEIC в PNG,
как конвертировать файлы с телефона.
Под эти заголовки можно написать немного текста, раскрывающих суть темы.
В плане контента здесь можно выделить простые, очевидные правила: он должен быть полезен, написан естественным языком, раскрывать тему. Поверьте, этого будет достаточно.
Также не забываем подготовить файлы robots.txt и sitemap.txt. В целом в сети есть огромное количество инструкций на эту тему. На нашем сайте можете взять пример в качестве ориентира.
Можно ли выкладывать сайт частично?
Раньше был довольно популярный спор: можно ли выкладывать сайт поэтапно? Например — отдать поисковикам главную страницу на индексирование, а через некоторое время еще несколько.
Здесь я бы придерживался следующей идеи: страницы на сайте — это потенциальные поведенческие факторы. Если человек заходит на главную и может просмотреть 4-5 внутренних страниц — мы получим очевидный плюс в плане очков качества. Если этих страниц не будет — эффект ровно противоположный.
Но здесь нужно учитывать специфику конкретного проекта.
Для примера — наш конвертер представляет набор страниц, где каждая является по сути законченным действием. Человек вряд ли будет переходить по ссылкам внутри сайта.
Его целевой путь — зашел на страницу, провел конвертацию, скачал файлы, закрыл.
Поэтому здесь, на мой взгляд, можно выкладывать сайт поэтапно.
Если у вас проект состоит из страниц, логически связанных и дополняющих друг друга, я бы публиковал сайт уже в готовом виде.
Первая публикация
Когда все настроено и наш проект доступен по доменному имени, можно сделать следующие действия.
Добавляем свой сайт в инструменты для вебмастеров:
Для Яндекса нужно будет добавить метатег в код сайта. У Гугла самый удобный вариант — добавление DNS записи. Если сталкиваетесь в первый раз — обращайтесь, подскажем.
Обязательно явно добавьте файлы sitemap.xml. В обеих панелях соответствующие разделы есть в меню.
Для Яндекса я бы добавил сайт в справочник организаций: время работы круглосуточно, офиса нет, IT-направление.
Первые ссылки и упоминания
Теперь желательно получить первую ссылочную массу и первые естественные переходы. Здесь порекомендую следующие базовые варианты.
Социальные сети. У всех есть страницы Вконтакте, аккаунты в Телеграмм и т. д. Можно опубликовать ссылку на свой проект и попросить знакомых первые дни переходить по ним. Да, это ручной труд, но для первого толчка вполне оправдано. Особенно если это ваш первый проект.
Нам в этом плане было немного полегче. У нас есть раскрученные группы и каналы. Упоминание в них дало первый целевой трафик.
Статейные платформы. Ресурсы, такие как Habr и похожие, могут очень неплохо помочь. Напишите качественную, полезную статью и органически вставьте в текст ссылку на продвигаемый проект. Нет секрета, что в статье, которую вы сейчас читаете, я добавил упоминания нескольких своих проектов.
Но здесь нужно действительно делать качественный контент. Я надеюсь, что мои советы по продвижению кому‑то пригодятся.
Контентные сайты. Здесь два пути. Если у вас есть собственные сайты, схожие по тематике, вы можете опубликовать ссылки на свой ресурс на них. Опять же, нам немного проще — парочка тематических сайтов с трафиком у нас есть.
Если нет своих — мы начинаем заниматься поиском места для публикации. Это уже платная история.
Мой алгоритм действий. Берем информационные запросы из нашей тематики и ищем контентные (информационные) сайты из первой десятки в выдаче. Вот неплохой пример:
Собираем такие ресурсы себе в отдельный список. Затем начинаем выходить на связь с владельцами через формы обратной связи, по контактным адресам, указанным на их сайтах. Особо специфический вариант поиска — через whois сервисы, проверки информации о владельце домена.
Пишем, что хотели бы приобрести ссылки с их сайта, в указанной статье, и показываем свой ресурс — куда будут вести ссылки. Запрашиваем стоимость.
Если ответили — пишем для них краткий абзац с упоминанием или обзором своего сервиса, вставляем свои ссылки обязательно открытые для индексации. Текст должен быть полезным, естественным, без спама. Отправляем владельцам на публикацию.
Как разместят — оплачиваем желаемым способом.
На самом деле, это самый муторный, довольно дорогой, но самый эффективный способ получения качественной ссылочной массы.
Но здесь важно помнить про одно важное правило. Уже давно качественными внешними ссылками считаются те, по которым есть переходы на ваш сайт. В противном случае ссылки могут сыграть и в минус.
Алгоритм выше — выбор проектов по информационным запросам из первой страницы выдачи — позволит эту задачу закрыть. Если сайт уже находится в первой десятке, высока вероятность, что он получает органический трафик из поиска. И высока вероятность, что кто‑то из этого списка заинтересуется нашим продуктом и перейдет по ссылке.
Опять же, раньше было немного попроще — когда озвученные выше инструменты помогали без труда найти трафиковые страницы на сайтах. Но и сейчас можно получить все необходимое.
Видео сервисы. Если у вас есть ресурсы и возможность, вы можете снять полезные ролики о своем продукте, и опубликовать их. Где? Можно рассмотреть, к примеру, Rutube. Способ довольно трудоемкий — качественный ролик потребует немало усилий.
Если такой возможности нет, можно ограничиться публикацией ссылки на свой проект в комментариях в тематических видео. Опять же — пишем максимально органический, полезный текст. Как говорится — в тему и по делу.
Краткое итого
Все озвученные выше шаги, начиная от разработки, заканчивая первичным продвижением, заняли примерно месяц.
Уже пошел первый органический трафик. Как и раньше, Гугл немного побыстрее индексирует сайт и почаще обновляет выдачу, Яндекс подтянется чуть позже.
Плюс Гугл довольно быстро поставил большое количество низкочастотных запросов в первую 100-ю. Для месячного сайта в около коммерческой тематике считаю довольно неплохо.
В течение второго месяца я ожидаю, что будут проиндексированы все полученные внешние ссылки, низкочастотка начнет приносить больше трафика и сайт планомерно начнет расти.
Выводы
Продвигать сайты в поиске до сих пор можно и до сих пор основной упор нужно делать на максимально очевидные и логичные вещи. Сайт должен быть полезен и удобен. Внешние ссылки должны быть тематическими и полезными.
Разочарованием для меня было отсутствие бонуса новичка. Раньше поисковики выборочно ставили новые сайты на первую страницу, чтобы искусственно дать им трафика и замерить поведенческие факторы. Этот период был самым важным — если здесь получить отрицательные показатели, сайт можно было бы и вовсе не продвинуть. Поэтому вопрос о частичной выкладке сайта здесь стоял довольно остро. Нужно было отдавать уже полноценный, готовый продукт.
Сейчас, по моим наблюдениям, бонуса новичка нет. Знакомые из рекламной сферы сказали, что его отменили уже лет как 5. Поделитесь в комментариях, что Вы думаете на этот счет?
Сейчас время интерактивного и видео контента. Нужно в обязательном порядке включать видео-маркетинг. Без него можно остаться за бортом.
Касательно платной рекламы, например, Яндекс Директ. Да, это обязательная тема. Если бы этот сайт был коммерческий или клиентский с бюджетом, я бы предложил полить трафик на целевые запросы. Опять же, для более ускоренного роста, чтобы быстрее получить первый трафик и поведенческие.
Конкретно в нашем случае — монетизация будет позже. Как я и говорил, проект больше про эксперименты и портфолио. Поэтому здесь тратить на рекламную компанию особого смысла нет.
Из потенциальных работ, которые можно будет провести — хотим подключить канал на Дзене. Плюс добавлять направления конвертации. Но все это, если проект начнет давать хорошую органику.
Отдельным островком идет история с ИИ. Для меня это в качестве домашнего задания. Первым делом нужно разобраться с алгоритмом попадания в ответы нейросети, когда на первом месте формируется автоматический ответ, в духе такого.
Как минимум, это потенциальный трафик, если попасть в описание, поэтому с этим нужно в обязательном порядке работать.
Плюс очень хочется поэкспериментировать с генерацией контента через ИИ. Если раньше весь контент был самописным копирайтом, в худшем случае рерайтом или заказанными статьями, то сейчас можно за пару минут получить от нейросети простыню неплохого текста. Нужно проверить, что у него в плане уникальности, как на него реагируют поисковики и т. д. Тоже большое поле для исследования.
В целом, спасибо вам, что дочитали этот материал. Если есть предложения, нужна разработка, интересует обучение — присоединяйтесь, будем рады помочь.
Надеюсь, это было полезно. Делитесь своими мыслями и мнением в комментариях.