Vue.js SPA-Friendly: porady, narzędzia i przykład prerenderowania

1. Ogólne wskazówki dotyczące SEO
2. → Metatagi 🏷️
3. → Optymalizacja mobilna 📱
4. → HTTPS 🛡️
5. → Prędkość strony 🚀
6. → Mapa strony 🗺️
7. → Link budynku ⛓️
8. Konkretne problemy dotyczące SEO Vue.js SPA
9. Renderowanie po stronie serwera
10. Prerendering
11. Przykład techniczny Vue.js z wykorzystaniem prerenderingu
12. 1. Instalacja prerender-spa-plugin
13. 2. Konfigurowanie Vue.js do prerenderowania
14. 3. Budowanie przyjaznej SEO witryny Vue.js.
15. Demo na żywo, repozytorium Github i samouczek wideo
16. Zamykanie myśli

W pośpiechu? Przejdź do Samouczek prerenderingu Vue.js lub demo na żywo .

Czy wiesz o historii niepowodzeń JavaScript w Hulu?

W 2016 roku usługa strumieniowego przesyłania wideo online doświadczyła 56% spadek widoczności z powodu złej obsługi JS .

Koszmar, przez który żaden biznes nie chce przejść.

Aby uniknąć takich katastrof, musisz wiedzieć, co robisz podczas pracy z nowoczesnymi strukturami JavaScript.

Tutaj w Snipcart, kochamy Vue.js , ale są całkowicie świadomi problemów SEO z aplikacją jednostronicową Vue.js.

W tym poście chcę pokazać programistom JS, jak łatwo jest uczynić Vue przyjaznym dla SEO.

Przejdę przez:

• Ogólne wskazówki dotyczące SEO należy zawsze stosować.
• Konkretne problemy dotyczące SEO Vue.js SPA.
• Narzędzia do ich naprawy za pomocą renderowania serwera i renderowania wstępnego.
• Techniczny przykład Vue.js SEO wykorzystujący prerender-spa-plugin.

Jest to w pełni zaktualizowana wersja naszego zasobu SEO Vue.js. Po pierwszym z nich pojawiły się dwa inne artykuły na temat zagadnień SEO JS frameworks, dla React , i Kątowy . Istnieje również wersja wideo tej treści, którą można znaleźć na stronie koniec tego posta.

Ogólne wskazówki dotyczące SEO

Zanim przejdziemy do zagadnień SEO specyficznych dla JavaScript SPA, omówmy najlepsze praktyki, które programiści powinni stosować podczas tworzenia witryn zoptymalizowanych pod kątem wyszukiwarek.

Ta krótka lista jest inspirowana przez największych graczy SEO, takich jak Moz, Backlinko i Ahrefs. Dodałem linki do ich zasobów, jeśli chcesz głębiej sięgnąć.

→ Metatagi 🏷️

Meta tagi to nisko wiszące owoce. Pozwalają one dokładnie wyszukiwać wyszukiwarki na temat treści.

Jednak nie wszystkie znaczniki rodzą się równe. Powinieneś skupić swoją energię tylko na kilku z nich, a mianowicie:

• Typ zawartości meta - musi być obecny na każdej stronie, deklaruje zestaw znaków dla strony.
• Tytuł - wybierz unikalny tytuł, który przyciąga uwagę użytkowników, a jednocześnie dokładnie opisuje zawartość strony. Trzymaj to zwięźle!
• Metaopis - powinien przekonać odwiedzających SERP (Search Results Results Page) do kliknięcia linku, aby znaleźć odpowiedzi na ich konkretne potrzeby badawcze.
• Viewport — Niezbędny dla dobrego doświadczenia mobilnego.

Ucz się więcej: Metatagi SEO , przez Moz.

vue-meta to solidne narzędzie do zarządzania metainformacjami strony w komponentach Vue 2.0.

Znaczniki społecznościowe mogą również mieć znaczący wpływ na SEO, ponieważ pomagają w rozpowszechnianiu treści na platformach społecznościowych, zwiększając tym samym Twoje sygnały społecznościowe SEO. Istnieją specjalne tagi dla wszystkich dużych platform (Facebook, Twitter, Pinterest, Google+).

Ucz się więcej: Must-Have Social Meta Tags dla Twittera, Google+, Facebooka i innych , przez Moz.

