Jak przenieść witrynę WordPress do Gatsby bez utraty jakości SEO?

Migracja witryny WordPress do innego dostawcy może wydawać się garstką, ale coraz więcej blogów wychodzi z tego, co było najpopularniejszym systemem zarządzania treścią w Internecie. Wraz z rozwojem nowej technologii, rozwijają się również opcje, a w ostatnich latach WordPress zmierzył się ze sporym udziałem konkurentów, z których najbardziej obiecującym jest Gatsby.

Chociaż działają w stosunkowo podobny sposób, istnieje wiele powodów, dla których wielu właścicieli witryn woli Gatsby od WordPressa.

Od funkcjonalności i usług po jakość wydajności i dostępne korzyści, oto bliższe spojrzenie na WordPress i Gatsby, a następnie szczegółowy przewodnik, jak bezpiecznie przenieść witrynę opartą na WordPress do frameworku Gatsby bez utraty jakości SEO w tym procesie .

Definiowanie WordPressa

WordPress od dziesięcioleci jest numerem jeden wśród systemów zarządzania treścią. Jako model open source, WordPress przez lata dostarczał wysokiej jakości usługi tysiącom blogów i stron internetowych, oferując jednocześnie mnóstwo bezpłatnych treści i narzędzi do zarządzania SEO, takich jak wtyczki i rozszerzenia.

Statystyki zauważają, że około 29% właścicieli witryn nadal korzysta z WordPressa, co czyni platformę oczywistym pierwszym wyborem. Powody, dla których WordPress jest preferowany przez wielu użytkowników, wynikają z uproszczonego przesyłania treści i precyzji w modyfikowaniu wszystkich aspektów treści i SEO. WordPress oferuje bogatą galerię wtyczek, zarówno darmowych, jak i płatnych, jednak większość użytkowników uważa tę drugą opcję za znacznie bardziej funkcjonalną.

To powiedziawszy, wady korzystania z WordPressa są również oczywiste. Po pierwsze, system jest oparty na PHP i zawiera rozbudowany kod starszego typu, co komplikuje proces optymalizacji. Ze względu na różne przypadki użycia WordPress tworzy prostą witrynę do skonfigurowania, ale nie szybką, a jak wiadomo, im wolniejsza witryna, tym mniejszy ruch generuje. Nie tylko to, ale głównymi kryteriami rankingowymi Google, oprócz wysokiej jakości treści, jest szybkość ładowania witryny.

Oto niektóre z innych powodów, dla których użytkownicy unikają korzystania z WordPressa:

Problematyczny menedżer treści

WordPressowi zajęło trochę czasu zmodernizowanie edytora treści, a mimo to nie udało im się osiągnąć doskonałości. Nowy menedżer treści (Gutenberg) oddziela treści według bloków, co wielu użytkowników uznało za trudne, ponieważ wrażenia użytkownika nie są idealne. Cóż, nie wiem – uważam, że to naprawdę dobre – kiedy się do tego przyzwyczaisz.

Większość użytkowników instaluje wtyczkę klasycznego edytora, aby pozostać przy tym, co wiedzą.

Pisanie PHP

Aby zmodyfikować witrynę WordPress, modyfikacje muszą być napisane w PHP. Chociaż w WordPressie istnieją niestandardowe modyfikacje, wielu użytkowników uważa je za zbyt wymagające i czasochłonne. A ponieważ PHP nie jest najpopularniejszym językiem, z wyjątkiem witryn WordPress, radzenie sobie z nim wydaje się zbędne.

Niektórzy użytkownicy wolą używać programów do tworzenia stron, które ułatwiają dostosowywanie i modyfikowanie projektu witryny bez użycia kodu. Ale nadal, dzięki WordPressowi, nie możesz mieć WSZYSTKICH funkcji na świecie ani zbudować wymarzonej witryny z tyloma funkcjami, ile chcesz. Bardziej złożona witryna prawdopodobnie będzie miała trudności z wykorzystaniem WordPressa jako interfejsu.

Definiowanie GatsbyJS

