SEO dla Single Page Application (SPA) w Angular na rynek USA

Author: Yurii Oshchapovskyi

Optymalizator

Reviewer: Oleg Gavryliuk

Kierownik Oddziału Technicznego

2023-04-25

Klient

Aquatica to firma produkująca wanny, umywalki, krany i prysznice w segmencie premium. Głównym rynkiem producenta są Stany Zjednoczone, aczkolwiek sklep internetowy obecny jest również na wielu rynkach i różnorodnych domenach w Europie.

Nasz cel

Poprawa pozycjonowania witryny i zwiększenie organicznego ruchu targetowanego w priorytetowych specjalizacjach sklepu internetowego:

Umywalki łazienkowe
Jacuzzi zewnętrzne
Wanny wolnostojące

Dane źródłowe i charakterystyka projektu

Witryna internetowa: sklep online Aquatica (produkty innych marek nie są prezentowane na witrynie)
Region: USA (geo z największą konkurencją w tej niszy)
Wyszukiwarka internetowa: Google
Język: angielski
Platforma witryny: strona Single Page Application (JS-framework – AngularJS)

Grupa docelowa

Użytkownicy w wieku 25 lat i starsi, zarabiający powyżej średniej krajowej, pracujący w bankowości oraz IT, którzy interesują się nowymi trendami i technologiami (dzięki temu przyciągają ich funkcje i materiały oferowane przez firmę).

Na czym polega witryna SPA?

Witryna SPA (Single Page Application) to rodzaj witryny, na której zawartość podlega dynamicznej generacji bez konieczności ponownego ładowania stron. Tego typu witryny napisane są przy pomocy JavaScript, zaś nasz konkretny przykład sklepu Aquatica powstał w AngularJS.

Należy zrozumieć, że promowanie pod kątem optymalizacji SEO witryn SPA oraz tradycyjnych witryn różni się od siebie fundamentalnie, ponieważ podejście do optymalizacji wewnętrznej jest radykalnie inne.

Google, podobnie jak wszystkie pozostałe wyszukiwarki internetowe, nie radzi sobie z przetwarzaniem JavaScript. Zawartość, jaką użytkownik może zobaczyć w przeglądarce internetowej różni się znacząco od tego, co widzi Google.

Na poniższym zrzucie ekranu możesz zaobserwować, jak poszczególne wyszukiwarki internetowe przetwarzają JS:

SEO dla Single Page Application (SPA) w Angular na rynek USA 1

W praktyce sytuacja w Google prezentuje się znacznie gorzej, ponieważ wyszukiwarka wykorzystuje przestarzałe narzędzia renderowania oparte na Chrome 41.

W jaki sposób można „zaprzyjaźnić” SPA z SEO

Ponieważ witryna naszego klienta jest w całości napisana w JavaScript, oznacza to, że Google nie widzi zawartości (menu, produktów, tekstów, re-linkowania) bez podjęcia dodatkowych akcji.

Aby Google mogło poprawnie indeksować strony internetowe, serwer nie powinien wysyłać kodu strony w JS, ale raczej jego kopię w HTML dla stron, które już zostały przeprocesowane.

Jak wygląda kod JS strony:

<html lang="en">
<head>
<title>Luxury Outdoor Hot Tubs</title>
<meta name="fragment" content="!">
</head>
<body>
<script type="text/javascript"
src="/assets/js/app.min.js?15151551">
</script>
</body>
</html>

Jak wygląda kopia HRML strony:

<html lang="en">
<head>   
<title>Luxury Outdoor Hot Tubs</title>  
 <meta name="keywords" content="Outdoor Hot Tubs">  
 <meta name="description" content="ᐈ Luxury 【Hot Tubs / Outdoor Spas】 for sale in the ⭐ Aquatica
 ⭐ Online Store ✅ The best prices ✅ Made in EU ✅ Only the best materials ✅ Up to 25 year warranty">  
 <meta name="...">  
 <link rel="canonical" href="https://www.aquaticausa.com/">   
