The playground

More information here

Angular Universal: co musisz wiedzieć o SEO

Zapisz się na nasze codzienne podsumowanie ciągle zmieniającego się krajobrazu marketingu w wyszukiwarkach. Uwaga: przesyłając ten formularz, wyrażasz zgodę na warunki Third Door Media. Szanujemy Twoją prywatność. John E Lincoln na luty 1, 2019 w 9:53 na kategorie:Wszystkie Rzeczy SEO Kolumna, kanał: SEO Jeśli używasz Angular do zasilania swojej strony internetowej, to masz dodatkową przeszkodę […]

Zapisz się na nasze codzienne podsumowanie ciągle zmieniającego się krajobrazu marketingu w wyszukiwarkach.

Uwaga: przesyłając ten formularz, wyrażasz zgodę na warunki Third Door Media. Szanujemy Twoją prywatność.

John E Lincoln na luty 1, 2019 w 9:53 na

  • kategorie:Wszystkie Rzeczy SEO Kolumna, kanał: SEO
  • Jeśli używasz Angular do zasilania swojej strony internetowej, to masz dodatkową przeszkodę do przekroczenia, jeśli chodzi o SEO. Na szczęście Angular Universal ułatwia przeskoczenie nad nim.

    pamiętaj, że „easy” jest tu pojęciem względnym. Jest w tym trochę technicznej magii.

    prawie na pewno będziesz musiał zaangażować zespół programistów.

    ale po dostarczeniu gotowego produktu Twoja witryna będzie obsługiwać zoptymalizowane strony, które Wyszukiwarki łatwo zlokalizują i indeksują.

    w tym poradniku wyjaśnię, dlaczego jest to ważne dla marketerów.

    problem SEO

    Angular to fantastyczny framework do dostarczania modułowych, przyjaznych dla użytkownika aplikacji internetowych. Niestety, jest to nieco wrogie SEO.

    To z dwóch powodów.

    Po pierwsze, Angular w dużej mierze opiera się na skrypcie do dostarczania treści. W rezultacie niektóre boty wyszukiwania nie” widzą ” treści, które widzi użytkownik.

    zapoznaj się z dokumentacją Angular Universal. Ta strona jest, co nie jest zaskakujące, renderowana za pomocą Angular.

    podczas przewijania w dół zobaczysz sporo treści. Można by pomyśleć, że wszystko jest indeksowalne.

    niekoniecznie. Kliknij prawym przyciskiem myszy stronę i wybierz „Wyświetl źródło strony” z menu kontekstowego, które się pojawi.

    jest tylko 100 linii kodu źródłowego. Nigdzie tam nie zobaczysz treści, które widziałeś podczas normalnego oglądania strony.

    to w skrócie jest problem z Angularem. Ludzie odwiedzający zobaczą treść, ale boty wyszukiwania zobaczą źródło.

    a źródło nie ma treści!

    jest jeszcze jeden problem SEO: szybkość. Aplikacje Angular często nie ładują się szybko.

    niektóre witryny będą wyświetlać pusty ekran przez kilka sekund przed wyświetlaniem strony głównej. To może spowodować, że odwiedzający uciekną, gdy stają się niecierpliwi.

    Szybkość witryny jest czynnikiem rankingu mobilnego, więc twoja pozycja będzie hitem, jeśli Twoja strona nie załaduje się szybko na platformach mobilnych.

    ale Google mówi…

    Google twierdzi, że jego bot może indeksować strony oparte na skryptach. Istnieje wiele dowodów na to, ale nie oznacza to, że możesz uniknąć dodatkowych kroków podczas optymalizacji kątowej witryny.

    na początek Google nie jest jedyną wyszukiwarką w mieście. Jeśli chcesz, aby Twoja aplikacja kątowa uplasowała się na Bing i DuckDuckGo, musisz podjąć kroki, aby tak się stało.

    następnie może się zdarzyć, że Google może indeksować niektóre witryny kątowe, ale nie twoje. Nie wszystkie aplikacje Angular są sobie równe. Twój może być wyjątkiem od algorytmu indeksowania Google.

    z mojego doświadczenia wynika, że witryny, które przenoszą się z HTML do kanciastego luźnego masowego ruchu z wyszukiwarki w większości przypadków. W rzeczywistości w ciągu ostatniego roku przyszło trzech klientów, gdzie musieliśmy naprawić witrynę po spadkach z powodu Angular.

    istnieją rozwiązania

    na szczęście istnieją sposoby, aby Twoja strona była przyjazna SEO.

    jedną z bardziej popularnych opcji jest użycie dynamicznego renderowania. To wtedy używasz narzędzia takiego jak Puppeteer do generowania statycznych plików HTML, które roboty internetowe mogą łatwiej konsumować.

    następnie skonfiguruj serwer WWW, aby kierować boty wyszukiwania do wstępnie renderowanych stron, podczas gdy ludzie poruszają się po zwykłej aplikacji kątowej.

    to przyzwoite rozwiązanie, ale nadal nie rozwiązuje problemu prędkości. W tym celu prawdopodobnie będziesz chciał wybrać Angular Universal.

    co to jest kątowy Uniwersalny?

    Angular Universal uruchamia Twoją aplikację internetową na serwerze, a nie w przeglądarce.

    to ważne rozróżnienie. Zwykle Aplikacje Angular są aplikacjami po stronie klienta.

    problemem dla botów wyszukiwania jest to, że nie zawsze „przetwarzają” kod po stronie klienta, tak jak twoja przeglądarka, gdy obsługuje stronę internetową. Dlatego zauważyłeś rozbieżność między stroną dokumentacji Angular Universal a jej kodem źródłowym.

    Angular Universal obsługuje rendering po stronie serwera (SSR). Wstępnie renderuje zawartość HTML i CSS pokazaną użytkownikowi z wyprzedzeniem.

    oznacza to, że użytkownik załaduje statyczną stronę HTML zamiast kodu po stronie klienta. W rezultacie strona ładuje się szybciej.

    Ponadto, ponieważ jest to statyczny HTML, boty wyszukiwania mogą indeksować zawartość.

    każdy wygrywa.

    dlaczego to ważne

    Jeśli interesujesz się marketingiem cyfrowym, to już wiesz, że duża część walki wiąże się z uzyskaniem ekspozycji w Internecie. Dlatego docierasz do wpływowych osób, publikujesz aktualizacje w mediach społecznościowych i optymalizujesz swoją witrynę, aby była dobrze oceniana.

    Mówiąc najprościej: Twoja strona nie może zostać zindeksowana. Jeśli Angular napędza Twoją witrynę, musisz podjąć dodatkowe kroki, aby upewnić się, że jej treść pojawia się w wyszukiwarkach.

    dlatego potrzebujesz uniwersalnego rozwiązania kątowego.

    minusem jest oczywiście to, że będzie to kosztować. Musisz zatrudnić wykwalifikowany zespół programistów, aby dodać SSR do swojej witryny.

    to wydatek, który powinien więcej niż zapłacić za siebie z czasem, jeśli Twoja strona dobrze wypada pod względem kluczowych wyszukiwanych terminów związanych z Twoją niszą.

    jak uruchomić aplikację Angular na Angular Universal

    Jeśli jesteś kimś, kto lubi pobrudzić sobie ręce kodem lub po prostu chcesz zaoszczędzić na kosztach rozwoju, możesz samodzielnie wdrożyć aplikację po stronie serwera.

    zanim to zrobisz, najlepiej jest, jeśli masz podstawową wiedzę na temat Angular, interfejsu wiersza poleceń (CLI), maszynopisu i serwerów internetowych. W przeciwnym razie prawdopodobnie będziesz walczyć.

    kroki wdrożenia uniwersalnej aplikacji kątowej są następujące:

    • zainstaluj niezbędne zależności
    • zaktualizuj aplikację Angular
    • użyj CLI, aby zbudować pakiet Uniwersalny
    • Skonfiguruj serwer, aby uruchomić pakiet Uniwersalny
    • Uruchom aplikację na serwerze

    w tych pięciu krokach dzieje się sporo, więc omówię je po kolei w kolejnych sekcjach.

    zainstaluj zależności

    Jeśli masz jakieś doświadczenie z Angular, to już wiesz o Node.js. Jest to środowisko wykonawcze, które przenosi Kod maszynopisu do aplikacji JavaScript.

    węzeł.js jest dostarczany z menedżerem pakietów, w skrócie Node Package Manager lub npm. Użyjesz tego do zainstalowania zależności.

    Uruchom okno wiersza poleceń i uruchom następujący kod:

    npm install –save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

    daj mu kilka chwil (lub wiele chwil), aby zainstalować wszystko.

    zaktualizuj aplikację Angular

    następnie musisz przygotować aplikację Angular do Uniwersalnego wdrożenia. To obejmuje cztery kroki:

    • Dodaj uniwersalne wsparcie. Otwórz moduł główny (Zwykle AppModule) i dodaj identyfikator aplikacji do importu BrowserModule. Zrobisz to w sekcji” imports ” tuż pod deklaracją @ NgModule.
    • Utwórz moduł root serwera.Następnie musisz utworzyć nowy moduł o nazwie AppServerModule. Upewnij się, że importuje ServerModule z zależności Platforma-serwer, którą dodałeś w poprzednim kroku.
    • Utwórz główny plik. Będziesz potrzebował głównego pliku dla pakietu Universal. Utwórz go w katalogu głównym (w folderze src) i wyeksportuj klasę AppServerModule z tego pliku.
    • Utwórz plik konfiguracyjny. Klasa AppServerModule potrzebuje pliku konfiguracyjnego. Utwórz go w formacie JSON. Powinno to wyglądać mniej więcej tak:

    Utwórz nowy cel kompilacji

    Twój katalog źródłowy Angular powinien zawierać plik o nazwie angular.json. Musisz zaktualizować ten plik w sekcji „architekt”.

    będzie to wyglądać mniej więcej tak:

    „architekt”: {
    „build”: { … }
    „server”: {
    „builder”: „@angular-devkit / build-angular: server”,
    ” options”: {
    ” outputPath”:”dist/my-project-server”,
    „main”: „src/main.serwer.ts”,
    „tsConfig”: „src/tsconfig.serwer.json”
    }
    }
    }

    zwróć uwagę na atrybut „builder” cztery linie w dół. Wartość po dwukropku („serwer”) jest nazwą serwera. Możesz go zaktualizować, jeśli chcesz nazwać go czymś innym.

    teraz możesz zbudować swoją aplikację. Zakładając, że zachowałeś serwer o nazwie „serwer”, po prostu przejdź do wiersza poleceń i wpisz następujące polecenie:

    ng Uruchom mój projekt:serwer

    powinieneś zobaczyć wyjście, które wygląda mniej więcej tak:

    Data: 2018-12-12T12:42:09.601 z
    hash: 1caced0e9434007fd7ac
    time: 4122ms
    chunk {0} main.js (main) 9.49 kB
    css (style) 0 bajtów

    Konfiguracja serwera

    następnie musisz skonfigurować Uniwersalny serwer, aby uruchomić pakiet. W ten sposób serializujesz aplikację i zwrócisz ją do przeglądarki.

    aby tak się stało, utwórz nowy plik o nazwie serwer.ts. W tym pliku zdefiniujesz swój silnik aplikacji.

    szczegóły tego kodu są nieco poza zakresem tego samouczka. Zapraszamy do zapoznania się z przykładem w uniwersalnych dokumentach Angular.

    Uruchom aplikację na serwerze

    Po tym wszystkim, jesteś w końcu w punkcie, w którym możesz uruchomić aplikację na serwerze.

    aby to zrobić, skonfiguruj webpack, który obsługuje serwer.plik ts utworzony w poprzednim kroku.

    Nazwij plik konfiguracyjny webpack.serwer.config.js. Jeszcze raz sprawdź dokumenty Angular Universal, aby uzyskać dokładny rodzaj kodu, który należy do pliku. Być może będziesz musiał dostosować ten kod do własnej konwencji nazewnictwa.

    gdy skończysz z plikiem, będziesz mieć dwa foldery w folderze dist: przeglądarka i serwer.

    aby uruchomić kod serwera, wystarczy w wierszu poleceń wpisać:

    node dist/server.js

    Gratulacje! Teraz używasz kodu po stronie serwera.

    chociaż Angular umożliwia programistom szybkie tworzenie wysokiej jakości aplikacji, nie zawsze dobrze gra z botami wyszukiwarek.

    na szczęście Angular Universal może wstępnie renderować kątowe strony aplikacji jako statyczny HTML, dzięki czemu są wykrywalne i indeksowalne. Będą też ładować się szybciej.

    zawsze zalecałem, aby mieć bazę HTML i używać Angular do dostarczania innych elementów na stronie. I ’ ve been making this recommendation about anything JavaScript related since 2010. Ten proces uniwersalności kątowej jest tą samą zasadą. Nie mogę powiedzieć, że wiele witryn zostało zniszczonych przez przeprojektowanie kątowe i JavaScript. Bądź ostrożny z Twoimi i zawsze sprawdzaj je przez firmę SEO przed uruchomieniem.

    Zapisz się na nasze codzienne podsumowanie ciągle zmieniającego się krajobrazu marketingu w wyszukiwarkach.

    Uwaga: przesyłając ten formularz, wyrażasz zgodę na warunki Third Door Media. Szanujemy Twoją prywatność.

    o autorze

    John E Lincoln

    John Lincoln jest prezesem Ignite Visibility, agencji marketingu cyfrowego I Inc. 5000 Kompanii. Lincoln jest konsekwentnie nazywany jednym z najlepszych ekspertów marketingu w branży. Został laureatem nagrody Search Engine Land „Search Marketer of the Year”, nazwany #1 konsultantem SEO w USA Przez Clutch.co, najbardziej podziwiany prezes i 40 poniżej 40. Lincoln napisał dwie książki (The Forecaster Method i Digital Influencer) i nakręcił dwa filmy (SEO: The Movie i Social Media Marketing: The Movie) na temat marketingu cyfrowego.

    Dodaj komentarz

    Twój adres e-mail nie zostanie opublikowany.