Wielu uważa WordPress za przestarzałą technologię, ale wraz ze wzrostem konkurencji GatsbyJS stał się jedną z najbardziej odpowiednich alternatyw. Większość twórców witryn i użytkowników korzysta z witryn korzystających z języków takich jak JavaScript i React.js, co właśnie wnosi Gatsby. W przeciwieństwie do WordPressa o otwartym kodzie źródłowym, GatsbyJS jest statycznym generatorem witryn, zbudowanym głównie w React.

Gdy użytkownicy odwiedzają witrynę opartą na Gatsby, platforma nie renderuje stron. Zamiast tego GatsbyJS generuje strony podczas kompilacji, a następnie przenosi je wszystkie online. System nie wymaga serwerów ani ich konserwacji i jest kompatybilny z plikami statycznymi, takimi jak JS, HTML i CSS. Wreszcie Gatsby w ogóle nie używa PHP, co jest wielką ulgą dla byłych użytkowników WordPressa.

Platforma nie jest pozbawiona wad, z których jednym jest brak możliwości bezpośredniego zobaczenia wyniku jakichkolwiek zmian w witrynie, ponieważ w przypadku Gatsby wszystko musi być najpierw skompilowane. Jednak aby rozwiązać ten problem, wiele osób polega na potokach CI/CD Gitlab, aby najpierw skompilować witrynę, a następnie umieścić ją w Internecie. Gatsby pozwala użytkownikom tworzyć szablony postów na blogu i pisać całą treść w przecenach.

Oto więcej kluczowych zalet korzystania z Gatsby:

• Zero przeładowań

Jako jednostronicowa aplikacja lub SPA, Gatsby nie wymaga klikania strony witryny, aby załadować zupełnie nowy zasób.

• Udoskonalenie obrazu

Wszystkie obrazy używane na platformie są automatycznie filtrowane ze śladów zewnętrznych, takich jak metadane, i są natychmiast zmieniane, kompresowane, optymalizowane i ładowane z opóźnieniem.

• Zasoby pobierania z wyprzedzeniem

Gatsby potrafi wykryć wszystkie linki dostępne na danej stronie i załadować dane do pamięci podręcznej witryny.

• Alternatywne kody

W Gatsby używany kod jest uproszczony, połączony, zminimalizowany i niestety obsługiwany.

Migracja danych WordPress do Gatsby Framework

Rozważając przeniesienie całej treści z WordPressa do Gatsby, najważniejszym aspektem, który należy wziąć pod uwagę, jest zachowanie dotychczasowej wartości SEO.

Na szczęście Gatsby sprawia, że ​​odbiór treści innych platform jest dość łatwy.

Pierwszą rzeczą, której będziesz potrzebować, aby przenieść zawartość, jest wtyczka źródłowa. Wtyczka źródłowa pomoże Gatsby bezproblemowo i automatycznie zapełnić magazyn Graphql, zapewniając jednocześnie dostęp do wszystkich informacji wejściowych. Wtyczkę źródłową można modyfikować, aby dopasować ją do własnych potrzeb, a nawet uczynić platformę open-source zamiast statyczną.

Graphql stanowi dopracowane rozwiązanie w zakresie pozyskiwania danych API i znacząco różni się od swojego poprzednika, REST API. Graphql jest elementem uzupełniającym platformę Gatsby, przeznaczonym do wykorzystania jako część samego systemu. Całkowite ominięcie Graphql jest możliwe, ale jest wysoce ignorowane jako opcja, ponieważ nie zapewnia dostępu do różnych ważnych funkcji.

Następnym krokiem do zrobienia jest ułatwienie procesu pisania i przeniesienie wszystkiego do Markdown. Pliki Markdown lub .md umożliwiają użytkownikom pisanie prostego i zwykłego tekstu, który można następnie łatwiej przekonwertować na HTML. Co więcej, Markdown dostarczy wszystkie pliki .md wraz z kodem Github witryny i sprawi, że wersja procesu będzie kontrolowana. Niektórzy użytkownicy mogą również uznać Gatsby Advanced Started (GAS), ponieważ ten projekt umożliwia tworzenie witryn Gatsby zorientowanych na SEO.

Jak przenieść posty WordPress do Markdown

