Jak przeprojektować swoją witrynę WordPress (i zachować SEO)

Opublikowany: 2025-02-24

Przeprojektowania stron internetowych mogą być zarówno ekscytujące, jak i trudne dla firm. Nie ma żadnej wysokiej nadziei na przeprojektowanie, ale jest to monumentalne przedsięwzięcie. Przeprojektowanie może rozwiązać twoje istniejące problemy, dając szansę na rozebranie witryny i ponownie ją zbudować.

Weź to od kogoś, kto wykonał mnóstwo przebudowy WordPress - warto, ale zdecydowanie wymaga pracy.

Spis treści
  • 1 Po co przeprojektować swoją witrynę?
  • 2 kroki do przeprojektowania witryny WordPress
    • 2.1 1. Zaplanuj swoje potrzeby przeprojektowania
    • 2.2 2. Utwórz stronę inscenizacyjną
    • 2.3 3. Zachowaj SEO i szczegóły techniczne
    • 2.4 4. Użyj Divi dla swojego przeprojektowania WordPress
    • 2.5 5. Zaprojektuj strony i szablony
    • 2.6 6. Zoptymalizuj swoją witrynę pod kątem wydajności
    • 2,7 7. Śledź listę kontrolną przed uruchomieniem
    • 2.8 8. Chodź na żywo
  • 3 WordPress przeprojektowany w prawo
    • 3.1 Zrób to, żeby iść

Po co przeprojektować swoją witrynę?

Potrzebna jest przeprojektowanie, gdy Twoja strona jest utknięta. Jest to w wielu różnych formach, ale oto kilka, które uzasadniają dużą zmianę:

Powody przeprojektowania strony internetowej: Zmiany branżowe wymagają aktualizacji witryny, ponieważ Twoja witryna nie osiąga pożądanych rezultatów, odwiedzający mają problemy z przekształceniem klientów, Twoje cele biznesowe zostały przesunięte i odświeżyłeś swoją markę lub logo.

Jeśli kiwałeś głową tak, tak do któregokolwiek z nich, przeprojektowanie może być w twoim najlepszym interesie.

Kroki przeprojektowania witryny WordPress

Istnieje niezawodny proces dla każdego przeprojektowania witryny. Ale, co nie dziwi, zalecamy rozpoczęcie planu.

1. Zaplanuj swoje potrzeby przeprojektowania

Ustawienie celu jest ważną częścią przeprojektowania strony internetowej. To po prostu zbyt duży projekt, aby pływać bez celu. Pomyśl o tym, co realistycznie chcesz osiągnąć.

Dlaczego powinieneś zapisać cele swojej witryny

Wspólne cele dla przeprojektowania witryny często obejmują takie rzeczy:

  • Better Core Web Vitals wyniki (szybsze strony są lepsze dla wszystkich)
  • Ulepszone wskaźniki konwersji (niezależnie od tego, czy są to zgłoszenia formularza, zakupy produktów, czy jakiekolwiek inne kluczowe działanie w Twojej witrynie)
  • Ulepszone zaangażowanie użytkowników, mierzone takimi rzeczami, jak czas mieszkania i wskaźniki odrzuceń
  • Tworzenie skalowalnego systemu projektowego, który upraszcza przyszłe tworzenie treści
  • Dodanie nowej funkcjonalności w celu zwiększenia wrażenia użytkownika (takie jak recenzje klientów, szybsze kase, lepszy sposób na pokazanie wideo lub łatwiejsza nawigacja)

Niektóre z tych celów, takie jak podstawowe wyniki VITALS lub wskaźniki konwersji, można łatwo mierzyć poprzez śledzenie wskaźników. Inni, takie jak tworzenie lepszego systemu projektowania, mogą bardziej polegać na osiągnięciu pewnego uczucia lub poziomu wydajności. Ważne jest, aby upewnić się, że twoje cele są dobrze zdefiniowane i spisane przed rozpoczęciem.

Wskazówka przeprojektowana
To, że przeprojektowujesz swoją witrynę, nie oznacza, że ​​wszystko musi odejść . Twoja podstawowa treść - takie jak posty na blogu, opisy usług, biblioteka obrazów i informacje o produkcie - są na ogół cenne. Określ, co możesz mieć, aby mieć nieco krótszą listę rzeczy do zrobienia.

