Optymalizacja SEO w Nuxt.js - Kompletny przewodnik!

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

‍

‍

• 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.

‍

‍

• 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.

‍

‍

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.

‍

‍

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ą.

‍

‍

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.

‍

• 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.

‍

‍

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!

‍