Ilekroć tworzę responsywną stronę internetową, zwykle tworzę 2 menu: 1 ukryte i używane na urządzenia mobilne, a drugie wyświetlane jako menu główne, a następnie ukryte, aby wyświetlić menu mobilne. Ilekroć chodzi o SEO i pająki poruszające się po stronie, czy mam ochotę mieć duplikaty menu? Czy jest coś, co mogę zrobić, aby zasygnalizować pająkowi, że to menu jest na urządzenia mobilne i to jest główne?
Ostateczny powód, dla którego mam 2 różne menu, wynika z lokalizacji, zwykle menu główne znajduje się w jakimś pasku pod logo itp., Ale menu mobilne chcę nad wszystkim, więc nad logo itp.
seo
web-crawlers
googlebot
navigation
Howdy_McGee
źródło
źródło
position:fixed
lubposition:absolute
dodatkowo większość frameworków, takich jak bootstrap i Zurb Foundation, ma ciągi zapytań, które mogą przenosić elementy w zależności od tego, które urządzenie uzyskuje dostęp do strony ...<nav>
zawartości i inaczej ją stylizują, biorąc pod uwagę konkretny punkt przerwania zapytania medialnego.<nav>
wyświetlania większej liczby elementów w wersji mobilnej, aby łatwiej było nawigować.Odpowiedzi:
Nie masz się czego obawiać. Możesz użyć
display: none;
do przełączania menu. Wyszukiwarki znacznie lepiej rozumieją JS i CSS.Tak długo, jak celowo nie próbujesz manipulować, aby uzyskać lepszy ranking. Korzystanie z wyświetlacza: brak; ukrycie dużych bloków tekstu spowoduje karę. Więc jeśli używasz tylko do ukrywania menu pulpitu na telefonie komórkowym i wersecie wizowym, nie jesteś w żadnym niebezpieczeństwie. Spójrz na ten stary wątek z StackExchange:
Jak źle jest używać display: none w CSS?
Google tak naprawdę lubi responsive design i woli osobną witrynę mobilną.
Oto dobry artykuł na temat „ SEO responsywnego projektowania ”
Sprawdź także ten artykuł / wideo:
Matt Cutts (Google) powiedział, że nie musisz się martwić, że będzie to niekorzystne, związane z SEO, kiedy zastosujesz responsywne podejście do projektowania witryn mobilnych.
źródło
Możesz użyć,
display: flex
a następnie określić alternatywnąorder: n
wartość dla podziałów, która przenosi podział menu powyżej lub poniżej innych podziałów.Innymi słowy, nie potrzebujesz dwóch menu o tej samej zawartości, jeśli zawsze ukrywasz jedno lub drugie z nich.
źródło
Większość menu mobilnych jest „otwieranych” za pomocą kliknięcia przycisku, zasadniczo otwierając się w oknie modalnym. Jeśli chodzi o stronę internetową spełniającą standardy dostępności - te menu muszą być umieszczone w DOM w sposób przemyślany. Nie wystarczy po prostu użyć jednej NAV w nagłówku i zastosować inny CSS, aby uzyskać pożądany układ (w większości przypadków).
Konkluzja - jeśli twoje menu nie jest początkowo widoczne i nakłada się na resztę treści - prawdopodobnie konieczne będzie umieszczenie wielu elementów nawigacyjnych w różnych pozycjach w DOM (ukrywanie jednego i wyświetlanie drugiego w zależności od wielkości ekranu i pożądania ).
źródło