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

Какие технические факторы обсудим:

• Скорость загрузки сайта.
• Адаптивность верстки
• Наличие атрибута rel=”alternate”.
• Корректное отображение в разных браузерах.
• Отсутствие вирусов и вредоносного контента.
• Наличие атрибута ALT у изображений.

Сайт быстро загружается

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

Быстрая загрузка особенно важна для тех, кто заходит с мобильных устройств: интернет на телефоне не всегда быстрый. Согласно исследованию Google, если сайт загружается дольше 10 секунд, то вероятность того, что пользователь выйдет, увеличивается на 123%.

Как проверить скорость загрузки сайта

1. С помощью Google PageSpeed Insights. Вставьте ссылку на свою страницу в строку, сервис проанализирует скорость ее загрузки на мобильных устройствах и компьютерах. А еще вы получите рекомендации, как улучшить результат:

First Contentful Paint (FCP) — время загрузки контента. Чтобы улучшить этот показатель, попросите верстальщика удалить неиспользуемый код CSS.

First Input Delay (FID) — время, через которое пользователь сможет начать что-то делать на сайте. Для улучшения этого показателя, попросите верстальщика сократить объем JavaScript.

Largest Contentful Paint (LCP) — скорость загрузки самого большого изображения или текстового блока. Попросите верстальщика удалить лишний JavaScript, чтобы увеличить скорость загрузки.

Cumulative Layout Shift (CLS) — совокупный сдвиг верстки. В отчете Google покажет конкретные части макета, где верстка сдвигается. Поправьте их с верстальщиком.

2. С помощью Рingdom. Укажите ссылку на сайт и выберите локацию для проверки. Сервис покажет скорость загрузки, вес страницы и подскажет, как улучшить результат:

Чтобы увеличить скорость сайта, воспользуйтесь инструкцией из нашего блога.

Сайт корректно отображается на разных устройствах

Раньше люди посещали сайты в основном с компьютера или ноутбука, у которых ширина экрана не сильно отличается. Теперь же устройств с доступом в интернет стало намного больше: появились смартфоны, планшеты, умные часы, телевизоры со смарт-ТВ. Чтобы не терять покупателей, сайт должен быть одинаково удобен для экранов разной величины. Способность сайта подстраиваться под разные экраны называется адаптивностью.

Что такое адаптивность

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

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

Как проверить адаптивность страниц

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

1. Чтобы открыть инструменты, используйте горячие клавиши (Ctrl + Alt + I), либо кликните правой кнопкой мыши и выберите пункт «Исследовать элемент».

2. Нажмите на вкладку Responsive и выберите устройство, на котором нужно показать страницу:

Так страница будет выглядеть на iPhone X:

Нет

Да

С помощью сервиса Google Search Console. Укажите ссылку на страницу, сервис проанализирует, адаптивна ли она.

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

Используется атрибут rel=”alternate”

Тег rel=”alternate” показывает поисковым роботам, что у страницы есть версии на других языках. Благодаря этому атрибуту посетители из Германии получат страницу на немецком, а из России — на русском. 

Как найти rel=”alternate”

Атрибут rel=”alternate” располагается внутри тега <head> в HTML-коде страницы:

1. <link rel="alternate" hreflang="es" href="https://www.es.cheapflights.com" /> — страница на испанском языке.

2. <link rel="alternate"...> — контейнер для ссылки.

3. hreflang — на каком языке страница и для какого она региона.

4. href — ссылка.

Как проверить rel=”alternate”

1. Вручную. Откройте исходный код страницы (Ctrl + U) или правой кнопкой мыши → «Просмотр кода страницы». Затем начните поиск по странице (Ctrl + F) по сочетанию rel=”alternate”:

Чтобы внедрить на сайт rel=”alternate”, обратитесь к верстальщику.

Сайт корректно отображается в разных браузерах

Кроссбраузерность — это способность сайта отображаться одинаково хорошо во всех браузерах. HTML и CSS могут по-разному обрабатываться разными движками браузеров. Из-за этого бывает так, что анимация на баннере работает в Chrome, а в FireFox — нет.

Как проверить кроссбраузерность

Вручную. Посмотрите с помощью отчета в Яндекс.Метрике. Зайдите во вкладку «Отчеты» → «Технологии» → «Браузеры» и проверьте, с каких браузеров ваш сайт чаще всего посещают. Установите эти браузеры и откройте на них сайт. Элементы должны корректно отображаться, а верстка — не разваливаться.

Чтобы настроить кроссбраузерность, обратитесь к верстальщику.

На сайте нет вирусов и вредоносного кода

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

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

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

Что говорит о том, что на сайте могли появиться вирусы

1. При переходе на сайт из поисковой выдачи появляются предупреждения об угрозе безопасности:

2. Замедление скорости работы сайта. Например, сайт загружался за 2 секунды, а стал за 5.

3. Предупреждения от антивирусов.

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

Проверка сайта состоит из двух этапов:

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

2. Проверка кода. Нужно перепроверить все элементы сайта вручную и с помощью автоматических сервисов, о которых расскажем ниже.

Как проверить, то что на сайте нет вирусов

1. C помощью сервиса Яндекса:

2. С помощью Google:

3. С помощью сервиса от антивируса Dr.Web. Добавьте ссылку на сайт, и сервис покажет, есть ли на сайте вирусы или подозрительные перенаправления:

Бороться с небезопасными файлами помогают антивирусы. В блоге мы уже рассказывали о том, как работает Антивирус RU-CENTER, который может автоматически «вылечить» файлы.

Атрибут ALT у изображений

Атрибут ALT — обязательный элемент в теге <img> в HTML-коде сайта. Он передает роботу поисковой системы информацию о содержании картинки. Если у пользователя не будут открываться картинки на сайте, то вместо них высветится содержимое атрибута ALT. Также благодаря ALT изображения с сайта могут индексироваться в поиске по картинкам.

Как заполнить ALT

• Длина текста не больше 125 символов.
• Содержание атрибута описывает то, что изображено на картинке, или ее функцию:

<img src="kot.jpg" alt="Серый кот с голубыми глазами">;

<img src="kot.jpg" alt="Картинка для баннера">.

• Не должно быть спама вроде «Купить в Москве», «Скачать бесплатно».

Нет

<img src="fruits.jpg" alt="Купить фрукты в Химках">

Да

<img src="fruits.jpg" alt="Спелые апельсины и яблоки">

Чтобы поправить ALT, обратитесь к верстальщику.

Мы рассказали о самых популярных технических факторах ранжирования. В следующей части поговорим о внутренней оптимизации: тегах <title> и <description>, перелинковке и навигации.

Читайте также:

• 5 SEO-ошибок при создании сайта
• Почему сайт может просесть в выдаче и что с этим делать
• Как сделать правильную структуру сайта для SEO