SEO - адаптивный веб-сайт и дублированные меню

Каждый раз, когда я создаю адаптивный веб-сайт, я обычно создаю 2 меню: 1 скрытое и используемое для мобильных устройств, а другое отображается как главное меню, а затем скрывается для отображения мобильного меню. Всякий раз, когда речь заходит о SEO и о том, как пауки перемещаются по веб-сайту, мне не хватает дублирующих меню? Могу ли я что-нибудь сделать, чтобы указать пауку, что это меню для мобильных устройств, и это главное?

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

— Howdy_McGee
источник

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

— Саймон Хейтер

Если вы создаете 2 меню, это не отзывчиво. Адаптивные меню используют один и тот же <nav>контент и оформляют его по-разному в зависимости от конкретной точки прерывания медиа-запроса.

— гексалис

@hexalys не обязательно. Я мог бы иметь частичное меню для «Главной навигации по рабочему столу», а затем «Мобильное меню» с более полной навигацией, <nav>просто отображая больше элементов в мобильной версии, чтобы легче было перемещаться.

— Howdy_McGee

@Howdy_McGee Конечно. Но это не совсем то, что вы описываете в вопросе. Например, проблема преобразования средней навигационной панели в верхнее меню или меню гамбургеров для мобильных устройств может быть сложной, но ее можно решить с помощью изменений макета CSS. Мне удалось хорошо здесь: goo.gl/v8HdLD. И я здесь сейчас, потому что я также чрезвычайно обеспокоен ленивым подходом такого намеренного бедняка для двух так называемых плагинов «отзывчивого меню» для wordpress, и их последствиями с точки зрения их соответствия поисковой системы, доступности и производительности.

— hexalys

@hexalys Я думаю, что есть плюсы и минусы; оба имеют свое место соответственно, это просто зависит от ситуации. С тех пор, как я спросил об этом, я увидел больше пользы для одного меню, но не видел ничего, что говорило бы о том, что наличие двух отдельных меню - это плохо, или это искажено в SEO.

— Howdy_McGee

Ответы:

Вам не о чем беспокоиться. Вы можете использовать display: none;для переключения меню. Поисковые системы намного лучше понимают JS и CSS.

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

Насколько плохо использовать display: none в CSS?

Google на самом деле очень любит адаптивный дизайн и предпочитает отдельный мобильный сайт.

Вот хорошая статья на тему « SEO адаптивного дизайна »

Кроме того, проверьте эту статью / видео:

Мэтт Каттс (Google) сказал, что вам не нужно беспокоиться о недостатках, связанных с SEO, при использовании адаптивного подхода к дизайну для мобильных веб-сайтов.

— dasickle
источник

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

— Howdy_McGee

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

— dasickle

@dasickle При таком подходе с несколькими меню, при поиске определенного домена в Google (например, поиск «warmane») он будет включать в результаты поиска навигацию по этому сайту, будут ли это затронуты каким-либо образом?

— Драгос Ризеску

Вы можете использовать, display: flexа затем указать альтернативное order: nзначение для подразделений, которое перемещает ваше разделение меню выше или ниже других подразделений.

Другими словами, вам не нужно два меню с одинаковым содержимым, если вы всегда скрываете одно или другое из них.

— RedGrittyBrick
источник

Большинство мобильных меню «открываются» нажатием кнопки, по сути, открываются в каком-либо модальном окне. Когда дело доходит до веб-сайта, отвечающего стандартам доступности - эти меню должны быть помещены в DOM преднамеренно. Недостаточно просто использовать один NAV в заголовке и применять другой CSS для достижения желаемого макета (в большинстве случаев).

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

— Cody
источник