Optymalizacja dla urządzeń mobilnych css. Dostosuj szablon do przeglądania na urządzeniach mobilnych

Witam, drodzy czytelnicy bloga. Nie pierwszy raz o tym wspominam w artykułach nastąpił znaczny wzrost w RuNet ruch mobilny . Zaczyna to mieć dość duży wpływ na życie webmasterów i SEO.

Po pierwsze, wielu właścicieli witryn zaczyna zastanawiać się nad sposobami zarabiania na ruchu mobilnym, którego jest coraz więcej (nawet takiego potwora, który oferuje już własne możliwości zarabiania na osobach odwiedzających Twoją witrynę z urządzeń mobilnych).

Ale najważniejsze jest to, że robimy to „drugi”. Faktem jest, że witryna, która nie jest przystosowana do przyjmowania tego samego ruchu mobilnego, może poważnie stracić swoją pozycję w wynikach wyszukiwania z powodu pogarszających się cech behawioralnych. NA telefon komórkowy Korzystanie z poziomego przewijania podczas czytania tekstu lub wyszukiwania menu jest bardzo niewygodne, dlatego ludzie szybko opuszczają takie zasoby i z reguły nie przechodzą na inne strony.

Oczywiście wiedziałem to wszystko już od dłuższego czasu, ale zawsze było coś ważniejszego i najważniejszego, a pełna koncepcja przystosowania serwisu do przeglądania na urządzenia mobilne Po prostu nie mieściło mi się to w głowie. Jednak wczoraj rano Google bardzo mnie nalegał, wysyłając mi wiadomość od 21 kwietnia przy ustalaniu rankingu wyszukiwania witryny, Google weźmie pod uwagę, czy wygodne jest przeglądanie stron internetowych na urządzeniach mobilnych.

Jak mówią, przybyli. Musiałem wziąć głowę w rękę i w pół dnia opracować i wcielić w życie koncepcję mobilizacji witryny. Oczywiście pośpiech i niepełne zrozumienie wszystkich opcji rozwiązania tego problemu wpłynęło na elegancję rozwiązania problemu, ale „to, co wyrosło, urosło” i po drodze będzie można to ukończyć. główne zadanie ukończone - . A jak tego dokonano, przeczytacie w dalszej części tej publikacji.

Znaczenie optymalizacji witryn mobilnych i przyszłe wyzwania

Najpierw więc opiszę obecną sytuację, a następnie możliwości jej rozwiązania, które wybrałem. Jak wspomniałem powyżej, o optymalizacji stron internetowych pod kątem urządzeń mobilnych zacząłem myśleć już dawno temu, ale czasami, aby zrobić krok do przodu, potrzebny jest ktoś, kto da ci solidnego kopa w tyłek. Tym kopnięciem okazał się list od Google Adsense informujący, że nadszedł czas, aby w końcu rozwiązać ten problem.

Właściwie podobne listy od tego adresata przychodziły regularnie (zwykle podawały przykłady, jak dobrze wyszło witrynom zoptymalizowanym pod ruch mobilny), ale tutaj było tylko ultimatum:

17 procent ruchu mobilnego to moim zdaniem całkiem przyzwoity wynik, ale szczerze mówiąc nie wspominając o ewentualnej zmianie algorytmu Ranking Google a biorąc pod uwagę czynnik optymalizacji witryny pod kątem urządzeń mobilnych, raczej bym się nie ruszał (zawsze jest ważniejsza czynność, zwłaszcza gdy nie masz w głowie konkretnego planu rozwiązania problemu).

Nawiasem mówiąc, 17 procent odwiedzających odwiedza witrynę z urządzeń mobilnych i jasne jest, że wskaźnik awaryjności takich użytkowników jest znacznie wyższy niż w przypadku tych, którzy uzyskali dostęp do witryny z komputera lub laptopa (tj. Problem jest oczywisty):

Link podany w piśmie prowadził do Usługa Google'a, gdzie można ocenić jakość optymalizacja mobilna swoją witrynę zgodnie z zasadą: wszystko w porządku, albo kompletna horror. Początkowo na stronie pojawił się oczywiście smutny czerwony werdykt (alarm):

Na zrzucie ekranu do ilustracji wykorzystałem blog szanowanej Devaki, ponieważ teraz mam nieco inny obraz. Wydaje mi się, że w moim przypadku wskazano nawet trzy powody, które utrudniają przeglądanie witryny na telefonach komórkowych, ale ta usługa tak naprawdę wydaje tylko werdykt.

Aby jednak poznać szczegóły, polecam skorzystać z innej usługi tego samego Google o nazwie. Tutaj wszystko będzie mniej więcej szczegółowe i przynajmniej będzie jasne „w którą stronę kopać”:

Mają też jeszcze jedno podobna usługa, ale poddaje się go jedynie ocenie, ale niestety nie ma zaleceń dotyczących ulepszeń. Możesz jednak subskrybować zmiany:

W naszym przypadku warto zwrócić uwagę na ocenę „Łatwość użytkownika” w zakładce „Na urządzenia mobilne”. Wiadomo, że prędkość ładowania też jest ważna, ale dla mnie osobiście wszystko sprowadza się do ustawień serwera, których sam nie jestem w stanie zmienić (ponieważ jestem noobem w administrowaniu serwerem), a nadal nie mogę się za to zabrać dogadanie się z obsługą techniczną Infoboxa (znowu oczywiście potrzebuję kopa w tyłek, żeby ruszyć). Ale to już chyba temat na osobny artykuł.