<link href="/favicon.ico"
 <meta name="robots" content="index, follow">  
 <link rel="stylesheet" type="text/css" 
media="screen" href="/style.css">
</head>
<body> 
  <div>Контент страницы</div>
  </body>
  </html>

Jak widać na powyższym kodzie, różnice są fundamentalne. Kopie stron w HTML na witrynie są implementowane z wykorzystaniem technologii renderingu SSR. Zadaniem specjalistów SEO było sprawdzenie implementacji SSR, a także upewnienie się, że:

Witryna wysyła do Google kopię HTML, a nie JS;
Użytkownik otrzymuje JS, a nie kopię HTML;
Zawartość w kopii HTML nie różni się od treści, jaką użytkownik może zobaczyć w jakiejkolwiek przeglądarce po przetworzeniu JS;
Wszystkie bloki treści na stronach są poprawnie przetworzone przez Google;
Występuje mikroparsowanie w kopii HTML.

Analiza konkurencji

Wyniki wyszukiwania oraz ich logia („intencja”) w Stanach Zjednoczonych różni się diametralnie od tego, do czego jesteśmy przyzwyczajeni na Ukrainie. Strony informacyjne są pozycjonowane na równym poziomie dla zapytań z treściami komercyjnymi.

Przykładowo, dla zapytania „Buy Outdoor Hot Tub” – wyrażającego wyraźne zainteresowanie użytkownika zakupem produktu – artykuły informacyjne z wyborem produktów pozycjonują się w TOP 10 (https://www.silive.com/homegarden/2022/07/these-are-the-best-outdoor-hot-tubs-to-buy-for-the-right-price.html), co jest kompletnie irracjonalne, biorąc pod uwagę fakt, iż w innych krajach takie zapytania pozycjonowane są wyłącznie zgodnie z kategoriami sklepów online, w których prezentowane są produkty.

Mając to na względzie, nasi specjaliści doszli do wniosków, że musimy konkurować nie tylko ze sklepami internetowymi, ale również stronami informacyjnymi.

Wykres porównawszy konkurentów Aquaticausa.com:

Witryna	Rating domeny	Domeny odsyłające (Ahrefs)	Strony odsyłające (Ahrefs)	Frazy ze słowem kluczowym (Ahrefs)	Ruch (Ahrefs)
aquaticausa.com	48	3297	37932	13653	28221
homedepot.com	90	236455	9250565	8542024	126776364
costco.com	85	102987	11046544	5962766	50332554
amazon.com	96	4592796	4332977451	69859278	938453396
wayfair.com	86	72811	13926242	4493240	29681586
overstock.com	83	90400	30678253	2147655	12111988
jacuzzi.com	72	6115	123080	38838	300917
lowes.com	88	319681	12596738	5024482	56864864

Warto również zaznaczyć, że aquaticausa.com to stosunkowo niewielka witryna, która posiada małą liczbę elementów w licznych podkategoriach i filtrach. Jednakże, musieliśmy konkurować z witrynami, które posiadały minimalną wartość ratingu domeny na poziomie 72+. Są to witryny warte miliony dolarów, a niektóre z nich są bardzo dobrze znane wielu użytkownikom, nawet tym, którzy nie są zaznajomieni z rynkiem amerykańskim.

Przebieg pracy

Proces pracy nad promowaniem witryny możemy podzielić na kilka części.

Audyt techniczny i sprawdzenie funkcjonalności SSR

Celem audytu technicznego jest wykrycie błędów i upewnienie się, że witryna spełnia specyfikacje techniczne dostarczone przez Google. Nasz audyt obejmował 43 pozycje, natomiast 20 z nich wymagało naprawienia błędów.

Jeśli chodzi o sprawdzenie poprawności funkcjonowania SSR, głównym problemem był brak bloku linkującego w kopii stron HTML, przez co Google nie indeksowało poprawnie niektórych produktów.

	Realizacja programu	Wynik inspekcji	Priorytet	Osoba odpowiedzialna
1.	Analiza IP witryny	ОК	Niski	Programista
2.	Sprawdzenie strony pod kątem wirusów, złośliwych skryptów i blacklistingu	ОК	Wysoki	Programista
3.	Analiza historii domeny przez WhoIs i web.archive	ОК	Wysoki	Programista
4.	Sprawdzenie elementów, które mogłyby negatywnie wpływać na interakcję użytkowników ze stroną	ОК	Niski	Programista
5.	Sprawdzenie, czy adresy przyjazne SEO są poprawnie umieszczone i sformułowane	ОК	Wysoki	Programista
6.	Sprawdzenie łączności mirrorów i pełnych duplikatów	Do zmiany	Wysoki	Programista
7.	Sprawdzenie pełnej duplikacji treści	Do zmiany	Wysoki	Programista
8.	Sprawdzenie stron technicznych, stron z lub bez zduplikowanych treści w indeksach	ОК	Wysoki	Programista
9.	Sprawdzenie poprawności odpowiedzi serwera na zapytania ze strony	Do zmiany	Wysoki	Programista
10.	Sprawdzenie kodu strony pod kątem błędów w HTML i CSS	Do zmiany	Średni	Programista
11.	Sprawdzenie obecności i błędów w certyfikacie SSL	Do zmiany	Wysoki	Programista
12.	Sprawdzenie ukrytych lub spamujących linków do zewnętrznych łączy	ОК	Wysoki	Programista
13.	Sprawdzenie czy plik robots.txt działa poprawnie	ОК	Wysoki	Programista/Content Manager
14.	Połączenie GWT oraz Yandex Webmaster	ОК	Wysoki	Programista
15.	Połączenie GA	ОК	Wysoki	optimizer
17.	Sprawdzenie Sitemap.xml	Do zmiany	Średni	Programista
18.	Sprawdzenie dostępności CSS i JS	ОК	Średni	Programista
19.	Sprawdzenie mikroformatów	Do zmiany	Wysoki	Programista
20.	Sprawdzenie przycisków mediów społecznościowych	ОК	Niski	Programista
21.	Sprawdzenie czasu ładowania się strony	Do zmiany	Wysoki	Programista
22.	Sprawdzenie dostępności i optymalizacji wielojęzyczności	Do zmiany	Średni	Programista
23.	Sprawdzenie dostępności mobilnej wersji strony	ОК	Średni	Programista
24.	Sprawdzenie responsywności strony na różnych rodzajach urządzeń	Do zmiany	Średni	Programista
25.	Sprawdzenie poprawności text content output	Do zmiany	Wysoki	Programista
26.	Śledzenie treści Stat.Aweb w monitorze SEO	Do zmiany	Niski	Programista
27.	Sprawdzenie czy strony posiadają elementy (czynniki komercyjne) potrzebne do pozycjonowania danego tematu	Do zmiany	Wysoki	Programista
28.	Sprawdzenie częściowej duplikacji treści	Do zmiany	Średni	Programista
29.	Eliminacja usuwania usług niepotrzebnych	ОК	Wysoki	Programista
30.	Sprawdzenie indeksowania przeglądania strony	ОК	Średni	Programista
31.	Sprawdzenie, czy treści widoczne są przy wyłączonym JavaScript (sprawdzenie SSR)	Do zmiany	Średni	Programista

	Treść	Wynik inspekcji	Priorytet	Osoba odpowiedzialna
32.	Sprawdzenie afiliacji	ОК	Wysoki
33.	Sprawdzenie ustawień geolokalizacyjnych w GWT	ОК	Wysoki	Optymalizator
34.	Sprawdzenie poprawności meta tagów	Do zmiany	Wysoki	Content Manager lub Programista
35.	Sprawdzenie dostępności i oryginalności treści strony	ОК	Wysoki	Content Manager
36.	Sprawdzenie dostępności stron landing page dla rdzenia semantycznego	ОК	Niski	Content Manager
37.	Sprawdzenie optymalizacji treści tekstowej	ОК	Średni	Programista
38.	Sprawdzenie dostępności formatowania treści	ОК	Średni	Programista

	Struktura i linkowanie	Wynik inspekcji	Priorytet	Osoba odpowiedzialna
39.	Sprawdzenie dostępności menu okruszkowego (breadcrumbs)	Do zmiany	Wysoki	Programista
40.	Sprawdzenie re-linkowania na stronie	ОК	Niski	Programista
41.	Sprawdzenie indeksujących zoptymalizowanych filtrów stron	Do zmiany	Wysoki	Programista
42.	Sprawdzenie niedziałających linków	Do zmiany	Średni	Programista
43.	Użytkowość	Do zmiany	Średni	Programista

Audyt witryny w oparciu o instrukcje dla asesorów Google

Strony internetowe związane z tematyką YMYL (Your Money or Your Life) są witrynami, które powinny mieć wysokie wyniki E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness – doświadczenie, ekspertyza, autorytatywność, wiarygodność).

