seo продвижение сайта разработка с учетом seo-требований что разработчик должен знать о seo seo

О чем должен помнить веб-разработчик, чтобы сделать всё по SEO-феншую

Mykola Sarry

• 6 min read

Сегодня очень сложно оставаться монопрофильным специалистом. И часто, делая новый сайт или внося различные правки, можно позаботиться заранее об основных вещах, которые помогут сразу сделать всё чисто и красиво не только с точки зрения программирования, но и с точки зрения SEO. Так о чём же надо помнить, чтобы делать работу качественно, и SEO-специалисты были довольны вашей работой?

[sendpulse-form id=”278″]

Подтягиваем общие знания

В первую очередь, пожалуй, следует подтянуть собственные знания по SEO (а может, и контекстной рекламе). Такие вещи в сфере интернет-маркетинга никогда не помешают, а вам дадут преимущество — делать всё осознанно, а не просто “как в ТЗ написано”. Кроме того, полезно и для самопроверки. Это — общая канва, на которую наслаиваются остальные пункты.

Закрываем ссылки от индексации

Если вы работаете с SEO-аудитами, наверняка вы знаете что такое внешние ссылки, циклические ссылки и висячие узлы.

В общем случае: внешние ссылки — это те, которые ведут на другие сайты и получается уводят ваших посетителей в другое место; циклические ссылки — ведут на самих себя (тоже плохо); висячие узлы — например, ссылки на скачивание документов, которые никуда не ведут на другие страницы. Всем таким ссылкам мы добавляем атрибут ‘rel=”nofollow”’, которые даст поисковым роботам понять, что по этой ссылке идти не надо и учитывать её не стоит. Таким образом мы сохраняем вес страницы. Внешним ссылкам лучше вообще добавить target=”_blank” — так ваш сайт останется открытым у пользователя, и шанс на его возвращение будет больше.

Частый пример циклических ссылок — это меню, логотип, хлебные крошки. В этих типовых элементах частенько прячутся ссылки на текущую страницу, и важно помнить о том, чтобы сразу их закрыть от индексации (спрятать от роботов).

Наиболее типичные внешние ссылки — ссылка на разработчика сайта в подвале, ссылки на соцсети, источники новостей, клиенты компании, телефоны, почты и т д.

Склеиваем зеркала

Говоря об уменьшении дублей, нельзя не вспомнить о склейке зеркал. Это значит, что ваши страницы должны быть доступны только по 1 адресу. В то время как ваши могут быть доступны по:

  • http://www.site.ru
  • https://www.site.ru
  • site.ru/
  • http://site.ru
  • https://site.ru
  • и т д

То есть существует три основных вида зеркал: по протоколу (http / https), по наличию слеша в конце страниц и по наличию заветных трёх букв “www”.

При использовании редиректов — важно помнить, что для склейки он должен быть по умолчанию 301 (постоянный редирект), а не 302 (временный редирект).

Если у вас работают сортировки \ фильтры \ постраничная навигация через GET-параметры, как правило, это тоже создает дубль для поисковой системы. Поэтому на такие страницы лучше хотя бы вешать склейку. Для этого в <head> добавляется специальная ссылка <link href=”ссылка на основную страницу” rel=”canonical”>. Такая ссылка говорит роботу, что эта страница — не основная, а основная находится по адресу в атрибуте href. Это позволит избавиться как правило от многих дублей ваших страниц.

Устанавливаем правильные мета-теги и микроразметку

Не менее важны при разработке мета-теги страниц. Свойства title и description должны быть заполнены как минимум у основных страниц (главная, о компании, контакты, каталог, услуги), лучше — заранее позаботиться о правилах формирования мета-тегов у добавляемых впоследствии категорий, товаров или новостей. В качестве title можно брать название, а в качестве description — добавлять к названию общую информацию в стиле <meta name=”description” content=“Ваше описание. Больше подробной информации на сайте site.ru”>.

В идеальном мире можно сразу внедрить микроразметку. Ну хотя бы Open Graph. Чем дальше, тем чаще встречается этот пункт в различных аудитах на внедрение, делается обычно быстро и просто, но может дать приличный value в плане отображения сайта и его привлекательности для клиентов. Про микроразметку можно почитать тут.

Также создаем стандартный robots.txt. Обычно на просторах интернета можно найти такой для CMS, которую вы используете — для всех он разный. Во многих CMS есть автоматический генератор, либо плагины, которые возьмут этот пункт на себя.

Оптимизируем скорость загрузки сайта

Одним из основных факторов привлекательности сайта для пользователя является скорость его загрузки. Это и понятно — ждать по 2 минуты загрузки страницы было нормально в 2000-х, но сегодня скорость потребления информации в разы выше, как и потребности пользователя. Если тебе приходится больше 5 секунд смотреть на прелоадер, это начинает раздражать. Часто в вопросе скорости загрузки SEO-специалисты ориентируются на инструмент Google PageSpeed Insights.

Основное, на что делается упор в этом аудите — оптимизация изображений. Сейчас просто неприлично заливать огромные картинки, никаких их не обрабатывая и не сжимая. Если ваша картинка весит 2-3 мегабайта, обычно это говорит о том, что ваша страница будет грузиться намного дольше, чем могла бы, и вы не заботитесь о своём продукте. Этот пункт сразу отберет у вашей страницы порядка 40 очков (если всё совсем плохо) в том же PageSpeed Insights.