→ Optymalizacja mobilna 📱

Jeśli nie jesteś tego świadomy Indeksowanie Google na telefony komórkowe , uważaj to za sygnał pobudki! Google daje teraz więcej miłości do płynnego korzystania z urządzeń mobilnych niż do komputerów stacjonarnych.

Ucz się więcej: Mobile SEO: The Definitive Guide , przez Backlinko.

NativeScript zasila aplikacje mobilne Vue.js na wielu platformach.

→ HTTPS 🛡️

Brakująca certyfikacja HTTPS lub zepsuta konfiguracja mogą karać Twoją witrynę. Czy nie jest zrozumiałe, że wyszukiwarki są w końcu skłonne do przekazywania zaufanych i certyfikowanych witryn?

Nawet jeśli nie chodziło o SEO, prawdopodobnie chcesz zaoferować użytkownikom platformę tak bezpieczną, jak to tylko możliwe. Więc nie ma powodu, aby nie spełniać tego kryterium!

Ucz się więcej: HTTP vs. HTTPS dla SEO: co musisz wiedzieć, aby pozostać w Google Grands Good przez ahrefs.

→ Prędkość strony 🚀

Rozpiętość uwagi ludzi jest krótka - osoby wyszukujące szybko rezygnują ze stron o powolnym ładowaniu. Google wie o tym i, aby zaoferować najlepszym UX użytkownikom wyszukiwarek, będzie karać wolne strony.

Googleboty sami są dość niecierpliwi i nie będą czekać na skrypt dłużej niż 5 sekund . Jeśli nie spełnisz tego limitu czasu, ryzykujesz, że treść nie zostanie odpowiednio wyświetlona. Przyspiesz to!

Ucz się więcej: SEO na miejscu: szybkość strony , przez Moz.

→ Mapa strony 🗺️

Mapa witryny działa jako mapa architektury witryny dla wyszukiwarek. Zawarte w nim powinny być strony, które uważasz za dobrej jakości strony docelowe i nawigacyjne, godne indeksacji.

Mapy witryn mogą nie być tak przydatne w przypadku mniejszych witryn, ale nadal warto rozważyć ich użycie.

Ucz się więcej: Mapy witryn XML: narzędzie Najbardziej źle rozumiane w Przyborniku SEO , przez Moz.

Możesz wygenerować plik sitemap.xml według konfiguracja routera vue .

→ Link budynku ⛓️

Budowanie Twojego urzędu domeny pozostaje kluczową taktyką SEO. Skąd Google wie, że stałeś się autorytatywnym zasobem? Łącząc inne odpowiednie domeny z twoimi.

Nie ma tu tajnej formuły, aby to osiągnąć, musisz ciężko pracować, aby stworzyć świetną treść . Treści, które inni chcą udostępniać i wykorzystywać jako zasób w swojej własnej witrynie!

Im więcej linków otrzymasz z odpowiednich źródeł, tym bardziej zwiększy się twoja władza, tym bardziej zyskasz przychylność Google w rankingach.

Ucz się więcej: Link Building for SEO: The Definitive Guide , przez Backlinko.

Konkretne problemy dotyczące SEO Vue.js SPA

W następnym samouczku zdecydowałem się użyć dema blogu, które zrobiliśmy we wcześniejszym poście, ponieważ szczerze mówiąc wygląda to świetnie. Jeśli chcesz wiedzieć, jak został zbudowany, zobacz ten post .

Chociaż wizualnie jest to świetny kawałek pracy, nie jest idealnie ustawiony pod względem SEO. To kompletne SPA, w którym wyszukiwarki mogą mieć problemy z indeksowaniem i indeksowaniem.

Dlaczego?

Aplikacja jednostronicowa dynamicznie dodaje zawartość do stron, co ma swoje zalety, ale przynosi dwie istotne kwestie:

1. Nie wiemy, w jakim stopniu Google jest w stanie indeksować i poprawnie renderować JS . Mówią od kilku lat, że Googleboty są w stanie to zrobić. Jednak po tych roszczeniach zawsze występuje „ale” lub dwa.
2. Google to nie jedyna wyszukiwarka . Jeśli sytuacja jest nadal niepewna, wiemy, że inni gracze nie indeksują jeszcze JS, nie napotykając w ten sposób rzeczywistej zawartości strony.

