Дизайн сайтов SEO: как создать сайт, готовый к продвижению?

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

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

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

Дизайн веб-сайтов с учетом SEO когда начать?

1. Чего хочет клиент?

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

Это как колбаски и лапша, только по бокам =)

2. Разработка концепции, анализ рынка и конкурентов

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

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

3. Семантическое ядро ​​ основа SEO-дизайна

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

Мы использовали Яндекс Wordstat, чтобы собрать все ключевые слова, поместить их в таблицу (вместе с количеством просмотров в месяц) и сгруппировать их в слова с высокой, средней и низкой частотой.

Фрагмент таблицы с собранным семантическим ядром для сайта фотостудии:

Пока ничего сложного: соберите свои запросы, сгруппируйте их вместе семантическое ядро ​​готово. Это так просто. Итак, здесь мы сидим со списком этих ключевых слов. И что потом? Это вопрос, который сбивает с толку всех новичков, открывающих сайт.

Наш подход: не сидеть и ждать погоды, а делать что-нибудь покруче создать карту актуальности.

Мы рекомендуемSEO подготовка.

4 От семантического ядра к карте релевантности

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

Не более 3-5 запросов на сайт; высокочастотные запросы (для целевого трафика); второстепенные страницы узкие средне- и низкочастотные запросы.

Карта релевантности является верным помощником не только в создании структуры ресурса, но и, например, в создании контент-плана для сайта. Передайте этот документ копирайтерам это ToR для написания отличного оптимизированного контента.

Фрагмент карты актуальности будущего сайта фотостудии:

5. Структура сайта и дизайн навигации

Карта релевантности готова. Начните создавать структуру своего сайта четкая иерархическая система взаимных договоренностей и связей между сторонами.

5.1 Структура

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

Меню навигации должно служить ориентиром для посетителей сайта. Люди приходят на сайт с определенной целью (покупка, цена, запрос и т. Д.), Поэтому мы не хотим путать их и проектировать структуры, такие как квест-комната или полоса препятствий пользователь должен удовлетворить свою потребность в 1-3 клика после входа на сайт.

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

Мы не изобретали велосипед и разработали страницу с древовидной структурой:

5.2 Прототипирование

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

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

Домашняя страница

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

Это тот прототип, который вы хотите разработать.

Это прототип, который наш UX-специалист сделал для домашней страницы:

6. Создание оптимизированного контента

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

Мы вернемся к карте релевантности и воспользуемся ею для написания полезного контента, оптимизирующего продажи.

Что такое оптимизированный текст? Вот контрольный список, который вы можете найти.

Это образец текста главной страницы сайта, который производит и продает винтажные вина:

7. Разработка макета проекта

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

 

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

8. Макет

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

В процессе композиции не упускайте задачу оптимизировать:

Примените теги и метатеги, указанные в таблице релевантности оптимизировать изображения, которые вы размещаете на своем веб-сайте. Мы добавим атрибут alt ко всем изображениям (альтернативное текстовое представление изображения, оно помогает поисковым системам определять релевантность страницы по отношению к запросу).

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

9. Портирование и программирование CMS

Готово ли содержание? Обновлена ​​ли домашняя страница? Тогда самое время перенести сайт в систему CMS. Следует помнить, что гибкость движка и функциональность CMS имеют решающее значение для SEO.

Какие функции требуются системе управления?

• Обработка 301 редиректа;
• Автоматическое создание файла sitemap.xml;
• Возможность редактирования файла robots.txt;
• возможность писать заголовок, описание и другие теги;
• Функция генерации ЧПУ с возможностью дальнейшего ручного редактирования и т. Д.

Это только основы, которые следует учитывать при выборе CMS.