Блог про интернет-маркетинг для бизнеса

Кейсы

Внутренняя кухня SEO: масштабный редизайн блога UniSender

115
0
18

Продолжаем серию постов реалити-шоу о продвижении платформы email- и sms-рассылок UniSender. Как и обещали в прошлом выпуске, рассказываем, что важно учесть при редизайне корпоративного блога.

Почему мы решили улучшить блог

Еще в 2016 году команда UniSender принялась наводить порядок в блоге: оптимизировать статьи, структуру, добавлять перелинковку. Но что-то пошло не так. Всему виной — неповоротливый движок блога: он не позволял исправить существующие баги, да еще и подсовывал новые. И, конечно, хотелось освежить устаревший дизайн блога.

В то же время росли аудитория блога и качество публикаций. Мы с UniSenderпровели дополнительный анализ рентабельности блога. И после подсчета возврата инвестиций стало очевидно, что блог не только удерживает клиентов, но и приводит новых.

Мы твердо решили: читатели достойны более крутого и качественного блога. Вот немного хронологии для понимания, в каком темпе мы двигались:

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

В общей сложности совместно с UniSender мы внедрили 4 технических задания:

  • очень детальное и четкое задание от команды UniSender для дизайнеров и разработчиков c описанием задач блога, основного функционала для каждого типа страниц, пожеланий по дизайну и прочего;
  • технические рекомендации по SEO-оптимизации от команды Netpeak;
  • два дополнительных технических задания на доработку блога после внедрения основных технических рекомендаций.

Благодаря слаженной работе команды проекта (UniSender, Netpeak и разработчиков из Point Agency) нам удалось максимально четко и эффективно коммуницировать по всем вопросам блога и выполнить все задуманное в сжатые сроки без потери качества.

Как сегментировали целевую аудиторию читателей

Главная задача — увеличить трафик блога, и, как следствие, количество клиентов и партнеров сервиса UniSender. Нужно было сформировать ядро читателей, заинтересованных в email-маркетинге и развитии онлайн-бизнеса.

Команда UniSender разделила свою целевую аудиторию на два основных сегмента и сформулировала соответствующие цели:

Email-маркетологи (новички и миддлы)

Руководители отделов маркетинга, собственники малого и среднего бизнеса

эффективное использование инструментов email-маркетинга;

получение нового канала продаж;

выполнение KPI по рассылкам;

увеличение прибыли от email-маркетинга.

повышение своей зарплаты;

карьерный рост: от маркетолога до директора по онлайн-маркетингу или основателя агентства.



Чем будет полезен блог UniSender обеим аудиториям?

  1. Кейсы — редакция UniSender стремится сделать рассылки прозрачным, доступным и понятным читателю инструментом. Поэтому будет на удачных и провальных примерах показывать, как работает email-маркетинг.
  2. Пошаговые инструкции создания рассылок — как сразу после прочтения статьи правильно пользоваться сервисом для достижения целей бизнеса.
  3. Интервью с топ-менеджерами агентств, блогерами, предпринимателями и клиентами для знакомства читателя не только с инструментами, но и с людьми в индустрии.
  4. Идеи: статьи про смежные области (тренды, примеры дизайна, книги и полезные сервисы для аналитики, инфографики и так далее).
  5. Новости UniSender и рынка — чтобы читатель был в курсе развития индустрии и сервиса.

Все пункты можно объединить единой целью — стать источником информации №1 для начинающих email-маркетологов, руководителей департамента маркетинга, а также собственников малого и среднего бизнеса.

Какие внедрили SEO-рекомендации для блога

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

Оптимизировали структуру блога

При переезде мы решили сохранить старый адрес блога https://www.unisender.com/ru/blog/. Нам захотелось улучшить не только дизайн, но и, пользуясь случаем, навести порядок в структуре блога.

Основные типы страниц остались прежними:

  • главная страница блога;
  • страница публикации;
  • страница раздела (категории);
  • страница тега.

При этом cделали «генеральную уборку» блога от ненужных / лишних страниц.

Главный редактор блога UniSender Александр Сараев пересмотрел все существующие категории и разделы.

Категории для блога SEO рекомендации

В результате оставили четыре основных.

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

Команда Netpeak предложила пересмотреть не только категории, но и теги.

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

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

Оптимизировали ЧПУ и транслитерацию

Эта задача стала одной из самых важных, так как при малейшей ошибке настройки редиректов со старого URL-адреса на новый мы рисковали потерять трафик целевой страницы.

