Что нужно знать программисту и дизайнеру о SEO продвижени

Что нужно знать программисту и дизайнеру о SEO продвижени - Дмитрий Языков

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

1. Счетчики метрик

Первое что нужно сделать - запросить у клиента коды счетчиков Яндекс Метрики, Google Analytics. Добавить сайт в Яндекс Вебмастер и Google Search Console. Если сайт новый и счетчиков еще нет - нужно зарегистрировать аккаунты и выслать их клиенту.

По желанию, можно добавить к этому списку пиксели ВК и Facebook, а также счетчики Liveinternet, Rambler и тд. Для подключения советую использовать Google Tag Manager.

2. Уникальный Title

Все <title></title> на всех страницах должны быть заданными и уникальными. Тайтл фактически должен давать название содержимому страницы. В идеале - полное вхождение самого важного ключевого запроса.  Для страниц товаров в интернет-магазинах для карточек товаров это может быть, например "Купить [название товара] по выгодной цене" или "Заказать [название мебели] по своим размерам". Регион работы и название компании тоже будет плюсом. 

Тайтл сайта МВидео

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

Рекомендуемая длина title зависит от поисковой системы. Для Google: 30-70 символов. Для Яндекса: 30-80 символов.

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

Title не должен совпадать с h1 и description.

3. Заголовки h1-h6 важны

Теги h учитываются поисковыми роботами при индексации сайта. Крайне важно, чтобы они соответствовали и описывали содержимое страницы. Именно поэтому не допускается использование заголовков в дизайне. Не используйте заголовки h2-h6 при верстке шаблонов сайта в визуальных элементах (например, меню сайта или элементы каталога).

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

  1. h1 должен обязательно присутствовать на странице.
  2. h1 должен соответствовать тексту и описывать его в сжатой форме.
  3. h1 должен быть длинной до 50 символов.
  4. h1 и title не должны совпадать.
  5. h1 должен быть уникальным для всех страниц сайта.
  6. Заголовок h1 должен быть только 1 на странице.
  7. В конце заголовка не ставится точка, а остальные знаки препинания должны использоваться в минимальном количестве.

Для разработчиков: важно предусмотреть возможность соблюдения этих правил. Например, очень часто h1 и title формируются по одному шаблону или ставятся из одной и той же переменной на странице.

Как правило, h2-h6 используются для структурирования контента на странице.

4. Title, description, h1 присутствуют на всех страницах и не дублируются

Как я уже писал выше, h1 должен быть обязательно указан. То же правило распространяется и на title с description.

Тут нужно знать, что все три параметра не должны совпадать как в рамках одной страницы, так и с другими страницами сайта.

Длина Descsription должна быть в пределах 150-160 символов.
Title, description и H1 сайта Leroy Merlin

5. Все картинки должны иметь атрибуты alt и title

Все картинки, без исключений. Часто нужные атрибуты прописываются картинкам в каталоге товаров, новостным статьям, разделам услуг, а какие-то технические изображения (иконки социальных сетей, логотип компании и тд.) остаются без внимания. У заполнения alt и title есть очевидный профит: картинки сайта попадут в поисковую выдачу по изображениям.

Разработчикам: по возможности используйте вместо тегов <img> css свойство background для элементов дизайна. Всем оставшимся изображениям должно быть задано описание alt и title. Для проверки сайта можно использовать специальные сервисы. 

6. ЧПУ для страниц сайта

У всех страниц сайта должны быть (по возможности) короткие URL адреса, описывающие где посетитель находится в данный момент.

Вот пример:

https://site_url.ru/catalog/phones/iphone-10-silver/

Уже по адресу ссылки мы (и поисковый робот, индексирующий страницу) можем догадаться, что мы находимся в каталоге товаров, в разделе Телефоны, в детальной карточке товара iPhone 10 Silver.

https://site_url.ru/cat/sec10/385/

Такой адрес сайта вообще ни о чем не говорит. Это плохой вариант.

7. Корректный robots.txt

Кто не знал, файл robots.txt содержит правила индексирования сайта. Он обязательно должен лежать в корне сайта. Минимальное содержимое файла:

	 User-Agent: *
	 Host: https://ydmitry.ru
	 Sitemap: https://ydmitry.ru/sitemap.xml

Host должен указывать на адрес главного зеркала. Sitemap - на адрес файла сайтмап, о нем в следующем разделе.

С помощью директив Allow можно указать разделы и страницы, доступные для индексирования. Disallow - соответственно на запрет индексирования. 

Как правило, для тестовых доменов, на которых ведется разработка сайта, ставится запрет на индексацию поисковыми системами (Disallow: /). Это уже не плохо. Знали бы вы сколько раз я сталкивался с ситуацией, когда тестовый сайт обгонял в поисковой выдаче основной, особенно если по нему не велись работы по SEO продвижению ранее.

Но частенько после переноса сайта с тестового домена на продакшен запрет на индексацию забывают убрать. Ну и сайт быстро перестает индексироваться и пропадает из поисковой выдачи (или не появляется в ней).

