100+ хаков для интернет-маркетологов: Как получить трафик и конвертировать его в продажи Крюкова Евгения

Кнопки расшаривания

На одних сайтах вообще нет кнопок расшаривания. На других – их практически невозможно найти. На третьих – кнопки расшаривания присутствуют только в самом конце статьи и человек до них просто не докручивает. Из-за этого даже самыми полезными материалами делятся гораздо реже, чем они того заслуживают. Чтобы этого не происходило, либо добавьте в свой блог плавающие кнопки расшаривания (рис. 37), либо продублируйте их в начале и конце статьи.

Сервисов, с помощью которых вы можете бесплатно добавить такие кнопки себе на сайт, существует огромное множество. Назову лишь некоторые:

• Блок «Поделиться» от «Яндекса» (https://tech.yandex.ru/share/);

• Share42 (http://share42.com/ru);

• Uptolike (http://uptolike.ru);

• Po.st (https://www.po.st);

• плагин для Wordpress Sassy Social Share (https://ru.wordpress.org/plugins/sassy-social-share/).

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

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

Кнопки, ведущие на ваши группы в соцсетях

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

Вместо кнопок также можно установить социальные виджеты соцсетей, чтобы пользователи могли на вас подписаться, не покидая страницы сайта (рис. 39). Социальные виджеты «ВКонтакте» можно найти по адресу: https://vk.com/dev/Community, а социальные виджеты Facebook – здесь: https://developers.facebook.com/docs/plugins.

Хак № 27. Сделайте так, чтобы пользователи знали о том, что вы представлены в соцсетях. Дайте им хороший стимул стать вашим фолловером.

Древовидные комментарии

Согласно исследованию известной зарубежной компании Quick Sprout, древовидные комментарии (когда каждый новый ответ на какой-либо пост размещается сразу под ним, а не в конце страницы) в среднем увеличивают количество комментариев на 16–33 %. И это неудивительно: такой способ общения очень удобен для пользователей – все реплики упорядочены, не нужно скроллить в конец страницы и пытаться понять, какой ответ к чему относится (рис. 40).

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

Как понять, индексируются ваши комментарии или нет?

Откройте какую-нибудь старенькую статью и зайдите в расширенный поиск «Яндекса» (http://bit.ly/adv-yandex). В графу «Я ищу» вставьте скопированный текст комментария в кавычках, а в графу «На сайте» – URL страницы (рис. 41).

Если поиск вам выдаст фразу «По вашему запросу ничего не нашлось», значит, комментарии не индексируются.

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

На нашем сайте мы используем сервис Disqus (https://disqus.com). Его главные преимущества заключаются в том, что он удобен, бесплатен и позволяет читателям авторизоваться на сайте с помощью своих учетных записей в социальных медиа. Устанавливается очень просто. Все, что вам нужно сделать, – вставить предложенный код в шаблон вашего сайта, выбрать цветовую гамму и язык.

Сервис Disqus – сейчас один из наиболее популярных сервисов комментирования во всем мире. Ему отдают предпочтение из-за легкости использования и приятного внешнего вида. Однако есть у него и один существенный недостаток. Система комментирования Disqus работает на технологии javascript, из-за чего далеко не все комментарии попадают в индекс. Поисковики сами «решают», что индексировать, а что нет, и, к сожалению, большую часть комментариев, судя по нашему опыту, все-таки игнорируют. Поэтому, если для вас самое важное – удобство пользователей, смело устанавливайте себе на сайт этот сервис. Если же вы больше всего цените поисковый трафик, то лучше отдать предпочтение другим системам. Например, вот этим:

• Cackle (http://cackle.me);

• HyperComments (https://www.hypercomments.com);

• SV Kament (http://svkament.ru).

Или можно вообще оставить штатную систему комментирования, которая предусмотрена вашей CMS.

Хак № 28. Установите себе на сайт систему комментирования. Это позволит вам улучшить поведенческие факторы и повысить интерес пользователей к вашему блогу.

Блоки «Самое популярное» и «Самое обсуждаемое»

С помощью блоков «Самое популярное» и «Самое обсуждаемое» вы можете значительно увеличить продолжительность сессии ваших пользователей. Мы убедились в этом на собственной практике – раньше эти два блока находились на нашем сайте справа от текста статьи (рис. 42) и посетители активно по ним кликали, чтобы узнать, почему данные разделы столь популярны и что говорят о них другие люди в комментариях.

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

Для WordPress:

• Popular Posts – http://bit.ly/pop-posts;

• Related Posts – http://bit.ly/rel-posts;

• WP Tab Widget – http://bit.ly/wp-tab.

Для Joomla!:

• Most Popular Content by Date Range – http://bit.ly/date-range;

• Top Rated – http://bit.ly/top-plugin;

• Flexi Trendy News – http://bit.ly/flexy-trendy.

В текущей версии нашего сайта (CMS Bitrix) мы реализовали эту функцию при помощи фильтра (рис. 43). Пользователи могут отсортировать статьи по рейтингу, количеству комментариев и репостов. К сожалению, мне не известны сервисы и плагины, которые могли бы предоставить подобный функционал, поэтому здесь вам, скорее всего, придется заказывать его реализацию у программиста.

Хак № 29. Добавьте в свой блог блоки «Самое популярное» и «Самое обсуждаемое» или реализуйте данную функцию с помощью фильтра. Это поможет вам увеличить длительность сессии пользователей, количество просмотренных страниц, репостов и комментариев. Что, в свою очередь, положительно скажется на ранжировании вашего сайта в поисковых системах.

Блок «Читайте также»

Подобно предыдущим двум блокам «Читайте также» служит для увеличения продолжительности сессии. Его можно каждый раз составлять вручную, а можно воспользоваться плагином, который будет делать это за вас. Если у вас сайт на Wordpress, вам подойдет плагин Related posts (http://bit.ly/wp-related), если Joomla! – Related Article After Content (http://bit.ly/after-content). Универсальное решение для всех без исключения сайтов – сервис Relap (https://relap.io/). Именно его мы и используем в своем блоге (рис. 44).

Главные преимущества сервиса Relap:

• Он бесплатен.

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

• Сервис предоставляет подробную статистику.

• Он сам выбирает, какие статьи стоит порекомендовать на той или иной странице, и в большинстве случаев делает это очень грамотно. Не знаю, по какому алгоритму он действует, но мы результатом довольны – наши самые популярные статьи с удачными заголовками привлекают еще больше кликов и внимания.

Хак № 30. Используйте блок «Читайте также» для того, чтобы увеличить время пребывания пользователей на вашем сайте.

Врезки в статьях

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

Как с помощью врезок продлить сессию пользователя?

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

Пример из нашей практики. 16 июня 2015-го у нас неожиданно выстрелила статья 2014 года, рассказывающая о продвижении сайта с нулевым бюджетом; в течение нескольких дней на нее поступало достаточно много трафика из социальных сетей. 17 июня у нас в блоге вышел еще один важный и полезный материал (200 кейсов по интернет-маркетингу), и, для того чтобы собрать на него как можно больше трафика, мы прорекламировали его в той самой, прошлогодней, публикации, ставшей трендовой (рис. 45).

Спустя неделю мы посмотрели статистику и увидели, что по этой ссылке перешли 101 раз. Согласна, результат не впечатляющий, но все же лучше чем ничего, правда? К тому же, если взять какую-нибудь другую статью (например, ту, на которую долгое время велась реклама или которая приносит стабильный поисковый трафик), цифры будут совсем другие. За год такая врезка в одной из наших статей про лендинги набрала более 2000 переходов.

Как с помощью врезок конвертировать трафик в лиды?

Очень частая ошибка контент-маркетологов – публиковать качественный контент, быть полезными аудитории, постоянно повышать лояльность читателей, но при этом забывать о том, что этих лояльных читателей нужно хотя бы изредка конвертировать в лидов и клиентов. Способов, с помощью которых это можно сделать, множество, но, поскольку речь здесь идет о врезках, приведу пример того, как мы это делаем на нашем сайте именно с помощью врезок (рис. 46).

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

Хак № 31. Наверняка с вами было такое: заходите в статью, проглядываете заголовки, оценивая, стоит ли изучать публикацию более подробно, и обращаете внимание только на врезки. То же самое происходит и с вашими читателями. Они могут проигнорировать текст, но обязательно прочитают большую и красивую врезку. Используйте эту особенность в своих целях. Вставляйте в свои статьи врезки, управляйте вниманием пользователей и направляйте трафик туда, куда вам это нужно.

Поиск по сайту

Форма поиска позволяет вашим читателям быстро находить нужные им материалы. За счет этого увеличивается продолжительность сессии и общая степень удовлетворенности пользователей. Как правило, форму поиска размещают либо в сайдбаре, либо в шапке сайта. Очень важно, чтобы поиском было удобно пользоваться. В идеале он должен выполнять следующие функции: исправлять неправильную раскладку, опечатки, ошибки, а также распознавать разные варианты написания. Из бесплатных сервисов все это может делать поиск для сайта от «Яндекса» (https://site.yandex.ru/) (рис. 47).

Хак № 32. Добавьте на свой сайт удобный поиск. У пользователей должна быть возможность самостоятельно искать материалы, которые им интересны.

Микроразметка Open Graph

Open Graph – микроразметка, которая связывает сайт с социальными сетями. Она нужна для того, чтобы в анонсе статьи при расшаривании выдавалась нужная вам картинка, заголовок и описание. Когда Open Graph не используется, соцсети берут случайную картинку из статьи, а описание и заголовок – из метатегов description и h2. И очень часто выглядит это, мягко говоря, не очень красиво: картинка получается маленькой или обрезанной и не привлекает внимания. Посмотрите на две иллюстрации ниже (рис. 48). Какая из них кажется вам более привлекательной? Думаю, ответ очевиден.

Как прописать Open Graph?

Воспользуйтесь готовыми плагинами:

• Если ваш сайт работает на WordPress, используйте плагины для генерации разметки Open Graph: Open Graph (http://bit.ly/open-g) или WP Facebook Open Graph protocol (http://bit.ly/open-g2).

• Для сайтов на Joomla! подойдут расширения Phoca Open Graph (http://bit.ly/phoca) и Easy Open Graph (http://bit.ly/easy-og).

• Владельцам сайтов на Drupal стоит обратить внимание на модуль Open Graph meta tags (http://bit.ly/og-dru).

• Если ваш сайт работает на Magento, воспользуйтесь расширением Social Share – Open Graph (http://bit.ly/og-mag).

• Для сайтов на OpenCart можно выбрать расширение SEO Facebook Open Graph Tags (http://bit.ly/og-cart).

Хак № 33. Установите плагин или наймите программиста, чтобы тот разработал для вас скрипт, который будет автоматически прописывать код Open Graph ко всем страницам вашего сайта. Благодаря Open Graph ваши статьи будут всегда выглядеть в соцсетях красиво и профессионально и получать больше расшариваний.

Скорость загрузки страниц

Согласно исследованию компании Strangeloop Networks, 57 % посетителей покидают страницу, которая грузится более трех секунд. Не хотите терять этих людей? Тогда сделайте так, чтобы ваш лендинг грузился быстро на всех устройствах.

Сервисы, с помощью которых можно тестировать скорость загрузки сайта:

• Pingdom (https://tools.pingdom.com);

• Google PageSpeed insights (http://bit.ly/pg-insights);

• WebPageTest (https://www.webpagetest.org).

Обращаю внимание: данные сервисы не смогут решить ваши проблемы. Их главная функция – проанализировать скорость загрузки сайта. Все дальнейшие действия должны исходить именно от вас.

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

Чтобы уменьшить вес страниц, в первую очередь воспользуйтесь сжатием данных в протоколе HTTP. Это уменьшает вес текстовых ресурсов, включающих элементы HTML, CSS и JavaScript, на 50 % и более. Для сжатия данных протокола HTTP используются технологии zip, gzip и другие.

Попросите хостинг-провайдера или администратора сервера включить опцию сжатия данных протокола HTTP. Оценить эффект вы сможете с помощью одного из сервисов проверки сжатия, такого как http://bit.ly/com-test. Если администратор сервера все сделал правильно, результат вас порадует (см. рис. 49).

Снижение веса графики. Графика часто составляет 80 % и более от общего размера страниц. Поэтому очень важно оптимизировать публикуемые фотографии. Данные рекомендации помогут вам облегчить изображения на 50 % и более:

• Публикуйте фотографии в формате JPEG, избегайте формата PNG. Формат JPEG позволяет сильно сжимать изображения без потери качества. Например, в день представления Windows 8 компания Microsoft опубликовала на главной странице сайта фото в формате PNG, вес которого составил 1 Мб. Фото аналогичного качества в формате JPEG весит приблизительно 140 Кб.

• Не злоупотребляйте использованием формата PNG для обеспечения прозрачности графики. Такие изображения очень красивы, но не всегда функциональны.

• Корректно выбирайте уровень качества картинок в формате JPEG. Уменьшив качество фото на 25–50 %, вы практически не заметите разницы по сравнению с исходным изображением. При этом вес иллюстрации значительно уменьшится.

• Очищайте графические файлы от цифрового мусора. Различные редакторы фотографий, которыми наверняка пользуется ваш дизайнер, оставляют в файле много ненужных данных, например комментарии, рабочие версии изображения, неиспользуемые палитры и т. п. Этот цифровой мусор не нужен вашим читателям. Чтобы очистить файл, воспользуйтесь сервисом Pngcrush (https://goo.gl/JDOaT8).

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

Упрощение кода JavaScript и CSS. Использование специальных средств упрощения кода JavaScript и CSS уменьшает вес соответствующих элементов значительнее, чем стандартные технологии сжатия, такие как gzip. Сервисы упрощения удаляют из кода лишние элементы, а также сокращают названия функций.

Чтобы упростить код элементов JavaScript и CSS, воспользуйтесь программными средствами или онлайн-сервисами, например Online Javascript Compression Tool (https://jscompress.com) или Online JavaScript/CSS Compression (http://refresh-sf.com).

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

Вы никогда не задумывались, почему главная страница Google выглядит так аскетично? Вероятно, одной из причин является желание разработчиков увеличить скорость ее загрузки (рис. 50).

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

• Разрешите браузерам кешировать данные. Если страницы вашего сайта являются статическими, незачем вынуждать посетителей всякий раз загружать их содержимое заново. Попросите администратора сервера или хостинг-провайдера включить опцию кеширования фотографий, элементов CSS и JavaScript (рис. 51). Чтобы проверить результат этого действия, воспользуйтесь, например, сервисом Redbot (https://redbot.org).

• Комбинируйте и сжимайте файлы CSS и JavaScript. Тем самым вы значительно уменьшаете количество запросов браузера. Этот метод подходит для статических страниц. Объединить файлы CSS и JavaScript можно с помощью специальных сервисов и ПО, например CakePHP (https://cakephp.org).

• Объединяйте небольшие фотографии в CSS-спрайты. Это особенно удобно для ресурсов, на которых есть много иконок, кнопок и других маленьких изображений. Специальные сервисы позволяют объединить их в один файл, который и называется CSS-спрайт. Воспользуйтесь инструментом SpriteMe (http://spriteme.org), чтобы проверить эффективность данной рекомендации на практике.

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

Сокращение расстояния между сайтом и пользователями. Если сервер вашего хостинг-провайдера находится во Владивостоке, посетителям из Санкт-Петербурга придется набраться терпения, ожидая загрузки страницы. Эта проблема особенно актуальна для сайтов с тяжелым контентом. Чтобы решить эту проблему, воспользуйтесь сетями доставки контента (CDN), например Amazon CloudFront или Akamai.

Используя CDN, вы автоматически изменяете URL ваших фото, CSS- и JavaScript-файлов с http://moisait.com/moefoto.png на http://aaa.cloudnfront.net/moefoto.png. Когда пользователь заходит на ваш сайт, CDN загружает его «тяжелые» элементы со своего сервера, физически расположенного ближе всего к посетителю.

Хак № 34. Высокая скорость загрузки сайта чрезвычайно важна. Она улучшает пользовательский опыт, повышает коэффициент конверсии, вовлеченность пользователей, а также способствует улучшению позиций сайта в выдаче. Убедитесь, что ваш сайт загружается быстро на всех устройствах.

Адаптивный дизайн

На данный момент адаптивный дизайн (тот, который автоматически адаптируется к размеру экрана, вследствие чего ваш сайт удобно просматривать с помощью стационарных ПК и мобильных девайсов) – оптимальный метод приспособления сайта для мобильных пользователей. В его эффективности мы убедились на собственном опыте. Первый сайт на адаптивной верстке мы запустили 30 августа 2013 года. Спустя месяц проверили статистику и получили результаты, превзошедшие все наши ожидания:

• Снижение числа отказов. Средний показатель отказов снизился в 3,9 раза – было 70,8 % отказов (среднее арифметическое значение в июне, июле и августе), стало 18,1 % (в сентябре). Вот так выглядят наши отказы по «Яндекс.Метрике» за три месяца до и спустя один месяц после редизайна (рис. 52).

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

• Увеличение периода времени, проведенного пользователем на сайте. Вот как менялась продолжительности сессии от месяца к месяцу в 2013 году (рис. 53): январь – 00:01:58; февраль – 00:02:01; март – 00:01:49; апрель – 00:02:13; май – 00:02:30; июнь – 00:02:15; июль – 00:02:29; август – 00:02:06. На 22 сентября – 00:03:59!

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

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

Корректное отображение во всех браузерах

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

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

1. Установите и запустите браузер Google Chrome.

2. Щелкните правой кнопкой мыши в любом месте страницы и выберите команду «Посмотреть код».

3. Нажмите на иконку в виде телефона с планшетом (рис. 54).

4. Выберите устройство, которое вас интересует (рис. 55), или перейдите в раздел «Edit», чтобы выбрать другое устройство или добавить свое («Add custom device»).

5. Обновите страницу, чтобы все элементы загрузились без ошибок.

Если вас по какой-то причине не устраивает браузер Google Chrome, вы можете воспользоваться браузерами Opera или Mozilla Firefox. Действия по проверке отображения сайта в этих браузерах будут аналогичными.

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

1. Воспользуйтесь сервисом Browsershots (http://browsershots.org).

2. Вбейте в поисковую строку адрес страницы, которую вы хотите проверить.

3. Выберите интересующие вас браузеры.

4. Дождитесь, пока сервис загрузит все скриншоты.

5. Скачайте их себе на компьютер и проверьте, нет ли ошибок (рис. 56).

Хак № 36. Перед тем как создавать качественный контент, убедитесь, что ваш сайт корректно отображается на всех устройствах и во всех браузерах.