Nasi eksperci szczegółowo przestudiowali dokumenty Guidelines for Google Assessors, tworząc checklisty pod kątem sprawdzenia witryn o tematyce YMYL. Poniżej przedstawiamy krótką checklistę elementów, które musiały zostać wprowadzone, żeby zwiększyć wyniki E-E-A-T:

Nagranie wideo na temat materiałów wykorzystanych w produkcji
Stworzenie strony „O nas”
Stworzenie strony „Nasza produkcja”
Zbudowanie strony „Portfolio”
Opublikowanie strony autorskiej na blogu
Dodanie autorów do wszystkich stron blogowych
Dodanie infografik na stronach kategorii, podkategorii i filtrów
Rozwinięcie SERM

Zbieranie rdzenia semantycznego oraz szkic zakresu wymagań i obowiązków dla tekstów

Nasz zespół dokonał skrupulatnej analizy priorytetowych kierunków, a także konkurencji. Oprócz zebrania rdzenia semantycznego na stronach kategorii o wysokim priorytecie, stopniowo zaczęliśmy opracowywać strony filtrów, ponieważ konkurencja jest znacznie słabsza na takich stronach. Biorąc pod uwagę poziom konkurencyjnych witryn, szanse na znalezienie się w czołówce są znacznie wyższe.