При изменении URL-адреса без настройки 301-редиректа позиции страницы пропадают, и страница индексируется заново — не факт, что она восстановит предыдущие позиции в поиске.

Однако мы посчитали необходимым привести все URL-адреса к читабельному виду и сделать их соответствующими названию страницы. Вот несколько примеров URL-адресов со старого блога с плохой транслитерацией:

Мы сформировали единые правила транслитерации, которые удобны пользователям  и поисковым роботам.

Правила транслитерации для ЧПУ

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

Карта редиректов формировалась в полуручном режиме, поэтому потребовалось больше времени, чем предполагалось.

Для ускорения поиска соответствующего URL-адреса нужно было найти что-то неизменно общее между старой и новой публикацией, с помощью чего можно их сопоставить. Метатеги (заголовок h1, description) и теги (title, keywords) отличались, поэтому решили сделать привязку к заголовкам h2.

C помощью краулера Netpeak Spider мы просканировали старый и новый блог (на тестовом домене) с настройкой пользовательского поиска заголовков h2.

Пользовательский поиск заголовков Netpeak Spider

После сканирования мы получили два списка URL-адресов (старого и нового блога) с заголовками h2 и сопоставили их с помощью формулы VLOOKUP. Таким образом, бóльшая часть карты редиректов сформировась автоматически, остальные URL были подставлены вручную.

Как оптимизировали пагинацию

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

В старом блоге был стандартный функционал пагинации, при этом страницы формировались с помощью гет-параметра ?blog_start=[№ страницы]

Правильная пагинация в блоге

В новой версии блога реализовали lazy load пагинацию (автоматическая подгрузка списка статей при прокрутке страницы). Команда Netpeak предложила добавить и стандартный функционал с номерами страниц.

Netpeak что такое lazy load пагинация

Почему мы решили добавить и стандартную пагинацию? Иначе робот не доберется ко всем статьям на блоге, потому что в коде первой страницы будут только последние статьи и не будет ссылок на другие страницы где более старые статьи.

Статические страницы пагинации создали по шаблону https://www.unisender.com/ru/blog/[page]/page-[N].

На страницы внедрили атрибуты next/prev и метатег для робота Яндекс.

<meta name="yandex" content="noindex, follow" />

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

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

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

Создали AMP-страницы для статей

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

Мы решили настроить автоматическое создание ускоренных мобильных страниц (accelerated mobile pages, AMP) только для публикаций, так как данные страницы с большей вероятностью смогут попасть в новостной блог и стать точкой взаимодействия с читателем. Для этого мы передали в работу разработчикам такое задание:

  • настроить автоматическое создание ускоренных мобильных страниц для страниц публикаций отдельно от текущих согласно справке AMP;
  • выполнить требования по видимости согласно рекомендации по использованию AMP-страниц в Google Поиске;
  • создать карту сайта для AMP и добавить ее в robots.txt;
  • добавить Google Analytics для AMP согласно требованиям Google (предварительно был создан отдельный ресурс в GA);
  • на AMP страницах продублировать мета-информацию канонических страниц;
  • проверить валидацию АМР-страниц по ссылке.

Зафиксировали даты публикации статей

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

Что делать, если при редактировании слетает дата публикации статьи

Эта проблема решилась только с переездом на новый движок. Сейчас все даты актуальны, их можно использовать при анализе эффективности отдельных статей.

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

На всех страницах записей блога сразу после открывающегося тега <head>  перед кодом GTM мы разместили следующий код, где YYYY — год, а MM — месяц публикации данного поста в блоге.

