Тестируем SEO: долго, дорого, а вообще нужно ли?
Всем привет!
Меня зовут Гребенюк Гузель, я QA-руководитель группы тестирования в АЭРО. Мы занимаемся разработкой eCommerce- и data-решений для крупного бизнеса.
В данной статье расскажу о том, как мы организовали тестирование SEO на проектах.
Начнем с того, что значит SEO, для каких продуктов и проектов оно важно и нужно, почему тестировщикам необходимо уметь тестировать SEO, как и какими инструментами это можно сделать.
SEO — «search engine optimization» дословно в переводе означает «поисковая оптимизация».
Если кратко SEO — это набор стратегий и методов для улучшения видимости сайта в поисковой выдаче
Начнем с того почему и кому важно?
Рассмотрим в первую очередь участников процесса ИТ и Бизнес
ИТшники много вкладываются в дизайн, удобство и техническую составляющую продукта.
А для бизнеса, разработанная платформа — это один из инструментов для получения или увеличения прибыли.
Ещё одни заинтересованные участники процесса это маркетологи. Маркетологи четко делят трафик на рекламный и органический. Когда речь идет про эффективное использование бюджета, про привлечение органического трафика, то тут важно работать сообща и маркетологам и команде производства.
При этом у каждого здесь своя роль: производство отвечает за корректную техническую реализацию всех необходимых SEO настроек, а маркетологи и seoшники за релевантность контента, за преобразование посетителей в покупателей.
SEO влияет непосредственно на многие важные бизнес показали: такие как рост трафика, на узнаваемость бренда, на поведенческие факторы, на конверсию и соответственно на рост прибыли
Таким образом, SEO продолжает оставаться ключевой частью цифрового маркетинга и вложения в SEO окупаются лояльностью потенциальных клиентов и повышением доверия к бренду.
Еще один немаловажный поинт: SEO — это про оптимизацию затрат.
Это преимущество может быть сначала неочевидным, но в отличие от контекстной рекламы или социальных сетей, тут нет необходимости регулярных выделений бюджета. Если в seo оптимизации достигнуты определенные результаты и есть необходимость временно остановить работы, то сайт продолжит ранжироваться и приводить органический трафик. Именно поэтому у данного канала продвижения один из лучших показателей окупаемости вложенных средств — это один из действительно рентабельных каналов.
Поэтому, если вы разрабатываете новый сайт, а особенно, если вдруг решили сделать редизайн или перенести ваш сайт на новую архитектуру , нужно помнить про SEO.
Потому что если, не встраивать изначально эти работы в спринты и пытаться делать это в конце проекта, то придется вносить большое количество изменений и на стороне бэка и фронта, а это следом несет в себе издержки в виде новых регрессов и проверки большой части функционала. Как итог — потеря этого канала может привести к большим финансовым потерям компании.
Давайте теперь разберем, что включает в себя техническое seo: что, как и чем будем тестировать?
Начнем с Robots.txt
Когда поисковый робот приходит на сайт, файл robots.txt является одним из первых документов, к которому он обращается.
Файл robots.txt должен быть всегда заполнен и отдавать код 200 ОК и иметь кодировку UTF-8
Он должен быть расположен в корневой директории сайта
Позволяет задать разные правила для разных поисковых роботов, через директиву
User agentПозволяет скрыть от индексации контент и определенные директории, которые не должны отражаться в поисковой системе. Для скрытия служит директива Disallow.
Позволяет открыть для индексации контент и определенные директории, которые должны участвовать в поисковой системе. Для открытия индексирования служит директива Allow.
Директива Sitemap: Содержит путь-ссылку на сайтмап
Проверить просто наличие файла роботса недостаточно, нужно его обязательно проверить через валидатор, например валидатор яндекса
https://webmaster.yandex.ru/tools/robotstxt/
Проверяется путем добавления урла сайта или куска кода
Вы можете проверить корректность читаемости вашего роботса, а также можете проверить и отдельно взятую страницу на закрытость или открытость к индексации.
Также хочу обратить внимание, что если ваш сайт сделан на какой ли cms, то для каждой из них можно найти рекомендуемые robots.txt со списком правил, подлежащих к закрытию техническими и служебными страницами.
Следующий ключевой файл это Sitemap.xml
Данный файл необходим поисковым роботам для обхода всех страниц подлежащих индексации. Этот файл также должен иметь кодировку UTF8, формат xml и содержать список всех страниц сайта, которые необходимо проиндексировать, а также он позволяет указать приоритет в индексации страниц и желательную частоту их переиндексации.
Такая карта нужна как правило:
— сайтам с большим количеством страниц
— сайтам, на которых есть страницы с глубокой вложенностью
Технические требования к sitemap.xml
Размер файла XML-карты не должен превышать 50 МБ.
Число URL в одном файле рекомендуется делать не более 50 000. Если необходимо больше — сделать вторую часть сайтмапа.
Адреса в sitemap.xml должны быть абсолютными.
В карту сайта должны попадать только страницы со следующими параметрами:
имеют код ответа 200;
не подпадают под запрещающую директиву в роботс;
не имеют мета-тега ноиндекс;
являются каноническими.
Сайтмапы должны располагаться в том же домене, что и включённые в неё страницы.
Sitemap должны быть автообновляемыми: url автоматически удаляются из XML-карты при их удалении с сайта и так же добавляются. Достаточно настроить перегенерацию файла раз в сутки (например, ночью, когда сайт испытывает наименьшую нагрузку).
Все страницы сайта должны быть распределены между несколькими файлами sitemap.xml по смыслу
Карта сайта должна открываться в браузере по ссылке /sitemap.xml. Для этого в gateway настроен роутинг (аналогично файлу robots.txt).
Файлов может быть несколько: это значит что основная ссылка может вести на некоторую разводящую страницу которая как правило делится на страницу которая содержит:
ссылки на категории с товарами- листинги
отдельно страницу только с товарами
и, например, на контентные страницы
Также как и для роботса, для сайтмапа есть инструмент проверки, тут обращаю внимание что так как сайтмап зачастую имеет вложенности, стоит проверить их все https://webmaster.yandex.ru/tools/sitemap/
Мета тег robots
Этот тег не является обязательным, располагается тег robots на странице в верхней части
:он поможет сразу занести страницу в свою базу индексации если на конкретную страницу перешли к вам по какой нибудь ссылке из поиска и также наоборот позволит быстрее выкинуть из страницу из индекса если она попала случайно
SEO настройки — Метатеги
Также как и роботс и сайтмап, одни из самых важных и обязательных настроек
Когда мы говорим про сео настройки подразумеваем метатеги
Как правило речь всегда идет о 4 настройках : h1, title, description, seotext
Тег
Его содержимое отображается в заголовке веб-браузера и результатах поиска и указывает чему посвящена страница.
Тег description представляет собой краткое описание страницы, прописывается также в части
. Данный тег на прямую не влияет на ранжирование сайта, однако он влияет на формирование сниппета в выдаче и чем он более информативней и привлекательней, тем больше на него кликнут и перейдут на ваш сайтТег H1 должен присутствовать на всех страницах
Как минимум на страницах категорий и карточках товара
Основное требование он должен быть уникальным
Значением h1 по умолчанию название — категории, карточки товара и т/д,
SEO текст — это блок, который содержит в себе обязательно seo текст и картинку опционально.
В случае если имеются страницы пагинации, SEO текст должен присутствовать только на первой странице.
Для этого блока нет специального тега, но у вас должен быть функционал, куда сеошники смогут вывести свой seo текст.
Как правило, речь идет о некоторой админке или сервисе, мы обычно называем его seo модулем, который позволит во первых автоматически задать шаблон для всех типов страниц и во вторых, функционал который позволит для каждой страницы задать уникальную настройку
Canonical
Один желательных, но не обязательных тегов.
Canonical — это тег, который в первую очередь применяется для того, чтобы исключить дубли из индексации. Он указывает поисковой системе, что в выдаче нужно показывать определённый URL вместо страницы-дубликата.
Как правило применяется для одинаковых или очень похожих страниц
Следующий важный момент это микроразметки
Микроразметка — это семантическая разметка сайта, позволяющие роботам подробнее изучить содержание вашего ресурса. Это универсальный язык, который понимает большинство поисковых систем. Мы остановимся на двух самых популярных.
Микроразметка Schema.org
Микроразметка Schema.org помогает описать множество сущностей и их свойств.
Мы используем его для описания описание продукта, хлебных крошек, описания рейтингов и отзывов.
Например, микроразметка карточки товара позволит поисковым роботам понять, где указана цена на товар, где — описание, а где — изображение, где рейтинг и где отзывы Тогда он сможет правильно проанализировать информацию, определить, насколько информация на странице релевантна запросу пользователя и отобразить данные при формировании сниппетов.
Инструкция для настройки https://yandex.ru/support/webmaster/schema-org/intro-schema-org.html
Микроразметка OpenGraph это технология разметки страниц, которая помогает настроить их отображение в социальных сетях при публикации. Разметкой Open Graph пользуются ВКонтакте, WhatsApp, Telegram, Viber, Pinterest и многие другие
Внедрив микроразметку Open.Graph, мы получаем:
упрощенный процесс репоста. Сниппет ссылки будет выглядеть как готовый пост, который можно разместить в соцсети, а не как ссылка, к которой нужно добавить описание и картинку.
дополнительный трафик из соцсетей. Оформленные таким образом ссылки выглядят лучше и генерируют больше кликов.
https://yandex.ru/support/webmaster/open-graph/ здесь можно ознакомиться подробнее со всеми надлежащими настройками
Ниже на скрине инструменты проверок микроразметок
https://webmaster.yandex.ru/tools/microtest/ валидатор
https://developers.google.com/search/docs/appearance/structured-data? hl=ru
Тут обращаю внимание, что можно проверить через урл и через вставку кода, но замороченность проверки в том что вставка через код может быть затруднительна, код может быть большим, если например захотите скопировать целиком html страницу, она может быть через чур огромной и просто не поместится в валидатор, если захотите скопировать кусочек, то тоже сложно скопировать корректно со всеми закрывающими дивами и т.д
Поэтому есть вариант проще, если проверка проводится на тестовом стенде и стенд закрыт http авторизацией, в ссылке использовать эти креды и проверить страницу целиком.
https://name: password@example.com/catalog/koshki/korm-koshki
Проверка редиректов
Для сайта должно быть определено главное зеркало с «www» или без «www» и реализован 301-й редирект на используемый вариант. В файл хост прописано главное зеркало директивой Host: site.ru.
Правила:
Любые редиректы по умолчанию должны отдавать 301 код, если не сообщено иное.
Должен быть реализован 301-й редирект с http на https.
Не должно быть более двух редиректов, цепочек и рекурсий редиректов
url1 — > url2
url1 — > url3
Должно быть
url1 →url3Главная страница сайта должна быть доступна только по одному адресу «site.com», с других страниц «site.com/index.php», «site.com/index.html» должен быть установлен 301-й редирект.
Корректно настроен 301 редирект со старых URL-адресов сайта на новые (в случае изменения структуры URL и предоставления файла соответствия Заказчиком).
Для всех страниц сайта без слэш (/) настроить 301 редирект на страницы со слэш (/)
Для проверки можно использовать инструмент https://bertal.ru/
Страница 404, битые ссылки
Страница 404 — это автоматическая страница, которая открывается, если запрашиваемую страницу сайта невозможно найти. Данные страницы необходимо оформлять в общей стилистике сайта, с указанием ссылок для перехода на главную страницу. Рекомендуется отредактировать шаблон 404 ошибки, сделав его более информативным и функциональным.
Любая страница — это документ, у документа должен быть только один адрес. Страницы с дублированным контентом должны быть закрыты от индексации тегами NOINDEX и nofollow, а также в robots.txt.
Логические дубли. Такими дублями являются, например, страница товара, который можно отнести к разным категориям интернет-магазина. И эта страница доступна по разным УРЛ в разных категориях. Для устранения логических дублей необходимо выявить все одинаковые страницы, выбрать основной УРЛ и указать его в качестве канонического на остальных дублях этой страницы.
Дубли страниц негативно воспринимаются поисковыми системами и мешают продвижению сайта. Из-за дублей поисковым системам трудно анализировать сайт, определять предназначение страниц и взаимосвязи между ними, что отражается на подсчете релевантности и как следствие ранжирования.
Источники формирования дублей:
умный фильтр может генерировать разные урлы, меняя очередность характеристик (небходимо настроить приоритет параметров);
со слешом и без слеша в конце URL-адреса;
с несколькими слешами в URL-адресе;
с указанием расширений файла и без них (.php, .html);
с указанием индексных страниц и без них (index.php, index.html);
страницы в верхнем и нижнем регистрах;
Скорость загрузки страниц
Высокая скорость загрузки страниц сайта очень важна для SEO по нескольким причинам. Это элемент юзабилити, влияющий на поведенческие факторы. Так как на данный момент больше 50% трафика идет с мобильных устройств, оптимизацию скорости загрузки нужно производить для всех типов устройств.
Увеличить скорость загрузки можно:
оптимизацией тяжелых запросов;
введением кэширования запросов и статического контента;
оптимизацией изображений и их загрузки;
оптимизацией css стилей и js скриптов;
Для анализа и поиска критичных мест можно воспользоваться следующими инструментами
https://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/web/tools/lighthouse? hl=ru
https://gtmetrix.com/
Один из самых популярных валидаторов это Google LightHouse, он находится в инструменте разработчика, с помощью него мы можем проверять разные виды метрик, например, оптимизацию по производительности.
Анализирует скорость загрузки сайта, чтобы оценка была максимально приближена к реальной, рекомендуется запускать проверку в режиме инкогнито
Также с помощью инструмента можно проверить и SEO оптимизацию
Но лучше это делать с помощью целевых инструментов, этот инструмент оставить для быстрых проверок релизов
Особенности рендеринга страниц
Есть два варианта
CSR — Client Side Rendering. Рендеринг на клиенте — это рендеринг приложения в браузере с помощью DOM.
SSR — Server Side Rendering. Рендеринг на сервере — это рендеринг клиентской части приложения на сервере.
Рендеринг на стороне сервера (SSR) — это метод отрисовки веб-страницы на сервере, а не в браузере. Чтобы пользователь не смотрел на пустую страницу, ожидая, пока загрузится веб-приложение, файлы JavaScript или CSS, сервер отдаёт ему сгенерированный HTML.
Как связаны SSR и SEO
Боты поисковых систем могут легко сканировать статический HTML, но у них возникают проблемы с индексацией контента, созданного на JavaScript.
При SSR поисковые системы эффективно индексируют и сканируют контент на отрендеренных страницах, поскольку он может отображаться до загрузки страницы и в формате статического HTML.
Рендеринг на стороне сервера (SSR) и рендеринг на стороне клиента (CSR) — это два термина, которые описывают, как визуализируется веб-страница.
Но в случае SSR есть нюансы при тестировании SEO, в этом случае мы должны смотреть именно тот html, который отдал нам сервер.
Его нужно искать в девтулсе во вкладке нетворк, далее в документс, именно там лежит сгенерированный на сервере html.
Соответственно, когда мы проверяем микроразметку и метатеги, мы должны проверять именно этот документ: сгенерированный html.
SEO модуль
Для работы с метатегами должен быть реализован функционал для заведения и редактирования шаблонов и уникальных настроек для страниц.
Он может быть представлен в виде, например, стандартного или кастомизированного модуля SEO в Битриксе, либо вообще отдельного микросервиса со своей БД.
Какой функционал должен покрывать этот инструмент:
1. Создание шаблонов метатегов для разных типов страниц.
Должна быть возможность задать тайтл, дескрипшен, h1, seo текст для страниц категорий, для карточек товара, для контентных страниц и при необходимости и для страниц фильтра. Шаблоны нужны для того, чтобы ни одна страница не осталась без этих важных настроек.
2. Но при этом также должна быть возможность настроить уникальные настройки для каждой страницы. Это бывает важно, когда речь идет о редизайне старого сайта, когда придет время переносить уже существующие настройки, данная структура будет содержать как раз всю информацию о настройках страниц, которые уже были проиндексированы поисковиком. В этом случае, при открытии сайта на проде, корректные настройки позволят поисковиками либо склеить старые страницы с новыми чпу урлами если они менялись , либо просто не дадут упасть в ранжировании, если урлы остались прежними.
3. Помимо перечисленных метатегов — данный модуль может содержать метатеги роботс для настройки индексирования как по типам, так и по конкретным урлам
4. Тег каноникал
5. Возможность уникальной настройки для микроразметки
6. Тут стоит отдельно отметить, что зачастую требуется настроить набор переменных(так называемые шорткоды) для разных типов страниц
Они представляют собой, например, количество товаров в категории, название категории, товара, какие характеристики товара и т/д
Также может быть отдельная настройка для страниц фильтра, т/к комбинаций с ними может быть великое множество, как правило их не добавляют в таблицу с урлами которые существуют физически, но при этом требуется и для таких страниц настраивать метатеги. Об этой части лучше уточнять изначально, потому что как правило бывают нюансы связанные именно с формированием и хранением урлов.
7. Также сео модуль может содержать функционал для настройки редиректов
Работа функционала заключается в возможности добавить урл откуда, куда и с код с каким редиректим
8. Функционал проверки цикличных редиректов
Резюмируя всё выше сказанное:
Внедрение SEO на раннем этапе позволит команде производства:
Предотвратить технические ошибки, которые негативно скажутся на дальнейшем продвижении;
Сохранить и преумножить трафик пользователей;
Сэкономить бюджет, потому что вносить правки и тестировать в процессе разработки намного проще и дешевле, чем исправлять уже готовый код;
Уменьшить количество возможных доработок после релиза сайта — сократит T2M
Надеюсь мне удалось донести, что в SEO нет никакой магии)
Что это достаточно техничный функционал, который можно и нужно тестировать и даже можно заняться автоматизацией тестирования данного направления через интеграцию с API PageSpeed
Habrahabr.ru прочитано 1520 раз