Также сервис предлагает перенести Javasciptы вниз страницы, т.к. их загрузка препятствует загрузке отображаемого контента, а также использовать сжатие файлов и кеш браузера. Для этого используются модули сервера, к которым обращаются через директиву .htaccess. Можно заранее подготовить себе правила, которые достаточно универсальны, со сроком кеширования и сжатия, чтобы вставлять их потом на проект.

Выглядит это примерно так:

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault "access plus 6 hour"
  ExpiresByType image/jpeg "access plus 7 day"
  ExpiresByType image/gif "access plus 7 day"
  ExpiresByType image/png "access plus 7 day"
  ExpiresByType image/x-icon "access plus 7 day"
  ExpiresByType text/css "access plus 6 hour"
  ExpiresByType application/javascript "access plus 6 hour"
  ExpiresByType application/x-javascript "access plus 6 hour"
  ExpiresByType application/x-shockwave-flash "access plus 6 hour"
</IfModule>

<IfModule mod_deflate.c>
    <filesMatch "\.(js|css|html|php|jpg|jpeg|png|gif|svg)$">
        SetOutputFilter DEFLATE
    </filesMatch>
</IfModule>

К вопросу кеширования и сжатия также можно отнести минимальное подключение сторонних файлов. Если сайт, с которого мы их подключаем, перестанет работать, мы можем этого вовремя не заметить. Кроме того, внешний ресурс мы не минифицируем, не сжимаем и не кешируем (на то он и внешний). Именно поэтому хорошей практикой будет загрузка шрифтов и подключение скриптов (вроде jquery) с нашего сервера.

Создаем страницу для 404 ошибки

Все несуществующие страницы должны отдавать код ответа 404. Многие о ней забывают, но на этой страницы рекомендуется иметь общие элементы навигации (шапка \ меню), чтобы пользователь мог с нее перейти на интересующую страницу, и несколько ссылок — обычно на главную и на предыдущую страницу. Важно, чтобы пользователь понимал, что попал на несуществующую страницу, но его при этом не сбивало и вовсе покинуть ваш сайт.

Не забываем про адаптивную / мобильную версию

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

Закрываем от индексации среду разработки

Если вы разрабатываете новый сайт или работаете на поддомене, необходимо закрыть его для индексации, чтобы не попасть под аффилирование (несколько одинаковых сайтов, из которых система определит основной, и только у него все будет нормально). Обычно это делается через специальный файл robots.txt, в котором вся информация закрывается от всех роботов.

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

Вишенка на торте (страницы пагинации)

Для желающих особо выделиться и перфекционистов — прорабатываем страницы постраничной пагинации. Список действий при этом достаточно простой:

  1. Склеиваем тегом canonical страницы с основной (<link href=”ссылка на основную страницу” rel=”canonical”>).
  2. Добавляем в <head> специальные мета-теги, которые скажут роботу, где находятся предыдущая и следующая страницы. Для этого используем <link href=”адрес следующей страницы” rel=”next”> (на всех страницах, кроме последней), и <link href=”адрес предыдущей страницы” rel=”prev”> (на всех страницах, кроме первой). При этом если мы находимся на второй странице, к первой не должно добавляться параметров пагинации.
  3. На всех страницах, кроме первой, добавляем подписи “ — страница N” к тегам <title>, <description>, <h1> (где N — номер страницы). Это поможет нам избежать еще целой серии дублирования контента.

Комментируем правильно

Часто клиент решает убрать какой-либо баннер или просто блок, который пока не может наполнить. Но через полгода, а то и год “чудесным образом” о нем вспоминает и просит вернуть. Каким образом вы его достанете — это уже ваша проблема. Поэтому если надо скрыть какие то вещи, которые впоследствии могут оказаться опять нужными, лучше их закомментировать или сделать копию файла. Причем комментарий не должен быть вида <!—–>, т.е. обычным html. Такой комментарий будет выводиться в коде страницы, его увидит поисковик и вполне возможно посчитает мусорным кодом. Кроме того, это увеличивает объем загружаемого html-кода. Поэтому лучше обернуть этот комментарий например в комментарий php. И не забывайте подписать, к чему он относится! Ибо не факт, что через год вы сами будете об этом помнить.

Итоговый чек-лист

Итого. Можем составить примерный чек-лист:

  • Закрываем циклические ссылки (меню, логотип, хлебные крошки), внешние ссылки (соцсети, источники, клиенты, телефоны, почты) и висячие узлы (документы для скачивания)
  • Склеиваем зеркала (www, http, /), а также страницы с GET-параметрами (фильтры, сортировка)
  • Проверяем, что все редиректы на сайте являются 301
  • Устанавливаем правила для мета-тегов
  • Микроразмечаем в максиразмерах
  • Оптимизируем скорость загрузки сайта (сжатие ресурсов, кеш браузера, оптимизация изображений, минифицированные версии скриптов и стилей, скрипты внизу страницы)
  • Не забываем проверять мобильную версию
  • Закрываем от индексации среду разработки
  • Оптимизируем страницы постраничной пагинации под поисковые системы
  • Комментируем код не в html-формате, а в php либо бэкапим отдельно
  • Не забываем создать страницу с ошибкой 404

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