9 советов по созданию привлекательного и SEO оптимизированного web-дизайна

Технологии SEO постоянно меняются и для многих непонятны. Создание привлекательного дизайна, который был бы также дружественным к поисковым машинам, является одной из труднодостижимых задач при поисковой оптимизации web-дизайна. Если вы дизайнер, является ли ваш дизайн дружественным к поисковым системам?

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

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

1. Старые приемы уже не годятся

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

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

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

2. Указательные ссылки

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

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

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

3. Дизайн привлекает ссылки

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

Если вы разрабатываете великолепные сайты, отправляйте их на специальные выставки, вроде галереи и каталога CSS сайтов.

4. Поисковые боты — это браузеры

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

Поисковые боты очень похожи на инвалидов и неумных пользователей, которые используют очень устаревший браузер. Один из лучших SEO советов, который я могу дать дизайнеру, — потестировать сайт так, если бы Lynx был одним из главных браузеров Интернета. Если вам удастся отлично управлять своим сайтом и понимать его контент в таком браузере, как Lynx, тогда вы будете великим SEO дизайнером. Другие инструменты, вроде тулбара для веб-мастеров тоже могут очень помочь протестировать сайт без таких элементов, как CSS, JavaScript или изображений.

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

Давайте поговорим немного о тактике.

5. Использование хеша

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

Есть множество вариантов использования хеша. Я видел, как хорошо используют хеш в секциях, где новые страницы не оправдают себя уникальным URL, так как каждая из них отличается друг от друга лишь незначительной частью контента. Дизайнер может назначить каждому профилю сотрудника “#имя”, тогда эти почти дублированные страницы будут рассматриваться поисковиком как одна. Также имеется множество других способов использования хеша.

6. Используйте дружественный JavaScript

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

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

При некорректном использовании JavaScript можно ожидать больших проблем.

7. Иногда Flash это хорошо

Спросите любого, кто занимается SEO и он вам скажет, что flash не очень годится для оптимизации. А те, кто читает SEO-новости скажут, что flash индексируется и распознается. Как же дизайнер должен иметь дело с флешем?

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

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

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

8. Замещение изображений с помощью CSS

Использование CSS для элементов дизайна с одной стороны делает хороший внешний вид сайта, а с другой является дружественным для SEO. Имеется множество способов делать подобные вещи, но следует обратить внимание на то, что говорит Google.

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

Два важных слова отсюда — это “обнаружен” и “цель”. Проделывая ручной обзор, Google пытается интерпретировать вашу цель. Мне кажется, что способ с CSS используется часто и является хорошим решением для веб-дизайна в SEO. Если ваша цель — улучшить видимый функционал и эта цель ясна, тогда все хорошо. Не используйте этот метод для напичкивания контента ключевыми словами или манипулирования скрытым текстом.

9. Важные ссылки можно поместить в футер

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

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

Бонусные советы дизайнерам!

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

“Сайт разработан компанией Criative Design”

Вот 3 мини-подсказки:

1. Включите ключевое слово в авторскую ссылку. Не ссылайтесь лишь именем компании или по крайней мере включите часть “сайт разработан”. Ещё лучше использовать что-то вроде: “Дизайн: Имя_Компании — Московская студия дизайна”.

2. Как только вы разработаете несколько сайтов с авторской сылкой, измените в ней слова. Не то, чтобы слова должны сильно различатья, но создайте несколько вариаций и делайте это периодически.

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

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

Статьи по теме

Что такое сторителлинг: техники и примеры

Разберем работающие техники сторителлинга: Путь героя, Сила конфликта, Мономиф, Спарклайны, Гора, Фальстарт и Рамка или «Лепестки»...

2024-07-24

Виджеты для веб-сайтов: влияние кнопок на продажи

Виджеты для веб-сайтов: влияние кнопок на продажи Виджеты, размещаемые на интернет-ресурсах, − это специальные приложения, которые пом...

2020-11-30

CRM: что это и как помогает бизнесу?

CRM: что это и как помогает бизнесу? Представители бизнеса − независимо от его направленности − сталкиваются с необходимостью взаимоде...

2020-11-30

Картинки на сайте: как правильно работать с атрибутами Alt и Title

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

2018-03-27

Доменные имена: всё, что о них нужно знать

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

2018-03-21

Яндекс.Вебмастер: как с ним работать?

Яндекс.Вебмастер − это специальный сервис, который открывает массу возможностей для специалистов по работе с сайтами. Помимо функциона...

2017-12-12

Разработка сайта для муниципальной организации в Хабаровске

Благодаря собственному сайту появляется прекрасная возможность для двустороннего общения с клиентами. Такая форма общения значитель�...

2016-11-30

Домен второго уровня: для чего он нужен?

  Домен или доменное имя по сути представляет собой буквенную последовательность, которая обозначает имя интернет-ресурса. Также в до�...

2016-11-22

Форма обратной связи на сайте: значение и виды

  Одной из функций сайта является его общение с посетителями. Делать это ресурс может с помощью форм обратной связи. Если таковая на пл�...

2016-10-28

Вебвизор: для чего он нужен и как его получить?

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

2016-10-19

Контент-анализ: в поиске релевантных страниц

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

2016-08-30

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

  Рано или поздно перед руководителем практически каждой компании встаёт вопрос создания сайта. Вариант с самостоятельными попытками...

2016-08-17

Битые ссылки: что это и как от них избавиться?

  Одной из бед сайтов являются битые ссылки. Что они собой представляют? Линки, которые ведут на несуществующую страницу. В этом случае ...

2016-08-10

Особенности подбора ключевых слов для SEO-текстов

  Для успешного продвижения сайта его необходимо наполнять SEO-оптимизированными текстами. Их основное отличие от обычных информацион�...

2016-07-06

Сайт-каталог: плюсы, предназначение и особенности

  Если ваша компания специализируется на продаже большого количества товаров, то сайт-каталог − это именно то, что нужно. Такой ресурс ...

2016-06-07