SEO для разработчиков: как оптимизировать код и сайт
Поисковая оптимизация (SEO) — это не только задача маркетологов. Разработчики также играют ключевую роль в повышении видимости сайта в поисковых системах. Оптимизированный код и структура сайта помогают быстрее индексироваться и занимать более высокие позиции в поисковой выдаче.
Оптимизация кода
Чистый и семантический код
Поисковые системы, такие как Яндекс или Google, анализируют HTML-код, чтобы понять содержание страницы. Чистый и семантический код помогает поисковым ботам правильно интерпретировать структуру сайта.
Чтобы верстка вашего проекта была чистой и семантической:
- Используйте семантические HTML-теги
(<header>, <article>, <section>, <nav>)вместо<div> - Сокращайте количество ненужных
<div>и<span> - Проверяйте код на валидность через валидаторы, например, через W3C Validator
О дивный старый <div>
div – это сокращение от английского слова division, которое переводится как раздел, часть. Раньше этот тег встречался повсюду. По сути своей, он лишь указывал на создание нового раздела в документе и никакими дополнительными семантическими свойствами не обладал. Но, со временем, он растерял свою популярность.
Стоит ли использовать <div> в верстке?
Его можно использовать в качестве «оберточного» элемента. Например, для расположения элементов на странице, т.е. создания сетки. Использование <div> для смысловых блоков нежелательно и является плохой практикой.
Заменить <div> на семантические аналоги везде, где это возможно.
Зачем нужна семантическая верстка?
Семантическая верстка является хорошей практикой по нескольким причинам:
- Облегчает задачу скринридерам и экранным лупам. Это, в свою очередь, улучшает пользовательский опыт людей, испытывающих определенные трудности со зрением. Благодаря такой верстке, ускоряется навигация по странице и пользователь сможет беспрепятственно перемещаться, например, по заголовкам, кнопкам и спискам на странице, что существенно облегчает и ускоряет поиск информации на сайте.
- Улучшает читаемость и, следовательно, облегчает поддержание кода. Помогает избежать написания ненужных строк, благодаря нативному поведению элементов и рефакторинга (переписывания) кода при улучшении доступности сайта.
- Повышение доступности также улучшает позиции страницы при ранжировании поисковых запросов. Другими словами, сайты с доступным интерфейсом отображаются выше в поисковых результатах.
Оптимизация скорости загрузки сайта
Скорость загрузки сайта — это один из ключевых факторов, который напрямую влияет на пользовательский опыт и поисковую оптимизацию (SEO). Чем быстрее загружается ваш сайт, тем больше шансов, что пользователи останутся на нем, а поисковые системы будут его оценивать выше.
Почему PageSpeed Insights и Core Web Vitals важны
PageSpeed Insights — это инструмент от Google, который анализирует сайт и дает рекомендации по улучшению скорости загрузки. Он предоставляет оценку в баллах (от 0 до 100), а также делится детальными отчетами о том, что можно улучшить. Этот инструмент учитывает как мобильную, так и десктопную версии сайта, позволяя владельцам сайтов увидеть, где необходимы улучшения.
Core Web Vitals — это набор метрик, которые Google использует для оценки качества пользовательского опыта на сайте. Они включают в себя три ключевых показателя:
- Largest Contentful Paint (LCP) — время загрузки самого крупного видимого элемента на странице (например, изображения или текста). Google рекомендует значение LCP меньше 2.5 секунд.
- First Input Delay (FID) — время задержки между первым взаимодействием пользователя с сайтом (например, кликом на кнопку) и реакцией сайта. Рекомендуется значение FID меньше 100 миллисекунд.
- Cumulative Layout Shift (CLS) — мера неожиданного сдвига элементов на странице, который может привести к плохому пользовательскому опыту. Рекомендуется, чтобы CLS был ниже 0.1.
Минификация кода
Чтобы ускорить загрузку страниц, необходимо минимизировать файлы CSS, JavaScript и HTML.
Минификация кода — это процесс удаления всех ненужных символов из исходного кода без изменения его функциональности. К таким символам относятся пробелы, комментарии, символы новой строки и т. д.
Оптимизация изображений
Изображения могут существенно замедлять загрузку страницы, поэтому важно оптимизировать их. Используйте современные форматы изображений, такие как WebP или AVIF, которые обеспечивают более высокую степень сжатия при сохранении качества.
Кроме того, внедрение методов lazy loading, когда изображения загружаются только по мере прокрутки страницы, также поможет ускорить загрузку.
Подробнее об оптимизации изображений читайте в статье «Работа с изображениями в HTML»
Адаптивность и оптимизация для мобильных
Google, так же как и 63.41% пользователей интернета, отдаёт приоритет мобильным версиям сайтов (Mobile-First Indexing). Если сайт плохо адаптирован под мобильные устройства, он может потерять позиции в поиске.
Чтобы страница правильно масштабировалась на мобильных устройствах, убедитесь что в вашем html файле прописан мета-тег viewport:
<meta name="viewport" content="width=device-width, initialscale=1.0" />Правильная настройка метатегов и заголовков
Заголовки (h1-h6), мета-описания и теги помогают поисковикам правильно понимать страницу.
- Каждая страница должна иметь уникальный
<title>(50–60 символов) и<meta description>(150–160 символов). - Заголовок
<h1>должен быть единственным на странице и содержать ключевые слова. - Используйте
alt-теги для изображений, чтобы поисковые системы могли их индексировать. - Добавьте разметку
Open GraphиTwitter Cardsдля корректного отображения в соцсетях.
Что такое мета-теги
<meta> теги, в отличие от других тегов, не обозначают какой-либо отдельный элемент на странице. Вместо этого они предоставляют дополнительную информацию о сайте и конкретной странице для поисковых систем и социальных сетей.
Скорее всего, вы хоть раз отправляли ссылку на какой-либо сайт через мессенджеры, где через пару секунд после ввода ссылки появлялось изображение сайта, его заголовок и краткое описание страницы.
Представим, что вам нужно приобрести какой-то товар в интернет-магазине. Вы вводите название бренда и модель, например в Google. Перед вами появляется множество ссылок на сайты с указанным товаром. В большинстве случаев, будут указаны не только подходящее название и описание товара, но и его рейтинг и даже цена. Все это возможно благодаря <meta> тегам.
Другими словами, мета-теги помогают таким поисковикам как Google или Яндекс правильно интерпретировать содержание вашей страницы, используя для этого мета-данные.
Теги <meta> добавляются в раздел <head> вашего HTML-документа.
Основные мета-теги
| Мета-тег | Описание |
|---|---|
<meta charset='UTF-8'> | указывает кодировку символов страницы. Наиболее распространенные значения: UTF-8 для Unicode и ISO-8859-1 для латинского алфавита |
<meta name='robots' content='index,follow'> | сообщает поисковым системам, какие страницы индексировать и связывать ли ваш сайт со ссылками указанными на нем. |
<title>Название</title> | указывает поисковику на название страницы |
<meta name="description" content="Описание"> | используется для краткого описания страницы, отображается в результатах поиска |
<meta name='viewport' content='width=device-width, initialscale=1.0'> | отвечает за правильное отображение страницы на мобильных устройствах |
Структура сайта
ЧПУ (человекопонятные URL)
Структура URL должна быть понятной для людей и поисковых систем. Избегайте длинных и сложных URL с параметрами. При необходимости можете использовать редиректы 301 для перенаправления старых страниц на новые, если изменились URL.
Пример человекопонятного URL:
srkdesign.pro/blog/seo-for-developers/Пример перегруженного параметрами URL:
srkdesign.pro/blog/?post=seo-for-developers?category=otherКак правильно настроить robots.txt и sitemap.xml
Файл robots.txt помогает управлять тем, какие страницы могут индексироваться поисковиками. Чтобы подключить robots.txt достаточно разместить его в корневой папке сайта.
User-agent: *
Disallow: /admin/
Allow: /
Sitemap: https://primer-sayta.com/sitemap.xmlЕсли вы хотите, чтобы страница сайта или ссылки на ней не индексировалась, можете добавить соответствующее правило в файл или прописать мета-тег на самой странице с нужными параметрами.
<meta name="robots" content="noindex, nofollow" />indexявляется значением по умолчанию и означает, что страница будет индексироваться (учитываться при поиске) и появится в результатах поиска.noindexуказывает на то, что страница не будет индексироваться, что полезно для страниц, находящихся в разработке или предназначенных только для администраторов.follow, так же как и index, является значением по умолчанию. Он означает, что все ссылки на странице будут проанализированы, и будут учтены поисковыми системами.- если вы не хотите, чтобы ссылки на странице учитывались, замените значение параметра на
nofollow.
Карта сайта sitemap.xml упрощает индексацию, указывая поисковым ботам на важные страницы. Карта сайта помогает поисковым системам быстрее находить и индексировать контент.
Ссылка на карту сайта указывается в robots.txt, а также добавляется в Google Search Console и Яндекс.Вебмастер для более быстрой индексации сайта.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://primer-sayta.com/</loc>
<lastmod>2025-03-18</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
</urlset><loc>(Location) - указывает URL страницы.<lastmod>(Last Modified) - показывает дату последнего обновления страницы (необязательный, но полезный тег).<changefreq>(Change Frequency) - сообщает поисковикам, как часто страница обновляется (always, hourly, daily, weekly, monthly, yearly, never).<priority>- задаёт приоритет индексации (от 0.0 до 1.0, где 1.0 — самая важная страница).
Канонические ссылки и борьба с дублями
Каноническая ссылка (canonical) — это специальный HTML-тег, который добавляется в раздел <head>. Канонический тег помогает избежать проблем с дублирующимся контентом, указывая поисковым системам, какая версия страницы является основной.
<link rel="canonical" href="ссылка_на_каноническую_страницу" />Если у вас есть несколько версий одной страницы (например, с параметрами в URL или протоколами http и https), канонический тег помогает избежать разделения SEO-ценности между ними.
Внутренние ссылки и перелинковка
Перелинковка — это создание ссылок между страницами на сайте. Перелинковка помогает поисковым системам лучше индексировать страницы и улучшает видимость в поиске.
Важно связывать страницы по теме и не перегружать контент ссылками. Это улучшает навигацию для пользователей и помогает поисковикам понять, какие страницы на сайте наиболее важные.
Тупиковая статья (Dead-end Page) — это страница на которой нет внутренних ссылок, ведущих к другим страницам сайта.
Посетители, попавшие на такую страницу, не могут перейти ни на одну другую, что затрудняет навигацию и может ухудшить пользовательский опыт. Для поисковых систем такие страницы проблемные, так как они не помогают передавать “вес” другим страницам сайта и могут замедлить индексацию.
В идеале, каждая страница должна содержать хотя бы несколько внутренних ссылок, чтобы улучшить навигацию и SEO.
Регулярно проверяйте сайт на битые ссылки, чтобы сохранить эффективность перелинковки.
Индексирование сайта в Google Search Console и Яндекс.Вебмастере
Google Search Console (GSC) — это бесплатный сервис от Google для мониторинга и оптимизации сайта в поисковой выдаче.
Яндекс.Вебмастер — это бесплатный инструмент от Яндекса, аналог Google Search Console.
Оба инструмента позволяют:
- проверять индексирование страниц
- отслеживать поисковые запросы, по которым сайт появляется в результатах
- находить и исправлять ошибки индексации, дубли контента и страницы с кодом 404.
Обычно сайты в GSC и Вебмастер добавляют для того, чтобы сайт быстрее индексировался соответствующими поисковыми системами. Однако, скорость индексации нового домена может варьироваться.
В моем случае, Google начал корректно индексировать сайт на новом домене спустя 1,5 месяца после его добавления в GSC, тогда как Яндекс справился с этим примерно за 10 дней
Наличие счетчика Яндекс.Метрики может ускорить индексацию страниц в Яндексе
Источники
Опубликовано: 21 мар. 2025 г.