Baza wiedzy Zrób darmowy audyt

Viewport, favicona, atrybut lang i ramki iframe — szybka lista kontrolna

Aktualizacja: 18.10.2026

To cztery drobne elementy kodu strony, które audyt sprawdza przy okazji. Tylko jeden z nich bywa poważny: brak viewportu albo viewport ze stałą szerokością, bo wtedy strona na telefonie wygląda jak pomniejszona wersja komputerowa, a Google ocenia właśnie wersję mobilną. Pozostałe to kosmetyka albo informacja. Każdy da się sprawdzić w minutę.

Co dokładnie wykrył audyt

  • Wersja mobilna (viewport) — poważne, jeśli brak albo stała szerokość. Strona nie ma meta tagu viewport albo ma w nim stałą szerokość (np. width=1024) zamiast szerokości ekranu — wtedy na telefonie może być pomniejszona albo przewijać się w bok. Jeśli viewport blokuje powiększanie (user-scalable=no albo maximum-scale=1), dostajesz tylko informację: to nie wpływa na Google, ale utrudnia czytanie osobom słabiej widzącym.
  • Favicona — kosmetyka. Audyt nie znalazł ikony strony ani w kodzie, ani pod adresem /favicon.ico — w wynikach Google zamiast Twojego logo pojawi się domyślna ikona. Osobny komunikat dostaniesz, gdy plik /favicon.ico istnieje, ale strona nie wskazuje go w kodzie (<link rel="icon">): Google zaleca takie wskazanie na stronie głównej, a bez niego może pokazać domyślną ikonę.
  • Język strony — kosmetyka. Tag <html> nie ma atrybutu lang.
  • Ramki iFrame — tylko informacja. Audyt liczy osadzone ramki (mapa, film, formularz). To nie jest błąd.

Jak sprawdzić samemu

Otwórz stronę, naciśnij Ctrl+U (na Macu Cmd+Option+U), a potem Ctrl+F i szukaj po kolei:

  • name="viewport" — powinna być linia w rodzaju <meta name="viewport" content="width=device-width, initial-scale=1">, bez stałej liczby w width i bez user-scalable=no.
  • rel="icon" (albo shortcut icon, apple-touch-icon) — link do ikony. Sam plik pod twojadomena.pl/favicon.ico bez takiego linku w kodzie audyt oznaczy jako uwagę.
  • <html — na samej górze, np. <html lang="pl-PL">.
  • <iframe — każde trafienie to osadzona ramka.

Viewport najszybciej sprawdzisz na telefonie: jeśli trzeba powiększać tekst palcami, a strona ma pasek przewijania w bok, coś jest nie tak.

Viewport — wersja mobilna

Meta tag viewport mówi przeglądarce telefonu: „dopasuj szerokość strony do ekranu”. Bez niego telefon udaje ekran komputera i całość wyświetla w miniaturze. Google indeksuje i ocenia strony głównie w wersji mobilnej (mobile-first indexing), więc to jest realny problem, a nie estetyka.

Poprawny wpis w sekcji <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Sam tag to warunek konieczny, ale nie wystarczający — motyw musi też mieć układ responsywny. Jeśli tag jest, a strona dalej wygląda źle na telefonie, problem leży w CSS motywu.

Jak naprawić

  • WordPress — każdy współczesny motyw ma ten tag. Jego brak zwykle oznacza bardzo stary albo pisany ręcznie motyw. Najlepsze rozwiązanie: aktualizacja lub zmiana motywu. Doraźnie: dopisz tag w pliku header.php motywu potomnego, w sekcji <head>.
  • Shopify, PrestaShop, Shoper — oficjalne szablony mają viewport. Jeśli go brakuje, szablon był przerabiany: w Shopify tag dodaje się w pliku theme.liquid (Edytuj kod), w PrestaShopie w szablonie nagłówka motywu (zwykle templates/_partials/head.tpl). W Shoperze najprościej przywrócić lub zmienić szablon graficzny albo zgłosić to wsparciu.

Favicona — ikona w wynikach Google

Favicona to mała ikona na karcie przeglądarki. Google pokazuje ją też obok adresu w wynikach wyszukiwania. Bez niej zamiast logo widać domyślną, szarą ikonę — wynik wygląda mniej wiarygodnie.

Wymagania Google w skrócie:

  • ikona musi być kwadratowa, minimum 8×8 px, ale Google zaleca większe, np. 48×48 px (w praktyce wgraj 512×512 px — platformy same zmniejszą);
  • link do ikony (rel="icon") ma być na stronie głównej; Google używa jednej ikony na domenę lub subdomenę;
  • ani strona główna, ani plik ikony nie mogą być zablokowane dla Googlebota (sprawdź robots.txt);
  • adres pliku powinien być stały, a ikona powinna przedstawiać markę.

