Как проверить работоспособность вашего сайта после редизайна

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

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

Какие SEO-проблемы могут возникнуть после редизайна сайта

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

Проверьте сайт перед редизайном

Отличная вещь, которую вы можете сделать перед публикацией своего нового дизайна, — это запустить проверку работоспособности веб-сайта, чтобы вам было с чем сравнить позже. Во-первых, просканируйте и сохраните список всех страниц, чтобы убедиться, что они представлены на новом сайте. Помимо URL-адресов, вам необходимо сохранить важные данные, связанные с ними: метатеги, контент и т. д., чтобы убедиться, что на обновленном сайте ничего важного не было потеряно. Сбор данных вручную может быть затруднен, особенно для крупных веб-сайтов, но есть более простой способ — с помощью программного обеспечения для автоматической проверки работоспособности веб-сайта. Например, инструмент аудита веб-сайта SE Ranking проверяет и сохраняет статистику по каждой странице вашего сайта, чтобы вы могли видеть текущее состояние и историю изменений — вы можете сравнить весь веб-сайт или каждую страницу с ее предыдущим сканированием, что именно нам нужно. Мы будем использовать этот инструмент для демонстрации процесса, поскольку он проверяет веб-сайт по более чем 120 критериям одновременно, поэтому у вас есть все необходимые данные в одном месте.

Как проверить работоспособность сайта и выявить проблемы после редизайна

Лучший способ проверить работоспособность сайта после публикации новой версии — сравнить ее со старой. Для этого вам нужно запустить два обхода с аудитом веб-сайта SE Ranking: один до изменений и один после. Используя эти два обхода, вы сможете убедиться, что важные вещи по-прежнему доступны, а старые проблемы устранены. Давайте рассмотрим его подробно.

Основные проблемы, связанные с возможностью сканирования и индексации

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

• Код ответа, отличный от 200 (1)
  Если такого URL на сайте нет, код ответа 4xx; если страница была перенаправлена, код ответа 3xx; если есть какая-то ошибка на стороне сервера, код ответа 5xx. В любом из этих случаев страница не может быть загружена и показана пользователям, поэтому ее нельзя просканировать или добавить в индекс Google — убедитесь, что все важные страницы имеют код ответа 200.
• Страница заблокирована в robots.txt (2)
• Страница содержит метатег robots «noindex» (3)
• Канонический URL ссылается на другую страницу (4)

Чтобы проверить все эти проблемы одновременно, перейдите в раздел «Аудит веб-сайта» → «Просканированные страницы» и выберите соответствующие столбцы, чтобы увидеть проблемы с возможностью сканирования и индексации на одном экране.

структура URL

Редизайн не всегда связан с интерфейсом. Иногда это также влияет на конфигурацию серверной части и/или сервера. Если вы переходите на другую CMS или изменения влияют на структуру URL-адресов, вам необходимо убедиться, что новые URL-адреса совпадают со старыми, или соответствующим образом настроить перенаправления. Если вы этого не сделаете, старые URL-адреса будут иметь коды ответа 404, а новые страницы не будут наследовать доверие от старых страниц, поскольку они будут рассматриваться как совершенно новые страницы.

Кроме того, некоторые проблемы могут возникать независимо от пути к странице:

• Слэш в конце
  «…/example-url» — это не то же самое, что «…/example-url/». Если канонический URL-адрес не имеет косой черты в конце, посещение URL-адреса, заканчивающегося косой чертой, приведет к коду ответа 404, что не очень хорошо для SEO. Вам необходимо убедиться, что все ваши новые URL-адреса заканчиваются так же, как и старые, или соответствующим образом настроить канонические и редиректы.
• HTTP(S)
  Как и в предыдущей проблеме, включение/отключение SSL-соединений также влияет на структуру URL и может вызвать серьезные проблемы при неправильной настройке.