Zadanie przede mną na wieczór Wczoraj został rozwiązany, a strona otrzymała 95 i 100 możliwych punktów za łatwość obsługi użytkownicy mobilni. W związku z tym serwis Google, do którego link podano w piśmie, twierdzi, że teraz wszystko jest w porządku (dzięki ładowarce):

Pochwalił się, teraz można zacząć opisywać podjęte kroki i planowane strategie. Więc było kilka problemów, które należało rozwiązać:

Liczby w pikselach oznaczają punkty przerwania. Jeśli zaczniesz zmniejszać to okno (z otwartą w nim stroną https://strona) na szerokość (w prawym górnym rogu przeglądarki znajduje się przycisk z dwoma nałożonymi na siebie kwadratami - powiedział „Kapitan Oczywisty”), to to wtedy, gdy przekroczysz szerokość 1025px i 760px, nastąpią zmiany w projekcie.

Najpierw odpadnie pasek boczny (spadnie na sam dół) i trochę zmieni się górne menu (chcę w przyszłości zrobić z niego menu rozwijane dla telefonów komórkowych, ale jeszcze się za to nie zabrałem) jednak jak zwykle).

W drugim punkcie krytycznym zauważysz, że w miarę dalszego zmniejszania szerokości obszaru wyświetlania tekst, zdjęcia i filmy zaczną dopasowywać się do nowego rozmiaru (dopasowywać się do niego), a znajdujący się poniżej pasek boczny również ulegnie zmianom. Właściwie powiększyłem nawet czcionkę dla ekranów o szerokości mniejszej niż 760 pikseli (na wszelki wypadek).

Jednak moim zdaniem pierwsza opcja ma jedną istotna wada. Podczas ładowania strony ładowane są wszystkie trzy wersje pliku stylu (a nie tylko ta, która będzie używana dla danej szerokości rzutni). Ponieważ wszystkie ważą mniej więcej tyle samo i zawierają prawie tę samą liczbę właściwości CSS, to jest to .

Dlatego zdecydowałem się skorzystać z drugiej opcji stworzenia responsywnego projektu strony, aby zoptymalizować ją pod kątem urządzeń mobilnych. Polega na. W tym przypadku nie będzie potrzeby tworzenia trzech kopii pliku stylów, ale wystarczy dodać coś takiego na dole głównego pliku:

Ekran @media i (maksymalna szerokość: 1025 pikseli) ( Właściwości CSS, co zmieni projekt, gdy szerokość ekranu będzie mniejsza niż 1025px) @media screen i (max-width: 760px) (Właściwości CSS, które zmienią projekt, gdy szerokość ekranu będzie mniejsza niż 760px)

Otóż ​​w obszarach ograniczonych nawiasami klamrowymi wystarczy napisać te właściwości CSS, które ulegną zmianom, aby dostosować szablon Twojej witryny do urządzeń mobilnych.

To prawda, że ​​nadal nie do końca rozumiałem niuanse łączenia tych dyrektyw w przeglądarce, ponieważ po prostu nie działały. musiałem dodaj do pliku header.php Są to linie (łączące ten sam plik stylu, ale z różne rozdzielczości ekran):

Dokładnie tak to wszystko działa na tym blogu. ten moment czas.

Generalnie wybrałem drugą opcję, ale nie od razu, więc musiałem porównać zawartość plików small-device-min.css i small-device.css z oryginalnym style.css, aby zidentyfikować linie, w których Wprowadziłem zmiany. Następnie włożyłem te dreny do środka nawiasy klamrowe Dyrektywy @media pokazane powyżej (na końcu głównego pliku style.css). Ale to nie jest już ważne.

Dostosowujemy szablon dla wygody użytkowników mobilnych

Zatem pobrałeś swoją witrynę z Internetu, wrzuciłeś ją na lokalny serwer i zapoznałeś się z zasadami, którymi będziemy się kierować. Teraz czas zacząć eksperymentować. Z oczywistych względów nie mogę Ci jednoznacznie doradzić (ponieważ wszystkie szablony są różne, nawet dla tego samego silnika), co dokładnie należy w Twoim przypadku zmienić i jakie punkty krytyczne wybrać.

Dla uproszczenia można ogólnie zaznaczyć tylko jeden punkt słowa, np. równy standardowej szerokości części głównej (środkowej, w której wyświetlane są artykuły) i niczego wcześniej nie zmieniać. Ale moja opcja wydawała mi się lepsza, chociaż nie miałem zbyt wiele czasu na myślenie o tym.

Co zobaczą użytkownicy na ekranach mniejszych niż pierwszy punkt krytyczny?

Patrzeć. Aby wdrożyć projekt wielokolumnowy w nowoczesnym układzie są używane. Na przykład mój pasek boczny unosi się na prawo od głównego obszaru dzięki:

#sidebar(float:w prawo;)

Aby więc przerwać układ dwukolumnowy i uczynić go układem jednokolumnowym, będę musiał zastąpić wartość reguły zmiennoprzecinkowej we właściwych miejscach. Naprawdę naszukałem się wszystkiego, bo trochę zapomniałem o strukturze mojego szablonu i w związku z tym mogłem wyłapać coś niepotrzebnego, ale taka jest specyfika „składania projektu na kolanach” bez odpowiedniego doświadczenia. Ale odkąd eksperyment trwał serwer lokalny, następnie po półtorej godzinie znalazłem wszystkie niezbędne punkty (metodą prób i błędów), których wynik możesz teraz obserwować.