8. Сформирован и корректен sitemap.xml

sitemap.xml - специальный файл, который помогает поисковым системам определить как устроен контент на сайте.

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

Его стоит использовать в нескольких случаях:

  1. Большое количество страниц. Например, крупные интернет-магазины.
  2. Большой архив страниц, не связанных друг с другом. Например, новости.
  3. Недавно созданный сайт. 

Для разработчиков: нужно знать, что большинство популярных CMS содержат инструменты для автоматической генерации файлов sitemap. Достаточно настроить правила формирования.

В 1С-Битрикс, например, этот функционал находится в разделе Маркетинг - Поисковая оптимизация.

Генератор sitemap 1С-Битрикс

9. Корректно отрабатывается 404 ошибка

Тут все просто. Есть всего два правила: 

  1. При переходе на несуществующую страницу сайта должна открываться спец страница  с описанием 404 ошибки. Контент страницы не важен. Могу только посоветовать разместить на странице блоки, которые помогут пользователю найти нужную информацию.
  2. При переходе на 404 страницу должен быть 404 код ответа сервера - "Страница не найдена". Часто вместо 404 возвращают 200 код - "ОК". Это критично и мешает поисковикам определить несуществующие страницы.

10. Отсутствуют битые ссылки

Это нужно будет проверять с помощью специальных инструментов. Главная идея, думаю, понятна. 

Проблема супер актуальна при редизайне, когда есть необходимость в изменении структуры сайта. В старых новостях, статьях и акциях могут содержаться ссылки на перенесенные страницы и разделы. Как вариант решения проблемы: указание 301 редиректов со старых страниц на новые, либо удаление битых ссылок.

11. Для перехода между страницами используются только теги A

Современные сайты перенасыщены интерактивными элементами. Хорошо хоть flash остался далеко в прошлом. Очень большой саблазн реализовать переходы между страницами сайта на JS. Это не позволит поисковым роботам проходить по ссылкам, что негативно повлияет на индексацию сайта.

12. Отсутствие iframe

Если честно, этот пункт взят из списка распространенных ошибок Яндекса. Кстати, ознакомьтесь с этим списком тоже. Ifram-ы я не видел с тех пор, как еще в школе делал сайты в Microsoft Word (напиши комментарий, если тоже так делал; какой это был сайт?). Ну, наверно, для кого-то еще актуально.

Главная идея - контент в айфреймах не индексируется. Поэтому, что бы вы в него не поместили, эта информация невидима для поисковиков.

13. Приоритет мобильности и https

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

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

Если ваш сайт работает по http, очень советую обратиться к SEO специалисту за консультацией. Он подскажет как правильно провести процедуру переезда сайта (с http://ваш_домен на https://ваш_домен). Сразу предупрежу, процесс местами болезненный, Яндекс, например, пишет, что не гарантирует сохранение позиций в поисковой выдаче.

Переезд сайта Яндекс

14. Социальные meta-теги

Непосредственного отношения к продвижению сайта этот пункт не имеет, но имеет косвенное. Активность в социальных сетях влияет на ранжирование в поисковых системах, в частности в Google. Для того чтобы поднять активность, нужно подготовить контент вашего сайта для публикации в социальных сетях.

Для того, чтобы ссылки на сайт хорошо отображалась, необходимо формировать на странице специальные meta-теги. Про них я писал в отдельной статье. В итоге, при вставке ссылки на любую страницу сайта соцсети должны формировать красивые богатые ссылки.

Богатые ссылки в социальных сетях

15. На сайте должен быть favicon

favicon.ico - это такая картинка 16 на 16 пикселей, которая отображается во вкладке браузера. 

favicon сайта evernote

А также в некоторых поисковых системах.

favicon в поиске

Для того, чтоб подключить фавикон на странице, нужно внутри head ставить следующий код: 

 <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">

16. Структурированный и форматированный текст

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

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

Поисковые системы, как ни странно, тоже любят хорошо структурированный текст. Тут можно было бы упомянуть про теги strong, i, b, em - они помогают расставить смысловые акценты в тексте. Но это скорее вотчина контент-редакторов и SEO-специалистов, поэтому подробно разбирать их не будем.

Заключение.

На самом деле, я в этой статье намеренно обошел много вопросов, например микроразметку, скорость загрузки страниц и оптимизацию изображений. Одни вопросы слишком просты, чтоб их выделять в отдельный пункт, другие наоборот, тянут на отдельную статью (shema.org). В любом случае, здесь я собрал именно те рекомендации, которым может следовать каждый веб-разработчик/дизайнер/менеджер проекта в процессе работы над сайтом. И, что важно, именно те пункты, которые не так просто будет испортить контент-редактором Заказчика :)

Особая благодарность Камалову Владу за дельные советы по усовершенствованию статьи.
Дмитрий Языков

Дмитрий Языков

Помогаю развивать интернет-проекты. Пишу про веб-разработку, маркетинг и дизайн.

Подпишись на меня в Телеграм, не пропускай новые статьи

К портфолио