Думайте про SEO перед разработкой сайта, а не после!

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

Экстренно исправлять структуру сайта, чистить его от дублей и оптимизировать скорость загрузки страниц – довольно трудозатратная задача. Да и скорость реакции в SEO часто измеряется месяцами.

Как же разработать правильный с точки зрения SEO сайт? Что нужно заложить в ТЗ для разработчика? Об этом я расскажу в новой статье.

Что нужно сделать на старте

Первым делом подбираем ключевые запросы и группируем их в семантическое ядро. Для тех, кто не знает, как собирать семантику, читайте шикарный пост моей коллеги Екатерины Чикулаевой.

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

На основе заранее продумываем тексты и пишем ТЗ для копирайтера. Пожалуй, не стоит напоминать, что все тексты должны быть уникальными?

И только после всего этого приступаем к прототипированию. На этом этапе уделите внимание заголовкам H1, H2, H3 и распределению текста по страницам. Не забывайте про правильную структуру заголовков – например, такую:

Итак, у нас есть структура и понимание, как распределить текст по страницам. Давайте узнаем, что еще нужно заложить в будущий сайт.

Метатеги

Метатеги – специальные HTML-теги, расположенные в контейнере head, которые передают информацию о странице поисковым системам и браузерам. Без них разработать SEO-грамотный сайт немыслимо.

Тег title - заголовок страницы. Именно он формирует заголовок в поисковом сниппете. Так как это заголовок, в иерархии он должен быть выше метатегов, передающих текстовое содержимое.

На странице должен быть метатег description. Когда я делаю аналитику сайтов, иногда замечаю, что о нем забывают. Добавить его мало, нужно заполнить его уникальным содержимым c вхождением ключевого запроса. Наличие метатега description важно: он участвует в формировании поискового сниппета.

Чтобы ваш код понимали еще и соцсети, добавьте разметку Open Graph. Советую написать код-условие: если поля разметки не содержат значений, то эти поля не выводим.

Viewport meta tag сообщит поисковым системам о том, что ваш сайт оптимизирован для мобильных устройств. Впрочем, если верстка у сайта не адаптивная, то viewport не спасет.

Не забудьте тег canonical. Это важный элемент сайта, ведь именно он сообщает поисковой машине истинный адрес страницы. Canonical позволит избавиться от проблем с дублями страниц.

Наконец, каждая страница должна иметь функционал для управления индексацией через конструкцию вида <meta name="robots" content="index, follow"/> из админки. Она разрешает поисковым роботам индексировать страницу и переходить по ссылкам.

URL

В первую очередь напомню очевидное: новый сайт должен работать на протоколе HTTPS. Это снимет часть проблем с безопасностью и увеличит лояльность поисковых систем.

Если вы создаете новый сайт вместо старого, постарайтесь, чтобы новые URL страниц и разделов максимально соответствовали URL старого сайта. Если это невозможно, настройте 301-й редирект со старых страниц на новые.

Сайт должен иметь один адрес, с зеркал нужно тоже настроить 301-й редирект. То есть, если ваш основной адрес – https://site.ru, то сайт не должен быть доступен по адресам вроде https://www.site.ru, https://site.ru и https://www.site.ru.

То же самое касается и разделов сайта: не должно быть адресов разного вида. Например, www.yoursite.com/contacts/ и www.yoursite.com/contacts. URL должен совпадать с адресом, прописанным в теге canonical. С неверного URL на верный настройте 301-й редирект.

Наконец, последний совет для тех, кто планирует завести на сайте блог или ленту новостей. На страницах пагинации в canonical выводите адрес главной страницы.

Индексация

В ссылки или заголовки постов и новостей добавьте атрибуты rel="next" и rel="prev", чтобы указать связь между несколькими URL. Это поможет Google определить, что содержание этих страниц связано в логической последовательности.

Хлебные крошки нужны и важны! Помимо того, что это важный элемент юзабилити, хлебные крошки помогают роботам лучше понять структуру сайта и могут участвовать в формировании поискового сниппета.

Файл sitemap.xml (или карта сайта) передает в поисковые системы список страниц на сайте. Состав этого файла не должен противоречить тому, что открыто для индексации. Соответственно, то что закрыто для индексации, попадать в него не должно.