W związku z tym najpierw należało wytrenować szablon do ułożenia w dwóch kolumnach, co wymagało zapisania wewnątrz dyrektywy @media (z pierwszym i drugim punktem przerwania):

#sidebar(float:none;) #sidebar(float:none !ważne;)

Pozostał problem z górne menu , który niezbyt ładnie się łamie i zajmuje dużo miejsca na małym ekranie, ale w planach jest zrobienie z niego rozwijanego menu dla mobilnej wersji serwisu (jeśli mi się uda, napiszę o tym). Tak, liczniki na samym dole zostały zbudowane jak dom (dopiero teraz to zauważyłem), ale trudno to naprawić (najważniejsze, żeby nie zapomnieć).

Załóżmy więc, że zrobisz trochę magii na lokalnym serwerze, poeksperymentuj i w rezultacie otrzymasz strawną opcję dostosowania swojej witryny do urządzeń mobilnych odwiedzających. Pozostaje tylko przenieść tę sprawę na stronę roboczą. Oczywiście nie skopiujesz wszystkich plików (nie mówiąc już o bazie danych), ponieważ wystarczy dodać (skopiować) kilka linii do pliku header.php i przenieść jeszcze kilka linii do głównego pliku stylów (te znajdujące się w dyrektywy @media).

Następnie możliwe będzie sprawdzenie wprowadzonych zmian (może być konieczne zresetowanie pamięci podręcznej w silniku lub przeglądarce) na ekranie komputera podczas zmniejszania szerokości okna przeglądarki oraz na Twoim gadżety mobilne(telefon, tablet). Jeśli coś „wyjdzie”, wówczas będzie można szybko skorygować tę kwestię.

Najważniejsze, że po zmiany dokonane Twoja strona internetowa zdał test Google pod kątem przydatności do przeglądania na urządzeniach mobilnych (nie zapomnij zresetować pamięci podręcznej przed wykonaniem tej czynności). Cóż, z czasem dokończysz szczegóły.

Używanie adaptacyjnego kodu blokowego z Google AdSense na stronie internetowej w celu adaptacyjnego (responsywnego) projektowania

Porozmawiajmy teraz o Google Adsense. Jeśli nie pracujesz z tym systemem reklama kontekstowa, to nie musisz czytać dalej. Jeśli pracujesz i używasz na swojej stronie kodu bloków reklamowych o stałym rozmiarze, będziesz musiał go zmienić na kod bloków adaptacyjnych (Google, jak rozumiem, nalega na to), aby ładowały się reklamy o odpowiednim rozmiarze na urządzeniach o różnej szerokości ekranu.

W rzeczywistości nie jest to wcale trudne, ale osobiście miałem blokadę, która wymagała wysiłku umysłowego, aby ją usunąć. Czyli z godną pozazdroszczenia regularnością (żeby nie powiedzieć, że jest gorzej, raczej lepiej, ale jak się długo nie logujesz, to trochę się rozłączasz). Z tego powodu artykuł cytowany w linku musiałem już kilka razy przepisywać, ale znów jest on nieaktualny, co oznacza, że ​​wkrótce pojawi się jego czwarte wcielenie (choć jest to męczące).

OK, nie o to chodzi. Aby utworzyć nowy blok reklamowy Będziesz musiał kliknąć koło zębate po prawej stronie w interfejsie AdSense górny róg i wybierz opcję „Ustawienia”. Na stronie, która się otworzy, potrzebujemy najwyższy punkt menu „Moje reklamy”, w którym możesz utworzyć nowy blok, wystarczy kliknąć przycisk o tej samej nazwie:

Na stronie, która się otworzy, domyślnie zostanie Ci zaoferowany blok adaptacyjny. Tutaj należy wybrać rodzaj reklam, które będą wyświetlane (w większości przypadków bardziej opłaca się pokazać wszystko), a następnie określić dla tego bloku ten sam kanał klienta, który ustawiłeś dla starego bloku (który będziesz zastępować). Faktem jest, że niektórzy reklamodawcy mogą kierować swoje reklamy na Twoją witrynę właśnie za pośrednictwem tego kanału klienta i aby ich nie stracić, musisz wybrać ten sam kanał dla nowego bloku reklamowego.

U mnie ta metoda nie zadziałała (okazała się jakimś śmieciem), więc spróbowałem przejdź do pomocy Google Adsense i znajdź rozwiązanie i w końcu znalazłem to na tej stronie.

To jest dokładnie ta wersja kodu, której użyłem (on różne urządzenia pokaże bloki odpowiednie rozmiary). Wydaje się, że wszystko zaczęło wyglądać tak, jak powinno, ale nie do końca. Po pierwsze zauważyłem, że po zmianie kodu statystyki wyświetleń przestały się zmieniać reklamy NA strona główna Adsens. Przeglądając statystyki specjalnie dla nowego bloku zauważyłem, że wyświetleń praktycznie nie było.

Po drugie, postanowiłem, że wygląd reklam (kolor, czcionka) w nowym bloku adaptacyjnym będzie taki sam, jak w starych reklamach. Po wprowadzeniu zmian doszło do jeszcze większej liczby nieporozumień. Reklamy wyświetlane w artykule nie zmieniły swojej szaty graficznej. Zacząłem porównywać kod strony źródłowe(w przeglądarce możesz to zrobić wybierając odpowiednią pozycję z menu prawy przycisk mysz) i odkryłem, że w jakiś sposób po kilku liniach kodu dodano znacznik podziału wiersza BR.