2. Utwórz stronę inscenizacyjną

Nigdy nie pracuj na stronie na żywo. Zamiast tego skonfiguruj stronę inscenizacyjną. Użyj swoich narzędzi hostingowych, aby sklonować witrynę WordPress. Jeśli tego nie zrobisz, ryzykujesz złamanie witryny, podczas gdy odwiedzający nadal starają się uzyskać do niej dostęp. Ponadto witryna inscenizacji wywiera presję, utrzymując obecną stronę internetową. Nie zalecam również korzystania z strony w budowie na stronie na żywo, chyba że oryginalna strona jest netto. Poczekaj, aż przeprojektowana strona będzie gotowa.

Siteground oferuje jeden z najłatwiejszych sposobów tworzenia witryny inscenizacji z istniejącej witryny.

Siteground Site inscenizacja jednego kliknięcia

Witryna inscenizacji jest klonem Twojej witryny, która „mieszka” na tymczasowym adresie URL. Jest całkowicie oddzielony od Twojej witryny na żywo, więc nie ma między nimi ingerencji.

Na witrynie inscenizacji będziesz chciał tymczasowo go wyczerpać, aby Google nie zauważył tego, dopóki nie popchniesz go jako witryny na żywo. Aby to zrobić, przejdź do „Ustawienia> czytanie ”, a następnie zaznacz pole z napisem „ zniechęcaj wyszukiwarki z indeksowania tej witryny ”. Będziesz pomieszać Google, jeśli pozwolisz mu indeksować swoją witrynę inscenizacyjną oprócz witryny na żywo.

3. Zachowaj SEO i szczegóły techniczne

Przeprojektowanie może wpłynąć na twoje SEO. Wyszukiwarki tworzą swoje indeksy na podstawie istniejącej struktury witryny. Zbyt duża zmiana spowoduje, że Google zrzuci strony ze swojego indeksu i rozpocznie proces od nowa. Dlatego polecam przeprowadzenie pełnego audytu swojej istniejącej witryny. Użyj konsoli wyszukiwania Google, aby zidentyfikować strony o wysokiej wydajności, błędy pełzania i rankingi słów kluczowych. Eksportowanie tych danych pomoże ustalić punkty odniesienia w celu porównania przeprojektowanej witryny i powstrzymania zbytnio na zmianę podstaw witryny.

Pamiętaj, aby zrobić każdy z nich dla każdego przeprojektowania:

  1. Zachowaj istniejące adresy URL. Śledź każdą stronę i opublikuj na swojej stronie internetowej, w tym strony zbudowane przez CMS (pomyśl o taksonomii i stronach sklepowych). Lubię mieć arkusz kalkulacyjny. Możesz spojrzeć na swoje mapy witryn dla 95% stron swojej witryny.
  2. Skonfiguruj 301 przekierowań dla dowolnych stron ze zmianą adresu URL (bardzo ważne - niektóre wtyczki zrobią to automatycznie).
  3. Jeśli chodzi o 301, zachowaj poprzednie przekierowania nienaruszone. Możesz także oczyścić wszelkie niezbędne 301s (404s nie są złe, ale użyj 301, jeśli strona się porusza).
  4. Migruj swoje tagi tytułowe i opisy meta. Możesz je zmienić, ale na pewno nie chcesz ich stracić, jeśli nie.
  5. Zachowaj dodatkowy schemat używany na swoich stronach (więcej niż to, co jest tworzone domyślnie z wtyczki SEO). Odtwarzanie schematu jest ból, gdy po prostu zapomniałeś go zapisać (użyj do tego arkusza kalkulacyjnego).
  6. Utrzymuj nienaruszoną strukturę nagłówka, ponieważ wyszukiwarki używają go do kontekstu. Możesz wprowadzać zmiany treści, ale po prostu wiesz, że mogą wpłynąć na twój poprzedni SEO.

Zadania SEO dla przeprojektowania WordPress