Также sitemap.xml должен сообщать дату последнего изменения страницы. Если почему-то не сообщает – не беда! Пусть дату изменения страницы сообщает веб-сервер. Для этого нужно реализовать заголовки ответа сервера if - last modified since header. Это здорово сэкономит время время работы поискового робота – а значит, и лимит загрузок, который поисковые машины выделяют сайтам.

Ну и конечно же, заранее настройте файл robots.txt – у каждой CMS свои особенности, поэтому придется отдельно изучить тему. Файл скорее всего нужно будет дополнять в дальнейшем, но базовые настройки – это уже отличное начало.

Закрываем утечку статического веса

Новичкам в мире SEO напомню: статический вес – уровень авторитетности страницы в поисковой системе. Передается он со страницы на страницу при помощи ссылок – как внутренних, так и внешних.

Ссылки на номера телефонов, или email-адреса <a href="mailto:t.azizov@leadmachine.ru"> и <a href="tel:+7123456789"> должны иметь атрибут rel="nofollow". Ведь это все-таки ссылки – получается, со всех страниц, где они расположены, он утекает вникуда. Атрибут поможет этого избежать.

Страницы не должны ссылаться сами на себя. Например, когда страница активна, в меню не должно быть ссылки на нее. То же самое относится к ситуации, когда страница имеет плавающее меню навигации с ссылками вида <a href ="https://yourpage.ru#razdel”>раздел</a>. Ведь поисковые машины не читают то, что расположено после решетки – следовательно, в их глазах это приравнивается к ссылке страницы на саму себя, в такие ссылки рекомендую добавлять атрибут rel="nofollow" . Не забывайте про логотип на главной странице, на нем ссылки тоже не должно быть.

Скорость загрузки

Сайт должен работать быстро и на десктопах, и на телефонах, и на планшетах. Есть данные поисковых систем, что страница должна открываться до 3 миллисекунд . Но мне кажется, это слишком долго. Поэтому рекомендую поручить разработчикам сайта настроить серверное кэширование. Тема большая, поэтому пробегусь по ней тезисно.

Сервер, на котором находится сайт, должен работать на связках Apache + NGINX. Первый отвечает за динамику, второй отдает статику (результат работы скриптов). Другой вариант – связка NGINX + PHP-FPM: первый отвечает за статику, а PHP-FPM – за обработку скриптов. В данный момент это наиболее быстрая и производительная среда для сайтов на PHP.

Кэшируйте все, что можно: запросы к базе данных, миниатюры изображений, результаты работы скриптов. Исключение – интернет-магазин, в нем сессии кэшировать не следует, иначе не будет работать корзина.

Не забываете и про браузерное кэширование. С ним стоит быть осторожнее и не настраивать на продолжительное время, иначе посетитель может не увидеть изменений на сайте.

Скрипты сайта (CSS и JS) нужно сжать. CSS выводите в контейнере head, a JS подключайте в footer. Если CSS вывести после загрузки HTML, какой-то момент вы будете видеть свой сайт в чистом HTML – это выглядит неопрятно и раздражает.

HTML также не забываем сжимать. Да, после этого код превратится в кашу. Но не пугайтесь, это нормально!

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

Несколько советов напоследок

В идеале выделите сайту постоянный (статический) IP-адрес, а не динамический. Это даст вам небольшой плюс в карму лояльности от поисковиков. Также помните, что сайт не должен быть доступен по обращению к IP-адресу, в обратном случае напишите администратору сервера.

В админке должна быть возможность прописать alt и title для изображений.

Не используйте заголовки вида <H1 class = "xxx" id="xxx">. Ни классов, ни id там быть не должно. Только так: <H1>текст</H1>

Ключевые слова нужно распределять по всей странице равномерно. Старайтесь избегать больших портянок текста внизу страницы – поисковики ценят такие страницы меньше. Для тех, кто не знает, как распределять текст по странице, рекомендую прочитать статью моей коллеги Елены Чулановой об оптимизации поста в блоге.

Добавьте на сайт микроразметку HTML (она же семантическая разметка), которая при помощи маркеров сообщает поисковику об определенных элементах на страницах. Микроразметка поможет улучшить представление сайта в результатах выдачи. Кстати, по заверениям Google, наличие микроразметки влияет на ранжирование.

Если вы все сделали правильно, то не ждите результата, а продолжайте развивать сайт. В этом вам поможет мой большой чек-лист по SEO.

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