Dlatego usunąłem wszystkie spacje i podziały wierszy w problematycznych obszarach, po czym reklamy natychmiast zmieniły swój wygląd i zaczęto zliczać statystyki. Jest to rodzaj problemu, który jest możliwy.

Wcześniej miałem synchroniczny kod AdSense (zainstalowałem go w 2012 roku) i teoretycznie mógł on zmniejszyć prędkość ładowania witryny. Nowoczesny kod jest w całości asynchroniczny, co całkowicie eliminuje możliwość spowodowania opóźnienia w ładowaniu strony. Myślę, że to szum, ale jak mówią, zobaczymy.

P.S. Oto krótki raport z tego, co zrobiłem po napisaniu artykułu.

ktonanovenkogo.ru="">

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz obejrzeć więcej filmów, przechodząc do

");">

Możesz być zainteresowany

Jak zrobić spis treści (treść, menu) artykułu na stronie internetowej

Dzięki szybkim poprawkom możesz zapisać swoją witrynę w Mobilegeddon i mieć pewność, że przejdzie ona test zgodności Google.

Wstęp

W kwietniu 2015 roku nastąpiła prawdziwa rewolucja świat wirtualny, który już został nazwany „Mobilegeddon”. Dzieje się tak, ponieważ Google zmienił swój algorytm i zaczął pozycjonować witryny zoptymalizowane pod kątem urządzeń mobilnych ponad pozostałe. Dlatego wszyscy właściciele witryn masowo pospieszyli z wprowadzeniem zmian w swoich zasobach.

W chwili pisania tego tekstu możemy powiedzieć, że wpływ zmienionego algorytmu na wyniki wyszukiwania nie jest zbyt duży, ale charakteryzuje się już dodaniem nowej etykiety obok wyników wyszukiwania mobilnego.

Ale w przyszłości sytuacja może się radykalnie zmienić. Dlatego warto sprawdzić kompatybilność swojej witryny z gadżetami mobilnymi.

Być może wcześniej nie miałeś wystarczająco dużo pieniędzy i czasu, aby zoptymalizować swoje zasoby. Ale teraz jest czas, aby to zrobić, bo prędzej czy później zostaniesz wepchnięty w kąt i będziesz musiał zrobić to samo, ale szybko, nie myśląc o konsekwencjach.

Czego więc szuka test zgodności Google z urządzeniami mobilnymi?

Google dzieli test na pięć elementów, a za zdanie każdego z nich możesz zdobywać punkty:

1. Zobacz konfigurację okna

Ustawienie widocznego obszaru na stronie pozwala przeglądarce kontrolować szerokość i skalowanie strony dla różnych urządzeń.

2. Przejrzystość czcionki

Stosowany w połączeniu z oknem widokowym. Rozmiar czcionki można skalować w celu dopasowania do urządzenia przeglądającego stronę. W takim przypadku możesz określić podstawowy rozmiar czcionki, a skala typograficzna zostanie ustalona według stylów względnych.

3. Unikaj używania wtyczek

Flash, Java i Silverlight powodują wiele niedogodności dla użytkowników urządzeń mobilnych. Wybierz natywne technologie internetowe (takie jak HTML5).

4. Rozmiar zawartości

Upewnij się, że zawartość mieści się w poziomych granicach urządzenia i że użytkownicy nie muszą przewijać w pionie ani w poziomie, aby wyświetlić zawartość.

5. Rozmiar przycisków i linków

Powinieneś nie tylko samodzielnie przetestować swoją witrynę na urządzeniach mobilnych, ale także zastosować rozwiązania Google Statystyki PageSpeed aby zoptymalizować czas ładowania i poprawić komfort użytkowania.

Kilka informacji ogólnych

Wraz z masowym pojawieniem się smartfonów i tabletów wielu właścicieli witryn internetowych odkryło, że ich dzieła, które są tak wygodne i tak dobrze wyglądają na komputerze stacjonarnym, są niewygodne i brzydkie na urządzeniach mobilnych. Większość witryn w tamtym czasie była tworzona pod konkretny rozmiar ekranu i nie miała „płynnego” układu.

Znaleziono bardzo konkretne wyjście z sytuacji – wiele firm po prostu stworzyło kolejną, odrębną stronę internetową, zaprojektowaną specjalnie z myślą o urządzeniach mobilnych.

Potem przyszedł CSS3 i zapytania o media. Projektanci i programiści stron internetowych mogą teraz tworzyć witryny, które są w stanie sprawdzić urządzenie, z którego przeglądana jest strona, i odpowiednio dostosować układ projektu. Treść można dostosować do określonego zakresu urządzeń wyjściowych bez konieczności zmiany samej treści.

Pozwala to między innymi zaoszczędzić na kosztach utrzymania kolejnej, mobilnej wersji serwisu.

Spróbujmy to zrobić.

Pamiętaj jednak, że wszystkie te poprawki mają charakter tymczasowy i mogą pomóc w tworzeniu prawdziwej, pełnoprawnej, responsywnej witryny internetowej.

Wszelkie decyzje, które podejmujesz, powinny uwzględniać potrzeby Twojej firmy i osób odwiedzających witrynę. Każda z tych zmian może mieć również wpływ na inne aspekty Twojej strategii SEO.

Przed wprowadzeniem jakichkolwiek zmian w działającej witrynie skonsultuj się z wykwalifikowanym specjalistą SEO.

Więc,

*Masz istniejącą stronę internetową;

*Chcesz wprowadzić minimalne zmiany w kodzie HTML i CSS witryny.