SEO jest często refleksją z przeprojektowaniem. Chociaż SEO może być jedną z ostatnich rzeczy, które optymalizujesz nową stronę internetową (w granicach rozsądku), powinna to być jedna z pierwszych rzeczy, o których myślisz o przeprojektowaniu . Jeśli Twoja istniejąca witryna otrzyma aktualny ruch, nie chcesz cofnąć się o krok (lub kilka).

Wskazówka przeprojektowana
Poleciłbym również nie zmienić wtyczek SEO, chyba że masz wyraźny powód, aby to zrobić. Jeśli to zrobisz, wiele wtyczek ma narzędzia migracyjne do przejścia większości ustawień SEO ze starej wtyczki do nowej.

4. Użyj Divi dla swojego przeprojektowania WordPress

Chociaż zmiana motywu może drastycznie zmienić witrynę, dobrą wiadomością jest to, że wszystkie twoje media i CPT pozostają nienaruszone. Twoje przesłane obrazy i filmy będą miały tę samą ścieżkę adresu URL, co w przypadku niestandardowych typów postów, które zbudowałeś (chociaż pętle zapytania i elementy na stronie będą musiały zostać odbudowane, a twoja paginacja może się zmienić). To powinno dać ci większą pewność siebie z przeprojektowaniem, ponieważ nie zaczynasz od zera.

Teraz masz setki opcji przy wyborze motywu do przeprojektowania WordPress. Jednak nie ma nic lepszego do faktycznego zaprojektowania strony internetowej niż Divi. Nie widziałem konstruktora stron dla WordPress, który daje użytkownikom tak wiele opcji projektowych (niezależnie od tego, czy są oni początkującymi czy kimś bardzo biegiem w CSS).

Funkcja edytora Divi 5

Divi jest maszyną projektową, a jeśli naprawdę zobowiązujesz się do przeprojektowania , sugeruję, aby nie wybrać narzędzia, które popchnie Cię w kolejne wąskie gardło . Przede wszystkim Divi jest narzędziem projektowym. Oznacza to, że ma każdą funkcję i funkcję potrzebną do odbudowy nowej witryny.

Jeśli potrzebujesz nieco więcej pomocy, Divi ma witryny startowe, które zostały zaprojektowane przez nasz zespół profesjonalnych projektantów stron internetowych. Możesz także użyć naszego wypróbowanego i ucztego konstruktora witryn AI, aby uzyskać coś bardziej niestandardowego. Najlepsze w obu opcjach jest to, że każdy projekt jest zgodny z Divi, co oznacza, że ​​wszystko jest edytowalne w redakcji Divi.

Przy ścisłym budżecie? Divi jest w rzeczywistości jednym z najtańszych narzędzi do projektowania stron internetowych na rynku. Dostajesz pełnoprawne narzędzie projektowe, przechowywanie w chmurze, asystent AI, wsparcie VIP (i więcej niż jestem gotów w tym zdaniu) za 7,42 USD miesięcznie.

Zdobądź Divi za swój przeprojektowanie

Wskazówka przeprojektowana
Aby jak najlepiej wykorzystać Divi, dowiedz się o użyciu wstępnych wstępnych modułów i nowej grupie opcji (w Divi 5). Są to sposoby zastosowania systemu projektowego opartego na klasie, który sprawia, że ​​projektowanie jest szybsze i bardziej spójne. Jeśli używasz projektanta, upewnij się, że są świadomi tych funkcji w Divi.

5. Zaprojektuj strony i szablony

Zacznij od konfiguracji globalnych kolorów i czcionek . Możesz ustanowić swoją główną paletę kolorów i pary czcionek bezpośrednio w opcjach motywów Divi lub dostosowywaniu motywu WordPress.

Edytuj globalne czcionki w Divi

Następnie zacznij pracować z ustalonym systemem Divi. Presety tworzą style projektowania wielokrotnego użytku dla wszystkich wspólnych elementów strony internetowej. Pomyśl o takich rzeczach, jak przyciski, nagłówki, różne style tekstu, pola formularzy i tak dalej. Presety są kluczowe dla zapewnienia spójności projektowania w całej witrynie. Zaczynam od strony z elementami, które, jak wiem, użyję w całej stronie - inni, jakby zacząć od ich strony głównej.

