Если вы когда-либо получали заказ на разработку сайта с требованиями по SEO, вы точно знаете, как привычный процесс способен превратиться в хаос – переделки в мета-тегах и структуре, а также дополнительная оптимизация скорости загрузки и редиректов могут растянуть вашу работу на недели. Чем раньше вы научитесь взаимодействовать с SEO, тем проще будет не только запускать видимые для поисковиков сайты, но и объяснять заказчику, что львиная доля таких правок должны закладываться еще на этапе проектирования.
Ниже мы объясним, что такое техническая оптимизация сайта на пальцах, а также расскажем, как найти общий язык с сеошником.
Что такое техническое SEO
Техническое SEO или техническая оптимизация сайта — это способ сделать сайт дружественным не только для людей, но и для поисковых роботов. Так, для поисковика важно:
Чтобы страницы были доступны и индексируемы;
Чтобы сайт загружался быстро;
Чтобы структура сайта была понятна и логична;
Чтобы код не мешал поисковым ботам распознавать контент, размещенный на конкретной странице.
Все это входит в зону ответственности технического SEO, а значит – и самого разработчика. Потому что ни один, даже самый “грязный” прием SEO не спасет, если сам сайт грузится более трех секунд, а элементы меню плохо помогают в навигации пользователям из-за битых ссылок или 301/302 редиректов.
Основные технические SEO задания глазами программиста
Вот чек-лист по техническому SEO, который вам может быть передан в работу:
Улучшение индексации: чтобы страница попала в поиск, она должна подлежать проверке Google роботам, а значит, вам нужно корректно задать robots.txt и убрать noindex/заголовки 403/500;
Обеспечение логической структуры сайта: вам нужно создать логическую иерархию URL с вложенными страницами, а также оптимизировать навигацию и breadcrumbs;
Повышение скорости загрузки: обеспечивается с помощью lazy-load, сокращения объема CSS- и JS-кода, а также оптимизации значений метрик LCP и CLS;
Работа над HTML-разметкой: вам придется подкорректировать заголовки, а также добавить семантический HTML и микроразметку;
Оптимизация JavaScript и CSS: вам нужно будет определить, не ухудшает ли JS-рендеринг индексируемость страниц, а также проверить влияние CSS на адаптивность и доступность сайта.
В целом, это не полный список приемов технической SEO оптимизации сайта, и сюда можно отнести все то, что напрямую касается работы с сайтом.
Частые задачи от SEO специалиста – и зачем они нужны
Когда SEO-специалист просит вас о чем-то, это не значит, что он хочет испортить вам день. Это нужно для того, чтобы пофиксить технические дыры прежде, чем новый сайт или его очередная версия будут запущены. Вот типичные задачи по технической оптимизации сайтов, которые поступают от сеошников:
Переделать <meta title> и <h1 заголовок>. Эти заголовки критически важны для поисковой выдачи, поэтому они должны быть уникальны и информативны;
Определить canonical URL-ы. Они помогают бороться с дублями страниц, что важно для интернет-магазинов с фильтрами и инструментами для сортировки товарных позиций;
Оптимизировать редиректы. Корректные 301/302 позволяют сохранить позиции сайта после его миграции на новый движок;
Поменять содержимое Sitemap.xml и robots.txt. Sitemap.xml содержит список всех важных страниц, которые должны быть видны поисковой машине, а файл robots.txt – закрывает неважные (например, технические разделы) от индексации;
Поработать над значениями метрик Core Web Vitals. Они определяют скорость загрузки страниц, а также ряд UX-показателей, которые напрямую влияют на рейтинг сайта в поисковой выдаче;
Улучшить доступность сайта. Здесь подразумевается присутствие текстовых альтернатив (alt-атрибуты изображений), aria-labels, фокус-стейтов и всего прочего, что делает сайт инклюзивным и простым для восприятия не только для обычных пользователей, но и для людей с нарушениями зрения, моторики, восприятия.
SEO для разработчиков или как работать с SEO специалистом и не сойти с ума
Прежде, чем мы приступим к рекомендациям по технической оптимизации, вам нужно прийти к осознанию того, что у вас с SEO-специалистом разные метрики эффективности вашей работы. Поэтому определите правила взаимодействия с самого начала, чтобы техническое продвижение сайта оказалось максимально продуктивным.
Обозначьте временные затраты на даже, казалось бы, самые простые задачи. Вы, как технический специалист, понимаете, что просьба вроде: “Нужно прописать теги” порой выливается в тотальное изменение архитектуры шаблонов, которые часто вообще не предполагают этих полей. Поэтому лучше сразу попросить у SEO чеклист задач с описаниями и конечными целями, чтобы своевременно задать уточняющие вопросы и оценить трудозатраты.
Обеспечьте прозрачность коммуникации – иначе придется делать одну и ту же работу дважды. Технический запрос от SEO специалиста: “Нужен каноникал на все страницы из-за их дублирования” может быть воспринят неверно – вы можете добавить один rel=canonical (например, на URL без параметров). Однако это не решит проблемы, ведь SEO не объяснил, какие именно дубликаты появляются, а вы – просто добавили canonical не туда. Во избежание этого, запросите примеры URL-дублей и уточните, какие URL должны считаться главными, ведь помимо правил их формирования, потребуется поправить роутинг/логику CMS.
Объясните, что работа над ускорением сайта может быть продолжительной. Технические задачи от SEO эксперта в формате: “Нужно ускорить сайт” требуют от разработчиков радикальную переделку всего, чего только можно, от шрифтов и серверной логики до картинок и API. В связи с этим, нужно вместе проанализировать отчет в Lighthouse (или, например, PageSpeed) и правильно расставить приоритеты для задач.
Уточняйте непонятные формулировки. Технические правки от SEO а-ля: “Нужны 301 редиректы со старых URL на новые” могут вводить в смятение, ведь разработчики зачастую просто получают огромный список из URL в Excel без каких-либо объяснений. Поэтому уточните у SEO специалиста структуру исходных/целевых адресов, приоритет/паттерны редиректов, а также причинно-следственные связи между “откуда” и “куда”. После этого проверьте тестовый набор URL-ов вместе с SEO (например, с помощью Screaming Frog или плагина Redirect Path) и только затем уже переходите к массовому внедрению.
Удостоверьтесь, что SEO сделал корректные выводы, чтобы вам не пришлось выполнять бесполезную работу. Представим, что SEO-специалист утверждает, что: “robots.txt закрывает индексацию”. Оказывается, что он проверил dev-сервер, на котором индексация, как раз, должна быть закрыта. Чтобы избежать этого, старайтесь изначально использовать отдельные robots.txt, указывая, для какой среды каждый из них предназначен. Также предоставьте вашему SEO коллеге техническую документацию с определением того, какие домены/среды участвуют в индексации. Ограничьте доступ к staging-сайтам по IP/паролю, чтобы они не всплывали в поиске.
Подобных ситуаций, связанных с техническим SEO, может быть целый океан, поэтому чтобы их предотвратить, с самого начала вашего взаимодействия создайте отдельный файл в Notion/Google Docs, где будут присутствовать:
Список задач по SEO и статус;
Структура сайта/шаблонов;
Список точек индексации;
Правила по canonical, robots.txt, sitemap.xml и др.
Гайд при работе SEO и разработки на разных сайтах
Техническая оптимизация имеет свою специфику, определяемую системой управления содержимым сайта. Рассмотрим наиболее популярные движки ниже.
WordPress
WordPress уже который год считается одним из самых популярных CMS в мире (в том числе, и среди SEO-специалистов). Если сайт, над которым вы работаете, основан на нем, вам обязательно нужно ознакомиться с работой плагинов Yoast SEO, RankMath или All in One SEO.
Что касается технической оптимизации скорости загрузки, здесь придут на помощь W3 Total Cache и WP Rocket (для кэширования) и минимизация внешних скриптов. Также удостоверьтесь, что выбранная тема поддерживает корректные заголовки, не вставляет дубли и позволяет редактировать metadata.
Webflow & Tilda
Webflow (западный вариант) и Tilda (СНГ вариант) – это излюбленные маркетологами конструкторы, которые имеют некоторые ограничения с точки зрения SEO. В частности, редактирование robots.txt и sitemap здесь доступно только для платной версии, а canonical и мета-теги должны быть прописаны вручную. Кроме того, редиректы в них настраиваются только в личном кабинете, а чистого HTML/CSS (порой так нужного для технической оптимизации скорости) вообще нет. Поэтому сложные SEO-сценарии для этих CMS недоступны.
Самописные CMS и фреймворки на базе React, Vue, Laravel и Django
Здесь вы сможете “разгуляться” в плане технической настройки — важно с самого начала установить полноценный контакт с SEO специалистом.
Вам придется поработать над внедрением SSR и пререндеринга (особенно это актуально для SPA на базе React/Vue), а также структурой URL. Не менее важным аспектом станет техническая оптимизация содержимого sitemap, robots.txt и мета-тегов. Наконец не стоит пренебрегать Core Web Vitals (а именно – метриками CLS, LCP и FID). В их улучшении вам поможет внедрение lazy load, асинхронных скриптов и решений для оптимизации изображений.
Инструменты, которые стоит знать разработчику
Вот список инструментов, с которыми стоит хотя бы поверхностно быть знакомым, даже если вы не желаете себя тесно связывать с техническим продвижением сайтов в дальнейшем.
Lighthouse. Будучи частью Chrome DevTools, этот инструмент самостоятельно анализирует веб-страницы на производительность, SEO, доступность, позволяя выявить проблемы со скоростью и получить подробные рекомендации по устранению технических проблем.
PageSpeed Insights. Это решение делает примерно то же самое, что и Lighthouse, но показывает метрики в режиме реального времени.
Screaming Frog SEO Spider. Это десктопный краулер, который сканирует сайт точно так же, как это делает поисковый робот. С его помощью вы сможете выявить ошибки в тегах, понять, как поисковик видит структуру сайта, а также найти битые ссылки, редиректы и дубликаты.
Ahrefs, SEMrush и Serpstat. Все эти инструменты выполняют сквозной анализ видимости сайта, внешних ссылок, ключевых слов и контента. Используя их, вы сможете понять, какие страницы не добирают трафик и имеют плохую структуру.
Google Search Console. Это официальный инструмент от Google для отслеживания индексации и ошибок на сайте. Он объясняет причины отсутствия индексации, разделяя их по категориям (mobile usability, Core Web Vitals, sitemap, robots.), и отображает запросы, по которым сайт уже виден в поиске.
Prerender.io и Rendertron. Эти инструменты предоставляют рендеринг контента для ботов, что может быть полезно для SPA (в частности, если у вас пока не настроен SSR, но нужен доступ к контенту для поисковиков).
ngrok и localtunnel. Эти решения позволяют продемонстрировать локальный сайт SEO специалисту или клиенту до его полноценного развертывания. В целом это отличный выбор для совместной работы, особенно когда требуется валидация SEO-пригодности на реальном прототипе.
Польза синергии SEO + разработка
Чем продуктивнее будет ваше взаимодействие с SEO специалистом, тем больше шансов, что выиграют все. В конечном счете, ваша работа над технической SEO оптимизацией будет оценена заказчиком по достоинству, ведь запустите сайт, который с ходу будет хорошо ранжироваться в Гугл и приносить органический трафик.
FAQ: Как понять, что от вас хочет SEO специалист
Что происходит, если игнорировать техническое SEO?
Если упустить из виду техническое СЕО, сайт может не пройти индексацию из-за своей медленной работы и других критически важных для поисковых ботов факторов. В результате, сколько бы вы ни работали над контентом и наращиванием ссылочной массы, сайт не будет находиться в поиске.
Почему SEO-специалисты требуют чистый код и минимизацию JS?
Чистый и понятный код без избыточного JS помогает ботам быстрее сканировать страницу и правильно идентифицировать ее структуру. Слишком емкие скрипты могут замедлять процесс загрузки и препятствовать индексации, особенно на мобильных устройствах.
Как часто нужно проводить технический аудит сайта?
В среднем, раз в 3 месяца, однако для больших сайтов частота должна быть выше.
Что важнее – скорость загрузки или адаптивность?
Эти метрики – часть Core Web Vitals и они одинаково важны, так как Google ориентируется на общие “впечатления” от пользовательского опыта.
Можно ли улучшить SEO сайта без участия программиста?
Да, техническое продвижение сайта можно выполнить в ряде случаев самостоятельно – например, если ваш сайт основан на CMS, которые располагают соответствующими плагинами. В то же время углубленная техническая СЕО оптимизация сайта (правки шаблонов, кода, server-side рендеринга) почти всегда требуют экспертизы разработчика.
Какие есть быстрые решения для программиста в техническом SEO?
Есть три универсальных приема технической оптимизации сайта для SEO, которые помогут вам быстро улучшить его показатели: это работа над редиректами (301 вместо JS-переходов), удаление дубликатов страниц и настройка lazy load для картинок.
Нужно ли учитывать SEO при разработке SPA или PWA?
Да, поскольку такие сайты часто используют рендеринг на клиентской стороне, что затрудняет индексацию. Чтобы контент сайта был доступен для сканирования ботами, нужно внедрить SSR/пререндеринг и продумать маршрутизацию.
Понравилась статья?
0.00 / 5
0
Поделиться:
Интересные идеи, тренды и инструменты, которые помогают расти и смотреть вперед
Подпишитесь на рассылку — только главное и полезное