W tym przypadku masz kilka opcji:

Zmień szablon witryny

Wiele współczesnych systemów CMS umożliwia zmianę motywu lub szablonu. Wiele szablonów ma charakter adaptacyjny, to znaczy dostosowuje się do nich wymaganą szerokość ekran.

Jeśli na przykład korzystasz z WordPressa, praca tutaj zajmuje około pięciu minut. Motyw można zmienić za pomocą kilku kliknięć. Niemal natychmiast Twoja witryna zyska nowy wygląd i będzie dostosowana do urządzeń mobilnych.

W zależności od tego, jak zaprojektowano istniejącą witrynę, może się okazać, że niektóre treści nie pojawiają się automatycznie nowy temat. Dlatego może być konieczne wykonanie niektórych prac ręcznych.

plusy

Możliwość natychmiastowej zmiany projektu.

Dostępnych jest kilka tysięcy motywów (niektóre bezpłatne).

Minusy

Nie cała poprzednia treść może być widoczna na nowym szablonie bez dodatkowej pracy.

Nowy projekt może nie zawsze pasować do Twojej marki.

Utwórz osobną stronę internetową dla urządzeń mobilnych

Być może, zdaniem niektórych, oznacza to przyznanie się do porażki. Jednak utworzenie osobnej witryny dostosowanej do urządzeń mobilnych będzie prawdopodobnie najbardziej opłacalne skuteczne rozwiązanie w krótkiej perspektywie dla wielu stron internetowych, które nie mają dostępu do CMS-a lub dla których nie są możliwe zmiany konstrukcyjne.

Dzień dobry, drodzy czytelnicy bloga! Dziś opowiem Wam o trudnościach, na jakie natrafiło wielu webmasterów. Z pewnością wielu z Was spotkało się z wiadomością w Wyniki Google, w którym stwierdzono, że strona serwisu nie jest zoptymalizowana pod kątem urządzeń mobilnych. Klikając na link, sprawdzasz kompatybilność z urządzeniami mobilnymi i wyskakują 2 błędy wyświetlania: treść jest szersza niż ekran, a elementy interaktywne są zlokalizowane zbyt szybko. Dzisiaj powiem Ci, jak rozwiązać ten problem.

Komunikat o niezoptymalizowanej stronie w wynikach Google

Optymalizacja pojedynczej strony pod kątem zgodności z urządzeniami mobilnymi

Problem treści szerszej niż ekran pojawia się w wielu serwisach. Najtrudniejsze jest to, że ten problem pojawia się, nawet jeśli tak jest responsywny szablon powstała strona internetowa lub wydzielona wersja mobilna. To poprzez utworzenie osobnego wersja mobilna Próbowałem rozwiązać ten problem, ale wszystko okazało się znacznie prostsze. Kilka innych prób rozwiązania tego problemu:

• Zainstalowałem wtyczkę do kompresji obrazów i multimediów dla różnych urządzeń
• stworzył osobną wersję mobilną serwisu
• zmieniłem ustawienia buforowania dla witryny
• skompresował CSS witryny i zmienił ustawienia wyświetlania

Jeśli czytasz o rozwiązaniu tego problemu w Internecie, możesz znaleźć wiele rozwiązań, które nie przyniosą realnych rezultatów. Aby rozwiązać problem, wystarczy rozwiązać tylko jedną rozbieżność. Nie ma potrzeby edycja CSS kod i Zmiany w PHP kod witryny. Moja metoda nadaje się nie tylko dla witryny WordPress, ale także dla innych paneli administracyjnych, w których można regulować rozmiary plików multimedialnych. Wydaje mi się, że najwięcej błędów wynika z raportów Google niewłaściwa lokalizacja elementy interaktywne strona. Webmasterzy skupiają się szczególnie na rozwiązaniu tego problemu, marnując jednak na to dużo czasu ten problem ma charakter wtórny – następuje właśnie ze względu na szerszą treść.

Treść jest szersza niż ekran – to pierwszy powód, dla którego Google otrzymuje skargę dotyczącą strony internetowej. Jeśli witryna jest zoptymalizowana pod kątem urządzeń mobilnych, wówczas pojawiają się skargi dotyczące konkretnie konkretne strony, a nie cały zasób sieciowy. W celu wyeliminowania ten powód, musisz sprawdzić wszystkie wyświetlane elementy na stronie. Google generalnie ma problemy z obrazami szerszymi niż 600 pikseli (niestety nie mogłem znaleźć dokładnych parametrów w instrukcji Google). Pierwszą rzeczą, którą musisz zrobić, to zmienić rozmiar plików multimedialnych na 500 pikseli (jest to rozmiar, którego używam w moich witrynach).

Komunikat, że Twoja treść jest szersza niż ekran

Drugim powodem problemu treści szerszych niż ekran jest szerokość elementy graficzne przekracza zainstalowany przez Google rozmiary dla urządzeń mobilnych. Mogą to być suwaki, nagłówek witryny lub obrazy tła. To właśnie jest problem szerokiej czapki (pomimo projekt adaptacyjny) był powodem braku optymalizacji pod kątem urządzeń mobilnych przez Ustawienia Google'a na jednej z moich stron. Po wymianie nagłówka strona została w pełni zoptymalizowana pod kątem urządzeń mobilnych.

Jak zoptymalizować swoją witrynę pod kątem urządzeń mobilnych w Google

Aby zoptymalizować witrynę pod kątem urządzeń mobilnych i wyeliminować problem szerokiej treści, należy postępować zgodnie z następującym algorytmem:

1. Zaznaczmy wszystkie możliwe pliki multimedialne na stronie, zaczynając od tagu Head, a kończąc na Footer.
2. Zapiszmy rozmiary każdego pliku multimedialnego
3. Zmieńmy rozmiar każdego pliku multimedialnego na mniejszy niż 600 pikseli

Po wykonaniu tych prostych kroków możesz sprawdzić stronę w narzędziu do optymalizacji urządzeń mobilnych. Jak widać, zmiana elementów interaktywnych może być konieczna jedynie w rzadkich przypadkach. Mam nadzieję, że mój artykuł był dla Ciebie przydatny i udało Ci się rozwiązać problem treści szerszej niż ekran. Jeśli podczas rozwiązywania pojawią się dodatkowe problemy, koniecznie napisz o nich w komentarzach, postaramy się to rozgryźć.

Witam wszystkich!

Po pismach od Google z 21 kwietnia 2015 r. webmasterzy zaczęli spieszyć się z optymalizacją swoich witryn pod kątem urządzeń mobilnych. Od tego momentu rozpoczęła się era Internet mobilny, kiedy niemal każdy zasób sieciowy można wygodnie przeglądać na smartfonie lub tablecie.

Wyjaśnione ten fakt fakt, że dokładnie dwa lata temu (w chwili pisania tego tekstu - 2017) pojawiła się wyszukiwarka Uruchomiono Google uwzględniać możliwość dostosowania stron do urządzeń mobilnych. urządzenia. Jeśli zasób sieciowy nie wyświetla się poprawnie na smartfonie, zostaje obniżony w wynikach wyszukiwania. A niewiele osób chce stracić średnio 17% ruchu. Później dołączył Yandex.

Niestety dwa lata później wiele witryn po prostu nie jest przystosowanych do wyświetlania na telefonach komórkowych i traci duży ruch. Postanowiłem więc napisać artykuł nt ten temat, jako próbę oświecenia moich subskrybentów, których witryny nie są responsywne, i wskazania wskazówek czytelnikom, którzy są żywo zainteresowani tym tematem, ale nie wiedzą, co robić.

Dlaczego musisz zoptymalizować swoją witrynę pod kątem urządzeń mobilnych?

Wielu reklamodawców i właścicieli witryn zadaje sobie pytanie: dlaczego powinienem optymalizować swoją witrynę pod kątem urządzeń mobilnych? Jak wspomniałem, od 2015 r Wyszukiwarki zaczął zwracać szczególną uwagę w tej chwili. A jeśli to zignorujesz, możesz łatwo uzyskać pesymizację ze strony PS, w wyniku czego część ruchu zostanie utracona. Szczególnie Google lubi to robić.

Warto jednak zauważyć fakt, że wpływ Algorytmy Google’a i Yandex, mające na celu pracę z witrynami zoptymalizowanymi i niezoptymalizowanymi pod kątem urządzeń mobilnych, małe. Oznacza to, że nie ma takiej całkowitej kontroli nad tym czynnikiem, dlatego w wynikach wyszukiwania „mobilnego” często możemy zobaczyć witryny nieresponsywne. Tutaj rolę odgrywa coś innego.

Jest też pogorszenie czynniki behawioralne strona internetowa w przypadku braku wersji mobilnej. Faktem jest, że nieresponsywna strona internetowa wygląda okropnie na ekranach smartfonów i tabletów: czytanie tekstu staje się niemożliwe, a niewygodna przewijanie poziome, interakcja z witryną jest trudna. Z tych powodów odwiedzający z mobilnego Internetu po prostu trafiają na strony konkurencji, a Ty z powodu pogarszających się czynników behawioralnych spadasz w wynikach wyszukiwania.

Jeśli więc nie chcesz stracić pozycji, ruchu i co za tym idzie sprzedaży, szybko stwórz mobilną wersję witryny. Porozmawiamy o tym, jak to zrobić dalej, ale najpierw sprawdzimy witrynę pod kątem tzw. „Przydatności mobilnej”.

Jak sprawdzić witrynę pod kątem optymalizacji mobilnej. urządzenia?

Google specjalnie zmęczyło się problemem witryn mobilnych i stworzyło bardzo wygodna obsługa, pokazujący stopień zoptymalizowania strony pod kątem urządzeń mobilnych. urządzeń i czy jest w ogóle zoptymalizowany. Nazywa się Mobile Friendly, oto link do niego.

Jeśli Twoja witryna jest zoptymalizowana pod kątem urządzeń mobilnych, zobaczysz następujący wynik:

W przeciwnym razie:

Jak zrobić mobilną wersję strony?

Sposobów na to, aby strona była responsywna jest wiele, ja jednak wymienię tylko te najbardziej podstawowe i zrozumiałe. do zwykłego człowieka. Jednak dla jasności całego obrazu polecam przeczytać te lekcje:

Zatem tradycyjnie metody wdrażania układu adaptacyjnego można podzielić na dwa typy:

1. Korzystanie ze specjalnych wtyczek;
2. Praca z kodem witryny.

Każdy ma swoje zalety i wady, o których teraz porozmawiamy.

Układ adaptacyjny za pomocą specjalnych wtyczek

Ponieważ mam mniej lub bardziej rozległe doświadczenie w pracy wyłącznie z CMS WordPress, a o żadnym innym systemie nie wiem zbyt wiele, opowiem tylko o nim.