Następnie pracuj nad szablonami nagłówka i stopki za pomocą konstruktora motywów Divi. Utwórz globalne szablony nagłówka i stopki, które będą stosowane na całej witrynie (lub w razie potrzeby określone sekcje). Utwórz także niezbędne dynamiczne szablony stron . Dynamiczne szablony stron są używane do treści, które są automatycznie stosowane do szablonu (takie jak posty na blogu, strony archiwum kategorii i strony produktów).

Divi Builder

Po tym najlepiej jest ukończyć, projektując podstawowe strony statyczne . Zacznij od najważniejszych stron statycznych, takich jak strona główna, o stronie, stronie kontaktowej, strony usług itp. Podczas projektowania tych stron zastosuj swoje globalne style i ustawienia wstępne, aby zachować spójność wizualną. Skoncentruj się na tworzeniu jasnych układów z skutecznymi wywołaniami na każdej stronie.

6. Zoptymalizuj swoją witrynę pod kątem wydajności

Nie będę w tym punktu, ponieważ możesz dogłębnie przeczytać o poprawie wyniku prędkości strony Google i do jakich wtyczek należy użyć do optymalizacji prędkości. Ale oto rzeczy, które miałbym na własnych wykonanych przepisaniach:

Divi

Divi 4 vs Divi 5 Strona Prędkość

Wcześniejsza wersja Divi 5 Alpha, która skróciła czas obciążenia strony o cztery współczynniki

Omówiliśmy już, jak Divi jest fantastycznym tematem, który nie ogranicza wolności projektowania i kontroli. Ale jest to również jedne z najszybszych i najbardziej wydajnych tematów WordPress na rynku. Jeśli instalujesz Divi po raz pierwszy podczas tego przeprojektowania, zdecydowanie polecam spojrzenie na Divi 5 - całkowicie przebudowaną wersję naszego konstruktora stron internetowych, która jest znacznie, znacznie szybsza i która ma już więcej nowych funkcji niż starsza wersja Divi . Jeśli przeprojektowujesz sklep WooCommerce, wówczas stara wersja jest teraz Twoim najlepszym rozwiązaniem, ale w większości innych przypadków Divi 5 będzie tym, czego chcesz użyć.

Zdobądź Divi za swój przeprojektowanie

Cloudflare CDN

Cloudflare - Strona główna - styczeń 2025

Cloudflare to sieć dostarczania treści (CDN), która przechowuje i obsługuje statyczne zasoby witryny na serwerach na całym świecie, zmniejszając dane odległości do użytkowników (zwiększając je). Często korzystałem z bezpłatnej wersji dla mniejszych stron internetowych. Kolejnym narzędziem jest jednak to, czego użyłem na stronie internetowej, na której polegałem na dochodach mojej firmy.

Zdobądź Cloudflare

NITROPACK

Optymalizacja prędkości nitropack

NITROPACK to całkowicie w jednym platformie do tworzenia stron internetowych bardzo, bardzo szybki. Oferuje witryny WordPress inteligentne buforowanie, zoptymalizowane dostarczanie zasobów za pośrednictwem własnego CDN i imponującą optymalizację obrazu. Obsługuje również leniwe ładowanie i przekształcanie obrazów na WebP. Dzięki WordPress często załatwasz ciąg wtyczek i narzędzi innych firm, ale Nitropack jest naprawdę kompleksowym sklepem. Zafunduj sobie ten niesamowity pakiet zintegrowanych narzędzi - podziękujesz mi później.

Zdobądź nitropack

7. Postępuj zgodnie z listą kontrolną przed uruchomieniem

