code

Optymalizacja SEO w Nuxt.js - Kompletny przewodnik!

nuxt.js

Czy Nuxt.js jest dobry dla optymalizacji SEO?

Każdy biznes, który posiada własną stronę internetową powinien wiedzieć, jak ważna jest optymalizacja tej strony pod kątem SEO. Gdy myślisz “SEO”, w pierwszej kolejności do głowy przychodzą Ci takie działania, jak słowa kluczowe, linkowanie zewnętrzne i wewnętrzne, tworzenie kontentu. Jednak bardzo ważne są również działania od strony technicznej, takie, jak optymalizacja strony internetowej. Jeden z największych atutów Nuxt.js to właśnie fakt, że ​​możesz użyć optymalizacji pod kątem wyszukiwarek (SEO), aby wspomóc swoją stronę i podnieść jej pozycję w Google. Z tego artykułu dowiesz się, jak to zrobić. Przedstawiamy kompletny przewodnik!

Co to jest Nuxt.js?

Nuxt to framework Vue.js o otwartym kodzie źródłowym. Jego celem jest pomoc programistom w korzystaniu z najnowocześniejszych technologii. Główne cechy Nuxt.js to:

  • Renderowanie po stronie serwera (SSR)
  • Statyczne generowanie stron

Oczywiście jest ich znacznie więcej, ale w dzisiejszym artykule chciałbym skupić się na tych dwóch, które są najważniejsze dla SEO z punktu widzenia optymalizacji.

Renderowanie po stronie serwera to możliwość wygenerowania strony internetowej na serwerze Node.js i wysłania w pełni wyrenderowanej strony do klienta, podczas gdy statyczne generowanie witryny renderuje całą aplikację w fazie budowania. Oznacza to, że do wdrożenia aplikacji nie jest potrzebny żaden serwer.

Oba rozwiązania poprawiają wydajność i pozwalają zoptymalizować SEO Twojej strony internetowej. Nie trzeba dodawać, jak ważne jest w dzisiejszych czasach łatwość wykrycia przez roboty Google. Chciałbym pokazać, jak bez wysiłku możesz skonfigurować aplikację Nuxt.js, aby osiągnąć wysokie, zdrowe wyniki. Udało mi się osiągnąć 96/100 według ahref.com dla strony internetowej Qarbon IT

Najważniejsze kroki w optymalizacji:

1. Meta tagi:

Nuxt.js daje kilka możliwości, aby dodać meta tagi. Metadane nie są wyświetlane na stronie. Są używane przez przeglądarki, wyszukiwarki i inne usługi internetowe.

  • Domyślne metatagi dla wszystkich stron

Nuxt pozwala nam dodawać domyślne metatagi dla wszystkich stron. W tym celu możemy użyć właściwości head wewnątrz nuxt.js.config

nuxt.js default meta tags
  • Ustawianie metatagów dla każdej strony z osobna.

Nuxt.js pozwala również ustawić metatagi osobno dla każdej strony. W tym celu musimy użyć funkcji head wewnątrz komponentu. W Qarbon IT metatagi zależą od aktualnie wybranego języka. Używamy biblioteki i18n do obsługi tłumaczenia. Wspomnę o tym nieco później, jeśli chodzi o optymalizację SEO.

nuxt.js meta tags
  • Konfigurowanie metatagów dla stron dynamicznych

Gdy nasze strony mają dynamiczną zawartość, zazwyczaj metatagi również zależą od tej zawartości. W Nuxt.js poradzimy sobie z tym łatwo, ponieważ wewnątrz komponentu mamy dostęp do nich wszystkich.

nuxt.js meta tags

2. Generowanie mapy witryny dla Twojej strony internetowej:

Dla Google Botów bardzo ważne jest, jeśli Twoja witryna ma zaimplementowany plik sitemap.xml w głównym folderze. Plik ten powinien być dostępny dla botów Google poprzez yoursite.com/sitemap.xml URL. W nuxt.js możemy skorzystać z nuxt/sitemap, który odpowiada za automatyczne generowanie sitemap.xml. Konfiguracja jest naprawdę prosta, poniżej przykładowa konfiguracja strony internetowej Qarbon IT. Ta konfiguracja jest trochę bardziej skomplikowana niż w przypadku prostej strony internetowej, ponieważ mamy wiele stron generowanych dynamicznie i te trasy muszą być uwzględnione w naszym pliku sitemap.xml.

nuxt.js sitemap

3. Generowanie pliku robots.txt:

Istnieje biblioteka generująca plik robots.txt - robots-module. Ta biblioteka automatycznie generuje plik robots.txt podczas tworzenia naszej strony internetowej. Konfiguracja powinna być zaimplementowana w nuxt.config.js. Nic poza tym. Aby uzyskać bardziej wyrafinowaną konfigurację, zapoznaj się z dokumentacją.

nuxt.js robots.txt

4. Konfiguracja i18n:

Powinien powstać osobny post na temat tej konfiguracji, ale postanowiłem podać kilka głównych punktów tutaj. Zanim zagłębisz się w tę sprawę bardziej szczegółowo, zdecydowanie polecam przeczytanie dokumentacji tutaj

  • Wyłącz automatyczne wykrywanie języka

Spotkałem się z problemem, ponieważ domyślnym językiem witryny IT Qarbon jest język polski, a Google podczas indeksowania został przekierowany na język angielski. To było mylące dla Google Botów i straciliśmy kilka pozycji w Google Search Console. Dlatego zaleciłem wyłączenie tej opinii. Poniżej znajdziesz naszą konfigurację i18n.

nuxt.js automatic language detection
  • Dodaj dodatkowe metadane i linki do nagłówka.

Specjalna funkcja oferowana przez moduł i18n nazywa się $nuxt18nHead. Ta funkcja zwraca metadane, które możemy łatwo dodać do elementu HTML Head.

< link > - określa relację pomiędzy bieżącą stroną internetową a zasobami zewnętrznymi

< meta > - wyjaśnione powyżej

To jest przykładowy kod ze strony internetowej Qarbon IT. Na wszelki wypadek zdecydowałem się dodać tę funkcję do układu nuxt, aby uniknąć duplikowania kodu.

nuxt.js head

I gotowe! Tak właśnie wygląda optymalizacja SEO w Nuxt

Mam nadzieję, że materiał był dla Ciebie pomocny. Dzięki tym paru prostym krokom z pewnością zwiększysz optymalizację swojej strony pod kątem SEO. Warto o tym pamiętać, jeśli chcesz, aby Twoja firma pozycjonowała się w wynikach wyszukiwania, a ruch na stronie zwiększył się - a wraz z nim, żeby zwiększyła się liczba Twoich potencjalnych klientów!

avatar
Jakub Jodłowski
05/11/2021
ebook