Inteligentni ludzie, programiści postanowili maksymalnie uprościć proces tworzenia mobilnej wersji witryny dla tych, którzy nie wiedzą, tworząc specjalne wtyczki - dodatki do „silnika”. Jedną z nich jest wtyczka WpTouch, która pozwala w ciągu jednego dnia (w przybliżeniu) stworzyć „mobilną” stronę internetową, bez konieczności zajmowania się kodem.

Istnieje również funkcja tworzenia układu adaptacyjnego w popularna wtyczka Z tego co wiem, Jetpack. Tam wystarczy nacisnąć jeden przycisk i to wszystko.

Korzystając jednak z tej metody należy wziąć pod uwagę fakt, że nie dla wszystkich szablonów będą one działać poprawnie, a w niektórych przypadkach nie będą działać w ogóle. Poza tym najróżniejsze wstawki reklamowe z samej wtyczki, które zakłócają przeglądanie treści. Chcę Cię od razu ostrzec: używanie takich wtyczek nie jest zalecane, ale jeśli naprawdę tego potrzebujesz, to tylko na jakiś czas.

Najbardziej najlepsza opcja Będziemy korzystać z gotowych rozwiązań adaptacyjnych z bazy szablonów (motywów) WordPress. Robiąc to, nie tylko ułatwisz sobie życie, ale także zaoszczędzisz na usługach programistów układu.

Adaptacyjny układ strony internetowej poprzez pracę z kodem

Praca z kodem strony internetowej to skomplikowana sprawa i tworzenie wersja adaptacyjna zasobów sieciowych jest jeszcze trudniejsze. W swojej praktyce próbowałem stworzyć dwie strony mobilne, ale nie udało mi się ich w pełni wdrożyć. W pierwszym przypadku była to próba stworzenia strony mobilnej na subdomenie np m.site.ru: Udało mi się stworzyć mniej więcej normalny układ, umieścić wszystkie bloki w odpowiednich miejscach i sprawić, że tekst będzie czytelny. Krótko mówiąc, stworzyłem witrynę mobilną, ale problem leżał gdzie indziej.

Faktem jest, że jeśli korzystasz z subdomeny z witryną mobilną, musisz połączyć się z nią ze zwykłej domeny. Jednak przekierowanie nie jest zwykłe, ale inteligentne, które przekieruje odwiedzających ze smartfonów do wersji mobilnej. Musiałem zmarnować dużo czasu na te śmieci, ale wynik był niezadowalający. Dlatego musiałem porzucić ten pomysł.

W drugim przypadku stworzyłem dla zabawy stronę internetową (bardzo interesuje mnie pisanie kodu), którą starałem się uczynić adaptacyjną za pomocą kaskadowania Style CSS. Udało mi się, ale nie wyszło to poza rozwój strony internetowej.

Chciałbym zauważyć, że tworzenie układu adaptacyjnego kiedy Pomoc CSS to doskonała opcja, ponieważ: nie musisz tworzyć osobnej strony internetowej i przesyłać jej na nią osobna subdomena i nie musisz zawracać sobie głowy przekierowaniami. Korzystanie z dyrektyw @media jest dość łatwe. Nazywa się je również zapytaniami o media:

@media screen i (max-width: 1025px) (Właściwości CSS zapisywane są dla elementów, do których należy je zastosować, gdy szerokość ekranu jest mniejsza niż 1025px ) @media screen i (max-width: 760px) ( zapisywane są właściwości CSS dla elementów, do których należy zastosować, gdy szerokość ekranu jest mniejsza niż 760px)

Bardzo wygodnym sposobem, ponieważ nie wymaga tworzenia żadnych plików leworęcznych. Praca odbywa się wyłącznie z plikiem style.css, w którym zarejestrowałeś wszystkie style witryny.

Oto przykład z moich stylów dla konkretnych elementów:

