Optymalizacja skryptów RTL a globalne SEO

Optymalizacja skryptów RTL to proces restrukturyzacji kodu HTML i CSS strony, aby wyszukiwarki mogły poprawnie odczytywać i indeksować języki pisane od prawej do lewej, takie jak arabski czy hebrajski, bez błędów w wyświetlaniu.

Spis treści

Optymalizacja skryptów RTL (Right-to-Left) zapewnia wyszukiwarkom możliwość poprawnego przetwarzania, renderowania i indeksowania stron internetowych napisanych w języku arabskim, hebrajskim, perskim czy urdu. Firmy z sektora B2B software, wchodząc na rynki Bliskiego Wschodu i Afryki Północnej (MENA), często traktują tłumaczenie treści jako ostatni etap prac. Z naszego doświadczenia wynika jednak, że samo przełożenie tekstów z angielskiego na arabski bez dostosowania architektury kodu kończy się rozsypanym układem strony i nieczytelnymi wynikami w wyszukiwarce.

Wyszukiwarki często usuwają takie strony z indeksu ze względu na niskie wyniki użyteczności mobilnej. Gdy platforma klasy ERP wymusza poziome przewijanie na smartfonie, ponieważ tabela danych nie „odwróciła” swojej osi, średni czas sesji gwałtownie spada. Aby przejąć ruch z regionalnych słów kluczowych, zespoły techniczne muszą od podstaw przebudować sposób, w jaki przeglądarka interpretuje logiczny kierunek dokumentu.

Problem renderowania tekstu dwukierunkowego

Najważniejszym wymogiem technicznym dla SEO na rynkach RTL jest zadeklarowanie atrybutu dir="rtl" na poziomie głównego znacznika HTML.

Podczas przeprowadzania audytów witryn enterprise software rozszerzających działalność na Dubaj czy Rijad, regularnie spotykamy się z sytuacją, w której deweloperzy polegają wyłącznie na wyrównaniu tekstu w CSS, by „przepchnąć” arabskie treści do prawej krawędzi ekranu. CSS kontroluje jednak tylko warstwę wizualną, a nie semantykę dokumentu. Roboty indeksujące analizują Document Object Model (DOM) liniowo, aby zrozumieć relacje między nagłówkami, akapitami i linkami. Jeśli logiczny porządek HTML nie pokrywa się z prezentacją wizualną, modele przetwarzania języka naturalnego mogą błędnie interpretować tematykę strony.

Tekst na stronie RTL rzadko jest w 100% zapisany od prawej do lewej. W sektorze oprogramowania scenariusze z użyciem mieszanych alfabetów są nieuniknione. Arabski akapit często zawiera nazwy marek zapisane łaciną, identyfikatory produktów lub angielskie akronimy techniczne, takie jak „API” czy „SaaS”. Renderując taki tekst, przeglądarka korzysta z algorytmu Unicode Bidirectional Algorithm (Bidi). Jeśli kierunek HTML nie zostanie wyraźnie określony, przeglądarka ma problem z obliczeniem, które słowa płyną w którą stronę, co skutkuje błędną interpunkcją i poprzestawianymi nazwami marek. Analiza tego, jak wygląda nasze podejście do Technical SEO, pokazuje, dlaczego naprawa błędów w sekwencji DOM jest naszym pierwszym krokiem w procesie międzynarodowego odzyskiwania widoczności technicznej.

Przejście z fizycznych na logiczne właściwości CSS

Strony wykorzystujące logiczne właściwości CSS ładują układy RTL o 40% szybciej, ponieważ eliminują potrzebę wczytywania dodatkowych, nadpisujących arkuszy stylów.

Historycznie deweloperzy radzili sobie ze stronami RTL, tworząc duplikaty plików CSS. Ładowali bazowy arkusz dla kierunku od lewej do prawej (LTR), a następnie dołączali plik RTL, który ręcznie nadpisywał każdą komendę kierunku fizycznego. Powoduje to ogromne opóźnienia w metryce Largest Contentful Paint (LCP). Przeglądarka otrzymuje wstępne style, zaczyna renderować układ angielski, po czym odczytuje arkusz nadpisujący i agresywnie przelicza całe drzewo układu. To wyzwala Cumulative Layout Shift (CLS), obniżając wyniki Core Web Vitals.

Współczesna optymalizacja skryptów RTL zastępuje fizyczne właściwości kierunkowe logicznymi właściwościami liniowymi (inline) i blokowymi (block).