<script>
window.dataLayer=window.dataLayer||[];
dataLayer.push({'PublicationDate’:’YYYYMM’});
</script>

Пример:

<script>
window.dataLayer=window.dataLayer||[];
dataLayer.push({'PublicationDate’:’201707’});
</script>

Далее все как обычно — создали переменную PublicationDate в GTM, куда передали значение из dataLayer, и добавили передачу этого параметра с тегом просмотра страниц.

Добавили рейтинги статей

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

Рекомендации по добавлению рейтинга содержали в себе примерно следующие пункты:

  • на странице статьи, после заголовка и после текста статьи (дважды) указать 5 звезд рейтинга;
  • отметить оценку для одной статьи может любой пользователь только один раз из текущего браузера
    Как настроить рейтинг статей оценки пользователей
  • при наведении курсора мыши на одну из звезд все звезды, начиная с крайней левой и до положения курсора, должны интерактивно закрашиваться;
  • результат рейтинга должен быть одинаковым в верхней и нижней части статьи;
  • добавить микроразметку рейтинга согласно Schema.
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4</span> stars -
based on <span itemprop="reviewCount">250</span> reviews
</div>

Оптимизировали перелинковку

В техническом задании для разработчиков команда UniSender предусмотрела создание блоков с анонсами, популярными или тематическими статьями на всех типах страниц.

Например, такой блок размещен в конце каждой статьи.

Как правильно оптимизировать перелинковку в блоге

На страницах категорий блога размещены блоки «Лучшее за месяц».

Фильтр лучшие статьи в блоге за месяц

Также во время чтения статьи можно заметить тематический блок со ссылкой справа от основного текста.

Тематический блок со ссылкой справа от основного текста

В наши ближайшие планы входит добавление/оптимизация перелинковки непосредственно в самом тексте статей: вручную будут заменены все ссылки на актуальные, или же добавлены, если их нет.

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

  • блок анонсов не должен содержать ссылку на страницу, на которой он показан;
  • блок анонсов не должен содержать 2 или более одинаковых ссылок в рамках одной генерации набора анонсов;
  • в блоке анонсов не должны быть показаны статьи, ссылки на которые уже присутствуют на странице;
  • если пользователь уже просмотрел 2 статьи и перешел на следующую, в блоке анонсов не должно быть ссылок на статьи, которые уже были просмотрены;
  • при каждой новой генерации блока анонсов в нем должны быть статьи, которых не было во всех предыдущих наборах анонсов, которые просмотрел пользователь;
  • если удается идентифицировать пользователя между разными сессиями, для каждой новой сессии в блоке анонсов не должно быть ссылок на страницы, которые уже были просмотрены этим пользователем в прошлых сессиях.

И еще кое-что

Помимо вышеперечисленного, были выполнены и другие пункты по оптимизации блога. На них мы не будем так подробно останавливаться, так как в целом они стандартные:

  • добавили мета-информацию;
  • оптимизировали изображения;
  • сформировали «хлебные крошки»;

  • указали канонические страницы;
  • настроили гет-параметры;
  • оптимизировали заголовки;
  • настроили веб-аналитику.

Как поменялся дизайн

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

Главная страница

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

Вот так главная страница блога выглядела раньше.

Редизайн блога UniSender

В новом дизайне она намного современнее, правда?

Блог UniSender после редизайна

Анонсы статей

  • добавили фоновое изображение;
  • разместили фото автора;
  • вывели количество просмотров и шеров.

Анонсы статей в старом блоге выглядели так.

Анонс статей до редизайна блог UniSender

Мы сделали их информативнее.

Анонс статей после редизайна блог UniSender

Страница раздела

Страница раздела «Кейсы» в старом блоге.

Редизайн страницы кейсы UniSender

Так этот раздел выглядит сейчас.

Как сделать редизайн страницы кейсы UniSender

Страница публикации

Как было раньше.

Страница публикации до редизайна блога UniSender

Что изменилось:

1. Добавили рейтинги и кнопки для соцсетей.
Страница публикации после редизайна блога UniSender

2. Расширили блок информации об авторе.

Как расширить в блоге блок информации об авторе

Какие результаты получили

Самое важное и критичное мы успели внедрить и доработать. Также осталось несколько актуальных задач, над которыми мы продолжаем работать.

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

Рост трафика после редизайна блога UniSender

В итоге переезд не ухудшил скорость и качество контента блога, а даже наоборот — UniSender продолжает активно наполнять блог, писать новые статьи и улучшать старые.

Результаты редизайна блога UniSender

В этом процессе команде UniSender активно помогает отдел копирайтинга Netpeak. Мы выстроили новый формат работы по написанию статей для высокоспециализированной тематики email-маркетинга.

По секрету: руководитель отдела копирайтинга Netpeak Маргарита Бодачевская уже готовит пост для следующей серии реалити-шоу о внутренней кухне SEO.

Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (3)

  1. 0
    18 дней назад

    Неплохо получилось.

    Для рейтинга статьи, определения времени чтения и вывода статей в блоке "Читайте также" использовали готовые плагины или сами писали?

Чтобы оставить комментарий, необходимо авторизироваться

Подписаться

на самую полезную рассылку по интернет-маркетингу

Самое

обсуждаемое популярное читаемое