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

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

Суть проблемы между дизайном и оптимизацией

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

Это создает сценарий » курицы и яйца» (что появилось раньше). Так какой смысл в наличии веб-сайта, который выглядит великолепно, но он не может быть найден в результатах поиска? И есть ли смысл иметь сайт, который находится в топе поисковой выдаче, но пользователям он совершенно не нравится?

Как мы можем создавать сайты, которые выглядят удивительно и являются привлекательным, а ещё и позволяют делать грамотную поисковую оптимизацию на каждой странице? Пора ответить на все эти вопросы.

Используем веб-шрифты (webfont) для улучшения дизайна

WebFonts от таких производителей как Google, Font Deck, Typekit и Fonts.com находятся под рукой уже в течение нескольких лет и предлагают отличный способ задать стиль сайта и придать красоту без ущерба для продвижения. Они составляют основную структуру и основу любого хорошо продуманного и хорошо оптимизированного сайта.

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

На рисунке выше мы видим графические формы, в которых написано не мало текста, однако текст является частью самой картинки, его не видят поисковики. (на сайтах подобное встречается редко, но всё же бывает). В таком случае нужно использовать комбинацию WebFonts, HTML и CSS — так мы сможем сохранить красоту и достичь хорошего SEO, создав все текстовые элементы внутри данного баннера как «живой текст», который поисковые системы смогут проиндексировать.

Так можно сделать баннер не только живым и отлично выглядящим. Кроме того, можно использовать заголовки H1, тип текста и обновляется такой баннер будет динамически. Поисковые системы при этом будут видеть баннер как обычный HTML текст. Можно использовать схемы или микроданные в таких баннерах, которые будут выглядеть точно также как и баннеры, являющиеся обычными картинками.

Дизайн сайта для поисковой оптимизации (SEO)

Самой большой проблемой при проектировании дизайна страницы является необходимость в объединении и поисковой оптимизации (SEO) и отличного дизайна. Дизайнеры концентрируют внимание на прекрасном внешнем виде сайта и хорошем поведенческом факторе, а оптимизаторы — на хорошей и быстрой индексации, быстрой работе сайта и высоком рейтинге благодаря SEO.

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

Рассмотрим пример на рисунке чуть ниже:

• слева отличная панелька для модного ритейлера, которую нарисовали дизайнеры. С точки зрения пользователя — она отличная, ведь на ней показано то, как можно носить продукт. Нажав на неё пользователь будет переброшен на страницу с продуктом. Беда в том, что с точки зрения SEO эта панель бессмысленна.

• Для SEO что-то более текстовое, что ли, как панель на правой стороне. Она имеет четкую, определенную структуру, заголовок в <H1>, а затем некоторый небольшой длинный текст (возможно SEO-текст). Очевидно, что с точки зрения пользователя эта панель достаточно далека от истины. Панель слева получит гораздо больше внимания, чем панель справа.

Значит нужно всё это дело совместить! И одним из возможных решений этой проблемы является использование специальных html кодов. Изначально, если смотреть, то панель будет выглядеть, как и на левой стороне (точно так, как дизайнер хочет её видеть), но, когда пользователь наводит курсор на изображение, панель меняется в то, что вы видите на правой стороне (именно то, что хотят SEO-специалисты).

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

Расширяемый <div> (html контейнер)

Еще один замечательный способ включения индексируемого содержания в минималистский дизайн страницы — это использование расширяемого контейнера <div>. Сделав соответствующую область картинкой, а при щелчке мышки — добавить к картинке видимый раскрываемый текст, который смогут просканировать поисковики — этим вы обеспечите хорошую оптимизацию и хорошие ПФ страницы.

Рассмотрим пример:

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

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

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

Скрытое оружие или призываем к действиям

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

Создание всех этих элементов с WebFonts, CSS и HTML позволит Яндекс и Гугл полностью индексировать содержимое такие элементов. Мы ведь не хотим, чтобы такие сообщения как «Бесплатная доставка», «10% скидка» или «распродажа» были скрыты от поисковых систем?

На рисунке выше мы имеем графические и текстовые элементы, которые были построены с использованием WebFonts, CSS и HTML и они полностью сканируются ПС.

Подведём итоги

Всё о чём здесь написано отлично звучит в теории, но как на самом деле они могут реализованы? Очень просто!

Рассмотрим сайт, где все указанные методы увеличения конверсии, а также методы улучшения не только SEO, но и дизайна страницы, были реализованы. Сайт доступен по адресу: http://www.graphitas.co.uk/randomboutique

Витрина использует WebFonts, HTML, и CSS. Она не только приятна для глаз, но и обеспечивает хорошие ПФ и предоставляет множество данных для сканирования поисковыми системами. Демо-сайт использует расширяемые дивы и живые текстовые рекламные щиты, а также многие другие методы, чтобы сайт имел хорошие поведенческие факторы. Тем не менее, страница не бедна в плане SEO. Сайт предоставляет поисковым системам тонны индексируемого содержания.

Использование так называемого живого текста также по своей сути обеспечивает некоторые другие большие плюсы для мобильных устройств, плюсы в плане доступности и косноязычности, но в первую очередь с использованием WebFonts тестирование A / B становится очень простым. На демо-сайте один и тот же базовый код и он выглядит идентично для всех поисковых ботов. Единственное различие достигается чисто за счет использования WebFonts, CSS, и несколько различных фоновых изображений — всё это для A / B тестирования (переключатель сверху A/B).

Таким образом, вооружившись WebFonts, HTML, и CSS, вы получите инструменты для создания удивительных веб-сайтов, которые будут иметь все элементы SEO.