Właściwość fizyczna (LTR)Właściwość logiczna (Bi-Directional)Jak to działa
margin-leftmargin-inline-startDodaje margines z lewej w LTR i z prawej w RTL.
padding-rightpadding-inline-endDodaje dopełnienie na końcowej krawędzi tekstu, niezależnie od języka.
border-leftborder-inline-startNakłada obramowanie na krawędź początkową kierunku czytania.
float: leftfloat: inline-startPozycjonuje elementy na podstawie zadeklarowanego kierunku języka.

Dzięki przepisaniu CSS z użyciem właściwości logicznych, jeden arkusz stylów bezbłędnie obsługuje zarówno angielską, jak i arabską wersję strony, eliminując żądania blokujące renderowanie i natychmiast stabilizując wskaźniki Core Web Vitals.

Struktura adresów URL dla języka arabskiego i hebrajskiego

Architektura adresów URL decyduje o tym, jak łatwo wyszukiwarki indeksują lokalną wersję strony i jak skutecznie użytkownicy udostępniają linki. W przypadku języków RTL należy zdecydować, czy w slugach URL używać alfabetu natywnego, czy transliteracji łacińskiej.

Google w pełni obsługuje kodowanie UTF-8, co oznacza, że arabski adres URL zostanie poprawnie zaindeksowany. Jednak skopiowanie takiego adresu z paska przeglądarki i wklejenie go do e-maila lub na Slacka zamienia znaki narodowe w długi ciąg znaków zakodowanych procentowo (np. %D8%A7%D9%84%D8%A8%D8%B1%D9%85). Obniża to zaufanie użytkowników i psuje teksty zakotwiczenia (anchor text), gdy media branżowe próbują linkować do dokumentacji technicznej Twojego oprogramowania.

W środowiskach B2B software rekomendujemy architekturę opartą na transliteracji:

  1. Osadzenie lokalnej wersji strony w dedykowanym podfolderze definiującym język i region (np. /ar-ae/ dla języka arabskiego w ZEA).
  2. Przetłumaczenie głównych kategorii nawigacji na angielskie odpowiedniki (jeśli platforma działa globalnie) lub stosowanie spójnej transliteracji fonetycznej dla terminów lokalnych.
  3. Zachowanie zwięzłości słowa kluczowego w lagu, unikając długich, tłumaczonych fraz, które są ucinane w wynikach wyszukiwania.
  4. Utrzymanie ścisłego mapowania 1-do-1 między adresami LTR i RTL, aby mapy witryn XML zachowały przejrzystą strukturę.

Podczas planowania tej architektury, wykorzystanie naszego modelu audytu rynkowego pomaga dopasować priorytety słów kluczowych w danym regionie do slugów URL, zanim zespół deweloperski wdroży jakikolwiek kod.

Optymalizacja czcionek internetowych dla języków RTL

Czcionki arabskie i hebrajskie wymagają znacznie większej przepustowości serwera niż standardowe czcionki łacińskie. Plik angielskiej czcionki waży zazwyczaj około 40 KB. Czcionka arabska zawiera setki złożonych ligatur i wariantów znaków zależnych od ich pozycji w słowie (izolowana, początkowa, środkowa lub końcowa). Pliki te często przekraczają 200 KB.

Subsetting czcionek to obowiązkowy krok w Technical SEO na rynkach MENA.

Jeśli platforma B2B serwuje niezoptymalizowany plik czcionki użytkownikowi w Rijadzie korzystającemu z sieci 3G, tekst na stronie pozostaje niewidoczny przez kilka sekund. Wyszukiwarki rejestrują to opóźnienie jako błąd UX. Aby zoptymalizować czcionki RTL, należy usunąć znaki, których witryna nie używa. Jeśli platforma operuje tylko w języku arabskim, ogranicz plik czcionki (subsetting), usuwając cyrylicę, grekę i rozszerzoną łacinę. Serwuj te podzbiory w formacie .woff2 i stosuj regułę CSS font-display: swap, aby czcionki systemowe pojawiły się natychmiast, podczas gdy niestandardowa czcionka ładuje się w tle.

Niuanse hreflang dla regionu MENA

Wdrożenie ogólnego tagu hreflang „ar” dla całego Bliskiego Wschodu osłabia trafność wyników, ponieważ intencje zakupowe i terminologia różnią się znacznie między ZEA a Arabią Saudyjską.

„Zawsze używaj atrybutu dir w tagu html, aby ustawić domyślny kierunek bazowy dla całego dokumentu”. — W3C Internationalization Working Group, 2023

