Адаптивные изображения для чайников или как корректно использовать атрибут
srcset тега img
srcset тега img
Адаптивные изображения — стандарт для современных сайтов. Его поддерживают все браузеры, кроме Internet Explorer и Opera Mini, а Google прямо рекомендует использовать эту технологию. Но иногда у верстальщиков и SEO-специалистов возникают трудности с корректным внедрением атрибута srcset, что приводит, например, к неправильной индексации картинок поисковыми роботами.
В этой статье обсудим, как работают адаптивные изображения, почему браузер выбирает именно такую версию картинки, а не любую другую и как грамотно задать условия в sizes.
В этой статье обсудим, как работают адаптивные изображения, почему браузер выбирает именно такую версию картинки, а не любую другую и как грамотно задать условия в sizes.
Содержание
В чем суть адаптивных изображений
Почему картинки шириной 320px никому не нужны
Как браузер обрабатывает тег img с атрибутом srcset
Как атрибут sizes позволяет контролировать работу браузера
Как самостоятельно сформировать sizes
Адаптивные иллюстрации и SEO
Почему картинки шириной 320px никому не нужны
Как браузер обрабатывает тег img с атрибутом srcset
Как атрибут sizes позволяет контролировать работу браузера
Как самостоятельно сформировать sizes
Адаптивные иллюстрации и SEO
- Индексация иллюстраций
- Кол-во иллюстраций в srcset
- Увеличение веса страницы
- Адаптивные иллюстрации в AMP
В чем суть адаптивных изображений
Корги в большой опасности, судя по приближающемуся локомотиву
Мы сделали фотографию и хотим опубликовать ее в блоге. Фото шириной 5130px весит 3Мб. PageSpeed Insights отнимет у нас попугаев, если выложить его как есть.
Можно сократить ширину иллюстрации и опубликовать ее в уменьшенном виде. Но тогда наше фото как пользователи, так и поисковые роботы увидят в сжатом качестве.
Cделаем умнее: нарежем иллюстрацию на несколько копий и предложим браузеру выбрать нужную.
Можно сократить ширину иллюстрации и опубликовать ее в уменьшенном виде. Но тогда наше фото как пользователи, так и поисковые роботы увидят в сжатом качестве.
Cделаем умнее: нарежем иллюстрацию на несколько копий и предложим браузеру выбрать нужную.
<img srcset="dog-640.jpg 640w,
dog-920.jpg 920w,
dog-1280.jpg 1280w,
dog-1600.jpg 1600w"
src="dog.jpg" alt="Пёсик"> Теперь Chrome не будет загружать три мегабайта, когда пользователь заходит с iPhone SE с шириной экранчика 320px.
Многие статьи по адаптивным изображениям на SEO-ресурсах заканчиваются где-то на этом моменте. Кто-то еще про sizes коротко рассказывает, мол, разберетесь. Из-за этого ни оптимизаторы, ни верстальщики зачастую не понимают, что вообще у себя на сайте внедряют. Углубимся в теорию.
Многие статьи по адаптивным изображениям на SEO-ресурсах заканчиваются где-то на этом моменте. Кто-то еще про sizes коротко рассказывает, мол, разберетесь. Из-за этого ни оптимизаторы, ни верстальщики зачастую не понимают, что вообще у себя на сайте внедряют. Углубимся в теорию.
Почему картинки шириной 320px никому не нужны
Если я открою сайт, где картинка растянута на всю ширину (100% viewport), то она займет 360 CSS-пикселей (тех, с которыми оперируют верстальщики). Но разрешение моего экрана не 360 каких-то там абстрактных пикселей, а 1080 реальных!
В этом весь фокус. Число физических (реальных) пикселей равно числу CSS-пикселей, умноженному на соотношение пикселей (pixel ratio).
Век экранов, у которых число реальных и CSS-пикселей совпадает, давно кончился. Помните, когда-то Apple революционно вышла на рынок с ретина-дисплеями? Это когда pixel ratio — 2. На Samsung Galaxy S6 2015 года соотношение физических пикселей к CSS-пикселям 4! Большинство китайских смартфонов сегодня — это pixel ratio 2-3.
А значит, если у нас на мобилке картинка занимает 360px, нет смысла загружать иллюстрацию шириной меньше, чем 360×2=720px! А обладатель корейского флагмана был бы не против и все 1440px загрузить.
Век экранов, у которых число реальных и CSS-пикселей совпадает, давно кончился. Помните, когда-то Apple революционно вышла на рынок с ретина-дисплеями? Это когда pixel ratio — 2. На Samsung Galaxy S6 2015 года соотношение физических пикселей к CSS-пикселям 4! Большинство китайских смартфонов сегодня — это pixel ratio 2-3.
А значит, если у нас на мобилке картинка занимает 360px, нет смысла загружать иллюстрацию шириной меньше, чем 360×2=720px! А обладатель корейского флагмана был бы не против и все 1440px загрузить.
Запомнить: когда рассчитываем необходимое качество изображения, надо учитывать соотношение пикселей девайса.
Как браузер обрабатывает тег img с атрибутом srcset
В общих словах алгоритм такой: сначала браузер определяет ширину иллюстрации, которую та занимает в верстке (CSS-пиксели). Затем умножает это значение на pixel ratio устройства и получает реальную ширину — ровно такую картинку надо загрузить на устройство, чтобы пользователь увидел изображение в максимальном качестве.
Далее браузер идет в массив srcset, где ищет подходящую картинку. Например, идеальной была бы ширина 1032px, но есть только 1200px и 960px. Браузер возьмет 1200px, так как это подходящее значение (обычно браузер берет первое изображение, которое больше размера выбранного слота).
На демо-странице #1 вы можете потестировать, как браузер выбирает иллюстрацию при изменении pixel ratio устройства. Ширина картинки равна 360px и не зависит от device-width.
Основная иллюстрация ушла в src, в srcset я указал копии шириной 360px, 720px, 1080px, 1920px. На атрибут sizes пока не обращайте внимания.
Далее браузер идет в массив srcset, где ищет подходящую картинку. Например, идеальной была бы ширина 1032px, но есть только 1200px и 960px. Браузер возьмет 1200px, так как это подходящее значение (обычно браузер берет первое изображение, которое больше размера выбранного слота).
На демо-странице #1 вы можете потестировать, как браузер выбирает иллюстрацию при изменении pixel ratio устройства. Ширина картинки равна 360px и не зависит от device-width.
Основная иллюстрация ушла в src, в srcset я указал копии шириной 360px, 720px, 1080px, 1920px. На атрибут sizes пока не обращайте внимания.
<img srcset="dog-360.jpg 360w,
dog-720.jpg 720w,
dog-1080.jpg 1080w,
dog-1920.jpg 1920w"
sizes="360px" src="dog.jpg" alt="Пёсик" >Спойлер ;)
Отмечу, что вместо px в srcset используется w — дескриптор ширины. Это очень удобно, если запомнить, что w — это реальные пиксели, а px — CSS-пиксели, и тогда работа srcset/sizes станет еще понятнее.
Вместо дескриптора ширины (w) может использоваться дескриптор плотности пикселей (x), когда мы говорим браузеру, что вот эта картинка для обычных устройств, а эта — для ретина-дисплеев. Но встречаю я такое редко, так что вернемся к нашей иллюстрации на демо-странице.
Вместо дескриптора ширины (w) может использоваться дескриптор плотности пикселей (x), когда мы говорим браузеру, что вот эта картинка для обычных устройств, а эта — для ретина-дисплеев. Но встречаю я такое редко, так что вернемся к нашей иллюстрации на демо-странице.
Тестировать работу адаптивных изображений очень удобно с помощью инструментов разработчика Google Chrome.
1
Нажмите F12, перейдите во вкладку Network.
2
Выберите фильтр Img. Так мы будем видеть все иллюстрации, которые загружает браузер вместе со страницей.
3
В левом верхнем краю панели разработчика — иконка со смартфоном. С помощью этой функции мы можем смотреть на сайт с экрана смартфона, планшета и вообще любого устройства.
4
Слева вверху появляется панель настройки девайса. Из выпадающего списка можно выбрать конкретное устройство, но мы сами зададим параметры экрана, поэтому выбираем Responsive. Указываем ширину 360, высоту 640. Справа будет параметр DPR — это как раз device pixel ratio. Если вдруг параметр не отображается, нажмите на три точки еще правее и выберите Add device pixel ratio.
5
Выберите DPR = 1.0 и перезагрузите страницу (Ctrl+Shift+R). В табличке справа увидите название иллюстрации, которую загрузил браузер. Затем повторите эксперимент с DPR 2.0 и 3.0. Браузер последовательно загрузит картинки шириной 360, 720 и 1080 пикселей.
Затем задайте ширину и высоту девайса 1920x1080px. При DPR 3.0 по-прежнему загружается dog-1080.jpg.
А теперь перейдите на демо-страницу #2. На ней все то же самое, однако в теге img нет атрибута sizes. Для смартфона с device-width 360px и DRP 3.0 по-прежнему загружается иллюстрация на 1080px, однако для десктопа 1920x1080px — уже, почему-то, версия на 1920px.
Картинка по-прежнему занимает 360 CSS-пикселей, device pixel ratio по-прежнему 3, однако браузер почему-то грузит слишком большую картинку. Причина — в отсутствии атрибута sizes. Если он не заполнен, то по умолчанию используется значение 100vw. То есть браузер считает, что такая картинка занимает 100% device width.
Так как мы загружаем страницу с шириной экрана 1920px, браузер полагает, что и картинка с песиком занимает 1920px в ширину, а значит, надо скачивать самую большую иллюстрацию из массива srcset.
Картинка по-прежнему занимает 360 CSS-пикселей, device pixel ratio по-прежнему 3, однако браузер почему-то грузит слишком большую картинку. Причина — в отсутствии атрибута sizes. Если он не заполнен, то по умолчанию используется значение 100vw. То есть браузер считает, что такая картинка занимает 100% device width.
Так как мы загружаем страницу с шириной экрана 1920px, браузер полагает, что и картинка с песиком занимает 1920px в ширину, а значит, надо скачивать самую большую иллюстрацию из массива srcset.
Запомнить: без атрибута sizes браузер подберет картинки из srcset некорректно.
Как атрибут sizes позволяет контролировать работу браузера
При первичной калькуляции браузер не знает ширину изображения в верстке страницы. Чтобы понять размер картинки в CSS-пикселях, браузер изучает значение атрибута sizes.
Теперь мы можем полностью описать алгоритм работы с отзывчивыми изображениями:
Теперь мы можем полностью описать алгоритм работы с отзывчивыми изображениями:
1
Браузер дошел до тега <img>. Он знает только device-width и pixel ratio — это исходные параметры устройства.
2
Браузер считывает условия в атрибуте sizes, сверяя их со значением device-width. Делает он так до первого истинного условия.
3
Зная ширину картинки в CSS-пикселях (из sizes) и pixel ratio, браузер высчитывает необходимую ширину иллюстрации в реальных пикселях.
4
Браузер идет в srcset и из массива изображений подбирает подходящее по ширине.
Задача верстальщика — с помощью медиа-запросов корректно описать размер иллюстрации в CSS-пикселях в разных состояниях верстки. Если на десктопе картинка занимает 560px, а на мобилке 100% ширины экрана, то ровно это и надо рассказать браузеру с помощью sizes.
sizes="(max-width: 560px) 100vw, 560px"В примере браузер считает такую информацию: если device-width меньше или равен 560px, то картинка занимает 100% viewport, иначе — 560px. Когда пользователь зайдет на страницу с iPhone 8, то условие будет истинно и браузер поймет, что иллюстрация занимает 375 css-пикселей. А если человек загружает страницу с десктопа, то условие будет ложным, и браузер выберет второе значение — 560px.
Кстати, обратите внимание, что max-width — это именно меньше или равно. Некоторые верстальщики из-за этого совершают ошибку, когда описывают в sizes якорные значения, при которых состояние картинки уже изменилось.
В большинстве случаев достаточно последовательного использования max-width, но можно конструировать условия любой сложности.
При этом описывать состояние картинки при текущем медиа-запросе можно как с помощью CSS-пикселей (px), так и с помощью vw — доли области просмотра в %.
Кстати, обратите внимание, что max-width — это именно меньше или равно. Некоторые верстальщики из-за этого совершают ошибку, когда описывают в sizes якорные значения, при которых состояние картинки уже изменилось.
В большинстве случаев достаточно последовательного использования max-width, но можно конструировать условия любой сложности.
При этом описывать состояние картинки при текущем медиа-запросе можно как с помощью CSS-пикселей (px), так и с помощью vw — доли области просмотра в %.
sizes="((min-width: 600px) and (max-width: 1004px)) 84vw, (min-width: 1005px) 60vw, 100vw"Пример с NYTimes. Если device-width от 600px до 1004px включительно (планшет), то иллюстрация занимает 84%, если больше 1005px включительно (десктоп), то 60%, в иных случаях (смартфоны) — 100% viewport.
В качестве значения при медиа-запросе можно использовать и более сложные материи, например calc. Ниже пример sizes с одного из сайтов. В нем полностью описывается состояние иллюстрации при изменении device-width: например, если ширина экрана 1024px, то иллюстрация занимает (100% viewport - 504px) = 520px. Для этого используется calc.
В качестве значения при медиа-запросе можно использовать и более сложные материи, например calc. Ниже пример sizes с одного из сайтов. В нем полностью описывается состояние иллюстрации при изменении device-width: например, если ширина экрана 1024px, то иллюстрация занимает (100% viewport - 504px) = 520px. Для этого используется calc.
<img srcset="/640.jpg 640w,
/920.jpg 920w,
/1280.jpg 1280w,
/1600.jpg 1600w,
/1920.jpg 1920w"
sizes="(max-width: 360px) calc(100vw - 40px),
(max-width: 767px) calc(100vw - 60px),
(max-width: 1023px) calc(100vw - 208px),
(max-width: 1279px) calc(100vw - 504px),
(max-width: 1439px) calc(100vw - 640px),
640px"
src="original.jpg" alt="Текст альта" decoding="async" loading="lazy"> Деталь: в sizes можно одновременно использовать и vw, и px, тогда как в srcset используется дескриптор либо ширины (w), либо плотности (x).
Строго говоря, степень детализации sizes зависит только от дотошности верстальщика — если у вас создается всего две копии изображения шириной 640px и 1200px, то проще будет в sizes описать не реальные состояния верстки, а условия, при которых мы приказываем браузеру брать либо первое фото, либо второе.
Строго говоря, степень детализации sizes зависит только от дотошности верстальщика — если у вас создается всего две копии изображения шириной 640px и 1200px, то проще будет в sizes описать не реальные состояния верстки, а условия, при которых мы приказываем браузеру брать либо первое фото, либо второе.
Запомнить: с помощью sizes мы управляем браузером, указывая ему какую иллюстрацию подгружать в каком случае.
Как самостоятельно сформировать sizes
Прежде всего, попросите этим заняться верстальщика. Ситуация, при которой SEO-специалист описывает медиа-запросы, — скорее вынужденная, html-кодом должны заниматься профессионалы.
Но если по-другому никак, то вооружайтесь Chrome DevTools и скромными математическими познаниями — большего не понадобится. Для примера я вместе с вами сформирую sizes для популярного российского новостного сайта.
Наша задача — описать состояния основной иллюстрации в зависимости от ширины экрана пользователя. Сколько картинка занимает в верстке, если человек заходит с телефона? А если с планшета? И так далее.
Заходим в DevTools и выставляем начальное значение девайса: Responsive, 320px. Кликаем правой клавишей по иллюстрации, которая нас интересует, и выбираем пункт «Просмотреть код». В панели разработчика появится html-код, центрированный на нашем изображении. Наводим курсор на <img>, после чего браузер подсветит текущие размеры иллюстрации.
Но если по-другому никак, то вооружайтесь Chrome DevTools и скромными математическими познаниями — большего не понадобится. Для примера я вместе с вами сформирую sizes для популярного российского новостного сайта.
Наша задача — описать состояния основной иллюстрации в зависимости от ширины экрана пользователя. Сколько картинка занимает в верстке, если человек заходит с телефона? А если с планшета? И так далее.
Заходим в DevTools и выставляем начальное значение девайса: Responsive, 320px. Кликаем правой клавишей по иллюстрации, которая нас интересует, и выбираем пункт «Просмотреть код». В панели разработчика появится html-код, центрированный на нашем изображении. Наводим курсор на <img>, после чего браузер подсветит текущие размеры иллюстрации.
При ширине экрана 320px иллюстрация занимает 280px. Записываем и идем дальше, возьмем 360px. Теперь картинка занимает 320px. Чувствуете зависимость? По бокам от картинки — белые поля шириной 20px каждое, так что описать состояние иллюстрации можно формулой: calc (100vw - 40px).
Но как долго действует эта зависимость? Проще всего это выяснить, растягивая ширину нашего виртуального девайса. Выясняется, что где-то в районе 536px поля вокруг картинки увеличиваются. Находим точное значение — это 540px. При ширине девайса 541px, картинка по-прежнему занимает 500px, а не 501px, как мы планировали.
Но как долго действует эта зависимость? Проще всего это выяснить, растягивая ширину нашего виртуального девайса. Выясняется, что где-то в районе 536px поля вокруг картинки увеличиваются. Находим точное значение — это 540px. При ширине девайса 541px, картинка по-прежнему занимает 500px, а не 501px, как мы планировали.
Наш первый медиазапрос готов:
(max-width: 540px) calc(100vw - 40px)
Что переводится как «при ширине экрана меньше или равной 540px, картинка занимает 100% ширины экрана минус 40px».
Далее видим, что с 540px до 640px размер иллюстрации не меняется, увеличиваются только боковые поля. Это наше следующее условие:
Далее видим, что с 540px до 640px размер иллюстрации не меняется, увеличиваются только боковые поля. Это наше следующее условие:
(max-width: 640px) 500pxЭто самый простой способ формировать sizes: так как браузер последовательно проверяет все условия, мы выстраиваем медиа-запросы «лесенкой», плавно поднимая max-width вверх.
Текущий sizes у нас выглядит так:
Текущий sizes у нас выглядит так:
(max-width: 540px) calc(100vw - 40px),
(max-width: 640px) 500px При device-width 641px, картинка занимает 590px и в таком состоянии находится во всех остальных случаях. То есть даже появление левой и правой боковых колонок никак на ситуацию не влияют, можно сказать, что нам повезло.
Получаем финальный sizes:
Получаем финальный sizes:
sizes="(max-width: 540px) calc(100vw - 40px),
(max-width: 640px) 500px,
590px"Переводится это так:
1
Если ширина экрана устройства меньше или равна 540px, то вычти из нее 40px и получишь размер картинки в css-пикселях, иначе проверяй условие #2.
2
Если ширина экрана устройства меньше или равна 640px, то картинка занимает 500 css-пикселей, во всех остальных случаях — 590 css-пикселей.
Адаптивные иллюстрации и SEO
Индексация иллюстраций
С точки зрения поисковой оптимизации важно, чтобы в src была указана ссылка на изображение в максимальном качестве. Именно оно будет индексироваться поисковыми роботами. Таким образом можно получить преимущество над конкурентами, которые до сих пор ищут компромисс между качеством и скоростью загрузки.
Для примера обратимся к новостному сайту, на котором реализованы адаптивные иллюстрации. В src уходит картинка размером 1600x900px, в srcset, помимо прочего, указана ее копия 921x518px.
Теперь идем в Google и смотрим, какую версию проиндексировал робот. Оказывается — оригинальную.
Для примера обратимся к новостному сайту, на котором реализованы адаптивные иллюстрации. В src уходит картинка размером 1600x900px, в srcset, помимо прочего, указана ее копия 921x518px.
Теперь идем в Google и смотрим, какую версию проиндексировал робот. Оказывается — оригинальную.
Кол-во иллюстраций в srcset
Также разработчики зададут вопрос: сколько версий иллюстрации создавать для srcset?
Если верстаете что-то трудозатратное, например, лендинг или ключевую страницу вашего сайта, то стоит заморочиться максимально. Изучите все состояния картинки в верстке и сопоставьте эти данные с аудиторией сайта.
Например, в Яндекс.Метрике можно выяснить, что 41% визитов на сайт происходит с девайсов шириной 360 CSS-пикселей. Обычно это всякие Samsung.
Если верстаете что-то трудозатратное, например, лендинг или ключевую страницу вашего сайта, то стоит заморочиться максимально. Изучите все состояния картинки в верстке и сопоставьте эти данные с аудиторией сайта.
Например, в Яндекс.Метрике можно выяснить, что 41% визитов на сайт происходит с девайсов шириной 360 CSS-пикселей. Обычно это всякие Samsung.
Если на этом разрешении иллюстрация занимает 100vw, то есть 360px, то нам надо предусмотреть как минимум две копии иллюстрации: 720px и 1080px. 1440px тоже было бы неплохо, ведь именно на Samsung чаще всего встречаешь соотношение пикселей в 4.
Если подробно изучать аудиторию нет времени, воспользуйтесь стандартными пропорциями, которые рекомендовал в докладе об изображениях Demi Murych:
Если подробно изучать аудиторию нет времени, воспользуйтесь стандартными пропорциями, которые рекомендовал в докладе об изображениях Demi Murych:
640px.
920px.
1220px.
1920px уходит в src.
Увеличение веса страницы
Внедрение адаптивных изображений может увеличить объем загружаемых данных. Например, если раньше все пользователи сайта грузили одну-единственную картинку шириной 945px, то после внедрения отзывчивости владелец Samsung Galaxy S8 будет скачивать что-то в районе 360 × 4 = 1440px.
Чтобы прощупать самостоятельно, поиграйтесь с тестовой страницей #4. Там две картинки: первая шириной 945px, вторая — с несколькими копиями в srcset.
Если пользователь заходит с дешевого китайского смартфона (360px device-width, pixel ratio 2), то загрузится версия на 640px. В нашем случае 277 килобайтов против 498 — экономия 44%.
Чтобы прощупать самостоятельно, поиграйтесь с тестовой страницей #4. Там две картинки: первая шириной 945px, вторая — с несколькими копиями в srcset.
Если пользователь заходит с дешевого китайского смартфона (360px device-width, pixel ratio 2), то загрузится версия на 640px. В нашем случае 277 килобайтов против 498 — экономия 44%.
А вот если пользователь заходит с iPhone X (375px device-width, pixel ratio 3), то загрузится уже версия на 1200px. В нашем случае это на 265кб больше, то есть прирост объема на 53%.
Картинки в примере не оптимизированы, поэтому цифры такие большие. Но логика должна быть понятна: если у вас статья с десятью картинками, то пользователи с хорошими смартфонами будут скачивать очень много качественных иллюстраций, это надо учитывать при внедрении адаптивных иллюстраций на свой сайт.
Например, у нас есть статья с основной картинкой, которую пользователь загружает на первом экране. Для улучшения LCP нам выгодно, чтобы эта иллюстрация отрисовывалась как можно быстрее. Поэтому для нее мы прописываем srcset, в котором максимальное качество — x2. А остальные иллюстрации в статье — вплоть до x4, если так нужно.
Например, у нас есть статья с основной картинкой, которую пользователь загружает на первом экране. Для улучшения LCP нам выгодно, чтобы эта иллюстрация отрисовывалась как можно быстрее. Поэтому для нее мы прописываем srcset, в котором максимальное качество — x2. А остальные иллюстрации в статье — вплоть до x4, если так нужно.
Адаптивные иллюстрации в AMP
Бонус. Lazy loading с помощью заглушек в srcset
На srcset основана особая технология ленивой загрузки, которую проповедует уже упомянутый ранее Demi Murych. Если кратко: делаем всё, что было описано в этой статье, но только в srcset используем не реальные копии иллюстрации, а сверхлегкую заглушку. И только когда картинка подкрадывается к области просмотра пользователя, мы подменяем массив изображений в srcset на реальный с помощью скрипта.
Таким образом браузер загружает суперлегкую заглушку для иллюстраций, не попавших в поле зрения пользователя. Это позволяет ликвидировать недостаток адаптивных иллюстраций, связанный с увеличением общего объема картинок для пользователей с хорошими смартфонами.
И никаких проблем с индексацией: поисковый робот в srcset не заглядывает, используя лишь изображение максимального качества в src. Если заинтересовались, изучите соответствующее видео.
Полезные источники: MDN, Google Developers, WHATWG, Web.Dev.
Таким образом браузер загружает суперлегкую заглушку для иллюстраций, не попавших в поле зрения пользователя. Это позволяет ликвидировать недостаток адаптивных иллюстраций, связанный с увеличением общего объема картинок для пользователей с хорошими смартфонами.
И никаких проблем с индексацией: поисковый робот в srcset не заглядывает, используя лишь изображение максимального качества в src. Если заинтересовались, изучите соответствующее видео.
Полезные источники: MDN, Google Developers, WHATWG, Web.Dev.
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Мнение авторов гостевого поста может не совпадать с позицией редакции и специалистов компании Serpstat.
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Используйте лучшие SEO инструменты
Проверка обратных ссылок
Быстрая проверка обратных ссылок вашего сайта и конкурентов
API для SEO
Получите быстро большие объемы данных используя SЕО API
Анализ конкурентов
Сделайте полный анализ сайтов конкурентов для SEO и PPC
Мониторинг позиций
Отслеживайте изменение ранжирования запросов используя мониторинг позиций ключей
Рекомендуемые статьи
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити :)
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.