Wiele wyszukiwarek określa ranking stron na podstawie ich dostosowania do komórek. Bez metatagu widocznego obszaru urządzenia mobilne renderują strony przy typowej szerokości ekranu komputera, a następnie pomniejszają je, co utrudnia ich czytanie.
Dzięki metatagowi widocznego obszaru możesz kontrolować szerokość i skalowanie widocznego obszaru, by dopasować go do właściwego rozmiaru na wszystkich urządzeniach.
Niepowodzenie kontroli metatagów widocznego obszaru w Lighthouse
Lighthouse oznacza strony bez metatagu widocznego obszaru:
Strona nie przejdzie kontroli, chyba że zostaną spełnione wszystkie z tych warunków:
– Pole <head> dokumentu zawiera tag <meta name="viewport">.
– Metatag widocznego obszaru zawiera atrybut content.
– wartość atrybutu content zawiera tekst width=.
Jak dodać metatag widocznego obszaru
Dodaj tag <meta> widocznego obszaru z odpowiednimi parami klucz-wartość do elementu <head> strony:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Działanie każdej pary klucz-wartość:
– width=device-width ustawia szerokość widocznego obszaru na szerokość urządzenia.
– initial-scale=1 ustawia początkowy poziom powiększenia, gdy użytkownik odwiedza stronę.