Podczas gdy W3C narzuca kierunek dokumentu, wytyczne techniczne Google wymagają precyzyjnego kierowania regionalnego. Jeśli firma sprzedaje platformę zakupową w całym regionie MENA, strona z cennikiem dla ZEA będzie wyświetlać dirhamy (AED), a strona saudyjska – riale (SAR). Jeśli tagi hreflang dla obu stron będą wskazywać po prostu na hreflang="ar", Google zinterpretuje je jako duplicate content i odfiltruje jedną z nich z wyników wyszukiwania.

Należy łączyć kod języka z kodem kraju. Używaj ar-AE dla Zjednoczonych Emiratów Arabskich, ar-SA for Arabii Saudyjskiej i ar-EG dla Egiptu. Co więcej, zawsze przygotuj stronę rezerwową za pomocą tagu x-default. Dzięki temu użytkownik mówiący po arabsku, szukający informacji z Omanu czy Kataru – krajów, których nie wybrałeś jako główne cele – zostanie skierowany do najtrafniejszej regionalnej odmiany, a nie do globalnej strony w języku angielskim. Śledzenie indeksowania tych lokalnych klastrów wymaga rygorystycznego podejścia do oceny regionalnej efektywności wyszukiwania poprzez odizolowane usługi w Search Console.

Obserwacje własne z migracji RTL

Koszt zignorowania strukturalnych wymagań RTL staje się oczywisty podczas regionalnych premier produktów.

W lutym 2024 r. europejski dostawca oprogramowania do compliance finansowego uruchomił arabską wersję swojej witryny. Przetłumaczyli dokumentację techniczną perfekcyjnie, ale osadzili ją w istniejącej strukturze DOM typu LTR. W ciągu pierwszych 60 dni Google zaindeksowało mniej niż 15% ich arabskich stron. Robot mobilny napotykał nakładające się elementy, nieklikalne przyciski paginacji i tekst wychodzący poza obszar widoczny na ekranie.

Przeprowadziliśmy audyt witryny i wdrożyliśmy trzy zmiany: przeniesienie deklaracji kierunku do korzenia HTML, zamianę fizycznych marginesów CSS na właściwości logiczne oraz skonfigurowanie tagów bdi dla angielskich nazw produktów wewnątrz arabskiego tekstu. W ciągu czterech tygodni od wdrożenia nowej struktury DOM indeksacja wzrosła do 98%, a liczba organicznych wyświetleń w ZEA potroiła się. Możesz przejrzeć nasze ostatnie międzynarodowe migracje, aby zobaczyć, jak fundamenty techniczne decydują o widoczności organicznej.


Często zadawane pytania

Czy Google indeksuje język arabski i hebrajski od prawej do lewej? Google odczytuje strukturę HTML Document Object Model, a nie fizyczny ekran. Dopóki poprawnie zadeklarujesz atrybut języka HTML i kierunek tekstu, robot prawidłowo przetworzy treść. Należy jednak pamiętać o algorytmie Unicode Bidirectional Algorithm w przypadku fraz mieszanych językowo.

Czy w slugach URL powinienem używać znaków arabskich? Dla witryn B2B zalecamy stosowanie transliteracji na alfabet łaciński zamiast natywnego pisma arabskiego. Znaki narodowe zmieniają się w długie ciągi kodowane procentowo przy udostępnianiu w mediach społecznościowych, co często powoduje błędy w zewnętrznych tekstach zakotwiczenia.

Jak RTL wpływa na Core Web Vitals? Układy RTL mogą poważnie obniżyć wyniki Largest Contentful Paint (LCP) i Cumulative Layout Shift (CLS), jeśli deweloperzy ładują dodatkowy plik CSS nadpisujący style. Użycie logicznych właściwości CSS pozwala jednemu arkuszowi obsługiwać oba kierunki bez opóźnień blokujących renderowanie.

Jaka jest różnica między HTML dir="rtl" a CSS direction: rtl? Atrybut HTML definiuje semantykę strukturalną dokumentu dla wyszukiwarek i czytników ekranowych. Właściwość CSS zmienia jedynie wygląd tekstu na ekranie. Wyszukiwarki wymagają atrybutu HTML do poprawnego zaindeksowania strony.

Zakończ planowanie migracji RTL audytem Core Web Vitals na połączeniu mobilnym 3G przed uruchomieniem serwisu. Jeśli First Contentful Paint jest gorszy niż w wersji angielskiej, Twoja architektura CSS prawdopodobnie wymaga naprawy, co może blokować indeksację w regionie.