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

в 8:03, , рубрики: html, seo, внедрение аудитов, поисковая оптимизация, поисковое продвижение, Разработка веб-сайтов, разработка сайтов

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

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

Так о чём же надо помнить, чтобы делать работу качественно, и SEO-специалисты были довольны вашей работой?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Одним из основных факторов привлекательности сайта для пользователя является скорость его загрузки. Это и понятно — ждать по 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) с нашего сервера.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: DasBinIch

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js