Ikonki stron w urządzeniach moblinych
Optymalizacja stron na urządzenia mobilne jest obecnie standardem. Dlatego nie ma co się dziwić że oprócz standardowej favicony, wymagane są jeszcze inne, specjalnie ikonki dla urządzeń mobilnych. Jak wiadomo, póki co iPady i iPhony to największa rodzina urządzeń mobilnych więc i dla nich powinna być przeprowadzona optymalizacja ikonek. W teście WooRank.com, w którym sprawdzana jakość strony internetowej (technologie, SEO, walidacja itd) jest nawet na to oddzielne miejsce:
Jak więc dodać tego typu ikonki do strony aby urządzenia mobilne mogły ją rozpoznać? Sprawa jest bardzo prosta. Najpierw musimy przygotować 3 obrazki różniące się wymiarami:
- 57×57 px (dla iPhone)
- 72×72 px (dla iPada)
- 114x114px (dla iPhone 4)
następnie kopiujemy te ikonki na serwer naszej strony, i na końcu dodajemy w sekcji <head> następujący kod:
<link rel="apple-touch-icon" href="sciezka/do/pliku/favi_57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="sciezka/do/pliku/favi_72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="sciezka/do/pliku/favi_114x114.png" />
Jeżeli jednak nie mamy dostępu do pliku gdzie możemy ten fragment wyedytować, to jeszcze nic straconego. Wystarczy umieścić w katalogu głównym naszej strony ikonki z następującymi nazwami:
- apple-touch-icon-57×57.png
- apple-touch-icon-72×72.png
- apple-touch-icon-114×114.png
W tym przypadku system iOS będący zainstalowany na smartphonie odwiedzającego, automatycznie wykryje i wyświetli ikonki.
Be the first to comment