Структура навигации по сайту для SEO и UX

1. Почему навигация сайта так важна для SEO?
2. За любовь к Интернету: будь описательным
3. Различные типы глобальной навигации по сайту
4. Pros
5. Pros
6. Pros
7. Pros
8. Лучший глобальный дизайн навигации сайта - все, что лучше для удобства пользователей

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

Я надеюсь, что после прочтения этого поста вы поймете:

• Почему описательное наименование в вашей навигации имеет значение
• Влияние SEO различных структур навигации от простых однобарочных до гладкой всплывающей навигации
• Как сбалансировать дизайн с удобной для поисковых систем версткой

Как человек, который обычно выкидывает «видеоигры», когда его спрашивают о любимых хобби (да, это правда, Портент нанимает кучку ботаников), я провожу много свободного времени в навигации по меню. Любой, кому приходилось бороться с игрой только для того, чтобы выполнить простую задачу настройки, знает, как негативно меню может повлиять на общее впечатление пользователя. «Почему я должен пройти последовательность из шести кнопок, чтобы добраться до моих зелий ?!» Если это звучит как веб-сайт вашей компании, этот пост для вас.

Я смотрю на тебя, Скайрим. (Скриншот любезно Gamepedia )

Почему навигация сайта так важна для SEO?

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

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

Но существует множество способов структурировать глобальную навигацию сайта. Так какой из них лучший?

Если вы читали какие-либо посты в блоге о SEO в прошлом, вы должны знать лучше, чем задавать этот надоедливый «лучший» вопрос, но мы рассмотрим некоторые общие варианты навигации и обсудим их плюсы и минусы. Но сначала…

За любовь к Интернету: будь описательным

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

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

Напишите свои навигационные ссылки, если SEO важен для вашей цифровой стратегии.

Если ваш сайт посвящен созданию модельных поездов, было бы гораздо лучше иметь «Части модельных поездов», чем «Продукты». Другой пример: если бы я читал пост в блоге на незнакомом сайте, который я нашел с помощью поиска, и один из ваших глобальных элементов навигации - «Предприятие», могу ли я понять, о чем ваш сайт? Или для кого это просто «Предприятия»?

Чтобы узнать больше об этой идее, прочитайте этот пост о Тест чистого листа бумаги ,

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

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

Различные типы глобальной навигации по сайту

Одиночная панель навигации

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

Наши друзья по улице в Мос используйте однобарочное навигационное меню. В этом случае хорошо, что они используют «Продукты», так как они очень известный, хорошо понимаемый бренд. Также обратите внимание на замечательные, описательные «Бесплатные инструменты SEO»!

Если вы думаете исключительно в терминах SEO (не), это <em> идеальная навигация </ em>. Ссылки сразу видны сканерам поисковых систем, их не волнует, что они похоронены в плохо закодированной выпадающей структуре, и их довольно мало.

Pros

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

Cons

• ОЧЕНЬ ограничено количество ссылок, которые вы можете использовать (реально реально только для небольших сайтов или сайтов с небольшим количеством важных страниц)

Двухбарочная навигация

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

Другой от друга в отрасли: STAT использует двойную навигацию без выпадающих списков. Я мог бы быть неравнодушным, но я думаю, что двойное меню Portent довольно элегантно. Это до того, как вы прокрутите вниз. И это после. Второй бар исчезает, и появляется «Услуги».

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

Позвольте мне повторить это, потому что это важно:

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

Но вернемся к двухбарочной навигации.

Pros

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

Cons

• Дизайн может выглядеть загроможденным, если сделано неправильно
• Отсутствие выпадающих списков препятствует группированию тем

Выпадающая навигация

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

Лаборатории продавца

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

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

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

Pros

• Предоставляет место для десятков ссылок
• Связанные страницы могут быть сгруппированы вместе
• Дизайн меньше загроможден, когда выпадающие списки убраны

Cons

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

Выпадающая навигация с выпадающими

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

Ты можешь представить amazon.com без выпадающих пунктов меню?

Всплывающие меню имеют те же преимущества и недостатки, что и простые выпадающие списки.

Примерно так же легко скрыть ссылки от сканеров при помощи JavaScript с выпадающим меню и раскрывающимся списком, но пользователям даже легче столкнуться с разочаровывающим опытом. Чтобы нарисовать картинку, сколько раз <em> вы </ em> зависали над всплывающей подсказкой и двигали курсор в неправильном направлении, только чтобы посмотреть, как все меню убирается?

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

Pros

• Предоставляет место для десятков или сотен ссылок
• Связанные страницы могут быть сгруппированы вместе
• Дизайн меньше загроможден, когда выпадающие и выпадающие меню убраны

Cons

• Всплывающие окна трудно сделать хорошо и могут создать ужасный пользовательский опыт
• Слишком много ссылок могут перегружать пользователей и ослаблять авторитет ссылок
• У сканеров могут возникнуть проблемы с поиском ссылок в выпадающих и всплывающих окнах.
• Hover не работает для пользователей с сенсорным экраном

Сноска о меню нижнего колонтитула

Если вы читали этот пост, думая: «Но подождите!» (Указательный палец в воздухе): «Я добавлю эти дополнительные ссылки в нижний колонтитул».

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

Лучший глобальный дизайн навигации сайта - все, что лучше для удобства пользователей

Возможно, я ошибаюсь из-за упрощения, но в наши дни принцип «что хорошо для UX - это хорошо для SEO» может быть применен ко многим вопросам «что лучше». Не говоря уже о том, что это мешает мне дать ответ Святого Грааля.

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

И поскольку сейчас 2018 год, я по контракту обязан предоставить TL; DR.

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

* Только если у вас есть опытный разработчик, который может заставить его работать на пользователей и сканеров, в идеале с профессиональным надзором за SEO.

И позвольте мне отключить вилы и факелы до того, как они выйдут: есть <strong> множество </ em> вариантов этих стилей меню, которые мы могли бы обсудить, а также много разных названий для структур, которые мы покрывали.

Если вы категорически не согласны с этим, дайте мне знать в комментариях. О, и если кто-нибудь сможет связаться со мной в Bethesda Game Studios, у меня есть мысли о том, как улучшить меню инвентаря следующих Elder Scrolls .