Więc nie da się tego obejść. Jeśli chcesz mieć pewność, że Twoja strona internetowa / aplikacja Vue.js znajduje się w rankingu SERP, musisz się na nią zareagować.

Twoje opcje?

Renderowanie po stronie serwera

Dzięki konfiguracji SSR masz logikę renderowania wykonaną bezpośrednio w zapleczu, w środowisku Node.js. Widoki HTML są następnie zwracane do klienta, gotowe do wyświetlenia w wyszukiwaniu botów.

Jest to doskonałe rozwiązanie dla aplikacji wrażliwych na czas, w których chcesz odciążyć jak najwięcej logiki na serwerze, ale ma koszt. Będziesz potrzebował solidnej infrastruktury, aby poradzić sobie ze stresem dodanym do serwera, prosząc o więcej czasu na rozwój. Możesz także spowolnić swój system w trakcie procesu.

Ale jeśli sobie z tym poradzisz, zdecydowanie jest to sposób na większe aplikacje. Nuxt.js jest bez wątpienia narzędziem do użycia dla twojego renderowane przez serwer Vue.js SPA .

Prerendering

Czasami jednak renderowanie po stronie serwera może wydawać się przesadą, jak w przypadku mojej wersji demonstracyjnej. W przypadku małego SPA z zaledwie kilkoma stronami prerendering wykona wszystko dobrze. Tym bardziej, jeśli jedyną troską jest SEO.

W ten sposób nie ma potrzeby dołączania aplikacji Vue.js do żadnego serwera. Renderowanie odbywa się po stronie klienta za pomocą wtyczki innych firm Jak na przykład:

• Prerender.io - Kompatybilny ze wszystkimi najpopularniejszymi frameworkami JS, w tym Vue.js.
• prerender-spa-plugin - Wtyczka pakietu internetowego, która kompiluje strony na statyczne strony. Sprawia, że ​​cała zawartość dostępna w źródle, a indeksowanie jest proste.

Ta ostatnia jest bardzo łatwa w użyciu i została zbudowana przez głównego członka zespołu Vue.js, więc idealnie pasuje do mojego przypadku użycia tutaj.

Przykład techniczny Vue.js z wykorzystaniem prerenderingu

Czas naprawić blog Vue.js pokazany wcześniej. Za pomocą prerender-spa-plugin , W krótkim czasie otrzymam SPA Vue.js, które jest w łaskach Google.

Wymagania wstępne

• Podstawowa wiedza o Vue.js
• Instalacje Node.js i npm

1. Instalacja prerender-spa-plugin

Konfiguracja wtyczki jest bardzo prosta. W tej konfiguracji uruchomię wtyczkę tylko podczas budowania do produkcji. Nie musisz wykonywać wstępnego renderowania podczas aktywnego tworzenia komponentów.

Zacznij od zainstalowania wtyczki z npm.

npm zainstaluj prerender-spa-plugin

Następnie otwórz plik build / build.js. Znajdziesz tam niestandardowe elementy do produkcji. Musisz zaimportować wtyczkę i dodać te wiersze na górze pliku:

// /build/build.js const PrerenderSPAPlugin = require ('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

Dlaczego PrerenderSPAPlugin.PuppeteerRenderer? Ponieważ musisz dostosować renderer. Musisz wstrzyknąć dane, aby aplikacja wiedziała, kiedy jest wstępnie przygotowana. Są takie rzeczy jak komentarze Disqus, których nie będziesz w stanie wykonać.

W aplikacji w 100% przyjaznej dla SEO lepiej byłoby skorzystać z tych komentarzy jako treści renderowanych na swoich stronach. Jeśli pracujesz ze statycznym generatorem witryn, powinieneś rozważyć Staticman dla statycznej treści generowanej przez użytkownika.

Musisz pobrać wszystkie wpisy na blogu i wygenerować listę tras, które zostaną wstępnie przygotowane. W prawdziwym scenariuszu produkcyjnym prawdopodobnie chciałbyś zadzwonić do swojego bezgłowego CMS API lub usługi zewnętrznej, która dostarcza twoją treść. W tym przypadku dane znajdują się w prostych plikach JSON.

Przeczytaj plik feed.json i wygeneruj trasy:

