Обсудить проект

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

  • ROI
  • 08 августа 2018
  • 2122
  • 11 минут

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

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

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

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

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

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

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

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

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

Метатеги

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

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

мета-тег title

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

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

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

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

Наконец, каждая страница должна иметь функционал для управления индексацией через конструкцию вида <meta name="robots" content="index, follow"/> из админки. Она разрешает поисковым роботам индексировать страницу и переходить по ссылкам.
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 выводите адрес главной страницы.
meta name="robots" content="index, follow"/  https://leadmachine.ru/?p=15362&preview=true#hcq=3ZjJ80r

Индексация

В ссылки или заголовки постов и новостей добавьте атрибуты 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 верстка при разработке сайта

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

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

Тимур Азизов
ведущий аналитик
Обсуди с другими
Обсудить проект
Выберите услугу,
впишите имя и телефон, нажмите кнопку
Нужна консультанция Экспресс-аудит Реклама Аналитика Анализ конкурентов Стратегия ROI-маркетинг SMM Блог Сайт Другое
Нажимая кнопку, вы соглашаетесь с  Условиями обработки персональных данных
Выберите услугу,
впишите имя и телефон, нажмите кнопку
Нужна консультанция Экспресс-аудит Реклама Аналитика Анализ конкурентов Стратегия ROI-маркетинг SMM Блог Сайт Другое
Нажимая кнопку, вы соглашаетесь с  Условиями обработки персональных данных