W tym wpisie chciałbym się podzielić doświadczeniami związanymi z tworzeniem stron internetowych, które są dostępne w wielu językach. Wielojęzyczność stron to bardzo ciekawy temat. Projektując stronę która ma być dostępna w języku polskim, angielskim i niemieckim musimy wziąć pod uwagę kilka zasadniczych kwestii. Najważniejsze z nich to zarządzanie treścią, optymalizacja SEO, hosting i wymogi prawne.
Jak i w tym przypadku jestem zwolennikiem podejścia „wszystko albo nic”. Tłumaczenie samych tekstów bez interfejsu lub tłumaczenie wybranych części to trochę droga na skróty – no chyba, że od początku planujemy taką funkcjonalność. W dalszym etapie wytłumaczę dlaczego w poszczególnych wersjach językowych nie należy różnicować treści i aby nie mylić lokalizacji z tłumaczeniem.
Jeśli coś Ci sprzedaję, mówię w Twoim języku. Jeśli to ja kupuję, dann müssen Sie Deutsch sprechen.
Willy Brandt
0. Kod HTML
Elementy HTML są najważniejsze, ponieważ są widoczne dla przeglądarek i roboty wyszukiwarek. Istnieją konkretne standardy dopasowywania i oznaczania stron dla konkretnych wersji językowych. Mamy kilka elementów, na które warto zwrócić uwagę tworząc strony wielojęzyczne. Już w drugiej linijce (po !doctype) każdej strony internetowej zgodnej z HTML5 powinna się znaleźć deklaracja języka:
<html lang="pl-PL">
Tag ten jest bardzo ważny i należy stosować go także na stronach dostępnych tylko w jednym języku. Pierwsze „pl” to oznaczenie języka zgodne z kodem języków ISO 639-1. W przypadku lokalizowania, przy drugim „PL” stosujemy standardowe kody krajów. Tak więc:
- Stany Zjednoczone lang=”en-US”,
- Niemcy lang=”de-DE”,
- Szwajcaria lang=”de-CH”
- dla Chin kontynentalnych (pismo uproszczone) lang=”zh-Hans”.
Każda podstrona powinna odzwierciedlać kod faktycznie użytego na konkretnej podstronie języka. Na stronach wielojęzycznych tag ten będzie oczywiście ulegał zmianie w zależności od wybranego języka.
Nie jest błędem stosowanie samego kodu języka bez kodu kraju. Zapis lang=”pl” jest także prawidłowe.
Poprawne kodowanie znaków i kompatybilność pomiędzy przeglądarkami zapewnia kolejna deklaracja:
<meta charset="UTF-8">
Zaleca się używać kodowania UTF-8, które powstało jako światowy standard w celu rozwiązania problemów kodowania w różnych systemach operacyjnych. W tym kodowaniu można zapisać pisma wszystkich języków świata.
Dla niektórych języków można jeszcze skonfigurować kierunek pisma. LTR (ang. Left to Right) oraz RTL (ang. Right to Left). Pozwala to dopasować zachowanie przeglądarki do tego sposobu zapisu i dostosowuje przykładowo elementy formularzy.
<html dir="rtl" lang="ar">
Jeżeli chcemy zastosować deklarację rtl do wybranych elementów (aby przystosować je do wprowadzania RTL), to możemy to zrobić w taki sposób:
<select name="foo" dir="rtl">
To samo tyczy się atrybutu lang. Możemy go wplatać w inne tagi na stronie. Wyobraźmy sobie jakiś portal z nauką języków obcych:
<p>Ile to kosztuje? - tłumaczenie na język angielski:</p>
<p lang="en">How much it costs?</p>
…ale stosunkowo rzadko się z tego korzysta w praktyce.
Ostatnim elementem jest hreflang – wprowadzony dla celów SEO oraz usablity. Za pomocą hreflang można poinformować o istnieniu konkretnej podstrony w innej wersji językowej:
<link rel="alternate" href="https://mansfeld.pl/o-mnie/" hreflang="pl-pl">
<link rel="alternate" href="https://mansfeld.pl/en/about-me/" hreflang="en-gb">
<link rel="alternate" href="https://mansfeld.pl/fr/a-propos/" hreflang="fr-fr">
W tagu hreflang należy używać kodu dwuczłonowego. Więcej o tagu hreflang możesz przeczytać w dalszych punktach tego artykułu.
1. Zarządzanie treścią
W każdym CMSie nieco inaczej wygląda zarządzanie treścią w wielu językach, jednak polega to na podobnym mechanizmie. Mniej znane i „autorskie” CMSy nie mają takiego wsparcia w ogóle. Zaś w każdym z popularnych systemów zarządzania treścią takie wsparcie jest natywne (mam tutaj na myśli Joomlę, Prestashop) lub trzeba doinstalować dodatkową wtyczkę (np. w WordPressie). Czytaj więcej o obsłudze i wtyczkach do obsługi wielu języków w WordPress.
W WordPressie jest to wtyczka WPML. W WordPressie wielojęzyczność można wdrożyć za pomocą taksonomii – wewnętrznych mechanizmów WordPressa. Jest to rozwiązanie wymagające więcej pracy od twórcy strony ale w dłuższej perspektywie daje większą elastyczność i możliwość rozbudowy. Zalety takiego podejścia:
- nie wszystkie podstrony muszą być tłumaczone,
- tłumaczeniu może ulec cały interfejs,
- poszczególne wersje mogą mieć osobne widgety, różnie ułożone menu a nawet (jeśli tego trzeba) delikatnie zmieniony wygląd,
- możliwość lepszej optymalizacji SEO.
W przypadku szablonów, interfejsu i modułów ciekawym rozwiązaniem są tablice z poszczególnymi wyrażeniami (tak jak jest to przykładowo rozwiązane w skrypcie sklepowym PrestaShop).
W przypadku redagowania opisów produktów przy edycji poszczególnego produktu mamy do wyboru dla, którego z języków chcemy edytować opisy:
Wdrażam taki sposób tłumaczenia także we własnych aplikacjach, bo jest to dość wygodne. Jak działa taka tablica:
function getxt($text){
$pol = array(
"copyright" => "Firma © 2017 Wszelkie prawa zastrzeżone.",
"menu_home" => "Strona główna",
(...)
);
echo $pol["$text"];
}
W szablonie możemy potem wywołać dany ciąg:
<p class="copyright-info">
getxt("copyright");
</p>
Co po interpretacji da nam:
<p class="copyright-info"> Firma © 2017 Wszelkie prawa zastrzeżone </p>
To czy tworzyć tablice wielowymiarowe z wieloma językami, czy warunkowo doklejać poszczególne translacje trzeba rozważyć przy konkretnym przypadku. Sam mechanizm pozostaje w gruncie rzeczy nie zmieniony.
Co nam to daje? Przede wszystkim: jedna strona, jeden szablon, jeden plik. Zmiana powiedzmy wizualna na takiej stronie automatycznie jest widoczna we wszystkich wersjach językowych. Tego samego mechanizmu możemy użyć do walut, obrazków lub powiedzmy tej części interfejsu która musi z jakichś powodów być zmieniona.
Należy też obsłużyć wyjątek polegający na tym, że nie wszystkie treści są przetłumaczone. Skrypt powinien reagować np. ukrywać nieprzetłumaczoną treść lub pytać czy wyświetlić treść np. w języku angielskim. W systemach CMS, które natywnie wspierają wielojęzyczność wyświetlane są frazy w języku podstawowym, np. angielskim.
2. Design
O tym jak odpowiedni design jest ważny przy wielojęzycznych stronach przekonałem się kiedy musiałem dostosować pole copyright, które zwykle ma:
„Wszystkie prawa zastrzeżone”
lub „All rights reserved”
do japońskiego
„当サイト内のすべてのコンテンツは著作権法により保護されています。”
Na szczęście projektowanie stron od podstaw bez gotowych szablonów daje możliwość dostosowanie tego typu pól na takie ewentualności.
Przemyślany projekt to gwarancja tego że strona nie będzie wyglądała atrakcyjnie tylko w wybranym języku (lub kilku wybranych językach) ale we wszystkich.
3. Pozycjonowanie i SEO
To czy chcemy mieć osobne domeny (np. firma.com, firma.pl, firma.de) czy domeny z prefiksami (np. pl.firma.com de.firma.com) czy jedną domenę i podkatalogi (firma.pl/de/ firma.pl/en/) zależy od tego w jaki sposób chcemy promować naszą wielojęzykową stronę czy sklep. Można też stworzyć całkiem osobne domeny tak jakby były osobnymi stronami internetowymi – korzystne rozwiązanie trzeba rozpatrywać indywidualnie.
Twórca strony wielojęzycznej musi przewidzieć sytuacje, w których ze względu na SEO kod strony musi być dostosowany do danej wersji językowej lub dynamicznie edytowalny. Mam tutaj na myśli takie elementy jak znaczniki title, lang, meta opis, słowa kluczowe itp…
Kolejną kwestią w przypadku pozycjonowania w wielu krajach są linki zwrotne a ściślej ich pochodzenie geograficzne. Wyszukiwarki biorą pod uwagę, z którego kraju pochodzą linki wskazujące na pozycjonowaną stronę. Jeżeli stronę albo sklep internetowy pozycjonujemy w USA a linki będą pochodzić wyłącznie z Polski, dodatkowo z domen z końcówką .pl to mamy do czynienia z niezalecaną praktyką. To oczywiście nie oznacza, że każdy link spoza konkretnego nie będzie niósł wartości – chodzi o umiar.
Jeżeli chcesz się dowiedzieć więcej na temat pozycjonowania stron wielojęzycznych czytaj przewodnik na temat: pozycjonowanie stron wielojęzycznych.
Czytaj więcej o kwestiach SEO w osobnym artykule: Pozycjonowanie strony wielojęzycznej.
4. Hosting
Nie mamy szans w zagranicznych wersjach Google z pierwszym lepszym hostingiem. Po pierwsze: jeżeli Google widzi, że nasz serwer jest postawiony w Polsce w konfrontacji ze stroną konkurencji o tej samej jakości ale która jest postawiona na serwerze w Wielkiej Brytanii zawsze będziemy przygrywać dla zapytań brytyjczyków. Ba, przy odrobinie szczęścia może będziemy gdzieś na n-tej stronie wyszukiwań.
Z pomocą przychodzą rozwiązania geolokalizacyjne, które twój deweloper powinien znać. Posiadając dostęp do adresów z całego globu ziemskiego możemy sobie wybierać czy adres de.firma.pl ma konkurować w Polsce, w Niemczech czy w USA.
Dodatkowo, jeżeli strona ma być dostępna na całym świecie i działać szybko, bez opóźnień w każdym kraju, warto wdrożyć na swojej stronie CDN czyli Content Delivery Network. Przyspiesza działanie strony wysyłając krytyczne zasoby do specjalnej sieci, która potrafi optymalizować drogę połączenia celem skrócenia jej długości. Tym sposobem przy okazji odciąża się główny hosting.
Czytaj więcej jaki wpływ ma lokalizacja hostingu na pozycjonowanie także w kontekście stron dostępnych w wielu językach i przeznaczonych na wiele krajów: wpływ hostingu na pozycjonowanie.
5. Prawo
A raczej to czego nie trzeba się bać. Nie myl tłumaczenia z lokalizacją. Fakt że twoja strona jest dostępna w innym języku nie oznacza, że twoja działalność „wkracza na rynek” niemiecki. Nie musisz znać handlowego prawa niemieckiego ani działać zgodnie z nim. To wydaje się paradoksalne ale nawet nie musisz obsługiwać klientów z tego kraju. Popatrz na tłumaczenie strony internetowej jak na dostarczenie treści w innej formie. Jakiekolwiek łączenie obaw z prawem handlowym w innym kraju jest tutaj bezpodstawne. Najważniejsze jest to gdzie jest zarejestrowana Twoja działalność.
Pamiętaj jednak, że tłumaczenie regulaminów i dostosowanie swojej oferty dla klientów z zagranicy to kolejna zachęta dla nich, która z pewnością odbije się na wynikach sprzedaży.
6. RTL (czyli Right To Left)
Jest wiele języków, które czytamy z prawej do lewej. Nie wystarczy zmienić tylko wyrównania do prawej. Odbicie lustrzane musi obejmować kolejność treści i takie elementy jak menu, przyciski nawigacyjne, zdjęcia a nawet kierunek przewijania elementów w sliderach. Tylko po to aby treść wyglądała naturalnie dla klientów posługujących się na przykład językiem arabskim.
Język HTML5 posiada natywne wsparcie takiej funkcji. Tego typu funkcjonalność też należy przewidzieć już na etapie projektowania strony.
7. hreflang
Warto zainteresować się linkiem:
<link rel="alternate" hreflang="en-us" href="https://adres-strony.pl/en/">
Jest to sygnał dla przeglądarki, że alternatywna wersja językowa istnieje i może być wyświetlona użytkownikom. Ułatwia to przeglądarkom zwracanie trafnych wyników i pozytywnie wpływa na pozycjonowanie strony wielojęzycznej.
8. Lokalizacja
Chcąc udostępnić wybrane produkty w danym kraju nie zaprzęgaj do tego skryptu tłumaczeniowego. Poproś aby to klient zadeklarował z jakiego jest kraju i na tej podstawie różnicuj ofertę. Pamiętaj, że takie języki jak niemiecki i francuski są używane w wielu krajach.
Jeżeli chcesz sprawdzić jak to działa odwiedź lepszy sklep międzynarodowej marki np. z branży fashion.
9. Systemy miar, zapis liczb i inne „pułapki”
W Polsce separatorem dziesiętnym jest przecinek, a do oddzielania grup trzycyfrowych stosujemy spację, np: 12 481,63. Tak samo jest w Czechach, Włoszech, Niemczech, Francji i Hiszpanii. w pozostałych większych krajach jest to kropka. Warto też wiedzieć w jakim kraju i kiedy używa się cali.
Nasi zachodni sąsiedzi mają „E-Mail” my mamy „E-mail” anglojęzycznie mamy Email. Warto znać takie rzeczy. Drobiazgi mają wpływ na wiarygodność zaś bardziej poważne różnice mogą prowadzić do pewnych nieporozumień 🙂
10. Na koniec – nieprofesjonalne „flagi”
Flagi oznaczające poszczególne języki są bardzo złą „manierą” web-deweloperską obnażającą pewnego rodzaju niewiedzę albo przeoczenie. Otóż, języki takie jak niemiecki, angielski czy francuski używamy w wielu krajach nie tylko w Niemczech, Wielkiej Brytanii i Francji. Pomyśl teraz jak dziwnie muszą się czuć mieszkańcy Belgii, kiedy są zmuszeni klikać we flagę Holandii, Francji albo Niemiec lub Kanadyjczycy, którzy chcą wyświetlić treść w języku francuskim.
Ikony flagi oznaczające języki można spotkać na stronach małych polskich firm. Jeżeli chcesz użyć skrótu stosuj kody typu EN, DE, FR a najlepiej pełne nazwy języków. Zobacz jak to jest rozwiązane w popularnych witrynach i sklepach internetowych.
11. Domena
Domena (dokładnie tak jak hosting) wpływa wielowymiarowo na pozycjonowanie w danych krajach. Chcąc konkurować tylko na rynku polskim, zainteresujemy się domeną z końcówką .pl jeżeli nasze przedsięwzięcie jest globalne i nie „faworyzujemy” żadnego kraju powinniśmy się zainteresować końcówkami .com.
Wokół tematu domen w kontekście SEO narodziło się wiele mitów, dlatego zainteresowanych tych tematem odsyłam do specjalnego wpisu: domena a pozycjonowanie – także w wielu krajach.
Najczęstsze błędy związane z tłumaczeniami stron internetowych
- wykorzystywanie tłumaczenia maszynowego,
- stosowanie flag narodowych oznaczających wersje językowe,
- automatyczne przełączanie języka oparte o adres IP,
- zapisywanie wybranego języka tylko za pomocą cookie – brak zmiany adresu URL
Podsumowanie
Jak widać udostępnienie strony internetowej klientom wielu wersjach językowych nie stanowi większego problemu jeżeli odpowiednio się do tego przygotujemy. Przed realizacją odpowiednio przemyśl design strony, kwestie związane z SEO oraz hostingiem. Nie popełniaj klasycznych wpadek, które mogą być rażące dla osób do których się zwracamy.
Źródła:
https://support.google.com/webmasters/answer/189077?hl=pl