// /build/build.js const fileContent = fs.readFileSync (path.resolve (__ dirname, '..', 'static', 'api', 'feed.json')); const feed = JSON.parse (fileContent); const prenderedRoutes = feed.results.map (x => `/ read / $ {x.id}`); prenderedRoutes.unshift ('/');

Dodaj wtyczki do konfiguracji pakietu internetowego:

// /build/build.js webpackConfig.plugins.push (nowy PrerenderSPAPlugin ({staticDir: path.resolve (__ dirname, '..', 'dist'), routes: prenderedRoutes, renderer: nowy Renderer ({injectProperty: '__PRERENDER_INJECTED ', inject: {prerendered: true}, renderAfterDocumentEvent:' app.rendered '})}));

Będziesz miał dostęp do okna .__ PRERENDER_INJECTED.prerendered zmienna, gdy witryna jest prerendering. Będzie to przydatne do wykluczenia treści, których nie chcesz prerenderować.

Musisz także określić oczekiwanie na zdarzenie app.rendered.

W tym pokazie użyję Tempo , która jest niesamowitą biblioteką, aby szybko dodać pasek postępu na stronie. Musisz jednak upewnić się, że ładowanie jest zakończone, zanim wyrenderujesz stronę, jeśli nie, skończysz na losowym pasku postępu na wielu stronach.

2. Konfigurowanie Vue.js do prerenderowania

Będziesz musiał zastosować kilka drobnych zmian w niektórych komponentach. Aby to zrobić, zmieniłem sposób, w jaki Pace został uruchomiony. Pozbyłem się pliku startup.cs i umieściłem wszystko w main.js.

Otwórz plik main.js i zmień sposób dołączania składników aplikacji:

// /main.js new Vue ({router, render: h => h (App), mounted () {Pace.start () Pace.on ('hide', () => {document.dispatchEvent (nowe wydarzenie ('app.rendered'));})}}). $ mount ('# app')

Po zamontowaniu głównego komponentu uruchom Pace i wyślij zdarzenie app.rendered po zakończeniu ładowania początkowego.

Ostatnia aktualizacja, którą musisz zrobić, to upewnienie się, że Disqus nie jest ładowany, gdy witryna jest wstępnie przygotowywana.

Otwórz plik BlogPost.vue, w którym znajdziesz składnik Disqus.

Ze względu na sposób, w jaki prerender-spa-plugin został skonfigurowany na początku, będziesz miał dostęp do zmiennej, która wskazuje, że witryna jest wstępnie przygotowana.

Zaktualizuj metodę showComments w ten sposób:

// /BlogPost.vue showComments () {// To jest wstrzykiwane przez prerender-spa-plugin w czasie kompilacji, nie wykonujemy wstępnych komentarzy. if (okno .__ PRERENDER_INJECTED && window .__ PRERENDER_INJECTED.prerendered) {return; } setTimeout (() => {this.commentsReady = true}, 1000)}

3. Budowanie przyjaznej SEO witryny Vue.js.

Jesteś teraz gotowy do zbudowania swojej witryny. W twoim terminalu użyj tego polecenia:

npm uruchom kompilację

Następnie, jeśli spojrzysz na folder dist, powinieneś zobaczyć wszystkie posty w folderze read. Dla każdego postu wygenerowano statyczny plik HTML:

To jest to! Jak łatwo było, prawda?

Demo na żywo, repozytorium Github i samouczek wideo

Zobacz demo na żywo tutaj

Zobacz repozytorium GitHub tutaj

Wizualna prezentacja tej treści:

Zamykanie myśli

prerender-spa-plugin to zgrabna wtyczka. Łatwo jest skonfigurować i na tyle elastycznie, aby obsługiwać przypadki użycia asynchronicznego, takie jak w przypadku Pace.

Spędziłem około 2 godzin, aby dowiedzieć się, jak połączyć wszystkie te rzeczy i zaktualizować naszą początkową aplikację do obsługi prerenderingu.

Jak wspomniałem wcześniej, wtyczka jest prosta i najlepiej nadaje się do prostych aplikacji, takich jak statyczny blog. Jeśli chcesz zbudować coś bardziej skomplikowanego, radzę zamiast tego spojrzeć na Nuxt!

Jeśli podobał ci się ten post, poświęć chwilę podziel się nim na Twitterze . Masz komentarze, pytania? Naciśnij sekcję poniżej!