- 1. Analizuj wydajność sieci
- 2. Sprawdź optymalizację sieci mobilnej
- 3. Zidentyfikuj zasoby blokujące renderowanie
- 4. Sprawdź główne elementy treści strony
- 5. Zweryfikuj opis ALT obrazów
- 6. Napraw problemy z pamięcią
- 7. Znajdź ukrytą zawartość CSS
- 8. Zrozumieć kwestie bezpieczeństwa
- 9. Zatwierdź wdrożenie Accelerated Mobile Pages (AMP)
- 10. Analiza wydajności środowiska wykonawczego
- 11. Poszukaj statusu HTTP
- 12. Sprawdź i usuń pliki cookie
- 13. Czyste przechowywanie
- 14. Sprawdź animacje
- 15. Emuluj czujniki
Jednym z najbardziej pomocnych narzędzi SEO jest to, za które nie musimy nawet płacić. To narzędzie to Google Chrome DevTools . To narzędzie jest wbudowane w Google Chrome i pozwala naprawić wiele funkcji SEO na stronie internetowej.
Aby uzyskać dostęp do DevTools, wystarczy nacisnąć trzy pionowe kropki w prawym rogu przeglądarki Google Chrome. Następnie wybierz Więcej narzędzi> Narzędzia deweloperskie. W przeciwnym razie skrótem do otwarcia tego menu są Ctrl + Shift + I.
DevTools ma dziewięć menu - menu urządzenia, elementy, konsolę, źródła, sieć, oś czasu, profile, aplikację i zabezpieczenia. Są one w stanie pomóc użytkownikom zoptymalizować ich strony internetowe.
Jak więc DevTools może pomóc SEO? Oto 20 hacków, które każdy pracownik SEO musi znać i używać:
1. Analizuj wydajność sieci
DevTool pozwala na przeanalizuj czas ładowania strony w witrynie w menu Sieć . Aby to zrobić, musisz włączyć „ przechwytywanie zrzutów ekranu ”, które po włączeniu zmienia kolor na niebieski. Pozwoli to na zrobienie zrzutu ekranu podczas ładowania strony.
Po zakończeniu tej czynności i wybraniu żądanych ustawień ponownie załaduj stronę i przejdź do panelu sieciowego, aby zobaczyć czas ładowania strony oraz znacznik miejsca, w którym strona została przeanalizowana. Aby rozwiązać problemy z szybkością, przejdź do panelu Audyt i kliknij przycisk „ Uruchom ”. Tam będziesz miał dostęp do listy zasobów powodujących problem.
2. Sprawdź optymalizację sieci mobilnej
Źródło: Google Developers
Każdy pracownik SEO będzie chciał przetestować optymalizację mobilną. Umożliwia to również testowanie wydajności sieci dla telefonów komórkowych. Aby to zrobić, po prostu zaznacz pole „ wyłącz pamięć podręczną ”. Z menu „ bez dławienia ” wybierz opcję Regular 2G. To będzie w stanie naśladować wydajność mobilną na twoim laptopie lub komputerze.
3. Zidentyfikuj zasoby blokujące renderowanie
Skrypty blokujące renderowanie i duże żądania często powodują, że witryna ma długi czas ładowania. Możesz zidentyfikować te zasoby w panelu Sieć . To pokaże, które zasoby JS i CSS ładują się przed DOM, które znajduje się na dole panelu Sieć.
4. Sprawdź główne elementy treści strony
Każda firma posiadająca stronę internetową będzie chciała sprawdzić główne elementy treści swojej strony internetowej, w tym elementy JavaScript. Podczas Google ma narzędzia, które indeksują i indeksują ta treść nie zawsze jest idealna. W związku z tym ważne jest, aby samemu to sprawdzić.
Aby zobaczyć DOM w DevTools, przejdź do strony Elementy . Może to służyć do przeglądania elementów strony, w tym tytułu, opisu meta lub zawartości strony. Będziesz wtedy mógł sprawdzić, czy Twoje treści są dostępne dla Google.
5. Zweryfikuj opis ALT obrazów
Źródło: Ziemia wyszukiwarki
Karta Elementy umożliwia również weryfikację opisu ALT obrazów. Po prostu kliknij prawym przyciskiem myszy dowolny obraz i wybierz „sprawdź”. Kodowanie wyświetli opis ALT.
6. Napraw problemy z pamięcią
Zawsze chcesz skupić się na doświadczeniu użytkownika, które znacznie się zmniejszy, jeśli Twoja witryna ma problemy z pamięcią .
Problemy z pamięcią są zazwyczaj spowodowane wyciekiem pamięci, co spowoduje, że witryna będzie stopniowo pogarszać swoją pracę w godzinach nadliczbowych lub przepełnienie pamięci, gdy strona internetowa używa zbyt dużej ilości pamięci.
Aby monitorować użycie pamięci, przejdź do Więcej narzędzi, a następnie Menedżera zadań lub naciśnij Shift + Esc. Następnie kliknij prawym przyciskiem myszy nagłówek tabeli Menedżera zadań i włącz pamięć JavaScript.
Źródło: Google Developers
Tutaj będą dwie kolumny. Kolumna pamięci reprezentuje pamięć natywną, w której przechowywane są węzły DOM. Wartość wzrośnie, gdy zostaną utworzone węzły DOM. Druga kolumna dotyczy pamięci JavaScript. Będziesz zainteresowany numerem na żywo, który pokazuje, ile pamięci osiągalnych obiektów na twojej stronie internetowej używa. Wzrost liczby oznacza, że obiekty są tworzone lub już istniejące obiekty rosną.
Możesz wizualizować wycieki pamięci, przechodząc do panelu Oś czasu , włączając pole wyboru pamięci i nagrywając.
7. Znajdź ukrytą zawartość CSS
Typowym sposobem ukrywania tekstu jest użycie CSS z właściwościami „display: none” lub „visibility: hidden”. Ważne jest, aby sprawdzić te witryny pod kątem ważnych informacji, które mogą być ukryte.
Aby to sprawdzić, po prostu przejdź do szuflady wyszukiwania , do której można uzyskać dostęp, naciskając Ctrl + Shift + F po otwarciu DevTool. Spowoduje to otwarcie paska wyszukiwania, który umożliwia wyszukanie właściwości „ukryte” lub „wyświetl: brak” w kodzie strony. Przejrzyj kod, aby zobaczyć, co jest ukryte i podjąć odpowiednie działania, jeśli to konieczne.
8. Zrozumieć kwestie bezpieczeństwa
Źródło: Google Developers
Bezpieczeństwo witryny jest jedną z najważniejszych rzeczy podczas prowadzenia biznesu w Internecie. Możesz sprawdź, czy Twoja strona jest bezpieczna lub niezabezpieczone, przechodząc do panelu Zabezpieczenia .
Przegląd zabezpieczeń informuje, czy strona jest bezpieczna i czy ma bezpieczne połączenie i zasoby. Kliknięcie przycisku „Wyświetl certyfikat ” umożliwia wyświetlenie certyfikatu serwera dla głównego źródła. Na niezabezpieczonej stronie zostanie wyświetlony komunikat „ta strona nie jest bezpieczna”. Możesz również użyć lewego panelu, aby sprawdzić indywidualne bezpieczne lub niezabezpieczone źródła. Kliknięcie dowolnego niezabezpieczonego linku daje szczegółowe informacje na temat tego, które żądanie z tego źródła było obsługiwane przez HTTP.
9. Zatwierdź wdrożenie Accelerated Mobile Pages (AMP)
Dla każdego, kto wdraża AMP, jest to kluczowy, ale także prosty krok do podjęcia. Możesz sprawdzić, czy występują jakieś problemy ze stroną, dodając „# development = 1” do adresu URL AMP. Następnie sprawdź panel konsoli . Będziesz wtedy mógł zobaczyć, czy są jakieś problemy, ostrzeżenia lub błędy. Powie ci, w której linii wystąpił błąd, abyś mógł podjąć niezbędne działania, aby to naprawić.
10. Analiza wydajności środowiska wykonawczego
Użytkownicy oczekują, że witryna będzie działać sprawnie i bezproblemowo. Zły komfort użytkowania spowoduje wysoki współczynnik odrzuceń i mniej konwersji. Dlatego ważne jest, aby unikać pisania kodu JavaScript, który zmusza przeglądarkę do ponownego obliczenia układu. Spowolni to działanie aplikacji i zakłóci interakcję użytkownika.
Do przeanalizuj to , nagraj oś czasu . Będziesz musiał szukać długich zdarzeń Evaluate Script. Jeśli istnieją, możesz włączyć JS Profiler i ponownie nagrać, aby uzyskać bardziej szczegółowe informacje o tym, jakie funkcje JS zostały wywołane, a także jak długo trwały ładowanie.
11. Poszukaj statusu HTTP
Gdy jesteś w panelu Sieć , aby sprawdzić konfiguracje nagłówka, możesz również sprawdzić, czy są jakieś przekierowania, weryfikując ich stan HTTP. Pozwala to zobaczyć nie tylko, czy przekierowuje, ale także jaki jest typ przekierowań i statusy błędów.
12. Sprawdź i usuń pliki cookie
Panel aplikacji umożliwia wyświetlanie szczegółowych informacji o pliku cookie, a także usuwanie plików cookie.
Po otwarciu okienka Cookies w panelu po lewej stronie będziesz mógł przeglądać i usuwać pliki cookie , jak również modyfikować wartości plików cookie. Pliki cookie będą wymienione według domeny.
Źródło: Google Developers
Istnieje kilka sposobów usuwania plików cookie, w tym:
- Wybierz plik cookie i naciśnij przycisk Usuń, aby usunąć jeden konkretny plik cookie.
- Naciśnij przycisk usuwania, aby usunąć wszystkie pliki cookie z grupy.
- Kliknij prawym przyciskiem myszy wartość domeny pliku cookie, a następnie wybierz opcję „Wyczyść wszystko” i usuń pliki cookie z wybranej domeny.
13. Czyste przechowywanie
Czasami najlepszym wyborem jest po prostu wymazanie wszystkich danych. Aby to zrobić, przejdź do panelu Wyczyść pamięć w panelu aplikacji . Umożliwia to wyrejestrowanie pracowników serwisu, pamięci masowej i pamięci podręcznych. Jeśli chcesz wyczyścić dane, włącz pola obok kategorii, którą chcesz wyczyścić, i kliknij przycisk „ wyczyść dane witryny. ”
14. Sprawdź animacje
Źródło: Google Developers
Możesz użyć Inspektora animacji Chrome DevTools do sprawdzać i modyfikować animacje na stronie internetowej. Aby uzyskać do niego dostęp, przejdź do panelu Style , w panelu Elementy , a następnie naciśnij przycisk Animacje . Spowoduje to otwarcie karty obok Szuflady konsoli, a następnie może zostać użyty z dowolnego panelu DevTools.
Następnie musisz przechwycić animację, uruchamiając animację, gdy strona inspektora jest otwarta. Po przechwyceniu można go odtworzyć, umieszczając wskaźnik myszy nad miniaturą w okienku Przegląd lub klikając i przeciągając czerwony pionowy pasek, aby przesuwać animację rzutni.
Będąc nadal w panelu Przegląd, kliknij grupę animacji. Panel szczegółów da każdej animacji własny wiersz. Aby podświetlić go w punkcie widzenia, po prostu umieść kursor nad animacją. Kliknij animację, aby wybrać ją w panelu Elementy .
Ciemniejsza lewa sekcja reprezentuje definicję animacji, podczas gdy wyblakła prawa sekcja reprezentuje iteracje.
Możesz modyfikować animacje za pomocą czasu trwania animacji, czasów klatek kluczowych lub opóźnienia czasu rozpoczęcia.
15. Emuluj czujniki
Możesz użyć DevTools do emulować czujniki geolokalizacji i akcelerometru . Aby uzyskać dostęp do elementów sterujących czujnikiem, przejdź do Więcej narzędzi, a następnie Czujniki.
Możesz włączyć geolokalizację, zaznaczając pole wyboru Emuluj współrzędne geolokacji . Spowoduje to zastąpienie wartości pozycji „navigator.geolocation”. Będzie również symulować przypadki, w których dane geolokalizacyjne są niedostępne.
Jeśli chcesz przetestować dane pochodzące z interfejsu API orientacji, zaznacz pole wyboru Akcelerometr w okienku Czujniki. Umożliwi to włączenie emulatora akcelerometru. Możesz wybrać manipulowanie trzema parametrami orientacji - obrót wokół osi Z, przechylenie od lewej do prawej i przechylenie od przodu do tyłu.
Te narzędzia DevTools z Chrome pomogą Ci sprawniej przeprowadzić kolejny audyt SEO!
Jak więc DevTools może pomóc SEO?