13 июля 2023 Статья №556

Делаем сайт, максимально дружелюбный для SEO — чек-лист

Используйте этот чек-лист, чтобы сделать сайт, идеально заточенный под SEO. Но сначала подпишитесь на наш Телеграм-канал. Там есть идеи, которые мы больше нигде не публикуем.

Почему мы пишем про SEO-дизайн сайтов?

Мы веб-студия ReConcept. Разрабатываем SEO-дружелюбные интернет-магазины и сайты компаний. Напишите нам в WhatsApp, когда вам это понадобится:

НАПИСАТЬ В WHATSAPP

Что такое SEO веб-дизайн?

SEO-дизайн — это когда сайт разрабатывают с учётом требований Google и Яндекс. Чтобы после запуска сайт лучше ранжировался и рос в поиске.

9 фишек SEO-дружелюбного веб-дизайна

Это и есть чек-лист, которому мы следуем при разработке SEO-сайтов.

1. Мобильный дизайн

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

Потому, что мобильные устройства становятся основным средством серфинга. Согласно данным Statista, на него приходится более 60% посещений.

Поэтому вашему сайту нужен адаптивный дизайн. Адаптивный дизайн использует один и тот же HTML-код и URL-адрес для всех устройств, но макет может меняться в зависимости от разрешения экрана устройства. Это метод рекомендует Google.

Вашим сайтом легко пользоваться со смартфона?

Вот что делает мобильный контент читабельнее:

Короткие абзацы
Подходящий размер шрифта (рекомендуется 16 пикселей для основного текста).
Много пустого пространства
Не делайте всплывающих окон
Короткие метатеги (50-60 символов для тегов заголовков и менее 120 символов для метаописаний).

Проверьте сайт на тесте Google Mobile-Friendly Test.

2. Скорость сайта

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

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

Обратите внимание на:

Правильный формат изображений: файлы JPEG и PNG много весят. Формат WebP — это современная альтернатива, позволяющая уменьшить размер файлов до 34%.

Сократите HTTP-запросы: HTTP-запросы загружают содержимое страницы: изображения, плагины и JavaScript. Чем меньше всего этого, тем выше скорость сайта.

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

Замеряйте скорость сервисом Google PageSpeed Insights. Он подскажет где неполадки.

3. Структура сайта

Интуитивно понятная структура сайта (архитектура) помогает посетителям ориентироваться. А Яндекс и Google лучше понимают ваш сайт.

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

На практике это позволяет создать структуру URL-адресов, интуитивно понятную для навигации.

Например, сайт про страны может содержать такой туристический раздел:

contries.com
- contries.com/turist
  - contries.com/turist/spain
    - contries.com/turist/spain/history
    - contries.com/turist/places
    - contries.com/turist/spain/culture
  - contries.com/turist/italy/
    - contries.com/turist/italy/history
    - contries.com/turist/italy/places
    - contries.com/turist/italy/culture
  - contries.com/turist/germany/
    - contries.com/turist/germany/history
    - contries.com/turist/germany/places
    - contries.com/turist/germany/culture

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

Это:

Упростит поисковым системам поиск и индексацию вашего контента.
Поможет пользователям понять взаимосвязь между страницами
Распределит SEO-рейтинг страниц с помощью контекстно-релевантных внутренних ссылок.

Мы уделяем большое внимание архитектуре наших сайтов. Это фишка нашей веб-студии. Напишите нам в WhatsApp, когда вам это понадобиться:

НАПИСАТЬ В WHATSAPP

4. Навигация и внутренние ссылки

Внутренние ссылки показывают поисковым системам структуру вашего сайта и помогают пользователям в навигации.

Существует два типа внутренних ссылок: навигационные и контекстные.

Навигационные ссылки есть на всем сайте: ссылки в верхнем и нижнем колонтитулах сайта и на панели навигации.

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

Важные правила внутренней переликовки:

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

Ваша ссылка должна понятно объяснять куда человек попадёт (анкор).

Используйте «хлебные крошки» (цепочка ссылок, по которым легко перемещаться), чтобы помочь пользователям ориентироваться на сайте.

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

5. Индексируемость и сканируемость

Оптимизированный SEO-сайт должен быть разработан таким образом, чтобы Google мог легко его найти и понять.

Сканируемость это насколько хорошо роботы Google получают доступ к страницам. Без внутренних ссылок Гугл не увидит часть страниц.

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

Используйте внутренние ссылки. На каждой странице есть хотя бы одна входящая ссылка с другой страницы на сайте.

Правильно используйте теги noindex: осторожно закрывайте индексацию страниц в robots.txt.

Отправьте карту сайта. Карта сайта — это небольшой файл, в котором перечислены все важные страницы сайта. Его создание и отправка через Google Search Console гарантирует, что сканеры увидят страницы вашего сайта.

6. Дизайн страницы и удобство сайта

Чтобы пользователям и Гуглу было удобно:

Создайте сигналы восприятия страницы: сигналы восприятия страницы Google измеряют, насколько хорошо страница соответствует ожиданиям пользователей. Ключевые сигналы: Core Web Vitals, удобство для мобильных устройств и HTTPS-шифрование.

Используйте правильные заголовки: Заголовки H1, H2 и т. д. помогают Google понять иерархию информации на странице. Правильно вложенная структура заголовков облегчает понимание.

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

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

7. Доступность

У Google есть собственные правила доступности:

Используйте альтернативный текст изображения. Альтернативный текст (alt) описывает изображение, чтобы программы чтения с экрана могли прочитать его вслух пользователям с нарушениями зрения.

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

Используйте читабельный шрифт. 16 пикселей и выравнивание по левому краю.

Запустите базовые тесты доступности сайта с помощью расширения браузера Google Lighthouse.

8. Разметка схемы

Разметка Schema — это язык структурированных данных, который описывает элементы на вашем сайте так, как их понимают поисковые системы.

Поисковые системы могут использовать схему для извлечения полезной информации со страниц непосредственно в результаты поиска (SERP). И показать много дополнительной информации.

Дополнительные визуальные или интерактивные элементы в поиске Гугл тоже получают с помощью микроразметки.

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

Используйте Помощник по разметке структурированных данных Google для создания схемы. Проверьте инструментом проверки расширенных результатов вашу работу.

9. Изображения

Оптимизация изображений для SEO даст дополнительный трафик из поиска по изображениям.

Google учит оптимизировать картинки в своем руководстве по оптимизации изображений:

Описательное имя файла. Замените общие, не описательные имена файлов (например, image123.jpg) кратким описанием изображения (например, black-ford-fucus.jpg).

Подходящий формат файла: используйте правильный формат для изображений в зависимости от их размера и качества, например PNG, JPEG и WebP.

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