• www
  «www.example.com» не равно «example.com». Этот префикс обычно использовался в ранние времена всемирной паутины, чтобы указать, что веб-ресурс предназначен для публичного доступа.
  Технически говоря, «www.» является субдоменом, и Google рассматривает субдомен как другой домен, а не как папку. Если вы пытаетесь получить доступ к домену или субдомену, который не настроен должным образом, вы получите сообщение об ошибке, а также поисковые роботы. Чтобы избежать таких проблем, обязательно настройте перенаправления или добавьте теги rel=canonical, указывающие на предпочтительную версию вашего сайта.

Мета-теги

При публикации новой версии веб-сайта необходимо убедиться, что все оптимизированные метатеги старых страниц на месте. В противном случае отсутствующие или неправильные заголовки и описания могут привести к значительному падению рейтинга и трафика. Чтобы проверить работоспособность веб-сайта и убедиться, что у вас нет страниц с отсутствующими или неправильными метатегами, перейдите к разделам «Заголовок» и «Описание» в отчете о проблемах аудита веб-сайта.

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

Содержание

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

Сравнивать контент может быть сложно, особенно если у вас большой веб-сайт. Хорошая новость заключается в том, что такие проблемы можно обнаружить автоматически.

Дублирование страниц

Дубликаты страниц — это страницы с одинаковым содержимым. Иногда их может быть трудно найти, потому что они могут иметь разные URL-адреса, но есть параметр, который может помочь вам их идентифицировать. При включении столбца Content Hash будет отображаться уникальный хэш содержимого страницы — криптографический эквивалент содержимого. Если хэш одинаковый для двух страниц, значит они идентичны на 100% — просмотрите эти вхождения и оставьте только одну копию страницы.

Мета-теги

Другой сценарий дублирования — идентичные метатеги. Заголовок и мета-описание оказывают значительное влияние, когда поисковая система оценивает релевантность страницы. Не путайте Google со страницами с одинаковыми метатегами, потому что ни одна из них не будет занимать высокие позиции.

Чтобы найти эти страницы, включите столбцы «Повторяющееся название» и «Повторяющееся описание» в отчете «Просканированные страницы» инструмента «Аудит веб-сайта» или перейдите в соответствующий раздел в отчете «Проблемы».

Заголовки H1

Подобно метатегам, заголовок страницы имеет приоритет над другими (под)заголовками, когда поисковая система определяет, о чем страница. Вы должны убедиться, что ни одна из ваших страниц не имеет одинаковых H1, чтобы они не занимались плагиатом друг друга. Как и в случае с проверкой метатегов, включите в отчете столбец «Дублировать H1».

Основные веб-жизненные показатели

Если вы внедряете новый дизайн, вы должны быть уверены, что он улучшит взаимодействие с пользователем; иначе нет смысла это делать. К счастью, Google разработал Core Web Vitals — набор показателей, помогающих разработчикам оценивать свой UX.

С SE Ranking вам не нужно проверять каждую страницу в Web.dev или Chrome's Lighthouse, поскольку аудит веб-сайта проверяет все страницы на наличие всех необходимых показателей взаимодействия с ними. Давайте просмотрим их.

Самое первое — проверить Core Web Vitals: LCP, FID и CLS. Это три параметра, которые отражают, насколько хорошо ваш сайт работает с точки зрения UX:

1. Largest Contentful Paint означает, насколько быстро первое окно просмотра будет напечатано в браузере пользователя. Эта метрика тесно связана со скоростью загрузки веб-сайта, которую мы обсудим через несколько секунд.
2. Задержка первого ввода измеряет, насколько быстро пользователи могут взаимодействовать со страницей (например, нажимать на ссылки, кнопки). Этот параметр также связан со скоростью сайта.
3. Cumulative Layout Shift показывает, насколько стабилен ваш контент во время загрузки — очень раздражает, когда элементы контента меняют свой размер и положение во время загрузки страницы.

Эту информацию можно найти на информационной панели «Обзор» или в разделе «Отчет о проблеме» -> «Производительность». Самое замечательное, что этот отчет основан на данных реальных пользователей и тестов в лабораторных условиях. Это отправная точка для любой дальнейшей оптимизации.

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