Przykłady filtrów, jakie stworzyliśmy:

Komercyjne umywalki łazienkowe
Designerskie umywalki łazienkowe
Nowoczesne zlewozmywaki
Luksusowe umywalki łazienkowe
Niestandardowy zlew łazienkowy
Dekoracyjna umywalka łazienkowa
Unikalne umywalki łazienkowe
Luksusowe wanny z hydromasażem
Nowoczesne jacuzzi
Wanny z hydromasażem infinity edge
30-calowy zlewozmywak (i inne wymiary)
Duża wanna z hydromasażem
I wiele innych stron

Stworzyliśmy szkice zakresy wymagań i obowiązków dla stron, zaś na ich podstawie nasi copywriterzy napisali teksty.

Optymalizacja zewnętrzna

Na wstępnym etapie optymalizacji zewnętrznej odrzuciliśmy wszystkich donorów niskiej jakości przy pomocy narzędzia Google Disavow Tool. Następnie, co 4-6 miesięcy przeprowadzaliśmy ponowny audyt obecnego profilu linków, odrzucając niskiej jakości linki, które się pojawiły.

Dla przykładu, w kwietniu 2021 roku witryna była zaspamowana linkami z podejrzanych subdomen blogspot.com. Było sporo domen, a jeśli takich linków nie odrzuca się wystarczająco szybko, wówczas można uzyskać spadek pozycjonowania i ruchu.