Przede wszystkim musisz wyeksportować wszystkie przydatne artykuły WordPress. Gdy to zrobisz, będziesz musiał przekonwertować je na zwykły tekst lub Markdown. Istnieje narzędzie, które to robi i nazywa się WordPress Export to Markdown. Za pomocą tego narzędzia możesz wyodrębnić całą zawartość WordPress, jej tagi, kategorie i istotne aspekty SEO. Narzędzie wykonuje dodatkowy krok, aby przekonwertować nie tylko treść artykułów, ale także publikować obrazy.

Po uzyskaniu pliki są gotowe do wylądowania w folderze zawartości projektu. Następnym razem, gdy uruchomisz Gatsby, zauważysz tylko ślad artykułów, ale po zbudowaniu witryny cała zawartość będzie reprezentowana jako nabyta.

Jak tworzyć posty i strony za pomocą Gatsby

Wydajność Gatsby'ego jest podobna do PHP używanego w WordPressie. Jednak, ponieważ Gatsby używa Reacta w całości, umieszcza związki językowe w folderach stron, automatycznie zamieniając je w strony witryny. Ta funkcja jest idealna dla jednowymiarowej zawartości strony, takiej jak „Indeks” i „O mnie”.

Jeśli chodzi o treści dynamiczne, takie jak kategorie lub posty na blogu, użytkownicy mogą polegać na gotowych szablonach Gatsby do tworzenia określonych stron. Ci, którzy będą korzystać z GAS, będą mieli już pod ręką szablony postów wraz z ich tagami i kategoriami. Możesz jeszcze raz oszacować swoją zawartość i uczynić ją bardziej dynamiczną, a tym samym bardziej zgodną z Gatsby. Wszystkie zmiany, które zrobisz, pojawią się w przeglądarce od razu, co sprawia, że ​​Gatsby jest dość przyjazny dla szybkiej iteracji.

Pamiętaj, że istota Gatsby leży w jego pliku gatsby-node.js. Tutaj możesz oszacować zarówno zachowanie szablonu, jak i strony, a także ślimaka, elementy i dodatkowe dane do wykorzystania. Plik jest również szkodliwy do rozważenia, ponieważ pomaga zapełnić węzły lub innymi słowy, dane są przechowywane w Twoim GraphQL.

Jak stylizować witrynę Gatsby

Jeśli chodzi o pisanie stylów witryn, Gatsby oferuje wiele przydatnych opcji, takich jak pliki .css, Sass, CSS-in-JS i inne. Oto kilka wskazówek, jak zaprojektować witrynę Gatsby:

• Przeglądaj dostępne zasoby projektowe, takie jak Ant, MaterialUI i Materialize.
• Bądź gotowy do wdrożenia! Witryny statyczne, takie jak Gatsby, sprawiają, że wdrażanie witryn jest bardzo łatwe i niedrogie. Możesz skorzystać z wielu darmowych i szybkich narzędzi, takich jak Netlify, AWS Amplify, Now i Surge.
• Optymalizuj, optymalizuj, optymalizuj! Korzystanie z Gatsby oznacza posiadanie szybszej witryny i zawsze możesz korzystać z platformy, aby była jeszcze szybsza, pozycjonowana i dostępna. Jednym z najlepszych narzędzi do optymalizacji jest Lighthouse, ponieważ robi wszystko automatycznie: audyty, metryki, praktyki internetowe, szczegółowe dane, a nawet pomocne linki. Możesz przeprowadzić audyt Lighthouse przez Google, Firefox lub skorzystać z opcji Lighthouse CLI.

Jak sprawić, by Twoja witryna Gatsby działała szybko?

Po przeniesieniu całej zawartości możesz przyspieszyć swoją witrynę Gatsby poprzez:

• Przetwarzanie wszystkich danych Gatsby przez GraphQL.
• Unikaj używania rozbudowanych bibliotek, takich jak moment.js, ponieważ mogą one spowolnić działanie witryny.
• Zaufaj swojemu serwerowi, aby modyfikował daty, wysyłał te dane do swoich stron i wykonywał inne ciężkie zadania.
• Zarządzaj mniejszą ilością danych za pomocą GraphQL. W ten sposób uzyskasz dostęp tylko do tych danych, których potrzebujesz i unikniesz omyłkowego nagromadzenia nadmiernych ilości danych.
• Uczyń to dostępnym. Twoi użytkownicy nie będą wchodzić w interakcję z Twoją witryną tak jak Ty, więc upewnij się, że witryna obejmuje wszystkie kategorie użytkowników poprzez włączenie jakości a11y, co może również skutkować poprawą HTML i zoptymalizowanymi wynikami SEO. Aby naprawić problemy a11y, możesz użyć odpowiednich narzędzi, takich jak Axe.

Jak utrzymać wysoką jakość SEO

Rozumiejąc podstawy tego, jak Google pozycjonuje witryny, będziesz w stanie uzyskać dostęp do swojej witryny Gatsby. W tym celu zwróć uwagę na następujące aspekty:

• Gwiezdne i trafne treści
• Większa dostępność dla użytkowników
• Szybciej działająca witryna
• Tworzenie linków lub prezentowanie swojej witryny w innych domenach

Uproszczony przewodnik po migracji z WordPressa do Gatsby

Aby podsumować i ułatwić ten proces, oto przewodnik krok po kroku, jak przeprowadzić pełną migrację witryny z WordPressa do GatsbyJS.

• Pobierz plik XML z WordPress, znajdujący się w Narzędzia > Eksportuj.
• Użyj narzędzia do konwersji XML na Markdown lub zwykły tekst, które czasami wykonują ponad połowę zadania konwersji postów na blogu.
• Pobierz wszystkie obrazy i zawartość serwera. Przeciągnij obrazy z plików WordPress do folderu obrazów.
• Napraw uszkodzone listy i bloki kodu wcięcia w celu przyswojenia stylu Gatsby'ego.
• Zapisz miniatury i przenieś je do odpowiedniego folderu w celu ponownego wykorzystania.
• Połącz się z Netlify, aby skonfigurować automatyczne wdrażanie. Jeśli jest napisany w JavaScript, przenieś go do typescript, aby go włączyć.
• Zmień opcje stylów, aby mogły używać CSS-in-JS. Zaktualizuj styl i układ.
• Uruchom aktualizacje, aby zawartość bloga znajdowała się w kategorii „/blog/”.
• Użyj przekierowania dla wszystkich adresów URL.
• Użyj interfejsu React Context API jako opakowania, aby stworzyć tryb nocny.
• Przenieś komentarze WordPress do Gatsby za pomocą ręcznego lub automatycznego importera.

Po wykonaniu wszystkich tych kroków pozostajesz z budowaniem stron, opanowaniem GraphQL, tworzeniem odpowiednich zapytań i czyszczeniem małego bałaganu tam, gdzie jest to wymagane.

Jak długo potrwa proces migracji?

Migracja całej treści z WordPressa do Gatsby będzie zależeć od ilości treści, jaką masz do dyspozycji, a także od Twoich osobistych wysiłków. Najlepiej byłoby, gdybyś był w stanie przenieść całą zawartość w nie więcej niż dwa tygodnie. Pamiętaj jednak, że jeśli jesteś nowy w React, będziesz potrzebować czasu, aby się do tego przystosować.

Gdy już to opanujesz, będziesz cieszyć się korzyściami, jakie oferuje Gatsby, takimi jak mniejsze spustoszenie HTML w Twojej bazie danych MySQL oraz pliki, które są łatwo dostępne, zarządzane, edytowane, odczytywane, kopiowane i udostępniane innym.

Ostatnia rzecz…

Chociaż zarządzanie Gatsby wymaga zestawu umiejętności i znajomości CSS, HTML, JavaScript, Node.js, React, ES6 i GraphQL, żeby wymienić tylko kilka, zacznij powoli i ucz się każdej technologii w miarę jej pojawiania się.

Nawet jeśli proces ten stanowi wyzwanie, ostatecznie możesz skorzystać z samouczka wprowadzającego Gatsby, aby uzyskać jeszcze bardziej szczegółowy przewodnik po procesie migracji.

Chodźmy kodować, dobrze?