Jak naprawić

  • WordPress 6.5 i nowszy — Ustawienia → Ogólne → Ikona witryny. W starszych wersjach: Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny. WordPress wymaga kwadratu co najmniej 512×512 px, najlepiej PNG. Nie trzeba ręcznie wgrywać pliku favicon.ico.
  • Shopify — Sklep online → Motywy → Dostosuj, następnie Ustawienia motywu (ikona koła zębatego) → Logo lub Favicon, zależnie od wersji motywu. Zmieniaj opublikowany motyw.
  • PrestaShop — Wygląd → Motyw i logo, sekcja favicony. Domyślnie sklep ma ikonę PrestaShopa — warto ją podmienić na własną.
  • Shoper — w szablonach Storefront: Wygląd i treści → Wygląd sklepu → Edycja szablonu graficznego → Edytuj układ i styl szablonu → Ustawienia, sekcja „Ikona w pasku adresu (tzw. favicon)”, potem Zapisz i opublikuj. W szablonach RWD: Wygląd i treści → Wygląd sklepu → Obecny szablon graficzny, zakładka „Szczegóły szablonu”.

Po zmianie Google musi ponownie odwiedzić stronę główną. Według Google trwa to od kilku dni do kilku tygodni. Możesz przyspieszyć: Search Console → Sprawdzenie adresu URL dla strony głównej → Poproś o zindeksowanie. Spełnienie wymagań nie gwarantuje, że ikona się pojawi.

Atrybut lang — język strony

Atrybut lang w tagu <html> mówi przeglądarce, czytnikom ekranu i tłumaczom, w jakim języku jest strona. Dzięki niemu czytnik ekranu czyta tekst z polską wymową, a Chrome nie proponuje tłumaczenia polskiej strony z „nieznanego” języka.

Dla Google to drobiazg: Google sam przyznaje, że język strony rozpoznaje po widocznej treści i nie korzysta z atrybutu lang. Stąd w audycie to kosmetyka. Wersje językowe dla Google oznacza się osobno — zobacz hreflang.

Jak naprawić

  • WordPress — atrybut wstawia motyw funkcją language_attributes(), a wartość bierze z Ustawienia → Ogólne → Język witryny. Jeśli go brakuje, motyw ma w header.php „goły” tag <html> — zamień go na <html <?php language_attributes(); ?>> w motywie potomnym albo zmień motyw.
  • Shopify — w pliku theme.liquid tag powinien wyglądać tak: <html lang="{{ request.locale.iso_code }}">. Oficjalne motywy mają to domyślnie.
  • PrestaShop — motyw bierze kod języka z ustawień sklepu (Międzynarodowe → Lokalizacja → Języki). Brak atrybutu oznacza przerobiony szablon nagłówka.
  • Shoper — atrybut generuje szablon. Jeśli go brakuje, zgłoś to wsparciu Shopera lub autorowi szablonu.

Ramki iframe — treść z innej strony

Ramka iframe osadza na Twojej stronie fragment innej strony: mapę Google, film z YouTube, formularz rezerwacji, opinie. Audyt tylko je liczy — to informacja, nie błąd.

Warto pamiętać o jednym: to, co jest w ramce, technicznie należy do innego adresu. Google czasem łączy treść ramki ze stroną, która ją osadza, ale nie ma na to gwarancji. Dlatego nic, co ma Ci przynosić ruch z Google, nie powinno istnieć wyłącznie w ramce. Typowe wpadki:

  • cennik, oferta lub opis usług wstawione jako iframe z zewnętrznego narzędzia;
  • adres i godziny otwarcia tylko na osadzonej mapie — podaj je też zwykłym tekstem (patrz firma lokalna w Google);
  • opinie klientów wyłącznie w widżecie z ramką.

Filmy i mapy w ramkach są w porządku. Każda ramka to jednak dodatkowe wczytywanie — przy kilku naraz warto zajrzeć do artykułu o szybkości strony.

Jak sprawdzić, że naprawione

  1. Powtórz wyszukiwanie w kodzie (Ctrl+U) w oknie prywatnym — wtyczki cache potrafią serwować starą wersję, więc w razie potrzeby wyczyść cache.
  2. Viewport sprawdź na prawdziwym telefonie albo w przeglądarce: F12 → przełącznik widoku urządzenia mobilnego.
  3. Uruchom audyt ponownie.

Zmiany w kodzie działają od razu dla odwiedzających. Google zobaczy je przy następnej wizycie robota — zwykle w ciągu dni, dla favicony nawet kilku tygodni.

Kiedy warto poprosić o pomoc

Jeśli brakuje viewportu albo atrybutu lang, motyw jest najpewniej stary lub mocno przerabiany — a to zwykle oznacza też inne zaległości, np. brak aktualizacji. W IF.PL zajmujemy się SEO i stronami WWW — możemy ocenić, czy wystarczy poprawka, czy lepiej odświeżyć motyw.

Źródła

cross