Alan wyjaśnia, jak zaprojektować witrynę mobilną pod kątem indeksowania przez Google.
Większość użytkowników wyszukujących korzysta z urządzeń mobilnych, a Google przeszukuje witryny w poszukiwaniu treści do zaindeksowania przy użyciu klienta użytkownika urządzenia mobilnego w nagłówkach HTTP.
Jeśli nie masz doświadczenia w przeszukiwaniu i indeksowaniu witryn internetowych przez wyszukiwarki, zapoznaj się z sekcją Jak działa wyszukiwanie stronę w Centrum wyszukiwarki Google.
Podczas indeksowania stron mobilnych może wystąpić kilka problemów, m.in. fakt, że witryny mobilne mogą pomijać informacje ważne dla indeksowania w celu zmniejszenia rozmiaru strony.
Chociaż może to zmniejszyć liczbę bajtów do pobrania i nieznacznie poprawić wydajność ładowania, może spowodować, że Twoje strony nie będą pojawiać się tak często w wynikach wyszukiwania – nie jest to dobry efekt uboczny.
Doświadczenia użytkownika, takie jak przyciski Infinite Scroll i Load More, są często popularne na urządzeniach mobilnych.
Mogą jednak powodować problemy z indeksowaniem, ponieważ domyślnie nie jest ładowana cała zawartość strony.
Może to spowodować, że Google nie znajdzie wszystkich treści do zaindeksowania.
Użyj Google Search Console, aby wykryć problemy z indeksowaniem Twojej witryny mobilnej przez Google.
Zoptymalizuj swoją witrynę, aby uzyskać szybsze ładowanie
W trzeciej wskazówce Alan powiedział, że powinieneś także optymalizować swoją witrynę pod kątem większej szybkości działania.
Szybkość witryny jest większym problemem w przypadku urządzeń mobilnych, ponieważ często mają one mniejszą moc i niższą wydajność sieci.
Alan wyjaśnił również, że w poprzednich odcinkach omawiał poprawę wydajności obrazu i JavaScript w Twojej witrynie.
Mogą jednak wystąpić inne problemy.
Jednym z nich jest używanie czcionek internetowych innych firm. Jeśli pobranie czcionki internetowej zajmuje trochę czasu, treść może najpierw zostać wyświetlona przy użyciu czcionki domyślnej, która następnie zostanie zastąpiona czcionką internetową, jeśli będzie dostępna.
Może to spowodować przesunięcie układu treści w miarę ponownego przepływu strony ze względu na zmianę czcionki.
Ponadto potencjalnie gorsze jest to, że renderowanie może zostać całkowicie zablokowane do czasu załadowania czcionki.
Page Speed Insights to doskonałe narzędzie do oceny tego problemu, ponieważ obejmuje zarówno dane laboratoryjne pochodzące ze sztucznych testów wydajności Twojej witryny, jak i dane terenowe oparte na rzeczywistych doświadczeniach użytkowników.
Jeśli chodzi o czcionki internetowe, warto sprawdzić swoją witrynę i sprawdzić, czy można zmniejszyć liczbę używanych czcionek.
Należy także odwoływać się do najważniejszych czcionek na początku strony, aby zostały prawidłowo załadowane i nie powodowały problemów ze zmianą układu.
Zoptymalizuj swoją witrynę pod kątem użyteczności mobilnej
Następna wskazówka dotyczy mniej kwestii technicznych, a bardziej związanych z użytecznością. Upewnij się, że Twoje strony są czytelne na małych ekranach i urządzeniach mobilnych.
Obejmuje to na przykład zapewnienie, że treść nie rozleje się poza krawędź ekranu, upewnienie się, że tekst jest wystarczająco duży, aby wygodnie go czytać, oraz zapewnienie użytkownikom możliwości powiększania treści, jeśli chcą przyjrzeć się jej bliżej.
Kolejną kwestią jest upewnienie się, że ikony przycisków są wystarczająco duże, aby były łatwo rozpoznawalne.
Jeśli interesują Cię techniczne szczegóły optymalizacji witryny mobilnej, zdecydowanie zalecamy obejrzenie tego filmu.
Alan Kent – 8 wskazówek dotyczących transkrypcji dostosowania do urządzeń mobilnych
ALAN KENT: Jak przyjazna dla urządzeń mobilnych jest Twoja witryna e-commerce i czy to naprawdę ma znaczenie? Cześć. Nazywam się Alan Kent i jestem rzecznikiem programistów w Google. W tym odcinku opowiem o tym, jak ważne jest upewnienie się, że Twoja witryna e-commerce jest dostosowana do urządzeń mobilnych. Najbardziej oczywistym powodem do obaw o przyjazność dla urządzeń mobilnych jest to, że ponad połowa ruchu związanego z wyszukiwaniem Google pochodzi od użytkowników korzystających z urządzeń mobilnych. To jest ruch, który potencjalnie będziemy wysyłać do Twojej witryny. Projektowanie wspaniałych wrażeń na urządzeniach mobilnych może być wyzwaniem ze względu na ograniczoną powierzchnię ekranu fizycznego w porównaniu z komputerami stacjonarnymi i laptopami. Ale zgadnij co? Prostsze projekty witryn mobilnych często dobrze sprawdzają się również na większych ekranach. Prostsze strony mogą pomóc kupującym skoncentrować się na podróży zakupowej bez rozpraszania uwagi. Dostosowanie do urządzeń mobilnych jest niewątpliwie ważne dla użytkowników, a Google chce kierować użytkowników do witryn, które najlepiej odpowiadają ich potrzebom. Z tego powodu Google opublikowało wiele artykułów na temat najlepszego tworzenia witryn dostosowanych do urządzeń mobilnych. W szczególności odwiedź Centrum wyszukiwarki Google i witrynę web.dev, gdzie znajdziesz świetne, szczegółowe artykuły. Przyjrzyjmy się zatem bliżej, zaczynając od kilku wskazówek technicznych, a następnie przechodząc do wskazówek dotyczących doświadczenia użytkownika.
Niektóre witryny wolą mieć oddzielną nazwę domeny dla ruchu mobilnego, aby zapewnić użytkownikom mobilnym uproszczoną obsługę. Jeśli użytkownik trafi na niewłaściwą nazwę domeny, zostanie przekierowany na inną stronę. Pierwszą wskazówką w takich przypadkach jest synchronizacja obu witryn. Nie ma nic złego w utrzymywaniu dwóch witryn internetowych, może jednak skutkować opóźnieniami w zakresie zawartości, funkcjonalności lub wydajności jednej z dwóch witryn. Różnice w treści i funkcjonalności mogą być szczególnie irytujące dla kupujących, gdy korzystają z różnych urządzeń. Jeśli zdecydujesz się na prowadzenie dwóch witryn, przydatne mogą okazać się zautomatyzowane narzędzia, takie jak Puppeteer, umożliwiające sprawdzenie, czy obie witryny zachowują się podobnie. Puppeteer udostępnia interfejs API do kontrolowania bezgłowej instancji przeglądarki Chrome, co sprawia, że doskonale nadaje się do automatyzacji testów w ramach procesu kompilacji. Dzięki dyscyplinie możesz synchronizować dwie witryny. Upewnij się tylko, że zawsze przeznaczasz wystarczający budżet na pokrycie prac w obu witrynach. Lepszym rozwiązaniem może być jednak połączenie obu witryn przy użyciu responsywnego projektowania stron internetowych. Responsywne projektowanie stron internetowych wykorzystuje techniki takie jak zapytania o media CSS w celu zmiany układu strony w oparciu o szerokość obszaru wyświetlania. Może to ułatwić zapewnienie spójnych doświadczeń na wszystkich urządzeniach i potencjalnie obniżyć całkowite koszty rozwoju.
Druga wskazówka to zaprojektowanie witryny mobilnej pod kątem indeksowania przez Google. Ponieważ większość użytkowników przeprowadzających wyszukiwania korzysta z urządzeń mobilnych, Google przeszukuje witryny w poszukiwaniu treści do zaindeksowania przy użyciu klienta użytkownika urządzenia mobilnego w nagłówkach HTTP. Jeśli nie masz doświadczenia w przeszukiwaniu i indeksowaniu witryn internetowych, zapoznaj się z naszą stroną Jak działa wyszukiwarka w Centrum wyszukiwarki Google. Przykładowe problemy, które mogą wystąpić podczas indeksowania stron mobilnych, obejmują witryny mobilne, które mogą pomijać informacje ważne dla indeksowania ze stron w celu zmniejszenia rozmiaru strony. Chociaż może to zmniejszyć liczbę bajtów do pobrania i nieznacznie poprawić wydajność ładowania, może spowodować, że Twoje strony nie będą pojawiać się tak często w wynikach wyszukiwania – nie jest to dobry efekt uboczny. Doświadczenia użytkownika, takie jak przyciski Infinite Scroll i Load More, są często popularne na urządzeniach mobilnych. Mogą jednak powodować problemy z indeksowaniem, ponieważ domyślnie nie jest ładowana cała zawartość strony. Może to spowodować, że Google nie znajdzie wszystkich Twoich treści do zaindeksowania. Aby wykryć problemy z indeksowaniem Twojej witryny mobilnej przez Google, sprawdź Google Search Console. Google Search Console zapewnia bogaty wgląd w to, co Google zaindeksował w Twojej witrynie, w tym raporty o wykrytych problemach. Aby uzyskać więcej informacji, obejrzyj wspaniałą serię filmów Daniela na temat maksymalnego wykorzystania Google Search Console. Aby pomóc Google znaleźć wszystkie Twoje strony, rozważ użycie pliku mapy witryny lub udostępnienie Google Merchant Center kanału zawierającego wszystkie strony produktów. Zapewniają one Google alternatywne ścieżki odkrywania stron w Twojej witrynie, zamiast polegać wyłącznie na indeksowaniu.
Wskazówka numer trzy to optymalizacja witryny pod kątem szybkości działania. Szybkość witryny jest generalnie większym problemem w przypadku urządzeń mobilnych, ponieważ często mają one mniejszą moc i niższą wydajność sieci. W poprzednich odcinkach omawiałem poprawę wydajności obrazu i JavaScript w Twojej witrynie. W opisie umieściłem link, dzięki któremu możesz sprawdzić te odcinki, aby uzyskać więcej informacji. Mogą jednak wystąpić inne problemy, na przykład podczas korzystania z czcionek internetowych. Jeśli pobranie czcionki internetowej zajmuje trochę czasu, treść może zostać wyświetlona najpierw z czcionką domyślną, która następnie zostanie zastąpiona czcionką internetową, jeśli będzie dostępna. Może to spowodować przesunięcie układu treści w miarę ponownego przepływu strony ze względu na zmianę czcionki. Potencjalnie gorzej, renderowanie może zostać całkowicie zablokowane do czasu załadowania czcionki. PageSpeed Insights to przydatne narzędzie do analizy stron internetowych. Zawiera szereg raportów związanych z wydajnością. PageSpeed Insights jest szczególnie przydatny, ponieważ obejmuje zarówno dane laboratoryjne, pochodzące ze sztucznych testów wydajności Twojej witryny, jak i dane terenowe oparte na rzeczywistych doświadczeniach użytkowników Twojej witryny. Większość problemów zidentyfikowanych w raporcie PageSpeed Insights zawiera porady dotyczące sposobu ich rozwiązania. W przypadku czcionek internetowych przejrzyj witrynę i zobacz, czy możesz zmniejszyć liczbę używanych czcionek. Spróbuj także odwołać się do najważniejszych czcionek na początku strony, aby zostały poprawnie załadowane. Bardziej szczegółowe porady znajdziesz w artykule Katie na web.dev na temat czcionek internetowych. Ostatnia rada dotycząca szybkości witryny jest taka, że jeśli nie możesz tego zrobić szybko, uczyń to znaczącym. Na przykład, jeśli złożenie zamówienia zajmuje trochę czasu i nic nie możesz z tym zrobić, pokaż klientowi oferty specjalne lub nadchodzące wydarzenia, czekając.
Wskazówka numer cztery nie jest problemem technicznym, a raczej kwestią użyteczności. Ma to na celu zapewnienie czytelności stron Twojej witryny na małych ekranach i urządzeniach mobilnych. Obejmuje to upewnienie się, że treść nie rozlewa się po bokach ekranu, upewnienie się, że tekst jest wystarczająco duży, aby wygodnie go czytać, upewnienie się, że użytkownicy mogą powiększać treść, jeśli chcą przyjrzeć się jej z bliska, oraz upewnienie się, że ikony przycisków są wystarczająco duże, aby można je było łatwo rozpoznawalny. Aby przetestować te problemy, możesz oczywiście wypróbować swoją witrynę na własnym telefonie, a także poprosić znajomych z telefonami różnych marek, aby również ją wypróbowali. Jednak podczas programowania możesz także użyć narzędzi takich jak Narzędzia dla programistów Chrome, aby wybrać urządzenie mobilne do emulacji z przeglądarką na komputerze. Może to ułatwić przetestowanie wyglądu Twojej witryny na różnych urządzeniach. Jeśli lubisz automatyzować testy, ponownie Puppeteer może się przydać.
Naprawienie witryny po wykryciu jakichkolwiek problemów zazwyczaj polega na przerobieniu znaczników HTML i CSS witryny.
Oprócz czytelności upewnij się, że Twoja witryna nie cierpi na typowe problemy z obsługą na urządzeniach mobilnych. Przykładami mogą być struktury nawigacji, takie jak menu, które są zbyt trudne w użyciu na małym urządzeniu, przyciski są zbyt małe, aby można je było łatwo nacisnąć, przyciski rozmieszczone w sposób uniemożliwiający obsługę jedną ręką oraz nadmierne poleganie na klawiaturze podczas poruszania się po witrynie . Wiele problemów z użytecznością najlepiej wykryć przeprowadzając analizę użyteczności witryny. Obserwowanie, jak nowy użytkownik próbuje znaleźć produkt i dokonać zakupu w Twojej witrynie, może otworzyć oczy. To, co jest dla Ciebie oczywiste, nie zawsze jest oczywiste dla osoby odwiedzającej witrynę po raz pierwszy. I nie zapomnij sprawdzić doświadczenia z udoskonalaniem wyników wyszukiwania w witrynie. Wprowadzanie tekstu na urządzeniu mobilnym jest zazwyczaj trudniejsze, dlatego upewnij się, że nie musisz ponownie wprowadzać tekstu, aby zawęzić wyszukiwanie. Oprócz inspekcji ręcznych do wykrycia niektórych problemów można zastosować narzędzia. Narzędzia mają tę zaletę, że można je zintegrować z procesem tworzenia i wydawania witryny internetowej. Sprawdź na przykład narzędzie testowe przyjazne dla urządzeń mobilnych. Po prostu wprowadź adres URL strony w swojej witrynie, a zostanie ona przeanalizowana pod kątem typowych problemów, np. ta witryna korzysta z przestarzałej wtyczki, takiej jak Flash, właściwość viewport nie jest zdefiniowana w metatagu, a rozmiar czcionki jest zbyt mały, aby wygodnie czytać. Google Search Console udostępnia także raport dotyczący użyteczności na urządzeniach mobilnych stron zaindeksowanych przez Google w Twojej witrynie. Poszukaj opcji Obsługa mobilna w menu na pasku bocznym.
Problemy z użytecznością zazwyczaj rozwiązuje się poprzez przerobienie kodu HTML i CSS w witrynie, a następnie przetestowanie, aby upewnić się, że problem został rozwiązany.
Wskazówka numer szósta to zrozumienie i uproszczenie doświadczeń użytkowników w Twojej witrynie. Przykładowe typowe obszary wymagające ulepszeń obejmują formularze służące do zbierania szczegółów płatności i wysyłki w trakcie realizacji transakcji, a karuzele to popularny sposób na umieszczenie większej ilości informacji na obszarze o ograniczonym ekranie. Stosowanie technik takich jak progresywne aplikacje internetowe, w skrócie PWA, może również zapewnić użytkownikom bogatsze doświadczenia w Twojej witrynie przypominające aplikacje. Wykrywanie problemów w przepływach użytkowników zazwyczaj wymaga ręcznej analizy użyteczności. Narzędzia mogą pomóc wykryć dobrze znane problemy, ale nie można na nich polegać, aby znaleźć wszystkie problemy z użytecznością. Korzystając z formularzy, upewnij się, że Twoja witryna prawidłowo obsługuje automatyczne uzupełnianie szczegółów płatności i wysyłki. Aby dowiedzieć się więcej, przejrzyj świetne treści i formularze autorstwa Sama Duttona na stronie web.dev. Jeśli witryna utrzymuje bazę danych klientów zawierającą hasła, upewnij się, że pola formularzy są poprawnie oznaczone, aby przeglądarki mogły oferować użytkownikom zapamiętywanie haseł. Hasła, w porównaniu do standardowych pól autouzupełniania i autouzupełniania, należy traktować ze szczególną ostrożnością, aby zapewnić ich bezpieczeństwo. Jeszcze lepiej, rozważ skorzystanie z usług zewnętrznego dostawcy tożsamości, takiego jak Google, aby kupujący nie musieli pamiętać kolejnego hasła. Każda witryna zarządzająca własną bazą danych haseł zwiększa ryzyko kradzieży haseł, co z kolei może narazić inne witryny na ataki, ponieważ wielu użytkowników ponownie używa haseł w różnych witrynach. Jeśli używasz karuzel w swojej witrynie, zapoznaj się ze świetnymi radami Katie na web.dev. Praktyki takie jak automatyczne przewijanie w karuzelach mogą wyglądać efektownie, ale często powodują gorsze wrażenia użytkownika. Progresywne aplikacje internetowe i potencjalnie powiązane aplikacje jednostronicowe, czyli SPA, to obszerny temat, wykraczający poza zakres tego filmu. Sprawdź web.dev, gdzie znajdziesz świetne artykuły na temat PWA.
Wskazówka numer siedem to kwestie personalizacji na urządzeniach mobilnych. Użytkownicy urządzeń mobilnych zazwyczaj mają większe oczekiwania w zakresie personalizacji. Wpływ na to ma wiele czynników, w tym urządzenia mobilne zazwyczaj nie są udostępniane, a zatem mają charakter osobisty, a mniejsze ekrany oznaczają, że ważniejsze jest, aby to, co jest wyświetlane, było dostosowane do użytkownika. Skutecznym sposobem sprawdzenia, czy Twoja witryna może zyskać na personalizacji, jest przeprowadzenie audytu witryny. Na przykład wywiady z klientami to świetny sposób na uzyskanie głębszego wglądu w oczekiwania użytkowników. Personalizacja ma wiele postaci. Może to być tak proste, jak wyświetlenie produktów na stronie głównej, które użytkownik oglądał podczas ostatniej wizyty, lub pokazanie ofert wybranych na podstawie profilu użytkownika. Personalizacja może być również zaawansowana przy użyciu silników rekomendacji opartych na sztucznej inteligencji, opartych na działaniach użytkownika na stronie. Obecnie na rynku dostępnych jest wiele świetnych produktów do personalizacji i rekomendacji, w tym od Google. Personalizacja często czerpie korzyści z zapamiętywania użytkowników. Stosowanie plików cookie to powszechny sposób na zapamiętanie upodobań użytkownika z poprzedniej wizyty, bez konieczności poznania jego pełnej tożsamości. Alternatywnie witryna może oferować bardziej spersonalizowaną wizytę, jeśli użytkownik utworzy konto i zaloguje się, akceptując wszelkie warunki gromadzenia i przechowywania danych o kupującym.
Ostatnia wskazówka to sprawdzenie, czy Twoja witryna może wykorzystywać bardziej zaawansowane metody wprowadzania danych udostępniane przez urządzenia mobilne, takie jak ekrany dotykowe, kamery, usługi lokalizacyjne geolokalizacji i wprowadzanie głosowe. Mogą oferować klientom nowe i angażujące sposoby interakcji z Twoją witryną. Przykłady zaawansowanych interakcji obejmują używanie gestów szczypania i przesuwania w celu powiększania i przeglądania zdjęć produktów na stronie produktu, korzystanie z usług lokalizacyjnych, aby najpierw pokazać użytkownikowi produkty w najbliższym sklepie stacjonarnym, obsługa wprowadzania głosowego w celu ograniczenia konieczności pisania na klawiaturze mobilnej , zapewniając użytkownikowi rzeczywistość rozszerzoną, dzięki czemu może lepiej wizualizować, jak mebel wygląda we własnym domu przed zakupem, oraz przeprowadzając wyszukiwanie obrazów produktów na podstawie przykładowych wzorów materiałów zarejestrowanych kamerą przy użyciu powierzchni takich jak Google Vision API. Wiele, choć nie wszystkie, funkcji aplikacji natywnych jest obecnie obsługiwanych przez mobilne przeglądarki internetowe. Sprawdź projekt Google Fugu, aby uzyskać listę takich zaawansowanych możliwości i zobaczyć, co jest możliwe. Możesz także skorzystać ze stron takich jak caniuse.com, aby sprawdzić, jak szeroko dana funkcja jest obsługiwana w różnych przeglądarkach, zanim użyjesz jej we własnej witrynie. Należy pamiętać, że jeśli dana funkcja nie jest dostępna we wszystkich przeglądarkach, JavaScript zazwyczaj wykrywa, czy dana funkcja jest dostępna, czy nie, i odpowiednio reaguje. Oznacza to, że nie wszystkie przeglądarki muszą obsługiwać tę funkcję, abyś mógł z niej skorzystać na swojej stronie. Dziękujemy za obejrzenie odcinka poświęconego dostosowywaniu witryny do urządzeń mobilnych. Aby otrzymywać powiadomienia o nowych treściach, gdy tylko będą dostępne, zasubskrybuj. Do następnego razu.