2 из 3 показателей Core Web Vitals связаны со временем загрузки. Мало того, статистика говорит о том, что треть пользователей не будут ждать загрузки страницы дольше 3 секунд. Поэтому будет справедливо сказать, что скорость веб-сайта является основным параметром пользовательского опыта. Давайте посмотрим, как SE Ranking может помочь вам определить и решить проблемы со временем загрузки.

HTML

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

JS и CSS

Современная сеть переплетена с JavaScript и CSS. Эти технологии помогают создавать красивые веб-сайты с гибкой функциональностью. Однако иногда эти функции могут отрицательно сказаться на производительности сайта, поэтому важно проверить, оптимизированы ли ресурсы при развертывании нового дизайна.

Методы оптимизации файлов JS и CSS аналогичны:

1. Минификация
   Исключите все комментарии, разрывы строк, лишние пробелы и т. д. — оставьте только важные символы.
2. Объединение
   Старайтесь обслуживать как можно меньше файлов (в идеале — один JS и один CSS на страницу). На каждый запрос файла требуется время, чтобы сервер ответил, а браузер загрузил его — один файл — гораздо более удобный способ сделать это.
3. Кэширование
   Включение кэширования на стороне сервера означает, что ваши файлы не будут создаваться с нуля каждый раз, когда пользователь запрашивает страницу; вместо этого будут обслуживаться их сохраненные копии. Это снимает лишнюю нагрузку с серверов и сокращает время загрузки.

Вот несколько общих рекомендаций:

• Избегайте использования фреймворков и тем
  Фреймворки JS и готовые CSS могут сэкономить вам время, но часто они создаются без учета оптимизации скорости. У них есть много функций, которые вам не нужны, и все эти дополнительные функции могут быть слишком тяжелыми для загрузки.
• Будьте осторожны при объединении файлов JS
  Если в файле JS есть одна ошибка, любые другие функции в файле могут не работать. Таким образом, если у вас есть один файл JS, возможно, что все функции перестанут работать. Возможно, будет разумным решением создать отдельные файлы для основной функциональности и внешнего вида.

Картинки

Что касается SEO, оптимизация изображений также важна:

1. Изображения должны иметь замещающий текст, чтобы поисковые системы и люди, использующие программы для чтения с экрана, могли понять, о чем изображение. Убедитесь, что все изображения имеют осмысленный замещающий текст после редизайна.
2. Размер изображения
   Лучшей практикой является предоставление изображения с разрешением, равным разрешению родительского контейнера. Однако практически невозможно создать копии изображений, подходящие для всех возможных контейнеров, из-за адаптивного дизайна, в котором контейнеры могут менять свои размеры. Что вы можете сделать, так это создать несколько вариантов изображения (например, исходный размер, ширина 300 пикселей, ширина 100 пикселей) для использования в разных местах сайта. Например, рекомендуемое изображение в статье должно быть в исходном размере, а для миниатюры на странице архива лучше использовать изображение меньшего размера шириной 300 пикселей или меньше.
3. Сжатие изображения
   Сжатие изображения — это процесс уменьшения количества уникальных цветов, используемых в изображении. Умеренное сжатие вряд ли будет замечено человеческим глазом, но может сэкономить до 30% размера файла — это много, особенно учитывая, что изображения имеют большой размер файла по сравнению с другими ресурсами страницы.

Отзывчивый дизайн

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

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

Подведение итогов

Редизайн — сложный процесс, особенно если учесть, что редизайн сайта должен быть SEO-оптимизирован. Лучший способ добиться этого — это to2e SEO и практика повышения производительности.

После того, как вы опубликуете свои изменения, вам нужно проверить, все ли в порядке — вот где в игру вступают инструменты проверки работоспособности веб-сайта. Чтобы убедиться, что ваш новый сайт лучше и что ничего не сломалось с точки зрения SEO и производительности, вам нужно сравнить его с предыдущей версией. SE Ranking делает именно то, что вам нужно: сканирует, проверяет и сохраняет данные аудита веб-сайта, чтобы вы могли легко отслеживать и сравнивать свои результаты по датам. Использование таких аудитов позволяет сравнивать и улучшать работоспособность веб-сайта после редизайна.