Lista kontrolna przed unieważnieniem jest, abyś przypadkowo czegoś nie przegapić. Są dosłownie setki rzeczy, które możesz sprawdzić, ale oto sześć głównych kategorii rzeczy do sprawdzenia:

  • Korekty wszystkich treści : Sprawdź literówki, błędy gramatyczne i wszystko, co wymaga bliskiego oka do złapania (lubię używać AI tutaj do łapania niektórych rzeczy).
  • Recenzja obrazu i mediów : Upewnij się, że wszystkie obrazy i filmy są wyświetlane poprawnie i zoptymalizowane.
  • Testowanie mobilne : Przetestuj każdą stronę na urządzeniach mobilnych i tabletach, aby responsywny projekt działa zgodnie z oczekiwaniami. Żyjemy dobrze w XXI wieku, więc pamiętaj, aby testować również ultra szerokie wyświetlacze.
  • Testowanie przeglądarki : Przetestuj witrynę na różnych przeglądarkach (Chrome, Firefox, Safari, Edge), aby zapewnić zgodność.
  • Wykonaj witrynę pełzającą : jeśli możesz, użyj bezpłatnej wersji ScreamingFrog, aby indeksować witrynę i sprawdź, czy jakiekolwiek oczywiste błędy należy rozwiązać przed uruchomieniem.
  • Instaluj analizy : tuż przed uruchomieniem jest świetny czas na skonfigurowanie analizy. Pamiętaj, aby ustawić zdarzenia konwersji, aby naprawdę zobaczyć, jak robi się Twoja przeprojektowana strona.

Przeprojektowanie strony kontrolnej witryny WordPress

8. Idź na żywo

Nadeszła chwila prawdy! Po rygorystycznym przetestowaniu swojej przeprojektowanej strony internetowej w środowisku inscenizacji i jesteś pewny jej stabilności i wydajności, czas na uruchomienie. W tym momencie zbudowałeś coś, co dobrze funkcjonuje, satysfakcjonuje Twoich użytkowników końcowych i osiągniesz cele biznesowe.

Trzy aspekty dobrego przeprojektowania witryny

Jeśli korzystasz z SiteGround, możesz sprawić, by witryna inscenizacyjna była na żywo za pomocą narzędzi ich witryny. Podobnie jak Site Ground stworzył środowisko inscenizacji jednym kliknięciem, zamieni witrynę inscenizacji na środowisko na żywo.

Siteground One Click Wdrożenie wdrażania na żywo

Zajmuje to kilka chwil. Uwielbiam to, jak obsługuje zmianę adresu URL inscenizacji na całej witrynie na niestandardową domenę. Kiedyś był to taki ból, ale teraz jest naprawdę łatwy.

WordPress Redesign zrobione dobrze

Często słyszymy, że użytkownicy mówią, że żałowali, że nie przeszli na wieloletnią Divi, szczególnie tych, którzy chcą większej kontroli projektowania niż to, co oferuje typowy motyw WordPress. Divi sprawia, że ​​WordPress przeprojektowuje przyjemność. Jego konstruktor przeciągania , globalnego projektowania i zaawansowane opcje stylizacji umożliwiają przeprojektowanie witryny, aby odzwierciedlić Twoją markę i cele. Nie obcinaj żadnych zakrętów i nie zdobądź motywu WordPress, który ostatecznie zastąpisz za kilka lat.

Spróbuj Divi

Gdy masz właściwy motyw, skup się na dodawaniu nowych funkcji do swojej witryny, utrzymaniu (i ulepszaniu) SEO oraz budowaniu z szybkością i szybkością od samego początku.

Pobierz to

Przeprojektowania to dużo pracy, ale sposób, w jaki robimy to za pomocą tych narzędzi, znacznie ułatwia. Polecamy dowolne z tych narzędzi poniżej do hostingu, projektowania i optymalizacji Twojej witryny.

Zalecenia Przydatne dla
Siteground Dostawca hostingowy z insceniza Zdobądź teraz
Motyw Divi Najlepszy motyw WordPress dla projektantów Zdobądź teraz
Szybkie strony Wstępnie zbudowane strony startowe i strony internetowe generowane przez AI Zdobądź teraz
Divi ai Asystent projektowania stron internetowych napędzany sztuczną inteligencją Zdobądź teraz
NITROPACK Całkowita wtyczka optymalizacji wydajności i usługi Zdobądź teraz
Cloudflare Bezpieczeństwo, CDN i optymalizacja wydajności Zdobądź teraz
Rank Math Wiodąca wtyczka WordPress SEO Zdobądź teraz
Divi Dash Bezpłatny pulpit nawigacyjny do monitorowania wszystkich stron internetowych z jednego miejsca Zdobądź teraz