Дизайн сайта как SEO фактор ранжирования в 2022. Неочевидные нюансы в дизайне

Дизайн сайта как фактор ранжирования в SEO

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

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

Адаптивный дизайн: блоки по высоте

• Шрифт;
• Высота строки.

• Вертикальные медиазапросы;
• Единицы измерения области просмотра.

@media (min-height: 500px) {
  .element {
    /* стили */
  }
}

/* ИЛИ */

@media (orientation: landscape) {
  .element {
    /* стили */
  }
}

• vw — ширина;
• vh — высота.

height: 25vh

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

• Медиазапросы;
• CSS-функции сравнения.

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

Примеры

1 — Перекрывающийся контент

• Задать изображениям фиксированные размеры: width, height. Часто задается только width. Отсутствие свойства height является причиной проблемы;
• Применять к верхнему разделу страницы свойство height: 100vh в случае, если высота области просмотра больше, например, 700px.

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /* Чтобы изображение не сжималось */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }
}

@media (min-height: 700px) {
.hero {
min-height: 100vh;
}
}

2 — Фиксированный заголовок страницы

@media (min-height: 700px) {
  .site-header {
    /* position: fixed */
  }
}

3 — Скрытие менее важных элементов

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

4 — Уменьшить интервал в элементах навигация

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

5 — Высота шапки на странице

.hero {
  padding-top: 24px;
  padding-bottom: 24px;
}

@media (min-height: 700px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

6 — Всплывающие окна

.modal__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
}

.modal__body {
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  width: 500px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
}

@media (min-height: 700px) {
  .modal__body {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

Выводы

• Напрямую через метрики поисковой системы, которые используются для оценки пригодности сайта под мобильные устройства;
• Через поведенческие факторы ранжирования сайтов.

• Учет отрисовки в окне по ширине и высоте;
• Скорость загрузки;
• Размещать главный контент выше в шаблоне страницы.