@media screen i (max-width: 991px) ( /*Wszystkie style są używane w banerze w nagłówku witryny na stronach artykułów i nagłówku na stronie głównej*/ #banner-head ( margines-top:80px; ) . box-wrapper h1( margines -górny:150px !important; ) ) @media screen i (max-width: 840px) ( #banner-head ( margin-left:60px; ) ) @media screen i (max-width: 801px) ) ( #banner-head ( margines-lewy:40px; ) ) @media screen i (maksymalna szerokość: 786px) ( #banner-head ( margines-lewy:20px; ) ) @media screen i (maksymalna szerokość: 765px ) ( #banner-head ( margines-left:5px; ) ) @media screen i (max-width: 757px) ( .box-wrapper h1(font-size:32px !important; ) ) @media screen i (max- szerokość: 750px) ( # banner-head ( display:none; ) ) @media screen i (max-width: 539px) ( .box-wrapper h1(font-size:28px !important; ) ) @media screen and (max -width: 480px) ( #banner-head ( widoczność: ukryta; display:none; ) ) @media screen i (max-width: 471px) ( .box-wrapper h1(font-size:24px !important; ) ) @ ekran multimediów i (maksymalna szerokość: 407 pikseli) ( .box-wrapper h1(rozmiar czcionki:22px !important; ) ) @media screen i (max-width: 375px) ( #banner img( szerokość: 100% !important; ) ) @media screen i (max-width: 370px) ( .box-wrapper ( szerokość: 380px !important; ) .box-wrapper h1( margines-lewy: -15px !important; ) ) @media screen i (max-width: 357px) ( .box-wrapper h1(font-size:20px !important; ) ) @media screen i (maksymalna szerokość: 345 pikseli) ( .box-wrapper h1( margines-lewy:-25px !important; ) ) @media screen i (maksymalna szerokość: 338px) ( .box-wrapper( margines-górny:-50px; ) .box-wrapper h1( margines-lewy:-35px !ważne; ) .sep( margines-lewy:-20px !ważne; ) )

Metatag rzutni

Jeśli nie chcesz tworzyć osobnej wersji mobilnej lub pisać dyrektyw @media w stylach CSS, istnieje inny sposób, w jaki Twoja witryna będzie mniej więcej wyświetlana na telefonach komórkowych - za pomocą metatagu Viewport.

Jego zadaniem jest określenie szerokości okna i kontrola skalowania strony. Oznacza to, że dzięki temu metatagowi możemy wyłączyć zwiększenie lub ustawić je maksymalna wartość(limit), a także ustaw skalę przeglądanej strony.

Ten metatag jest ustawiony w tagach i ma następującą postać:

Mamy zatem cztery sposoby optymalizacji witryny pod kątem urządzeń mobilnych:

1. Korzystanie ze specjalnych wtyczek do Twojego CMS-a;
2. Korzystanie z subdomeny takiej jak m.site.ru z mobilną wersją witryny;
3. Używanie zapytań o media w CSS;
4. Korzystanie z metatagu Viewport.

Wszystko, co napisano powyżej, to wiedza, którą posiadam. Być może o czymś nie wiem, więc śmiało dodawajcie i poprawiajcie mnie w komentarzach.

Cóż, to wszystko, drodzy przyjaciele!

Do zobaczenia wkrótce!

Poprzedni artykuł
Następny artykuł

Google oświadcza, że ​​w swoim wyszukiwaniu uwzględnia optymalizację serwisu pod kątem urządzeń mobilnych. Jeśli dodałeś swój zasób do webmasterzy Google, wówczas może być oznaczony jako „Witryna nie jest zoptymalizowana pod kątem urządzeń mobilnych”. Oznacza to, że należy popracować nad poprawą widoczności zasobu w oczach Google i dostosować witrynę do urządzeń mobilnych. Instrukcje poniżej zastosowanie nie tylko dla Zasoby WordPressa, ale także dla innych silników.

Aby sprawdzić wyświetlanie witryny pod kątem możliwości dostosowania, użyjemy Usługa Google'a https://developers.google.com/speed/pagespeed/insights.

Podaj adres witryny i kliknij przycisk „Analizuj”. Widać, że w tym przykładzie wynik doświadczenia użytkownika mobilnego wynosi 69 procent, a dodatkowo pojawia się komunikat „Strona może nie być zostanie przetestowanyłatwość przeglądania na urządzeniach mobilnych.”

Postawmy sobie za cel optymalizację witryny i poprawę wskaźnika do poziomu co najmniej 90%, co w oczach Google jest uważane za dobre.

Przede wszystkim zwróć uwagę na komunikat „Dostosuj obszar wyświetlania”. Najlepiej zacząć od tego, ponieważ naprawienie tego problemu automatycznie wpłynie na szacunki Google dotyczące rozmiarów czcionek i aktywnych elementów.

Kliknij link „Jak naprawić” i zapoznaj się z poniższym tekstem o konieczności określenia znacznika rzutni.

Znajduje się tam link do „Dostosuj rzutnię”, który wyjaśnia, jak używać tego tagu. Nie będziemy się tym szczegółowo zajmować. Skorzystajmy po prostu z instrukcji Google, których potrzebujesz, aby wskazać instrukcje w bloku głównym na stronie:

< meta name = viewport content = „szerokość=szerokość-urządzenia, skala-początkowa=1”>

Dodajemy tag do serwisu i tak dla zabawy sprawdzamy jak zmienił się wskaźnik wygody dla użytkowników mobilnych.

Widzimy wzrost z 69 do 80%.

Jeśli w Twojej witrynie jest włączone buforowanie, przed sprawdzeniem musisz albo wyłączyć pamięć podręczną, albo usunąć pliki z pamięci podręcznej, w przeciwnym razie sprawdzenie może zostać przeprowadzone przy użyciu starych plików.

Następnie przyglądamy się problemowi w czerwonej strefie „Dostosuj rozmiar treści do rzutni”. Problem w tym, że Google sprawdza, czy szerokość urządzenia wynosi 375 pikseli, a rozmiar niektórych elementów witryny przekracza tę wartość.

Faktem jest, że wiele wcześniej stworzonych szablonów zawiera bezwzględne rozmiary elementów witryny. Na przykład plik style.css może zawierać takie instrukcje

#wrapper ( szerokość: 1000px; )

#opakowanie ( szerokość: 1000px;

opakowanie - w w tym przypadku To jest główny kontener strony witryny. Taki element oczywiście nie zmieści się na ekranie o szerokości 375 pikseli. Możesz także znaleźć inne podobne instrukcje dotyczące innych elementów witryny.

Rozwiążemy ten problem, stosując następującą sztuczkę. Przepiszmy powyższe style w następujący sposób:

#wrapper (maksymalna szerokość: 1000px; szerokość: 100%; )

#opakowanie ( maksymalna szerokość: 1000px; szerokość: 100%;

Podczas tworzenia strony przeglądarka będzie korzystać z minimalna wartość z dwóch: maksymalna szerokość i szerokość. W tym przypadku, jeśli szerokość ekranu użytkownika jest większa niż 1000px, to zostanie użyta wartość 1000, a jeśli szerokość ekranu użytkownika będzie mniejsza niż 1000px, zostanie zastosowana wartość równa szerokości ekranu (100%).