Техническая оптимизация сайта своими руками

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

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

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

Весь процесс технической оптимизации можно разделить на четыре раздела:

1. Настройка индексации страниц. 
2. Улучшение ранжирования страниц сайта.
3. Настройка корректного отображения контента и повышение удобства пользователей.
4.  Улучшение представления сайта в поиске.

Далее мы подробно рассмотрим каждый из этих пунктов.

Индексация страниц и элементов контента

Файл robots.txt

Файл robots.txt — это список указаний для роботов поисковых систем, который позволяет скрывать контент или, наоборот, делает его индексируемым для всех желающих. С помощью этого простого, но очень полезного файла можно:

Файл robots.txt содержится в корневом каталоге сайта (папке со всеми файлами ресурса) и выглядит следующим образом:

С помощью специальных команд-директив можно настроить выдачу страниц как в целом, так и для отдельных поисковых систем. Необходимые требования и рекомендации для файла robots.txt представлены на сервисах Яндекса и Google.

Карта сайта

Карта сайта способствует более полной индексации ресурса. Существуют HTML- и XML-карты сайта.

HTML-карта выглядит следующим образом:

Она позволяет:

XML-карта — это документ sitemap.xml, который хранится в корневой директории и содержит перечень ссылок на все важные страницы сайта и данные, необходимые поисковой системе. Например, такие:

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

Некоторые сайты вполне могут обойтись и без неё, однако для крупных и коммерческих проектов sitemap.xml — строго обязательная вещь.

Директива Noindex метатега robots

Чтобы запретить роботам поисковых систем индексировать страницу или даже часть текста на ней, необходимо прописать метатег robots с директивой noindex непосредственно в HTML-коде страницы, в элементе head. 

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

Дубли страниц: поиск и устранение

Если страница доступна по нескольким адресам, возникают дубли. Для улучшения индексации от них необходимо избавляться. Во-первых, нужно привести все адреса к единому виду. Как это сделать, сказано в разделе, посвящённом оптимизации URL. Кроме того, можно:

Редирект 301 — это перенаправление пользователя на другой сайт или страницу, настроить которое можно с помощью документа с расширением .htaccess.

Улучшение ранжирования страниц сайта

Сайты-зеркала

Зеркалами называются сайты с идентичным контентом, доступные по разным URL. Такие дублёры могут возникать автоматически, например, как версии сайтов с www и без. А могут и создаваться специально.

Зеркал у сайта может быть много, но главное — только одно. Именно оно будет учитываться в результатах поиска, и на него необходимо настроить редирект 301. Главное зеркало можно установить в Яндекс.Вебмастере, или же его самостоятельно выберет робот.

Оптимизация URL-адресов

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

Если таких адресов несколько, страницы будут считаться дублями и отрицательно повлияют на индексацию и оценку качества сайта поисковой системой.

Также следует обратить внимание на длину URL — слишком длинный будет негативно влиять на индексацию страницы. Особенно это касается инфостраниц и товарных карточек. В таком случае URL не должен содержать полное название страницы с ключевыми запросами (это, как правило, 5–6 слов), а его оптимальная длина будет 60–80 символов.

Ошибка 404

Ошибки случаются у всех, в том числе у сайтов во время загрузки, когда ресурс посылает запрос серверу. Сервер, в свою очередь, отвечает статус-кодом HTTP и либо загружает необходимую страницу, либо выдаёт всем знакомую надпись «ошибка 404».

Для начала разберемся в значениях основных статус-кодов:

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

Проверить статус-код можно с помощью сервисов bertal.ru и Яндекс.Вебмастер. Кроме того, страница, которую пользователь видит при коде 404, должна иметь ссылки на главную и основные разделы ресурса.

Битые ссылки

Битых ссылок, то есть ведущих на несуществующие страницы и файлы, на сайте быть не должно. Особенно это касается внутренних ссылок, поскольку они не только негативно влияют на ранжирование, но и снижают доверие пользователя к сайту.

Проверить площадку на наличие битых ссылок можно с помощью:

Устранение битых ссылок значительно улучшит техническую оптимизацию сайта и его SEO-продвижение. Кроме того, следует учитывать и проверять возможные сбои на сервере, в случае которых появятся различные 5xx статус-коды.

Метатег title

Как вы яхту назовёте, так она и поплывёт — это правило одинаково хорошо работает как с морскими судами, так и с сайтами. Хороший заголовок не только позволит заинтересовать читателя, но и положительно скажется на индексации ресурса.

Для роботов поисковых систем наиболее важен тег title. Он представляет собой заголовок сайта, который виден в списке выдачи поисковой системы или во вкладке браузера.

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

Для составления хорошего title есть следующие рекомендации:

Уникальные title также важны, чтобы избежать дублей. Это особенно актуально для страниц с описанием товаров, которые незначительно различаются между собой. Чтобы сделать метатеги разнообразнее, можно поменять слова местами или добавить уникальный id.

Заголовочные теги h1–h6

Заголовки h1–h6, в отличие от title, посетитель сайта увидит непосредственно на странице. Заголовок h1 является самым важным и используется только один раз для каждой страницы. Его задача — отобразить суть контента страницы и привлечь внимание читателя. Заголовки h2–h6 могут встречаться в тексте по несколько раз, в зависимости от его содержания. Они, условно говоря, соответствуют пунктам списка с иерархией:

В виде кода эти заголовки выглядят так:

К заголовкам h1–h6 также есть несколько простых требований:

Стоит добавить, что в h2–h6 должны присутствовать ключевые слова, однако заголовки при этом не должны терять читаемость и привлекательность.

Увеличение скорости загрузки сайта

Очевидно, что на удобство и популярность сайта влияет скорость загрузки. Существует несколько способов её увеличить.

Параметр скорости важен не только для конкретного пользователя, но и для роботов поисковых систем.

Использование JavaScript

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

Однако для правильной индексации сайта важно, чтобы весь основной контент корректно работал и при отключённом JavaScript. Проверить это можно с помощью:

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

Корректное отображение контента и повышение удобства пользователей

Вёрстка сайта

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

Хорошая вёрстка влияет не только на внешний вид ресурса (что особенно важно для сайтов-визиток), но и на скорость загрузки и соответствие площадки требованиям поисковой системы.

Есть три вида вёрстки.

1. Адаптивная вёрстка помогает оптимизировать сайт под мобильные устройства, о ней уже сказано в соответствующем разделе.
2. Табличная вёрстка организует структуру площадки в виде таблиц, где определённый элемент сайта будет соответствовать ячейке:

Такой способ довольно прост, однако его минус — сложная и объёмная структура кода, на изменение которой потребуется немало времени.

3. Более современным и гибким вариантом является блочная вёрстка:

Структура сайта создаётся с помощью блоков под тегом div, которые могут содержать изображения, текст и другие элементы.

CSS-код

CSS (Cascading Style Sheets) — это язык, с помощью которого можно описать внешний вид HTML- и XML-документов и задать для них определённые шрифты и цвета, а также разместить текст на изображениях. При этом CSS позволяет изменять стиль, не касаясь содержания документов, что существенно упрощает создание и обслуживание сайтов.

CSS-документ представляет собой текстовый файл style.css, который находится в той же папке, что и HTML-документы.

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

Оптимизация сайта под мобильные устройства

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

Автоматически оптимизировать сайт под планшеты и смартфоны позволяет адаптивная вёрстка. С её помощью ресурс будет доступен по единому URL с любого устройства и без необходимости создавать отдельно мобильную версию площадки.

Оценить качество адаптации сайта для мобильных устройств поможет сервис Google Search Console или Яндекс.Вебмастер.

Хлебные крошки

Хлебными крошками называется навигационная цепочка по которой пользователь, как дети в сказке братьев Гримм, может найти путь «домой» — на главную страницу сайта. Такая цепочка, как правило, строится по следующей схеме: главная страница — раздел — подраздел — страница. Однако, в зависимости от структуры сайта и контента, вид может меняться.

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

Улучшение представления сайта в поиске

То, как выглядит сайт на странице выдачи поисковой системы, во многом определяет, перейдёт пользователь по ссылке или нет. Для улучшения представления ресурса в ПС, помимо описанных выше способов (микроразметка, хлебные крошки, корректный title), есть ряд чуть менее значительных факторов, на которые тоже стоит обратить внимание.

Микроразметка

С элементами микроразметки наверняка сталкивался каждый, кто пользовался поисковыми системами:

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

Таким образом, использование микроразметки при технической оптимизации сайтов позволяет:

Всё это существенно повышает удобство сайта и его репутацию в глазах пользователя.

Фавиконка

Фавиконка — это тот маленький значок, который пользователь видит в левом верхнем углу сниппета или во вкладке браузера.

Оригинальный дизайн фавиконки повышает узнаваемость сайта и доверие пользователя.

Description

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

Сам метатег description располагается внутри тега head.

Главная задача этого тега — заинтересовать пользователя, чтобы он перешёл на ваш сайт. Это обязательно стоит учитывать при составлении такого описания.

Быстрые ссылки

Быстрые ссылки, расположенные в сниппете, делают представление сайта более информативным и удобным.

Такие ссылки формируются роботами поисковой системы автоматически, исходя из наиболее посещаемых разделов ресурса. Как правило, ссылки на эти разделы находятся в главном меню сайта.

Дополнительные данные

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

Подробнее разобраться в характере таких данных и особенностях их размещения можно с помощью сервиса Яндекс.Вебмастер.

Вся соль

Техническая оптимизация сайта не ограничивается описанным перечнем работ, существует масса тонкостей и дополнительных параметров. Например, требования к хостингу, распределение ссылочного веса и многое другое. Однако в первую очередь следует сосредоточиться на тех четырёх целях, о которых говорилось вначале:

1. Обеспечить индексацию страниц и элементов контента: прописать файл robots.txt, xml- и html-карты сайта, устранить дубли страниц.
2. Улучшить ранжирование страниц сайта: оптимизировать URL, настроить зеркало, устранить битые ссылки, прописать заголовки, оптимизировать скорость загрузки и работу ресурса при отключённом JavaScript.
3. Откорректировать отображение контента и повысить удобство площадки для пользователей: отобразить все элементы страницы с помощью корректной вёрстки, прописать хлебные крошки и оптимизировать сайт под мобильные устройства.
4. Улучшить представление сайта в поиске: добавить на сайт фавиконку, составить описание страниц с помощью тега description, настроить микроразметку и отображение дополнительных данных.

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