TREŚĆ SZERSZA NIŻ EKRAN – naprawa problemu
Ostatnio miałem okazję rozwiązać problem z Google Search Console, który miałem na swojej stronie internetowej. Chciałbym podzielić się z Wami moimi doświadczeniami i wskazówkami dotyczącymi tego problemu.
Jednym z komunikatów, który pojawiał się w Google Search Console, był „Treść szersza niż ekran”. To oznaczało, że na mojej stronie treść była zbyt szeroka i wymagała przewijania w poziomie na wersji mobilnej strony. Google wskazało, że problem ten mógł wynikać z używania wartości bezwzględnych w deklaracjach CSS lub z obrazów zaprojektowanych pod kątem określonych szerokości przeglądarek, takich jak 980 pikseli.
Rozwiązanie tego problemu okazało się dość proste. W pierwszej kolejności musiałem dostosować szerokości i pozycje elementów CSS na mojej stronie na wartości względne. Zamiast korzystać z twardych wartości szerokości, zacząłem używać procentów, co pozwoliło na bardziej elastyczne dostosowanie treści do różnych rozmiarów ekranów.
Kolejnym krokiem było dostosowanie obrazów. Zamiast korzystać z obrazów o stałej szerokości, zacząłem używać obrazów skalowanych proporcjonalnie do szerokości ekranu. Dzięki temu obrazy były dostosowane do rozmiarów urządzenia, na którym była wyświetlana strona, co eliminowało konieczność przewijania w poziomie.
Mogę teraz śmiało powiedzieć, że rozwiązanie tego problemu zaowocowało znaczącą poprawą w doświadczeniu użytkownika na mojej stronie. Treść jest teraz czytelniejsza i łatwiej dostosowuje się do różnych urządzeń mobilnych. Dlatego chciałbym polecić wszystkim, którzy borykają się z podobnym problemem, aby dostosowali swoją stronę do wartości względnych i skalowalnych obrazów. To prosta zmiana, która może znacząco wpłynąć na efektywność i użyteczność strony. Dla tych szukających prostych rozwiązań wystarczy wkleić 5 linijek kodu do CSS całej strony.
Kod, który tak naprawdę rozwiązuje zazwyczaj problem dzięki CSS znajdziesz niżej,
Poniżej znajduje się kod CSS, który dodałem do mojego arkusza stylów, który tak naprawdę rozwiązuje zazwyczaj problem dzięki CSS:
img {
max-width: 100%;
display: block;}
iframe {
max-width: 100%;}
Deklaracja CSS powyżej wprowadza dwie ważne zmiany, które pomagają dostosować treść do urządzeń mobilnych:
Pierwsza właściwość, max-width: 100%;, jest kluczowa. Dla elementów „img” i „iframe” oznacza ona, że szerokość tych elementów nie może przekroczyć dostępnej szerokości ekranu na urządzeniach mobilnych. Dzięki temu obrazy i osadzone ramki (iframe) idealnie dopasowują się do różnych rozmiarów ekranów, eliminując konieczność przewijania w poziomie.
Druga deklaracja, display: block;, dotyczy elementów „img” i sprawia, że obrazy są wyświetlane jako bloki. To pozwala na lepszą kontrolę nad ich położeniem i dostosowaniem do szerokości ekranu. Ten prosty krok pomaga uniknąć problemu zbyt szerokich obrazów na urządzeniach mobilnych.
Dodając te deklaracje CSS na mojej stronie, czuję pewność, że treść jest teraz jeszcze bardziej dostosowana do różnych urządzeń mobilnych. To zdecydowanie poprawiło użytkowość mojej strony i pomogło rozwiązać problem „Treść szersza niż ekran” w Google Search Console. Jeśli sami macie z tym problem, gorąco polecam te zmiany. Dzięki nim Wasza strona będzie bardziej przyjazna dla urządzeń mobilnych i lepiej widoczna w wynikach wyszukiwania.
Ostatni, ale kluczowy etap to potwierdzenie wprowadzonych poprawek Po dokonaniu wszystkich zmian, publikujesz zaktualizowaną stronę i ponownie sprawdzasz ją za pomocą narzędzia Obsługa na urządzeniach mobilnych Jeśli błędy już się nie pojawiają, przyszedł czas na potwierdzenie wprowadzonych poprawek w Konsoli Wyszukiwania Google. To proste – wystarczy kliknąć przycisk „Zweryfikuj poprawki”, który znajdziesz w prawym górnym rogu obok adresu URL, który wcześniej zgłaszał problem (w sekcji dotyczącej użyteczności mobilnej). Dzięki temu upewnisz się, że Twoja strona jest gotowa do bycia jeszcze bardziej przyjazną dla urządzeń mobilnych i lepiej widoczna w wynikach wyszukiwania.
Jeśli macie jakieś pytania dotyczące tego rozwiązania lub potrzebujecie dodatkowej pomocy, chętnie służę radą i wsparciem – kontakt. Pamiętajcie, że dostosowanie strony do ekranów mobilnych to kluczowy krok w poprawie widoczności w wynikach wyszukiwania i zwiększeniu liczby odwiedzających.
Dodatkowy opis problemu znajdziesz tutaj: Google Support